feat: Minor tweaks

Author: devadathanmb

src/components/Card.tsx

@@ -19,22 +19,34 @@ export default function Card({ href, frontmatter, secHeading = true }: Props) {
 
   return (
     <li className="my-6">
-      <a
-        href={href}
-        className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
-      >
-        {secHeading ? (
-          <h2 {...headerProps}>{title}</h2>
-        ) : (
-          <h3 {...headerProps}>{title}</h3>
-        )}
-      </a>
-      <Datetime
-        pubDatetime={pubDatetime}
-        modDatetime={modDatetime}
-        readingTime={readingTime}
-      />
-      <p>{description}</p>
+      <div className="group relative rounded-xl border border-transparent bg-transparent p-4 transition-all hover:border-skin-line/50 hover:bg-skin-card/50 hover:shadow-lg hover:backdrop-blur-sm">
+        <a
+          href={href}
+          className="inline-block text-lg font-medium text-skin-accent decoration-dashed underline-offset-4 focus-visible:no-underline focus-visible:underline-offset-0"
+        >
+          {secHeading ? (
+            <h2
+              {...headerProps}
+              className="text-xl font-bold text-skin-accent group-hover:text-skin-accent"
+            >
+              {title}
+            </h2>
+          ) : (
+            <h3
+              {...headerProps}
+              className="text-xl font-bold text-skin-accent group-hover:text-skin-accent"
+            >
+              {title}
+            </h3>
+          )}
+        </a>
+        <Datetime
+          pubDatetime={pubDatetime}
+          modDatetime={modDatetime}
+          readingTime={readingTime}
+        />
+        <p className="mt-2 text-skin-base opacity-90">{description}</p>
+      </div>
     </li>
   );
 }

src/components/Footer.astro

@@ -1,6 +1,6 @@
 ---
-import Hr from "./Hr.astro";
 import Socials from "./Socials.astro";
+import Separator from "./Separator.astro";
 
 const currentYear = new Date().getFullYear();
 const commitHash = import.meta.env.GIT_COMMIT_HASH || "unknown";
@@ -14,7 +14,7 @@ const { noMarginTop = false } = Astro.props;
 ---
 
 <footer class={`${noMarginTop ? "" : "mt-auto"}`}>
-  <Hr noPadding />
+  <Separator noPadding />
   <div class="mx-auto max-w-3xl px-4">
     <div class="footer-wrapper">
       <Socials centered />
@@ -38,25 +38,25 @@ const { noMarginTop = false } = Astro.props;
 
 <style>
   footer {
-    @apply w-full;
+    @apply mt-auto w-full bg-skin-fill/50 backdrop-blur-sm;
   }
   .footer-wrapper {
-    @apply flex flex-col items-center justify-between py-6 sm:flex-row-reverse sm:py-4;
+    @apply flex flex-col items-center justify-between py-8 sm:flex-row-reverse sm:py-6;
   }
   .link-button {
-    @apply my-1 p-2 hover:rotate-6;
+    @apply my-1 p-2 transition-transform hover:rotate-6;
   }
   .link-button svg {
     @apply scale-125;
   }
   .copyright-wrapper {
-    @apply my-2 flex flex-col items-center whitespace-nowrap sm:flex-row;
+    @apply my-2 flex flex-col items-center whitespace-nowrap text-sm opacity-80 sm:flex-row;
   }
   .separator {
     @apply hidden sm:inline;
   }
   .deploy-info {
-    @apply pb-4 text-center text-sm opacity-60 transition-opacity hover:opacity-80;
+    @apply pb-6 text-center text-sm opacity-70 transition-opacity hover:opacity-100;
   }
   .commit-link {
     @apply font-mono underline decoration-dashed underline-offset-2 transition-all hover:decoration-solid;

src/components/Header.astro

@@ -1,7 +1,7 @@
 ---
-import { LOGO_IMAGE, SITE } from "@config";
-import Hr from "./Hr.astro";
+import { SITE } from "@config";
 import LinkButton from "./LinkButton.astro";
+import Separator from "./Separator.astro";
 
 export interface Props {
   activeNav?:
@@ -17,26 +17,22 @@ export interface Props {
 const { activeNav } = Astro.props;
 ---
 
-<header>
-  <a id="skip-to-content" href="#main-content">Skip to content</a>
+<header class="glass sticky top-0 z-30 w-full transition-all duration-300">
   <div class="nav-container">
     <div class="top-nav-wrap">
       <a
         href="/"
         class={`logo whitespace-nowrap ${activeNav === "home" ? "active" : ""}`}
       >
-        {
-          LOGO_IMAGE.enable ? (
-            <img
-              src={`/assets/${LOGO_IMAGE.svg ? "logo.svg" : "logo.png"}`}
-              alt={SITE.title}
-              width={LOGO_IMAGE.width}
-              height={LOGO_IMAGE.height}
-            />
-          ) : (
-            <span id="typewriter-text">{SITE.title}</span>
-          )
-        }
+        <span
+          class="flex items-center gap-0.5 font-mono text-xl font-bold tracking-tight sm:text-xl"
+        >
+          <span class="text-skin-accent">Dev</span><span class="text-skin-base"
+            >@</span
+          ><span class="text-skin-terminal-green">Machine</span><span
+            class="text-skin-base">:~$</span
+          ><span class="animate-blink text-skin-accent">_</span>
+        </span>
       </a>
       <nav id="nav-menu">
         <button
@@ -64,7 +60,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">
+        <ul id="menu-items" class="display-none list-none sm:flex">
           <li>
             <a href="/posts/" class={activeNav === "posts" ? "active" : ""}>
               Posts
@@ -123,7 +119,7 @@ const { activeNav } = Astro.props;
                   aria-live="polite"
                 >
                   <svg xmlns="http://www.w3.org/2000/svg" id="moon-svg">
-                    <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" />
+                    <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 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">
                     <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" />
@@ -136,37 +132,30 @@ const { activeNav } = Astro.props;
       </nav>
     </div>
   </div>
-  <Hr />
 </header>
+<Separator />
 
 <style>
-  #skip-to-content {
+  /* #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-3xl flex-col items-center justify-between sm:flex-row;
+    @apply mx-auto flex max-w-5xl 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;
+    @apply relative flex w-full items-start justify-between p-4 sm:items-center sm:py-4;
   }
   .logo {
-    @apply absolute py-1 text-xl font-semibold sm:static sm:text-2xl;
+    @apply absolute py-1 text-xl font-semibold sm:static sm:text-xl;
   }
   /* .logo.active {
     @apply underline decoration-wavy decoration-2 underline-offset-4 decoration-skin-accent;
   } */
-  .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 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;
+    @apply mt-4 grid w-44 grid-cols-2 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;
@@ -182,7 +171,7 @@ const { activeNav } = Astro.props;
     @apply col-span-1;
   }
   nav a.active {
-    @apply underline decoration-wavy decoration-2 underline-offset-4;
+    @apply underline decoration-skin-accent decoration-wavy decoration-2 underline-offset-4;
   }
   nav a.active svg {
     @apply fill-skin-accent;
@@ -201,27 +190,29 @@ const { activeNav } = Astro.props;
     @apply scale-125 hover:rotate-12 sm:scale-100;
   }
 
+  .hamburger-menu {
+    @apply self-end p-2 sm:hidden;
+  }
+  .menu-icon {
+    @apply h-6 w-6 scale-125 fill-skin-base text-skin-base;
+  }
   .menu-icon line {
     @apply transition-opacity duration-75 ease-in-out;
   }
   .menu-icon .close {
     opacity: 0;
   }
-  .menu-icon.is-active .line {
-    @apply opacity-0;
+  .menu-icon.is-active line {
+    opacity: 0;
   }
   .menu-icon.is-active .close {
-    @apply opacity-100;
+    opacity: 1;
   }
-
-  /* Typewriter Cursor */
-  .logo span::after {
-    content: "|";
-    animation: cursor 1s infinite step-start;
-    @apply ml-1 font-light text-skin-accent;
+  .active {
+    @apply text-skin-accent;
   }
 
-  @keyframes cursor {
+  @keyframes blink {
     0%,
     100% {
       opacity: 1;
@@ -230,18 +221,20 @@ const { activeNav } = Astro.props;
       opacity: 0;
     }
   }
+  .animate-blink {
+    animation: blink 1s infinite step-start;
+  }
 </style>
 
 <script>
   function toggleNav() {
     // Toggle menu
     const menuBtn = document.querySelector(".hamburger-menu");
-    const menuIcon = document.querySelector(".menu-icon");
     const menuItems = document.querySelector("#menu-items");
 
     menuBtn?.addEventListener("click", () => {
       const menuExpanded = menuBtn.getAttribute("aria-expanded") === "true";
-      menuIcon?.classList.toggle("is-active");
+      menuBtn.classList.toggle("is-active");
       menuBtn.setAttribute("aria-expanded", menuExpanded ? "false" : "true");
       menuBtn.setAttribute(
         "aria-label",
@@ -255,87 +248,4 @@ const { activeNav } = Astro.props;
 
   // Runs on view transitions navigation
   document.addEventListener("astro:after-swap", toggleNav);
-
-  // Typewriter Animation
-  function typewriter() {
-    const typewriterTextElement = document.getElementById("typewriter-text");
-    if (!typewriterTextElement) return;
-
-    const words = ["Devadathan", "Dev"];
-    let wordIndex = 0; // 0 for "Devadathan", 1 for "Dev"
-    let charIndex = words[wordIndex].length; // Start with the full initial word
-    let isDeleting = true; // Start by deleting the initial word
-    let typingSpeed = 150;
-
-    function type() {
-      // Ensure element still exists, especially important for SPA transitions
-      if (!typewriterTextElement) return;
-
-      const currentWord = words[wordIndex];
-      const targetWord = words[(wordIndex + 1) % words.length]; // The word we're transitioning to
-
-      if (isDeleting) {
-        typewriterTextElement.textContent = currentWord.substring(
-          0,
-          charIndex - 1
-        );
-        charIndex--;
-        typingSpeed = 75; // Faster deleting
-      } else {
-        typewriterTextElement.textContent = targetWord.substring(
-          0,
-          charIndex + 1
-        );
-        charIndex++;
-        typingSpeed = 150; // Normal typing
-      }
-
-      // Logic for switching between deleting and typing
-
-      if (isDeleting && charIndex === (wordIndex === 0 ? words[1].length : 0)) {
-        if (wordIndex === 0) {
-          // Finished deleting "Devadathan" down to "Dev"
-          isDeleting = false; // Start typing
-          wordIndex = 1; // Now target "Devadathan" (next word in cycle)
-          typingSpeed = 1500; // Pause before typing
-
-          typewriterTextElement.classList.add("italic");
-        } else {
-          // Finished deleting "Dev" down to nothing
-          isDeleting = false; // Start typing
-          wordIndex = 0; // Now target "Devadathan"
-          typingSpeed = 500; // Pause before typing
-
-          typewriterTextElement.classList.remove("italic");
-        }
-      } else if (!isDeleting && charIndex === targetWord.length) {
-        // Finished typing a word
-        isDeleting = true; // Start deleting
-        wordIndex = (wordIndex + 1) % words.length; // Move to the next word to delete
-        charIndex = targetWord.length; // Set charIndex to full length for deletion
-        typingSpeed = 1500; // Pause at end of word
-
-        // Ensure italics are removed if we just finished typing Devadathan
-        if (wordIndex === 0) {
-          typewriterTextElement.classList.remove("italic");
-        }
-      }
-
-      setTimeout(type, typingSpeed);
-    }
-
-    // Initial call after a short delay to allow content to render
-    // and to simulate a pause before the first deletion
-    setTimeout(() => {
-      if (typewriterTextElement) {
-        // Check again in case element was removed during delay
-        type();
-      }
-    }, 1500); // Initial pause before starting the animation
-  }
-
-  // Call typewriter on initial load
-  typewriter();
-  // Call typewriter on view transitions navigation
-  document.addEventListener("astro:after-swap", typewriter);
 </script>

src/components/Separator.astro

@@ -0,0 +1,15 @@
+---
+export interface Props {
+  noPadding?: boolean;
+  className?: string;
+}
+
+const { noPadding = false, className = "" } = Astro.props;
+---
+
+<div class={`mx-auto max-w-5xl ${noPadding ? "px-0" : "px-4"} ${className}`}>
+  <div
+    class="h-[1px] w-full bg-gradient-to-r from-transparent via-[rgb(var(--color-border))] to-transparent opacity-75"
+  >
+  </div>
+</div>

src/layouts/Layout.astro

@@ -88,7 +88,7 @@ const socialImageURL = new URL(
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
     <link
-      href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,600&family=JetBrains+Mono:wght@400;500;600;700&display=swap"
+      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap"
       rel="stylesheet"
     />