fix: a11y fixes

src/components/GlobalStyles.astro

@@ -90,6 +90,7 @@ color_set({
 
   --license-block-bg: black(0.03) var(--codeblock-bg)
 
+  --link-underline: oklch(0.93 0.04 var(--hue)) oklch(0.40 0.08 var(--hue))
   --link-hover: oklch(0.95 0.025 var(--hue)) oklch(0.40 0.08 var(--hue))
   --link-active: oklch(0.90 0.05 var(--hue)) oklch(0.35 0.07 var(--hue))
 
@@ -215,6 +216,11 @@ color_set({
         text-[var(--btn-content)] dark:text-white/75
     }
 
+    .link-underline {
+        @apply transition underline decoration-2 decoration-dashed decoration-[var(--link-underline)]
+        hover:decoration-[var(--link-hover)] active:decoration-[var(--link-active)] underline-offset-[0.25rem]
+    }
+
     .text-90 {
         @apply text-black/90 dark:text-white/90
     }

src/components/Navbar.astro

@@ -52,7 +52,7 @@ let links: NavBarLink[] = navBarConfig.links.map((item: NavBarLink | LinkPreset)
             <Icon name="material-symbols:wb-sunny-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-light-icon)]"></Icon>
             <Icon name="material-symbols:dark-mode-outline-rounded" size={"1.25rem"} class="absolute opacity-[var(--display-dark-icon)]"></Icon>
         </button>
-        <button name="Nav Menu" class="btn-plain w-11 h-11 rounded-lg active:scale-90 md:hidden" id="nav-menu-switch">
+        <button aria-label="Menu" name="Nav Menu" class="btn-plain w-11 h-11 rounded-lg active:scale-90 md:hidden" id="nav-menu-switch">
             <Icon name="material-symbols:menu-rounded" size={"1.25rem"}></Icon>
         </button>
     </div>

src/components/misc/Markdown.astro

@@ -22,6 +22,7 @@ const className = Astro.props.class;
         padding: 0.125rem
         user-select: none
         opacity: 0
+        text-decoration: none
         transition: opacity 0.15s ease-in-out, background 0.15s ease-in-out
         .anchor-icon
           margin-left: 0.45ch
@@ -35,8 +36,13 @@ const className = Astro.props.class;
       margin: -0.25rem
       padding: 0.25rem
       border-radius: 0.375rem
+      font-weight: 500
       color: var(--primary)
-      text-decoration-line: none;
+      text-decoration-line: underline
+      text-decoration-color: var(--link-underline)
+      text-decoration-thickness: 0.125rem
+      text-decoration-style: dashed
+      text-underline-offset: 0.25rem
       /*&:after*/
       /*  content: ''*/
       /*  position: absolute*/
@@ -50,8 +56,10 @@ const className = Astro.props.class;
       /*  z-index: -1;*/
       &:hover
         background: var(--link-hover)
+        text-decoration-color: var(--link-hover)
       &:active
         background: var(--link-active)
+        text-decoration-color: var(--link-active)
     /*&:after*/
     /*  background: var(--link-active)*/
     code

src/components/widget/DisplaySettings.svelte

@@ -22,7 +22,7 @@ $: if (hue || hue === 0) {
             before:absolute before:-left-3 before:top-[0.33rem]"
         >
             {i18n(I18nKey.themeColor)}
-            <button class="btn-regular w-7 h-7 rounded-md  active:scale-90"
+            <button aria-label="Reset to Default" class="btn-regular w-7 h-7 rounded-md  active:scale-90"
                     class:opacity-0={hue === defaultHue} class:pointer-events-none={hue === defaultHue} on:click={resetHue}>
                 <div class="text-[var(--btn-content)]">
                     <slot name="restore-icon"></slot>