Set styles for mobile press events

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";
+  "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-blue-100 active:dark:bg-blue-900";
 const classes = `${baseClasses} ${variant === "icon" && href ? "inline-grid place-content-center" : "inline-block"} ${className}`;
 ---
 

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 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-blue-100 prose-a:active:dark:bg-blue-900 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"

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 dark:text-blue-300"
+            class="inline-flex items-center gap-1 text-blue-800 hover:no-underline active:bg-blue-100 dark:text-blue-300 active:dark:bg-blue-900"
           >
             <Icon name="edit" />
             Edit this page

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 hover:dark:border-neutral-600 hover: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:bg-blue-100 hover:dark:border-neutral-600 hover:dark:bg-neutral-700 active:dark:bg-blue-900"
   >
     <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 dark:text-blue-300"
+                  class="block px-2 py-1 text-center text-blue-800 hover:underline active:bg-blue-100 dark:text-blue-300 active:dark:bg-blue-900"
                   href={`#${slug}`}
                   aria-labelledby={`Section: ${slug}`}
                 >

src/components/Track.astro

@@ -17,7 +17,7 @@ const { title, artist, album, youtubeLink, cover } = Astro.props;
     <Image
       src={cover}
       alt={`Cover for the song '${title}' by artist(s) '${artist}'`}
-      class="border border-neutral-400 duration-300 hover:scale-105 dark:border-neutral-500"
+      class="border border-neutral-400 duration-300 hover:scale-105 active:scale-105 dark:border-neutral-500"
     />
   </a>
   <figcaption class="flex flex-col p-4 text-center">

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: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-blue-100 prose-a:active:dark:bg-blue-900 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>

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"
+          class="max-w-fit text-blue-800 hover:no-underline active:bg-blue-100 active:dark:bg-blue-900"
           href={`/blog/${id}`}
         >
           {title}