move files around, improve visibility for links and buttons

_includes/styles/base.css

@@ -253,8 +253,6 @@ h3 a {
 p,
 li,
 button {
-    font-size: 1.125rem;
-
     .icon {
         transform: scale(1.13);
     }
@@ -262,14 +260,18 @@ button {
 
 /* links should look good i think */
 a {
-    font-size: 1.125rem;
-    color: var(--link);
+    color: var(--foreground);
+    text-decoration-color: color-mix(in srgb, var(--accent) 60%, transparent);
+    text-decoration-thickness: 0.1em;
     transition: 0.2s;
 }
 
 a:hover {
+    color: var(--link);
+    text-decoration-color: var(--accent);
+    text-decoration-skip-ink: none;
+    text-decoration-thickness: .3em;
     transition: 0.2s;
-    text-shadow: 0em 0em 0.25em var(--link);
 }
 
 /* smol text */
@@ -330,9 +332,11 @@ details.styled {
             transform: translateY(.1rem);
             vertical-align: middle;
         }
+
         .tabler--arrow-autofit-height:last-of-type {
             margin-left: auto;
         }
+
         background: linear-gradient(color-mix(in srgb, var(--accent) 5%, transparent), color-mix(in srgb, var(--accent) 20%, transparent));
         border-bottom: unset !important;
         cursor: pointer;
@@ -360,6 +364,7 @@ details.styled {
             margin-bottom: .4rem !important;
         }
     }
+
     .card.last {
         margin-bottom: unset !important;
     }
@@ -412,7 +417,7 @@ hr.solid {
 hr.rounded {
     border: .2rem solid var(--border);
     border-radius: 5px;
-} 
+}
 
 /* audio */
 audio {
@@ -426,7 +431,7 @@ summary {
 
 /* button link styling */
 .button {
-    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
+    background-color: color-mix(in srgb, var(--accent) 25%, transparent);
     border-radius: 1rem;
     color: var(--foreground);
     padding: .4rem;
@@ -443,7 +448,7 @@ summary {
 
 .button:hover {
     background-color: var(--accent);
-    color: var(--background);
+    color: var(--foreground);
     transition: all .2s;
 }
 
@@ -526,6 +531,7 @@ summary {
     .fedi-icon {
         animation: opacity-blink 4s infinite !important;
     }
+
     .fedi-icon-2 {
         animation: opacity-blink-reverse 4s infinite !important;
     }
@@ -534,10 +540,27 @@ summary {
 @media screen and (max-width: 1083px) {
     details.styled {
         section {
+
             /* reset margins for list on mobile view */
             ul {
                 margin: unset !important;
             }
         }
     }
+}
+
+/* different styling for elements in dark mode 
+   must also be applied to the html element below - needed as to not break with users using their browser settings or manually setting the theme through the website */
+html:not([data-theme="light"]) {
+    @media (prefers-color-scheme: dark) {
+        .button:hover {
+            color: var(--background);
+        }
+    }
+}
+
+html[data-theme="dark"] {
+    .button:hover {
+        color: var(--background);
+    }
 }

sneexy/sneexy.md

@@ -2,4 +2,3 @@
 title: about sneexy
 layout: "layouts/sneexy/page.njk"
 ---
-