From 6d863cfa1978ed186fdf812de9d76180b3155765 Mon Sep 17 00:00:00 2001
From: thiloho <123883702+thiloho@users.noreply.github.com>
Date: Tue, 29 Apr 2025 05:09:22 +0200
Subject: [PATCH] Increase press visibility on mobile

---
 src/components/Button.astro          | 2 +-
 src/components/Footer.astro          | 2 +-
 src/components/Header.astro          | 2 +-
 src/components/TableOfContents.astro | 4 ++--
 src/layouts/PageLayout.astro         | 2 +-
 src/pages/blog/index.astro           | 2 +-
 6 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/Button.astro b/src/components/Button.astro
index c83adcf..586d520 100644
--- a/src/components/Button.astro
+++ b/src/components/Button.astro
@@ -9,7 +9,7 @@ interface Props {
 const { href, variant = "text", title, class: className = "" } = Astro.props;
 
 const baseClasses =
-  "border-transparent border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-100 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:bg-neutral-100 active:dark:bg-neutral-700 active:border-neutral-300 active:dark:border-neutral-600";
+  "border-transparent border-b-2 p-2 cursor-pointer hover:border-neutral-300 hover:bg-neutral-100 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:bg-neutral-200 active:dark:bg-neutral-700 active:border-neutral-300 active:dark:border-neutral-600";
 const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : "inline-block"} ${className}`;
 ---
 
diff --git a/src/components/Footer.astro b/src/components/Footer.astro
index 84cb44f..bb77724 100644
--- a/src/components/Footer.astro
+++ b/src/components/Footer.astro
@@ -1,5 +1,5 @@
 <footer
-  class="prose prose-neutral dark:prose-invert prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-100 prose-a:active:dark:bg-neutral-700 relative flex max-w-none flex-col items-center bg-neutral-100 px-4 pt-12 pb-6 dark:bg-[#1f1f1f]"
+  class="prose prose-neutral dark:prose-invert prose-a:text-blue-800 prose-a:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-200 prose-a:active:dark:bg-neutral-700 relative flex max-w-none flex-col items-center bg-neutral-100 px-4 pt-12 pb-6 dark:bg-[#1f1f1f]"
 >
   <div
     class="absolute bottom-28 h-20 w-full -skew-y-2 border-b border-dashed border-neutral-400 bg-white dark:border-neutral-500 dark:bg-neutral-800"
diff --git a/src/components/Header.astro b/src/components/Header.astro
index d6e8fd3..9b89974 100644
--- a/src/components/Header.astro
+++ b/src/components/Header.astro
@@ -28,7 +28,7 @@ const { title, pubDate, modDate, slug } = Astro.props;
           </p>
           <a
             href={`https://github.com/thiloho/thiloho.github.io/edit/main/src/content/blog/${slug}/index.md`}
-            class="inline-flex items-center gap-1 text-blue-800 hover:no-underline active:bg-neutral-100 dark:text-blue-300 active:dark:bg-neutral-700"
+            class="inline-flex items-center gap-1 text-blue-800 hover:no-underline active:bg-neutral-200 dark:text-blue-300 active:dark:bg-neutral-700"
           >
             <Icon name="edit" />
             Edit this page
diff --git a/src/components/TableOfContents.astro b/src/components/TableOfContents.astro
index d317392..afbd087 100644
--- a/src/components/TableOfContents.astro
+++ b/src/components/TableOfContents.astro
@@ -14,7 +14,7 @@ const { headings } = Astro.props;
 >
   <summary
     title="Table of contents"
-    class="mx-auto flex w-fit cursor-pointer list-none border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-100 active:border-neutral-300 active:bg-neutral-100 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:dark:border-neutral-600 active:dark:bg-neutral-700"
+    class="mx-auto flex w-fit cursor-pointer list-none border-b-2 border-transparent p-2 hover:border-neutral-300 hover:bg-neutral-100 active:border-neutral-300 active:bg-neutral-200 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:dark:border-neutral-600 active:dark:bg-neutral-700"
   >
     <Icon name="book" />
   </summary>
@@ -30,7 +30,7 @@ const { headings } = Astro.props;
             .map(({ slug, text }) => (
               <li>
                 <a
-                  class="block px-2 py-1 text-center text-blue-800 hover:underline active:bg-neutral-100 dark:text-blue-300 active:dark:bg-neutral-700"
+                  class="block px-2 py-1 text-center text-blue-800 hover:underline active:bg-neutral-200 dark:text-blue-300 active:dark:bg-neutral-700"
                   href={`#${slug}`}
                   aria-labelledby={`Section: ${slug}`}
                 >
diff --git a/src/layouts/PageLayout.astro b/src/layouts/PageLayout.astro
index 97eb6d1..ae0b4d0 100644
--- a/src/layouts/PageLayout.astro
+++ b/src/layouts/PageLayout.astro
@@ -22,7 +22,7 @@ const { title, description, pubDate, modDate, slug } = Astro.props;
     <Header {title} {pubDate} {modDate} {slug} />
     <main class="flex-1 bg-white dark:bg-neutral-800">
       <div
-        class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 ${Astro.originPathname === "/" ? "prose-headings:scroll-mt-12" : "prose-headings:scroll-mt-24 lg:prose-headings:scroll-mt-16"} prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:not-in-prose-headings:text-blue-800 prose-a:not-in-prose-headings:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-100 prose-a:active:dark:bg-neutral-700 prose-a:in-prose-headings:font-bold prose-a:in-prose-headings:decoration-2 prose-a:in-prose-headings:no-underline prose-a:in-prose-headings:hover:underline`}
+        class={`relative prose prose-neutral dark:prose-invert mx-auto px-4 ${pubDate ? "pt-0" : "pt-8"} pb-16 ${Astro.originPathname === "/" ? "prose-headings:scroll-mt-12" : "prose-headings:scroll-mt-24 lg:prose-headings:scroll-mt-16"} prose-h1:font-bold prose-pre:!bg-neutral-700 prose-a:not-in-prose-headings:text-blue-800 prose-a:not-in-prose-headings:dark:text-blue-300 prose-a:hover:no-underline prose-a:active:bg-neutral-200 prose-a:active:dark:bg-neutral-700 prose-a:in-prose-headings:font-bold prose-a:in-prose-headings:decoration-2 prose-a:in-prose-headings:no-underline prose-a:in-prose-headings:hover:underline`}
       >
         <slot />
       </div>
diff --git a/src/pages/blog/index.astro b/src/pages/blog/index.astro
index c2a33bd..0fe33da 100644
--- a/src/pages/blog/index.astro
+++ b/src/pages/blog/index.astro
@@ -18,7 +18,7 @@ const sortedArticles = allArticles.sort((a, b) => {
       <article class="mt-8 flex flex-col gap-2 first:mt-0">
         <Date date={pubDate} />
         <a
-          class="max-w-fit text-blue-800 hover:no-underline active:bg-neutral-100 active:dark:bg-neutral-700"
+          class="max-w-fit text-blue-800 hover:no-underline active:bg-neutral-200 active:dark:bg-neutral-700"
           href={`/blog/${id}`}
         >
           {title}