optimize everything ("Eleventy Harder"), improve some css

_includes/styles/base.css

@@ -76,7 +76,7 @@ it doesn't have a name, call it "synth.download color scheme official real"
         --selection: #253340;
         --comment: #5c6773;
         --accent: #e6b450;
-        --link: #e6b450;
+        --link: var(--accent);
 
         /* original ayu colors */
         --orange: #ffb454;
@@ -168,7 +168,7 @@ html[data-theme="dark"] {
     --selection: #253340;
     --comment: #5c6773;
     --accent: #e6b450;
-    --link: #e6b450;
+    --link: var(--accent);
 
     /* original ayu colors */
     --orange: #ffb454;
@@ -228,25 +228,36 @@ body {
 /* text formatting and config stuff */
 
 /* headings */
+h1, h2, h3, h4, h5, h6,
+h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
+    color: var(--foreground);
+    margin-top: .5rem;
+    text-decoration-color: transparent;
+    transition: .2s;
+}
+
+h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover {
+    text-decoration-color: var(--accent);
+    text-decoration-thickness: .3rem !important;
+    text-decoration: underline;
+    transition: .2s;
+}
+
 h1,
 h1 a {
-    color: var(--foreground);
     font-size: 2rem;
-    text-decoration: none;
 }
 
 /* apparently having more than one h1 is against web standards
 but i prefer how it looks so i just use the same styling again */
 h2,
 h2 a {
-    color: var(--foreground);
     font-size: 2rem;
-    text-decoration: none;
 }
 
 h3,
 h3 a {
-    font-size: 2rem;
+    font-size: 1.6rem;
 }
 
 /* text */
@@ -293,11 +304,6 @@ li {
     -moz-animation: 2s linear infinite rainbow;
 }
 
-/* heading 1 is also clickable */
-h1 a:hover {
-    text-decoration: underline;
-}
-
 /* the tabler icons svgs styling */
 .tabler-icon,
 .icon .icon-tabler {