Commit f1cc81a

@@ -21,8 +21,10 @@ const { title = SITE_CONFIG.title } = Astro.props;
 
     <title>{title}</title>
   </head>
-  <body>
+  <body class="mx-auto px-4 max-w-268 font-serif">
     <Header />
-    <slot />
+    <main class="mt-16">
+      <slot />
+    </main>
   </body>
 </html>

@@ -21,6 +21,8 @@ const { Content } = await render(entry);
 ---
 
 <GlobalLayout title={data.title}>
-  <h1 class="text-3xl font-bold">{data.title}</h1>
-  <Content />
+  <article>
+    <h1>{data.title}</h1>
+    <Content />
+  </article>
 </GlobalLayout>

@@ -0,0 +1,11 @@
+figure {
+  @apply w-full;
+  @apply mt-8 mb-8;
+  @apply grid grid-cols-1 gap-2;
+  @apply justify-items-center;
+
+  figcaption {
+    @apply text-sm lg:text-base;
+    @apply text-neutral-600 dark:text-neutral-400;
+  }
+}

@@ -0,0 +1,30 @@
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  @apply font-bold;
+  @apply text-black dark:text-white;
+}
+
+h1 {
+  @apply text-3xl lg:text-4xl;
+  @apply mt-0 mb-[0.8em];
+}
+h2 {
+  @apply text-2xl lg:text-3xl;
+  @apply mt-[1.6em] mb-[0.8em];
+}
+h3 {
+  @apply text-xl lg:text-2xl;
+  @apply mt-[1.6em] mb-[0.8em];
+}
+h4 {
+  @apply text-lg lg:text-xl;
+  @apply mt-[1.5em] mb-[0.5em];
+}
+h5,
+h6 {
+  @apply text-base lg:text-lg;
+}

@@ -0,0 +1,6 @@
+@import "./figure.css";
+@import "./heading.css";
+@import "./paragrah.css";
+@import "./table.css";
+
+@apply text-base lg:text-lg;

@@ -0,0 +1,3 @@
+p {
+  @apply mt-5 mb-5;
+}

@@ -0,0 +1,38 @@
+table {
+  @apply text-sm lg:text-base;
+  @apply relative block w-fit max-w-full overflow-x-auto;
+  &:not(figure *) {
+    @apply mt-4 mb-4;
+  }
+}
+
+thead th,
+tbody td,
+tfoot td {
+  @apply px-2;
+  &:first-child {
+    @apply pl-0;
+  }
+  &:last-child {
+    @apply pr-0;
+  }
+}
+tbody td,
+tfoot td {
+  @apply py-2;
+}
+
+thead,
+tbody tr:not(:last-child) {
+  @apply border-b;
+}
+tfoot {
+  @apply border-t;
+}
+thead,
+tfoot {
+  @apply border-neutral-600 dark:border-neutral-400;
+}
+tbody tr {
+  @apply border-neutral-400 dark:border-neutral-600;
+}

@@ -1,10 +1,14 @@
 @import "tailwindcss";
 
 :root {
-  background-color: var(--color-neutral-200);
-  color: var(--color-neutral-900);
+  background-color: var(--color-neutral-100);
+  color: var(--color-neutral-700);
   @media (prefers-color-scheme: dark) {
     background-color: var(--color-neutral-900);
-    color: var(--color-neutral-200);
+    color: var(--color-neutral-300);
   }
 }
+
+article {
+  @import "./article/index.css";
+}