feat: some shit

src/layouts/Layout.astro

@@ -72,7 +72,7 @@ const { title, width = "compact" } = Astro.props;
     <header>
       <Nav />
     </header>
-    <main class="flex flex-col gap-y-2xl">
+    <main class="flex flex-col mt-4xl gap-y-2xl">
       <slot />
     </main>
     <LanguagePicker />

src/layouts/Post.astro

@@ -2,7 +2,6 @@
 import type { CollectionEntry } from "astro:content";
 import Layout from "./Layout.astro";
 import { useTranslatedPath } from "@i18n/utils";
-import { getLocale } from "astro-i18n-aut";
 
 type CustomProps = {
   layout?: "normal" | "transparent";
@@ -10,52 +9,52 @@ type CustomProps = {
 };
 type Props = CollectionEntry<"blog">["data"] & CustomProps;
 
-const { title, date, _layout = "normal", backlink = "/blog" } = Astro.props;
+const { title, date, _layout, backlink = "/blog" } = Astro.props;
 const path = useTranslatedPath(Astro);
 ---
 
 <Layout title={title}>
-  <article class={`layout-${_layout}`}>
-    <div class="top-info">
-      <a href={path(backlink)}>← overview</a>
-      <div class="date">
-        {
-          date.toLocaleString("en-US", {
-            month: "long",
-            day: "numeric",
-            year: "numeric",
-          })
-        }
-      </div>
+  <div
+    class="top-info flex items-center place-content-between opacity-50 m-y-4"
+  >
+    <a class="flex items-center gap-1" href={path(backlink)}
+      ><span class="i-tabler-arrow-left"></span> overview</a
+    >
+    <div class="date">
+      {
+        date.toLocaleString("en-US", {
+          month: "long",
+          day: "numeric",
+          year: "numeric",
+        })
+      }
     </div>
-    <h1>{title}</h1>
+  </div>
+  <article class={`layout-${_layout} flex flex-col gap-2`}>
+    <h1 class="text-4xl my-4">{title}</h1>
     <slot />
   </article>
 </Layout>
 
 <style>
-  article {
-    margin-top: 50px;
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+  article :global(h2) {
+    @apply text-3xl;
+  }
+
+  article :global(h3) {
+    @apply text-2xl;
+  }
+
+  article :global(h4) {
+    @apply text-xl;
+  }
+
+  article :global(img) {
+    border-radius: 0.5rem;
   }
 
   article.layout-transparent {
     padding: 20px;
     background: var(--background);
   }
-
-  .top-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-bottom: 1em;
-    color: var(--outline);
-  }
-
-  .top-info a {
-    text-decoration: none;
-    color: var(--outline);
-  }
 </style>