Make minor tweaks to styles throughout site

Author: stelcodes

src/components/TableOfContents.astro

@@ -40,7 +40,7 @@ const toc = generateToc(headings)
 
 <details
   open
-  class="relative md:mx-2 xl:mx-0 text-foreground/90 bg-foreground/6 xl:bg-transparent px-8 xl:pr-2 py-6 mt-5 xl:mt-0 xl:w-full rounded-xl border-3 xl:border-none border-accent/10 xl:sticky xl:top-10 xl:basis-[266px] 2xl:basis-[340px] xl:order-2 xl:shrink-0"
+  class="relative md:mx-2 xl:mx-0 text-foreground/90 bg-foreground/5 xl:bg-transparent px-8 xl:pr-2 py-6 mt-5 xl:mt-0 xl:w-full rounded-xl border-3 xl:border-none border-accent/10 xl:sticky xl:top-10 xl:basis-[266px] 2xl:basis-[340px] xl:order-2 xl:shrink-0"
 >
   <summary
     class="list-none marker:hidden marker:content-[''] before:content-['>'] before:text-accent before:font-semibold before:absolute before:left-3 cursor-pointer"

src/components/Tags.astro

@@ -12,7 +12,7 @@ const { tags } = Astro.props
     tags.map((tag) => (
       <a
         href={`/tags/${encodeURIComponent(tag)}`}
-        class="py-1 px-3 bg-accent/2 hover:bg-accent/10 border-1 border-accent/10 text-accent/90 rounded-2xl"
+        class="py-1 px-3 bg-accent/2 hover:bg-accent/10 border-1 border-accent/10 text-accent/90 rounded-2xl transition-colors"
       >
         {tag}
       </a>

src/components/TagsSection.astro

@@ -22,7 +22,7 @@ const tagsWithCount = Array.from(tags)
       <li>
         <a
           href={`/tags/${encodeURIComponent(tag)}`}
-          class="flex gap-2.5 py-2 pl-4 pr-3 bg-accent/7 rounded-3xl"
+          class="flex gap-2.5 py-2 pl-4 pr-3 bg-accent/7 rounded-3xl border-transparent hover:border-accent/20 border-1"
         >
           {tag}
           <span class="rounded-full bg-foreground/7 text-primary px-2 py-1 text-xs font-semibold">

src/pages/posts/[slug].astro

@@ -57,7 +57,7 @@ if (addendum.length > 0) {
       )
     }
     <div class="md:mx-2">
-      <h1 class="mb-3 text-[1.75rem] text-[var(--theme-h1)] font-semibold">
+      <h1 class="mb-4 text-[1.75rem] text-[var(--theme-h1)] font-semibold">
         # {postData.title}
       </h1>
       <div class="text-foreground/80 mb-1">

src/styles/global.css

@@ -71,6 +71,10 @@ button:active {
   @apply outline-1 outline-accent outline-offset-2;
 }
 
+a, button {
+  @apply hover:cursor-pointer;
+}
+
 a.button {
   @apply inline-flex text-accent border-3 border-accent/30 border-double py-1.5 px-3 whitespace-nowrap hover:bg-accent/10 rounded-xl transition-colors;
 }
@@ -341,7 +345,7 @@ article img {
   }
 
   blockquote {
-    @apply relative bg-foreground/6 before:content-['>'] before:block before:absolute before:text-accent before:font-bold before:left-3;
+    @apply relative bg-foreground/5 before:content-['>'] before:block before:absolute before:text-accent before:font-bold before:left-3;
   }
 
   aside {