From 33383965ebd57e4feb8e6ee17a31f7e68f0e0ecc Mon Sep 17 00:00:00 2001
From: Saibotk <git@saibotk.de>
Date: Thu, 21 Sep 2023 00:38:16 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=85=20painting=20the=20nails?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Footer.astro     | 20 ++++++++++----------
 src/components/Header.astro     | 14 ++++++++------
 src/components/HeaderLink.astro | 12 +++---------
 src/config.ts                   |  2 +-
 src/layouts/Base.astro          |  2 +-
 src/layouts/BlogPost.astro      |  4 ++--
 src/pages/index.astro           |  8 ++++----
 src/pages/posts.astro           | 12 ++++++------
 src/styles/global.css           |  2 +-
 tsconfig.json                   | 10 +++++++++-
 10 files changed, 45 insertions(+), 41 deletions(-)

diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 016ab77..b1fed15 100644
--- a/src/components/Footer.astro
+++ b/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">
-  <div class="">
+<footer class="mt-24 mb-12 w-full flex flex-col gap-2 items-center text-zinc-400">
+  <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">
+    <span> &#183; </span>
+    <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">
+    <span> &#183; </span>
+    <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>
+    <span> &#183; </span>
+    <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>
diff --git a/src/components/Header.astro b/src/components/Header.astro
index 2e5fe72..462e94d 100644
--- a/src/components/Header.astro
+++ b/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">
-    {SITE_TITLE}
-  </h2>
+
   <nav class="gap-2 flex items-center">
+    <h2 class="text-3xl text-white font-semibold mr-4">
+      {SITE_TITLE}
+    </h2>
+
     <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"
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro
index 1bbc918..0c708d2 100644
--- a/src/components/HeaderLink.astro
+++ b/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>
+  <slot />
 </a>
diff --git a/src/config.ts b/src/config.ts
index 1e65074..f365d0b 100644
--- a/src/config.ts
+++ b/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!";
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
index 9402509..2a5a695 100644
--- a/src/layouts/Base.astro
+++ b/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">
diff --git a/src/layouts/BlogPost.astro b/src/layouts/BlogPost.astro
index fdb6701..dc60c03 100644
--- a/src/layouts/BlogPost.astro
+++ b/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>
-      {pubDate && <time class="text-base text-zinc-400">{pubDate}</time>}
+      <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 tracking-wider text-zinc-400">{pubDate}</time>}
       {
         updatedDate && (
           <div class="text-sm italic font-thin text-zinc-400">
diff --git a/src/pages/index.astro b/src/pages/index.astro
index a20c18d..d54a770 100644
--- a/src/pages/index.astro
+++ b/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>
-        We will cross the ocean of my written posts. Join me on my journey and learn about various
-        things I encountered during my daily adventures. Mostly related to the far lands of
-        containerization & Ansible, Laravel, PHP and Vue.
+      <p class="text-center">
+        We will cross the ocean of my written posts.<br>
+        Join me on my journey and learn about various things I encountered during my daily adventures.<br>
+        Mostly related to the far lands of containerization & Ansible, Laravel, PHP and Vue.
       </p>
     </div>
   </div>
diff --git a/src/pages/posts.astro b/src/pages/posts.astro
index 425e459..d5dcff3 100644
--- a/src/pages/posts.astro
+++ b/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">
-    <ul class="space-y-2">
+  <section class="my-20">
+    <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>
diff --git a/src/styles/global.css b/src/styles/global.css
index 39d883a..3447037 100644
--- a/src/styles/global.css
+++ b/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 {
diff --git a/tsconfig.json b/tsconfig.json
index fbc2f5f..af0746b 100644
--- a/tsconfig.json
+++ b/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/*"]
+    }
+  }
 }