2024: update design

jakemulley · Jan 23, 2024 · 2c96585 · 2c96585
1 parent 8d4566d
commit 2c96585
Show file tree

Hide file tree

Showing 6 changed files with 107 additions and 137 deletions.
diff --git a/src/components/BlogPostList.astro b/src/components/BlogPostList.astro
@@ -9,7 +9,7 @@ const allPosts = await getCollection("blog");
     allPosts.map((post) => (
       <li>
         <a href={`/blog/${post.slug}/`}>{post.data.title}</a> on
-        <time datetime={post.data.date.toISOString()} class="font-serif">
+        <time datetime={post.data.date.toISOString()}>
           {post.data.date.toLocaleString("en-GB", {
             year: "numeric",
             month: "long",

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
@@ -2,55 +2,24 @@
 import site from "../data/site.json";
 import socials from "../data/socials.json";
 import { commitHash } from "../utils/helpers.js";
+
+const socialLinks = socials.map(
+  (item) => `<a href="${item.href}">${item.title}</a>`,
+);
+
+const socialParagraph = `You can also find me on ${socialLinks.slice(0, -1).join(", ")}, or ${socialLinks.slice(-1)}.`;
 ---
 
-<footer
-  class="w-full bg-alablaster dark:bg-slate-800 text-slate-700 dark:text-slate-300 border-t dark:border-t-slate-900 py-4 md:py-8 lg:py-12"
->
-  <div class="max-w-xl mx-auto px-4 space-y-4 md:space-y-6 lg:space-y-8">
-    <div class="space-y-1">
-      <h2
-        class="font-semibold font-serif text-2xl text-slate-900 dark:text-white"
-      >
-        Thanks for stopping by 🙌
-      </h2>
-      <p>
-        You're viewing <a
-          href={site["site-url"]}
-          class="text-slate-900 dark:text-white underline decoration-valencia decoration-2 underline-offset-2 hover:bg-valencia hover:text-white"
-          >{site["site-url"].replace("https://", "")}</a
-        > at commit <span class="font-mono"
-          ><a
-            href=`https://github.com/jakemulley/jakemulley.github.io/commit/${commitHash}`
-            class="text-slate-900 dark:text-white underline decoration-valencia decoration-2 underline-offset-2 hover:bg-valencia hover:text-white"
-            >{commitHash}</a
-          ></span
-        >.
-      </p>
-    </div>
-    <div class="space-y-1">
-      <p
-        class="font-semibold font-serif text-lg text-slate-900 dark:text-white"
-      >
-        Say hello 👋
-      </p>
-      <ul class="flex flex-wrap">
-        {
-          socials.map((social, index) => (
-            <li>
-              {index === socials.length - 1 ? " or" : ""}
-              <a
-                href={social.href}
-                rel="me"
-                class="text-slate-900 dark:text-white underline decoration-valencia decoration-2 underline-offset-2 hover:bg-valencia hover:text-white"
-              >
-                {social.title}
-              </a>
-              {index !== socials.length - 1 ? `,\u00A0` : ""}
-            </li>
-          ))
-        }
-      </ul>
-    </div>
-  </div>
+<hr />
+<footer class="w-full">
+  <h2>🙌 Thanks for stopping by</h2>
+  <p>
+    You're viewing <a href={site["site-url"]}
+      >{site["site-url"].replace("https://", "")}</a
+    > at commit <a
+      href=`https://github.com/jakemulley/jakemulley.github.io/commit/${commitHash}`
+      >{commitHash}</a
+    >.
+  </p>
+  <p set:html={socialParagraph} />
 </footer>
diff --git a/src/components/Header.astro b/src/components/Header.astro
@@ -15,38 +15,26 @@ const links = [
 ];
 ---
 
-<a
-  href="#main"
-  id="skip-link"
-  class="absolute w-px h-px m-0 overflow-hidden whitespace-nowrap underline block focus:absolute focus:w-auto focus:h-auto focus:overflow-visible focus:z-10"
-  >Skip to main content</a
->
-
-<header class="w-full py-4">
-  <div class="max-w-xl mx-auto px-4 flex flex-row justify-between items-center">
-    <a href="/">
-      <img
-        src="/images/profile.jpeg"
-        class="rounded-full w-20 sm:w-24"
-        alt="Jake Mulley's headshot"
-      />
-      <span class="sr-only">Jake Mulley</span>
-    </a>
-    <nav>
-      <ul class="flex space-x-4">
-        {
-          links.map((link) => (
-            <li>
-              <a
-                href={link.url}
-                class="p-1 underline decoration-valencia decoration-2 underline-offset-2 hover:bg-valencia hover:text-white"
-              >
-                {link.title}
-              </a>
-            </li>
-          ))
-        }
-      </ul>
-    </nav>
-  </div>
+<header class="not-prose space-y-2">
+  <a href="/" class="inline-flex">
+    <img src="/images/profile.jpeg" class="rounded-full w-24" />
+    <span class="sr-only">Jake Mulley</span>
+  </a>
+  <nav>
+    <ul class="flex space-x-2">
+      {
+        links.map((link) => (
+          <li>
+            <a
+              href={link.url}
+              class="font-semibold text-valencia-500 dark:text-valencia-400 no-underline underline-offset-2 decoration-2 hover:underline"
+            >
+              {link.title}
+            </a>
+          </li>
+        ))
+      }
+    </ul>
+  </nav>
 </header>
+<hr />
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -75,32 +75,37 @@ const url = Astro.url.pathname;
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.webmanifest" />
   </head>
-  <body class="bg-white flex flex-col min-h-screen antialiased">
-    <Header />
+  <body class="antialiased bg-white dark:bg-slate-900">
+    <a
+      href="#main"
+      id="skip-link"
+      class="absolute w-px h-px m-0 overflow-hidden whitespace-nowrap underline block focus:absolute focus:w-auto focus:h-auto focus:overflow-visible focus:z-10"
+      >Skip to main content</a
+    >
 
-    <main id="main" tabindex="-1" class="w-full flex-grow">
-      <slot />
-      {
-        url === "/" ? (
-          ""
-        ) : (
-          <nav>
-            <div class="max-w-xl mx-auto px-4 pb-12">
-              <p>
-                <a
-                  href="/"
-                  class="underline text-valencia decoration-2 underline-offset-2 hover:no-underline"
-                >
-                  &larr; Back home
-                </a>
-              </p>
-            </div>
-          </nav>
-        )
-      }
-    </main>
-
-    <Footer />
+    <div class="max-w-2xl mx-auto p-8">
+      <div
+        class="max-w-none prose prose-slate dark:prose-invert lg:prose-lg prose-a:text-valencia-500 dark:prose-a:text-valencia-400 prose-a:no-underline prose-a:underline-offset-2 prose-a:decoration-2 hover:prose-a:underline"
+      >
+        <Header />
+        <main id="main" tabindex="-1">
+          <slot />
+          {
+            url === "/" ? (
+              ""
+            ) : (
+              <>
+                <hr />
+                <nav>
+                  <a href="/">&larr; Back home</a>
+                </nav>
+              </>
+            )
+          }
+        </main>
+        <Footer />
+      </div>
+    </div>
 
     <script type="application/ld+json">
       {

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -5,30 +5,26 @@ const { frontmatter } = Astro.props;
 ---
 
 <Layout title={frontmatter.title}>
-  <div class="max-w-xl mx-auto p-4 pb-8">
-    <article
-      class="prose prose-slate prose-headings:font-serif prose-a:text-valencia prose-a:decoration-2 prose-a:underline-offset-2 hover:prose-a:no-underline"
-    >
-      <header>
-        <h1>{frontmatter.title}</h1>
-        {
-          !frontmatter.date ? (
-            ""
-          ) : (
-            <p class="text-slate-500 font-serif">
-              Published on{" "}
-              <time datetime={frontmatter.date.toISOString()}>
-                {frontmatter.date.toLocaleString("en-GB", {
-                  year: "numeric",
-                  month: "long",
-                  day: "numeric",
-                })}
-              </time>
-            </p>
-          )
-        }
-      </header>
-      <slot />
-    </article>
-  </div>
+  <article>
+    <header>
+      <h1>{frontmatter.title}</h1>
+      {
+        !frontmatter.date ? (
+          ""
+        ) : (
+          <p>
+            Published on{" "}
+            <time datetime={frontmatter.date.toISOString()}>
+              {frontmatter.date.toLocaleString("en-GB", {
+                year: "numeric",
+                month: "long",
+                day: "numeric",
+              })}
+            </time>
+          </p>
+        )
+      }
+    </header>
+    <slot />
+  </article>
 </Layout>
diff --git a/tailwind.config.mjs b/tailwind.config.mjs
@@ -4,8 +4,20 @@ export default {
   theme: {
     extend: {
       colors: {
-        alablaster: "#F9F9F9",
-        valencia: "#DB3344",
+        valencia: {
+          DEFAULT: "#DB3344",
+          50: "#F7CFD3",
+          100: "#F3BEC3",
+          200: "#ED9BA3",
+          300: "#E77884",
+          400: "#E15664",
+          500: "#DB3344",
+          600: "#B6202F",
+          700: "#861823",
+          800: "#560F16",
+          900: "#27070A",
+          950: "#0F0304",
+        },
       },
     },
   },