fix: menu styles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "13.0.2",
+  "version": "13.0.3",
   "description": "The source for my personal site. Built using 11ty.",
   "type": "module",
   "scripts": {

src/_includes/partials/nav/link.liquid

@@ -3,6 +3,7 @@
   <span class="active {{ class }}" aria-current="page">
     {% if icon %}
       {% tablericon icon link %}
+      <span>{{ link }}</span>
     {% else %}
       {{ link }}
     {% endif %}
@@ -14,7 +15,7 @@
       <span>{{ link }}</span>
     </a>
   {% else %}
-    <a class="icon" href="/{{ link | downcase }}">
+    <a href="/{{ link | downcase }}">
       {{ link }}
     </a>
   {% endif %}

src/assets/styles/base/index.css

@@ -113,12 +113,12 @@ blockquote {
 
 /* links */
 a {
-  text-decoration: none;
-}
-
-a,
-.active {
   color: var(--accent-color);
+  text-decoration: none;
+
+  & svg {
+    stroke: var(--accent-color);
+  }
 }
 
 a:hover,
@@ -303,10 +303,12 @@ a.view-all:focus svg {
   cursor: not-allowed;
 }
 
-a svg,
+.active {
-nav .active svg,
+  color: var(--accent-color) !important;
-nav ul li .active svg {
+}
-  stroke: var(--accent-color);
+
+.active svg {
+  stroke: var(--accent-color) !important;
 }
 
 /* social icons */

src/assets/styles/components/menu.css

@@ -10,11 +10,13 @@
     overflow: hidden;
     margin: 0;
 
-    & .icon > svg {
+    & .icon > svg,
+    & .active > svg {
       display: block;
     }
 
-    & .icon > span {
+    & .icon > span,
+    & .active > span {
       display: none;
     }
   }
@@ -78,6 +80,7 @@ theme-toggle {
     justify-content: center;
     align-items: center;
     gap: 0;
+    z-index: 1;
 
     & > li {
       display: flex;
@@ -89,11 +92,13 @@ theme-toggle {
       color: var(--text-color);
       background: var(--background-color);
 
-      & .icon > svg {
+      & .icon > svg,
+      & .active > svg {
         display: none;
       }
 
-      & .icon > span {
+      & .icon > span,
+      & .active > span {
         display: inline;
       }
     }