fix: headline sizes

src/layouts/BlogPost.astro

@@ -13,64 +13,67 @@ const { title, description, pubDate, updatedDate, heroImage, readingTime } =
 ---
 
 <BaseLayout title={title} description={description}>
-  <article>
+  <article class="max-w-3xl mx-auto">
-    <div class="hero-image">
+    {
-      {heroImage && <Picture src={heroImage} alt="" width={752} />}
+      heroImage && (
+        <div class="mb-12">
+          <Picture
+            src={heroImage}
+            alt=""
+            width={752}
+            class="rounded-lg shadow-lg w-full object-cover aspect-[16/9] dark:shadow-gray-800/30 transition-transform hover:scale-[1.02]"
+          />
         </div>
-    <div class="prose">
+      )
-      <div class="title">
+    }
-        <div class="date">
+
+    <div class="prose dark:prose-invert max-w-none">
+      <div class="space-y-2 text-center mb-12">
+        <div class="space-y-2">
+          <time class="text-sm text-gray-600 dark:text-gray-400">
             <FormattedDate date={pubDate} />
+          </time>
+
           {
             updatedDate && (
-              <div class="last-updated-on">
+              <div class="text-sm text-gray-500 dark:text-gray-400 italic">
                 Last updated on <FormattedDate date={updatedDate} />
               </div>
             )
           }
         </div>
-        <h1>{title}</h1>
+
-        <p>{readingTime}</p>
+        <h1 class="font-bold tracking-tight text-gray-900 dark:text-white">
-        <hr />
+          {title}
+        </h1>
+
+        <div
+          class="flex items-center justify-center space-x-4 text-sm text-gray-600 dark:text-gray-400"
+        >
+          <span class="flex items-center">
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              fill="none"
+              viewBox="0 0 24 24"
+              stroke-width="1.5"
+              stroke="currentColor"
+              class="w-4 h-4 mr-1"
+            >
+              <path
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                d="M12 6v6h4.5m4.5 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
+            </svg>
+            {readingTime} min read
+          </span>
         </div>
+
+        <hr class="w-32 mx-auto border-gray-200 dark:border-gray-800" />
+      </div>
+
+      <div class="mt-8 text-gray-800 dark:text-gray-200">
         <slot />
       </div>
+    </div>
   </article>
 </BaseLayout>
-
-<style>
-  main {
-    width: calc(100% - 2em);
-    max-width: 100%;
-    margin: 0;
-  }
-  .hero-image {
-    width: 100%;
-  }
-  .hero-image img {
-    display: block;
-    margin: 0 auto;
-    border-radius: 12px;
-    box-shadow: var(--box-shadow);
-  }
-  .prose {
-    color: rgb(var(--gray-dark));
-    text-wrap: pretty;
-  }
-  .title {
-    margin-bottom: 1em;
-    padding: 1em 0;
-    text-align: center;
-    line-height: 1;
-  }
-  .title h1 {
-    margin: 0 0 0.5em 0;
-  }
-  .date {
-    margin-bottom: 0.5em;
-    color: rgb(var(--gray));
-  }
-  .last-updated-on {
-    font-style: italic;
-  }
-</style>

src/pages/index.astro

@@ -4,31 +4,30 @@ import BaseLayout from "../layouts/BaseLayout.astro";
 ---
 
 <BaseLayout>
-    <h1 class="text-4xl sm:text-5xl">Hi, my name is Alex!</h1>
+  <h1 class="">Hi, my name is Alex!</h1>
   <p>
     I am a software engineer, Linux enthusiast and a friend of lightweight,
     resilient systems.
   </p>
   <p>
-        My journey in the tech world has been a dynamic one. I've immersed
+    My journey in the tech world has been a dynamic one. I've immersed myself in
-        myself in countless projects spanning various video games and, for the
+    countless projects spanning various video games and, for the past few years,
-        past few years, have been maintaining a small homelab, which ignited my
+    have been maintaining a small homelab, which ignited a passion for
-        passion for DevOps / SRE. I am a privacy enthusiast and advocate for
+    automating infrastructure. I am a privacy enthusiast and advocate for
-        non-invasive software. Occasionally, I channel my creativity into
+    non-invasive software. Occasionally, I channel my creativity into building
-        building sleek web applications that prioritize efficiency and adhere to
+    sleek web applications that prioritize efficiency and adhere to web
-        web standards and best practices.
+    standards and best practices.
   </p>
   <p>
     I currently work as a software engineer at <Link href="https://tv1.eu"
       >TV1 GmbH</Link
     >, a company that provides innovative live streaming and communication
-        solutions. In my free time, I am pursuing my Master's degree in computer
+    solutions. Soon, I will have finished a Master's degree in computer science
-        science at <Link href="https://www.tum.de/">TUM</Link>, where I
+    at <Link href="https://www.tum.de/">TUM</Link>, where I contribute to
-        contribute to various research papers.
+    various research papers.
   </p>
 
-    <h2 class="my-8">Skills</h2>
+  <h2 class="mt-16">Skills</h2>
-
   <div class="flex flex-wrap gap-4">
     <div class="flex-[0_1_calc(50%-0.5rem)]">
       <strong>Core stack:</strong><br />

src/styles/global.css

@@ -1,3 +1,40 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  h1 {
+    @apply text-h1-mobile md:text-h1;
+  }
+  h2 {
+    @apply text-h2-mobile md:text-h2;
+  }
+  h3 {
+    @apply text-h3-mobile md:text-h3;
+  }
+  h4 {
+    @apply text-h4-mobile md:text-h4;
+  }
+  h5 {
+    @apply text-h5-mobile md:text-h5;
+  }
+  h6 {
+    @apply text-h6-mobile md:text-h6;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @apply mb-4;
+  }
+
+  body {
+    @apply text-lg md:text-xl;
+  }
+}
+
 /*
   The CSS in this style tag is based off of Bear Blog's default CSS.
   https://github.com/HermanMartinus/bearblog/blob/297026a877bc2ab2b3bdfbd6b9f7961c350917dd/templates/styles/blog/default.css
@@ -12,34 +49,9 @@ body {
   background-size: 100% 600px;
   word-wrap: break-word;
   overflow-wrap: break-word;
-  font-size: 20px;
   line-height: 1.7;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  margin: 0.5rem 0 0.5rem 0;
-  line-height: 1.2;
-}
-h1 {
-  font-size: 3.052em;
-}
-h2 {
-  font-size: 2.441em;
-}
-h3 {
-  font-size: 1.953em;
-}
-h4 {
-  font-size: 1.563em;
-}
-h5 {
-  font-size: 1.25em;
-}
 strong,
 b {
   font-weight: 700;

tailwind.config.mjs

@@ -4,6 +4,23 @@ export default {
   content: ["./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}"],
   theme: {
     extend: {
+      fontSize: {
+        // Mobile sizes
+        "h1-mobile": ["2rem", { lineHeight: "1.2" }], // 32px
+        "h2-mobile": ["1.75rem", { lineHeight: "1.2" }], // 28px
+        "h3-mobile": ["1.5rem", { lineHeight: "1.2" }], // 24px
+        "h4-mobile": ["1.25rem", { lineHeight: "1.2" }], // 20px
+        "h5-mobile": ["1.1rem", { lineHeight: "1.2" }], // 17.6px
+        "h6-mobile": ["1rem", { lineHeight: "1.2" }], // 16px
+
+        // Desktop sizes
+        h1: ["3rem", { lineHeight: "1.2" }],
+        h2: ["2.7rem", { lineHeight: "1.2" }],
+        h3: ["2.25rem", { lineHeight: "1.2" }],
+        h4: ["2rem", { lineHeight: "1.2" }],
+        h5: ["1.75rem", { lineHeight: "1.2" }],
+        h6: ["1.5rem", { lineHeight: "1.2" }],
+      },
       colors: {
         mytheme: {
           50: "#ecfcfb",