feat: use tailwind css

pkg/invoice/report/assets/style.css

@@ -1,86 +1,139 @@
-@page {
-  size: A4;
-  padding: 2cm;
-}
-@page:first {
-  padding: 0;
-}
-@media print {
-  .page,
-  .page-break {
-    break-after: page;
-  }
+.markdown h1 {
+  font-size: 2.25em;     /* relative to base 12pt */
+  font-weight: 700;      /* font-bold */
+  margin-top: 1.5em;
+  margin-bottom: 1em;
 }
 
-.first-page {
-  margin-left: 2cm;
-  margin-right: 2cm;
+.markdown h2 {
+  font-size: 1.875em;
+  font-weight: 600;
+  margin-top: 1.25em;
+  margin-bottom: 0.75em;
 }
 
-body {
-  font-family: sans-serif;
-  font-size: 12pt;
-  color: #333;
-}
-
-section {
-  margin-bottom: 3em;
-}
-p {
-  margin-top: 0.25em;
+.markdown h3 {
+  font-size: 1.5em;
+  font-weight: 600;
+  margin-top: 1em;
   margin-bottom: 0.5em;
 }
 
-header {
-  display: flex;
-  justify-content: space-between;
-  margin-bottom: 40px;
-
-  h2 {
-    margin-top: 0;
-  }
-}
-h1 {
-  margin: 0;
-  font-size: 2em;
-}
-h2 {
-  margin-top: 0.5em;
+.markdown h4 {
+  font-size: 1.25em;
+  font-weight: 500;
+  margin-top: 0.75em;
+  margin-bottom: 0.5em;
 }
 
-table {
+.markdown p {
+  margin-bottom: 1em;
+}
+
+.markdown a {
+  color: #2563eb;
+  text-decoration: none;
+}
+.markdown a:hover {
+  text-decoration: underline;
+}
+
+.markdown strong {
+  font-weight: 600;
+  color: #111827;
+}
+
+.markdown em {
+  font-style: italic;
+}
+
+.markdown code {
+  background-color: #f3f4f6;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;  /* relative to base 12pt */
+  padding: 0.125em 0.25em;
+  border-radius: 0.25em;
+}
+
+.markdown pre {
+  background-color: #111827;
+  color: #f3f4f6;
+  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
+  font-size: 0.875em;
+  padding: 1em;
+  border-radius: 0.5em;
+  overflow-x: auto;
+  margin-bottom: 1em;
+}
+
+.markdown blockquote {
+  border-left: 4px solid #d1d5db;
+  padding-left: 1em;
+  font-style: italic;
+  color: #4b5563;
+  margin-bottom: 1em;
+}
+
+.markdown ul {
+  list-style-type: disc;
+  padding-left: 1.5em;
+  margin-bottom: 1em;
+  margin-top: 0;
+}
+
+.markdown ol {
+  list-style-type: decimal;
+  padding-left: 1.5em;
+  margin-bottom: 1em;
+  margin-top: 0;
+}
+
+.markdown li {
+  margin-bottom: 0.25em;
+  line-height: 1.625;
+}
+
+.markdown hr {
+  border: none;
+  border-top: 1px solid #d1d5db;
+  margin: 1.5em 0;
+}
+
+.markdown img {
+  max-width: 100%;
+  border-radius: 0.5em;
+  margin: 1em 0;
+}
+
+.markdown table {
   width: 100%;
   border-collapse: collapse;
-  margin-bottom: 20px;
-}
-table,
-th,
-td {
-  border: 1px solid #ccc;
-}
-th,
-td {
-  padding: 0.25em 0.5em;
-  text-align: left;
-}
-th {
-  background-color: #f2f2f2;
+  margin: 1em 0;
+  font-size: 0.875em; /* relative to base 12pt */
 }
 
-article {
-  margin-bottom: 20px;
+.markdown th,
+.markdown td {
+  border: 1px solid #d1d5db;
+  padding: 0.5em 0.25em;
 }
 
-.issue-title {
-  display: flex;
-  justify-content: space-between;
-  align-items: end;
-
-  margin-top: 2em;
-  margin-bottom: 0.5em;
-
-  h3,
-  p {
-    margin: 0;
-  }
+.markdown th {
+  background-color: #f3f4f6;
+  font-weight: 600;
 }
+
+/* Nested lists */
+.markdown ul ul {
+  list-style-type: circle;
+  padding-left: 1.5em;
+  margin-top: 0.25em;
+}
+
+.markdown ol ol {
+  list-style-type: lower-alpha;
+  padding-left: 1.5em;
+  margin-top: 0.25em;
+}
+</style>
+