💅 painting the nails

src/components/Footer.astro

@@ -4,24 +4,24 @@ import Rss from './icons/Rss.astro'
 const today = new Date()
 ---
 
-<footer class="mt-24 mb-24 w-full flex flex-col items-center text-zinc-400">
+<footer class="mt-24 mb-12 w-full flex flex-col gap-2 items-center text-zinc-400">
-  <div class="">
+  <div class="flex items-center gap-4">
     <span>&copy; {today.getFullYear()} saibotk</span>
     <span> &#183; </span>
-    <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener">
+    <a href="https://creativecommons.org/licenses/by-nc/4.0/" target="_blank" rel="noopener" class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300">
       CC BY-NC 4.0
     </a>
   </div>
 
-  <div>
+  <div class="flex items-center gap-4">
     <div class="inline-block">
-      Made with <a href="https://astro.build/" target="_blank" rel="noopener">Astro</a>
+      Made with <a href="https://astro.build/" target="_blank" rel="noopener" class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300">Astro</a>
     </div>
     <span> &#183; </span>
-    <a href="https://git.saibotk.de/saibotk.de/saiblog" target="_blank" rel="noopener">
+    <a href="https://git.saibotk.de/saibotk.de/saiblog" target="_blank" rel="noopener" class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300">
       Source Code
     </a>
     <span> &#183; </span>
-    <a href="/rss.xml" target="_blank" rel="noopener"><Rss class="w-4 inline-block" /></a>
+    <a href="/rss.xml" target="_blank" rel="noopener" class="inline-block"><Rss class="w-5 h-5 hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300" /></a>
   </div>
 </footer>

src/components/Header.astro

@@ -7,16 +7,18 @@ import { SITE_TITLE } from '../config'
 ---
 
 <header class="mt-8">
-  <h2 class="text-3xl font-semibold mb-2">
+
+  <nav class="gap-2 flex items-center">
+    <h2 class="text-3xl text-white font-semibold mr-4">
       {SITE_TITLE}
     </h2>
-  <nav class="gap-2 flex items-center">
+
     <HeaderLink href="/">Home</HeaderLink>
     <HeaderLink href="/posts">Posts</HeaderLink>
 
     <div class="ml-auto space-x-2">
       <a
-        class="inline-block hover:text-purple-600"
+        class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
         href="https://flausch.social/@saibotk"
         target="_blank"
         aria-label="Link to my Mastodon account"
@@ -24,7 +26,7 @@ import { SITE_TITLE } from '../config'
         <Mastodon class="w-6" />
       </a>
       <a
-        class="inline-block hover:text-purple-600"
+        class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
         href="https://git.saibotk.de/saibotk"
         target="_blank"
         aria-label="Link to my Gitlab account"
@@ -32,7 +34,7 @@ import { SITE_TITLE } from '../config'
         <GitLab class="w-6" />
       </a>
       <a
-        class="inline-block hover:text-purple-600"
+        class="inline-block hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300"
         href="https://github.com/saibotk"
         target="_blank"
         aria-label="Link to my GitHub account"

src/components/HeaderLink.astro

@@ -10,19 +10,13 @@ const isActive =
 <a
   href={href}
   class:list={[
-    'group inline-block relative text-zinc-50 px-4 rounded',
+    'inline-block text-zinc-50 px-4 font-bold text-xl hover:scale-105 transition duration-150 active:scale-95 active:text-pink-300',
     className,
     {
-      'font-semibold bg-gradient-to-r from-purple-600 to-pink-400': isActive,
+      'decoration-pink-400 underline': isActive,
     },
   ]}
   {...props}
 >
-  <div
-    class="absolute rounded inset-0 block opacity-0 group-hover:opacity-100 bg-gradient-to-r from-purple-900 to-purple-500 transition duration-200"
-  >
-  </div>
-  <div class="relative z-10">
   <slot />
-  </div>
 </a>

src/config.ts

@@ -1,5 +1,5 @@
 // Place any global data in this file.
 // You can import this data from anywhere in your site by using the `import` keyword.
 
-export const SITE_TITLE = "Saibotk's blog";
+export const SITE_TITLE = "Sai-🤖-k";
 export const SITE_DESCRIPTION = "Welcome to my personal blog!";

src/layouts/Base.astro

@@ -24,7 +24,7 @@ const { pageTitle, description } = Astro.props
     />
   </head>
   <body
-    class="font-sans bg-zinc-900 text-zinc-300 w-full max-w-3xl px-4 mx-auto min-h-screen flex flex-col"
+    class="font-sans text-zinc-300 w-full max-w-4xl px-4 mx-auto min-h-screen flex flex-col"
   >
     <Header title={SITE_TITLE} />
     <main class="grow flex flex-col my-4 mx-4">

src/layouts/BlogPost.astro

@@ -19,8 +19,8 @@ const {
 <Base pageTitle={title} description={description}>
   <article>
     <div class="text-center">
-      <h1 class="mt-20 mb-2 text-5xl font-bold text-purple-400">{title}</h1>
+      <h1 class="mt-20 mb-2 text-5xl font-bold text-transparent bg-clip-text bg-gradient-to-tr from-pink-500 to-indigo-200">{title}</h1>
-      {pubDate && <time class="text-base text-zinc-400">{pubDate}</time>}
+      {pubDate && <time class="text-base tracking-wider text-zinc-400">{pubDate}</time>}
       {
         updatedDate && (
           <div class="text-sm italic font-thin text-zinc-400">

src/pages/index.astro

@@ -6,10 +6,10 @@ import Base from '../layouts/Base.astro'
   <div class="flex flex-col justify-center items-center grow">
     <div class="prose-custom">
       <h1 class="text-center">⛵️ Welcome on board!</h1>
-      <p>
+      <p class="text-center">
-        We will cross the ocean of my written posts. Join me on my journey and learn about various
+        We will cross the ocean of my written posts.<br>
-        things I encountered during my daily adventures. Mostly related to the far lands of
+        Join me on my journey and learn about various things I encountered during my daily adventures.<br>
-        containerization & Ansible, Laravel, PHP and Vue.
+        Mostly related to the far lands of containerization & Ansible, Laravel, PHP and Vue.
       </p>
     </div>
   </div>

src/pages/posts.astro

@@ -1,7 +1,7 @@
 ---
 import Base from '../layouts/Base.astro'
 
-const rawPosts = await Astro.glob('./posts/*.{md,mdx}')
+const rawPosts = await Astro.glob('./posts/**/*.{md,mdx}')
 const posts = rawPosts
   .filter((post) => !post.frontmatter.draft)
   .sort(
@@ -10,14 +10,14 @@ const posts = rawPosts
 ---
 
 <Base>
-  <section class="my-12">
+  <section class="my-20">
-    <ul class="space-y-2">
+    <ul class="space-y-6">
       {
         posts.map((post) => (
-          <li class="flex">
+          <li class="flex items-baseline gap-8">
             <time
               datetime={post.frontmatter.pubDate}
-              class="w-32 italic text-zinc-400 underline underline-offset-3"
+              class="w-32 italic text-zinc-200 underline underline-offset-3"
             >
               {new Date(post.frontmatter.pubDate).toLocaleDateString('en-us', {
                 year: 'numeric',
@@ -25,7 +25,7 @@ const posts = rawPosts
                 day: 'numeric',
               })}
             </time>
-            <a class="visited:text-purple-600 hover:text-purple-800" href={post.url}>
+            <a class="hover:scale-[1.02] transition duration-150 active:scale-[0.98] active:text-pink-300 text-2xl" href={post.url}>
               {post.frontmatter.title}
             </a>
           </li>

src/styles/global.css

@@ -1,5 +1,5 @@
 html {
-  @apply font-sans bg-zinc-900 text-zinc-300 w-full max-w-3xl mx-auto;
+  @apply font-sans bg-zinc-950 text-zinc-300 w-full mx-auto;
 }
 
 .prose-custom {

tsconfig.json

@@ -1,3 +1,11 @@
 {
-  "extends": "astro/tsconfigs/strictest"
+  "extends": "astro/tsconfigs/strictest",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@layouts/*": ["src/layouts/*"],
+      "@components/*": ["src/components/*"],
+      "@images/*": ["src/images/*"]
+    }
+  }
 }