fix: header layout bug (#8)

Author: DerTimonius

Diff for: src/components/Breadcrumbs.astro

@@ -7,7 +7,7 @@ breadcrumbList[0] === 'posts' &&
   breadcrumbList.splice(0, 2, `Posts (page ${breadcrumbList[1] || 1})`);
 ---
 
-<nav class="mx-auto mb-1 mt-8 w-full max-w-3xl px-4" aria-label="breadcrumb">
+<nav class="mx-auto mb-1 mt-8 w-full max-w-4xl px-4" aria-label="breadcrumb">
   <ul class="flex">
     <li class="inline">
       <a class="capitalize opacity-70" href="/">Home</a>

Diff for: src/components/Card.astro

@@ -1,7 +1,7 @@
 ---
 import Date from './Date.astro';
 import type { CollectionEntry } from 'astro:content';
-import dayjs from 'dayjs';
+import { formatDate } from '~/utils/formatDate';
 
 interface Props {
   href?: string;
@@ -11,7 +11,7 @@ interface Props {
 }
 const { href, frontmatter, slug, secHeading = true } = Astro.props;
 const { title, pubDate, description } = frontmatter;
-const date = dayjs(pubDate).format('DD/MM/YYYY');
+const date = formatDate(pubDate);
 
 const headerProps = {
   style: { viewTransitionName: slug },

Diff for: src/components/Header.astro

@@ -16,7 +16,7 @@ const { activeNav } = Astro.props;
     href="#main-content">Skip to content</a
   >
   <div
-    class="mx-auto flex max-w-3xl flex-col items-center justify-between sm:flex-row"
+    class="mx-auto flex max-w-4xl flex-col items-center justify-between sm:flex-row"
   >
     <div
       class="relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8"
@@ -38,12 +38,9 @@ const { activeNav } = Astro.props;
           )
         }
       </a>
-      <nav
-        id="nav-menu"
-        class="flex w-full flex-col items-center sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0"
-      >
+      <nav id="nav-menu">
         <button
-          class="self-end p-2 sm:hidden focus-outline"
+          class="hamburger-menu focus-outline"
           aria-label="Open Menu"
           aria-expanded="false"
           aria-controls="menu-items"
@@ -58,7 +55,7 @@ const { activeNav } = Astro.props;
             stroke-width="1.5"
             stroke-linecap="round"
             stroke-linejoin="round"
-            class="h-6 w-6 scale-125 fill-skin-base"
+            class="menu-icon"
           >
             <line x1="7" y1="12" x2="21" y2="12" class="line"></line>
             <line x1="3" y1="6" x2="21" y2="6" class="line"></line>
@@ -67,10 +64,7 @@ const { activeNav } = Astro.props;
             <line x1="6" y1="6" x2="18" y2="18" class="close"></line>
           </svg>
         </button>
-        <ul
-          id="menu-items"
-          class="display-none sm:flex mt-4 grid w-44 grid-cols-2 grid-rows-4 gap-x-2 gap-y-2 sm:ml-0 sm:mt-0 sm:w-auto sm:gap-x-5 sm:gap-y-0"
-        >
+        <ul id="menu-items" class="sm:flex hidden">
           <li>
             <a href="/blog" class={activeNav === 'posts' ? 'active' : ''}>
               Posts
@@ -99,14 +93,14 @@ const { activeNav } = Astro.props;
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     id="moon-svg"
-                    class="block scale-125 hover:rotate-12 sm:scale-100 dark:hidden"
+                    class="block scale-125 hover:rotate-12 sm:scale-100"
                   >
                     <path d="M20.742 13.045a8.088 8.088 0 0 1-2.077.271c-2.135 0-4.14-.83-5.646-2.336a8.025 8.025 0 0 1-2.064-7.723A1 1 0 0 0 9.73 2.034a10.014 10.014 0 0 0-4.489 2.582c-3.898 3.898-3.898 10.243 0 14.143a9.937 9.937 0 0 0 7.072 2.93 9.93 9.93 0 0 0 7.07-2.929 10.007 10.007 0 0 0 2.583-4.491 1.001 1.001 0 0 0-1.224-1.224zm-2.772 4.301a7.947 7.947 0 0 1-5.656 2.343 7.953 7.953 0 0 1-5.658-2.344c-3.118-3.119-3.118-8.195 0-11.314a7.923 7.923 0 0 1 2.06-1.483 10.027 10.027 0 0 0 2.89 7.848 9.972 9.972 0 0 0 7.848 2.891 8.036 8.036 0 0 1-1.484 2.059z" />
                   </svg>
                   <svg
                     xmlns="http://www.w3.org/2000/svg"
                     id="sun-svg"
-                    class="hidden scale-125 hover:rotate-12 sm:scale-100 dark:block"
+                    class="hidden scale-125 hover:rotate-12 sm:scale-100"
                   >
                     <path d="M6.993 12c0 2.761 2.246 5.007 5.007 5.007s5.007-2.246 5.007-5.007S14.761 6.993 12 6.993 6.993 9.239 6.993 12zM12 8.993c1.658 0 3.007 1.349 3.007 3.007S13.658 15.007 12 15.007 8.993 13.658 8.993 12 10.342 8.993 12 8.993zM10.998 19h2v3h-2zm0-17h2v3h-2zm-9 9h3v2h-3zm17 0h3v2h-3zM4.219 18.363l2.12-2.122 1.415 1.414-2.12 2.122zM16.24 6.344l2.122-2.122 1.414 1.414-2.122 2.122zM6.342 7.759 4.22 5.637l1.415-1.414 2.12 2.122zm13.434 10.605-1.414 1.414-2.122-2.122 1.414-1.414z" />
                   </svg>
@@ -122,6 +116,31 @@ const { activeNav } = Astro.props;
 </header>
 
 <style>
+  #skip-to-content {
+    @apply absolute -top-full left-16 z-50 bg-skin-accent px-3 py-2 text-skin-inverted transition-all focus:top-4;
+  }
+  .nav-container {
+    @apply mx-auto flex max-w-4xl flex-col items-center justify-between sm:flex-row;
+  }
+  .top-nav-wrap {
+    @apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-8;
+  }
+  .logo {
+    @apply absolute py-1 text-xl font-semibold sm:static sm:text-2xl;
+  }
+  .hamburger-menu {
+    @apply self-end p-2 sm:hidden;
+  }
+  .hamburger-menu svg {
+    @apply h-6 w-6 scale-125 fill-skin-base;
+  }
+
+  nav {
+    @apply flex w-full flex-col items-center sm:ml-2 sm:flex-row sm:justify-end sm:space-x-4 sm:py-0;
+  }
+  nav ul {
+    @apply sm:flex mt-4 w-44 grid-cols-2 grid-rows-4 gap-x-2 gap-y-2 sm:ml-0 sm:mt-0 sm:w-auto sm:gap-x-5 sm:gap-y-0;
+  }
   nav ul li {
     @apply col-span-2 flex items-center justify-center;
   }
@@ -131,19 +150,30 @@ const { activeNav } = Astro.props;
   nav ul li:nth-last-child(2) a {
     @apply w-auto;
   }
-  nav ul li:nth-last-child(1),
-  nav ul li:nth-last-child(2) {
+  /* TODO: readd this when search functionality is added */
+  /* nav ul li:nth-last-child(1) {
     @apply col-span-1;
-  }
+  } */
   nav a.active {
     @apply underline decoration-wavy decoration-2 underline-offset-4;
   }
   nav a.active svg {
     @apply fill-skin-accent;
   }
+
+  nav button {
+    @apply p-1;
+  }
   nav button svg {
     @apply h-6 w-6 fill-skin-base hover:fill-skin-accent;
   }
+  #theme-btn {
+    @apply p-3 sm:p-1;
+  }
+  #theme-btn svg {
+    @apply scale-125 hover:rotate-12 sm:scale-100;
+  }
+
   .menu-icon line {
     @apply transition-opacity duration-75 ease-in-out;
   }
@@ -156,6 +186,14 @@ const { activeNav } = Astro.props;
   .menu-icon.is-active .close {
     @apply opacity-100;
   }
+  #sun-svg,
+  html[data-theme='dark'] #moon-svg {
+    display: none;
+  }
+  #moon-svg,
+  html[data-theme='dark'] #sun-svg {
+    display: block;
+  }
 </style>
 
 <script>
@@ -173,7 +211,8 @@ const { activeNav } = Astro.props;
         'aria-label',
         menuExpanded ? 'Open Menu' : 'Close Menu',
       );
-      menuItems?.classList.toggle('display-none');
+      menuItems?.classList.remove(menuExpanded ? 'grid' : 'hidden');
+      menuItems?.classList.add(menuExpanded ? 'hidden' : 'grid');
     });
   }
 

Diff for: src/components/Hr.astro

@@ -7,6 +7,6 @@ export interface Props {
 const { noPadding = false, ariaHidden = true } = Astro.props;
 ---
 
-<div class={`max-w-3xl mx-auto ${noPadding ? "px-0" : "px-4"}`}>
+<div class={`max-w-4xl mx-auto ${noPadding ? 'px-0' : 'px-4'}`}>
   <hr class="border-skin-line" aria-hidden={ariaHidden} />
 </div>

Diff for: src/layouts/Main.astro

@@ -37,7 +37,7 @@ const { props } = Astro;
 
 <style>
   #main-content {
-    @apply mx-auto w-full max-w-3xl px-4 pb-12;
+    @apply mx-auto w-full max-w-4xl px-8 sm:px-4 pb-12;
   }
   #main-content h1 {
     @apply text-2xl font-semibold sm:text-3xl;

Diff for: src/layouts/PostDetails.astro

@@ -6,8 +6,8 @@ import Date from '~/components/Date.astro';
 import Footer from '~/components/Footer.astro';
 import { site } from '~/utils/config';
 import Tag from '~/components/Tag.astro';
-import dayjs from 'dayjs';
 import ReadingTime from '~/components/ReadingTime.astro';
+import { formatDate } from '~/utils/formatDate';
 // import Author from '~/components/Author.astro';
 
 export interface Props {
@@ -17,16 +17,16 @@ export interface Props {
 const { post } = Astro.props;
 
 const { title, description, pubDate, tags, updatedAt } = post.data;
-const date = dayjs(pubDate).format('DD/MM/YYYY');
-const updatedDate = dayjs(updatedAt).format('DD/MM/YYYY');
+const date = formatDate(pubDate);
+const updatedDate = formatDate(updatedAt!);
 
 const { Content, remarkPluginFrontmatter } = await post.render();
 const time = remarkPluginFrontmatter.minutesRead;
 ---
 
 <Layout title={title} author={site.author} description={description}>
   <Header />
-  <div class="mx-auto flex w-full max-w-3xl justify-start px-2">
+  <div class="mx-auto flex w-full max-w-4xl justify-start px-2">
     <button
       class="focus-outline mb-2 mt-8 flex hover:opacity-75"
       onclick="history.back()"
@@ -38,7 +38,7 @@ const time = remarkPluginFrontmatter.minutesRead;
       </svg><span>Go back</span>
     </button>
   </div>
-  <main id="main-content" class="mx-auto w-full max-w-3xl px-4 pb-12">
+  <main id="main-content" class="mx-auto w-full max-w-4xl px-4 pb-12">
     <h1
       transition:name={post.slug}
       class="text-2xl font-semibold text-skin-accent"
@@ -51,7 +51,7 @@ const time = remarkPluginFrontmatter.minutesRead;
     <ul class="my-8">
       {tags!.map((tag) => <Tag name={tag} />)}
     </ul>
-    <article id="article" role="article" class="prose mx-auto mt-8 max-w-3xl">
+    <article id="article" role="article" class="prose mx-auto mt-8 max-w-4xl">
       <Content />
       {
         updatedAt ? (

Diff for: src/layouts/Posts.astro

@@ -26,39 +26,43 @@ const next = pageNum < totalPages ? '' : 'disabled';
     <ul>
       {
         posts.map(({ data, slug }) => (
-          <Card href={`/blog/${slug}`} frontmatter={data} {slug}/>
+          <Card href={`/blog/${slug}`} frontmatter={data} {slug} />
         ))
       }
     </ul>
   </Main>
 
   {
-    totalPages > 1 && (
+    totalPages > 1 ? (
       <nav class="pagination-wrapper" aria-label="Pagination">
-        <Link
-          disabled={prev === 'disabled'}
-          href={`/blog${pageNum - 1 !== 1 ? '/' + (pageNum - 1) : ''}`}
-          className={`mr-4 select-none ${prev}`}
-          ariaLabel="Previous"
-        >
-          <svg xmlns="http://www.w3.org/2000/svg" class={`${prev}-svg`}>
-            <path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
-          </svg>
-          Prev
-        </Link>
-        <Link
-          disabled={next === 'disabled'}
-          href={`/blog/${pageNum + 1}`}
-          className={`ml-4 select-none ${next}`}
-          ariaLabel="Next"
-        >
-          Next
-          <svg xmlns="http://www.w3.org/2000/svg" class={`${next}-svg`}>
-            <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
-          </svg>
-        </Link>
+        {pageNum === 1 ? null : (
+          <Link
+            disabled={prev === 'disabled'}
+            href={`/blog${pageNum - 1 !== 1 ? '/' + (pageNum - 1) : ''}`}
+            className={`mr-4 select-none ${prev}`}
+            ariaLabel="Previous"
+          >
+            <svg xmlns="http://www.w3.org/2000/svg" class={`${prev}-svg`}>
+              <path d="M12.707 17.293 8.414 13H18v-2H8.414l4.293-4.293-1.414-1.414L4.586 12l6.707 6.707z" />
+            </svg>
+            Prev
+          </Link>
+        )}
+        {pageNum === totalPages ? null : (
+          <Link
+            disabled={next === 'disabled'}
+            href={`/blog/${pageNum + 1}`}
+            className={`ml-4 select-none ${next}`}
+            ariaLabel="Next"
+          >
+            Next
+            <svg xmlns="http://www.w3.org/2000/svg" class={`${next}-svg`}>
+              <path d="m11.293 17.293 1.414 1.414L19.414 12l-6.707-6.707-1.414 1.414L15.586 11H6v2h9.586z" />
+            </svg>
+          </Link>
+        )}
       </nav>
-    )
+    ) : null
   }
   <Footer noMarginTop={totalPages > 1} />
 </Layout>

Diff for: src/pages/about.astro

@@ -6,7 +6,7 @@ import Layout from '~/layouts/Layout.astro';
 
 <Layout title="About - DerTimonius">
   <Header activeNav="about" />
-  <main class="mx-auto w-full max-w-3xl px-4 py-12">
+  <main class="mx-auto w-full max-w-4xl px-4 py-12">
     <h1 class="text-2xl font-semibold sm:text-3xl">About</h1>
     <p class="mb-6 mt-2 italic">Timon Jurschitsch</p>
     <p class="my-2">

Diff for: src/styles/style.css

@@ -5,15 +5,15 @@
 @layer base {
   :root,
   html[data-theme='light'] {
-    --color-fill: 251, 254, 251;
+    --color-fill: 240, 240, 240;
     --color-text-base: 40, 39, 40;
-    --color-accent: 0, 108, 172;
+    --color-accent: 0, 66, 154;
     --color-card: 230, 230, 230;
     --color-card-muted: 205, 205, 205;
     --color-border: 236, 233, 233;
   }
   html[data-theme='dark'] {
-    --color-fill: 33, 39, 55;
+    --color-fill: 23, 29, 45;
     --color-text-base: 234, 237, 243;
     --color-accent: 255, 107, 1;
     --color-card: 52, 63, 96;
@@ -26,7 +26,7 @@
   }
   section,
   footer {
-    @apply mx-auto max-w-3xl px-4;
+    @apply mx-auto max-w-4xl px-4;
   }
   a {
     @apply outline-2 outline-offset-1 outline-skin-fill

Diff for: src/utils/formatDate.ts

@@ -0,0 +1,5 @@
+import dayjs from 'dayjs';
+
+export function formatDate(date: Date | string): string {
+  return dayjs(date).format('MMMM DD, YYYY');
+}

Diff for: tailwind.config.mjs

@@ -10,6 +10,7 @@ function withOpacity(variableName) {
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
+  darkMode: 'class',
   theme: {
     // Remove the following screen breakpoint or add other breakpoints
     // if one breakpoint is not enough for you