feat: lots of css fixes

package.json

@@ -23,6 +23,7 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/tailwind": "^5.1.3",
     "@cloudflare/workers-types": "^4.20241230.0",
+    "@fontsource/fira-sans": "^5.1.1",
     "@fontsource/ubuntu": "^5.1.0",
     "@iconify-json/mdi": "^1.2.1",
     "@iconify-json/simple-icons": "^1.2.14",

pnpm-lock.yaml

@@ -29,6 +29,9 @@ importers:
       '@cloudflare/workers-types':
         specifier: ^4.20241230.0
         version: 4.20241230.0
+      '@fontsource/fira-sans':
+        specifier: ^5.1.1
+        version: 5.1.1
       '@fontsource/ubuntu':
         specifier: ^5.1.0
         version: 5.1.0
@@ -961,6 +964,9 @@ packages:
     resolution: {integrity: sha512-vBZP4NlzfOlerQTnba4aqZoMhE/a9HY7HRqoOPaETQcSQuWEIyZMHGfVu6w9wGtGK5fED5qRs2DteVCjOH60sA==}
     engines: {node: '>=14'}
 
+  '@fontsource/fira-sans@5.1.1':
+    resolution: {integrity: sha512-LdbPwcMEADFjbcMx5sdPcyLi0NnEzP34YO+4d2eOeIKjCu1SyJiG/bBz5K07qm4pyhh2cQveifhFrG7gQDG9wQ==}
+
   '@fontsource/ubuntu@5.1.0':
     resolution: {integrity: sha512-0XG/HrFsfP1q3phf4QN8IO7tetd0zOZKHZSHcTnBuVoQedoo1wS/hXxY2FMZuqoG+mVfrXh+Q614MDVmQPJq2w==}
 
@@ -4157,6 +4163,8 @@ snapshots:
 
   '@fastify/busboy@2.1.1': {}
 
+  '@fontsource/fira-sans@5.1.1': {}
+
   '@fontsource/ubuntu@5.1.0': {}
 
   '@iconify-json/mdi@1.2.1':

src/components/BaseHead.astro

@@ -4,6 +4,7 @@
 import "../styles/global.css";
 import ubuntuRegularWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-400-normal.woff2?url";
 import ubuntuBoldWoff2 from "@fontsource/ubuntu/files/ubuntu-latin-700-normal.woff2?url";
+import "@fontsource/fira-sans";
 
 interface Props {
   title: string;

src/components/NavMenu.astro

@@ -17,7 +17,7 @@ import HeaderLink from "./HeaderLink.astro";
   </nav>
 </header>
 
-<button id="menu" class="lg:hidden relative w-[30px] h-[30px]">
+<button id="nav-menu" class="lg:hidden relative w-[30px] h-[30px]">
   <Icon
     name="mdi:menu"
     id="iconMenu"
@@ -33,7 +33,7 @@ import HeaderLink from "./HeaderLink.astro";
 </button>
 <header
   id="drawer"
-  class="fixed top-16 right-0 h-full bg-neutral-50 shadow dark:bg-gray-700 p-6 rounded w-54 transform translate-x-full transition-transform duration-300 ease-in-out"
+  class="fixed z-50 top-14 right-0 h-full bg-neutral-50 shadow dark:bg-gray-700 p-6 rounded w-54 transform translate-x-full transition-transform duration-300 ease-in-out"
 >
   <div class="flex flex-col gap-4">
     <HeaderLink href="/">Home</HeaderLink>
@@ -45,7 +45,7 @@ import HeaderLink from "./HeaderLink.astro";
 </header>
 
 <script>
-  const menu = document.getElementById("menu");
+  const menu = document.getElementById("nav-menu");
   const drawer = document.getElementById("drawer");
 
   function toggle() {
@@ -68,10 +68,15 @@ import HeaderLink from "./HeaderLink.astro";
   document.addEventListener("click", (event) => {
     console.log("click outside");
     if (
-      !drawer.classList.contains("hidden") &&
+      !drawer.classList.contains("translate-x-full") &&
       !drawer.contains(event.target) &&
       !menu.contains(event.target)
     ) {
+      console.log(
+        !drawer.classList.contains("translate-x-full"),
+        !drawer.contains(event.target),
+        !menu.contains(event.target),
+      );
       toggle();
     }
   });

src/components/verification/DataTable.astro

@@ -108,7 +108,7 @@ const { cv } = Astro.props;
       </span>
     </summary>
 
-    <div class="p-6 pt-6 space-y-6">
+    <div class="p-4 sm:p-6 pt-6 space-y-6">
       <div>
         <h4 class="text-xl font-bold mb-2 text-gray-800 dark:text-gray-200">
           1. Verify SHA256 Hash
@@ -136,9 +136,12 @@ const { cv } = Astro.props;
             >
           </li>
           <li>
-            Import the key into your keyring with
+            Import the key into your keyring with<br />
-            <pre
+            <code
-              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6 mb-2">gpg --import ~/Downloads/pub.key</pre>
+              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6 mb-2 break-all"
+              >gpg --import ~/Downloads/pub.key</code
+            >
+          </li>
 
           <li>
             Download the above PGP signature by clicking <button
@@ -147,16 +150,22 @@ const { cv } = Astro.props;
               >here
             </button>
           </li>
-            <li>Run the following command:</li>
+          <li>
+            Run the following command:<br />
+            <code
+              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6"
+              >gpg --verify signature.asc cv.pdf</code
+            >
           </li>
-          <pre
-            class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-sm font-mono sm:ml-6">gpg --verify signature.asc cv.pdf</pre>
-          <p class="text-gray-600 dark:text-gray-400 mt-2">
-            If the verification is successful, GPG will indicate so.
-            <pre
-              class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono mt-2">gpg: Good signature from &quot;Alexander Daichendt &lt;alexander@daichendt.one&gt;&quot; [ultimate]</pre>
-          </p>
         </ol>
+        <p class="text-gray-600 dark:text-gray-400 mt-2">
+          If the verification is successful, GPG will indicate so.<br />
+          <code
+            class="bg-gray-100 dark:bg-gray-800 p-3 rounded text-xs font-mono mt-2 break-all"
+            >gpg: Good signature from &quot;Alexander Daichendt
+            &lt;alexander@daichendt.one&gt;&quot; [ultimate]</code
+          >
+        </p>
       </div>
     </div>
   </details>

src/layouts/BaseLayout.astro

@@ -34,7 +34,7 @@ const { title = SITE_TITLE, description = SITE_DESCRIPTION } = Astro.props;
   </head>
   <body class="bg-white dark:bg-gray-900 text-black dark:text-white">
     <!-- Mobile layout -->
-    <div class="lg:hidden flex flex-col min-h-screen p-4">
+    <div class="lg:hidden flex flex-col min-h-screen p-2 sm:p-4">
       <div class="flex justify-between items-center mb-4">
         <h2 class="font-bold text-lg mb-0">
           <a href="/">{SITE_TITLE}</a>

src/pages/blog/index.astro

@@ -9,6 +9,7 @@ const posts = (await getCollection("blog")).sort(
 ---
 
 <BaseLayout>
+  <h1 class="mb-16">Blog</h1>
   <section class="max-w-4xl mx-auto">
     <ul class="">
       {
@@ -18,9 +19,7 @@ const posts = (await getCollection("blog")).sort(
               href={`/blog/${post.id}`}
               class="grid grid-cols-[2fr,1fr] gap-4 items-center"
             >
-                            <h6 class="text-lg font-medium">
+              <h6 class="text-lg font-medium mb-0">{post.data.title}</h6>
-                                {post.data.title}
-                            </h6>
               <span class="date text-right text-gray-600 text-sm">
                 <FormattedDate date={post.data.pubDate} />
               </span>

src/pages/contact.astro

@@ -4,6 +4,8 @@ import { Icon } from "astro-icon/components";
 ---
 
 <BaseLayout title="Contact">
+  <h1 class="mb-16">Contact</h1>
+
   <ul class="space-y-2">
     <li class="flex items-center space-x-3">
       <span class="flex items-center">

src/pages/projects/index.astro

@@ -167,6 +167,8 @@ const getCardStyle = (company?: string) => {
 ---
 
 <BaseLayout title="Projects">
+  <h1 class="mb-16">Projects</h1>
+
   <p>
     Here are some of the projects I have worked on in the past. They are sorted
     by my personal rating of relevancy. Projects done for a company are marked

src/styles/global.css

@@ -5,12 +5,15 @@
 @layer base {
   h1 {
     @apply text-h1-mobile md:text-h1;
+    font-family: "Fira Sans", sans-serif;
   }
   h2 {
     @apply text-h2-mobile md:text-h2;
+    font-family: "Fira Sans", sans-serif;
   }
   h3 {
     @apply text-h3-mobile md:text-h3;
+    font-family: "Fira Sans", sans-serif;
   }
   h4 {
     @apply text-h4-mobile md:text-h4;