feat: theme revisions

src/_includes/css/colorVariables.njk

@@ -1,7 +1,29 @@
-html {
-{% for colorName, colorValues in colors %}
-    {% for value, hex in colorValues %}
-        --color-{{ colorName }}-{{ value }}: {{ hex }};
-    {% endfor %}
+{% set colorSchemes = colors.colorSchemes %}
+{% set lightScheme = colorSchemes.light %}
+{% set darkScheme = colorSchemes.dark %}
+
+:root {
+{% for colorName, value in lightScheme %}
+    --{{ colorName }}: {{ value }};
+    --color-{{ colorName }}: hsl({{ value }});
 {% endfor %}
 }
+
+{% for colorName, value in lightScheme %}
+.bg-{{ colorName }} {
+    background-color: var(--color-{{ colorName }});
+}
+
+.text-{{ colorName }} {
+    color: var(--color-{{ colorName }});
+}
+{% endfor %}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+{% for colorName, value in darkScheme %}
+    --{{ colorName }}: {{ value }};
+    --color-{{ colorName }}: hsl({{ value }});
+{% endfor %}
+    }
+}

src/_includes/css/spacing.njk

@@ -74,3 +74,9 @@
     }
 {% endfor %}
 
+:root {
+{% for keyRaw, value in spacing %}
+    {% set key = keyRaw | replace(".", "-") %}
+    --spacing-{{ key }}: {{ value }}px;
+{% endfor %}
+}

src/_includes/partials/footer.html

@@ -14,13 +14,16 @@
             <ul class="[ flex list-none gap-0.5 m-0 p-0 ]">
                 <li>
                     <span class="[ visually-hidden ]">RSS</span>
-                    <a href="#" target="_blank">{% include "svgs/rss.svg" %}</a>
+                    <a href="#" target="_blank" aria-label="View RSS feed">{% include "svgs/rss.svg" %}</a>
                 </li>
                 {% for key, url in meta.social %}
                     {% set alt = key | capitalize %}
                     <li>
                         <span class="[ visually-hidden ]">{{ alt }}</span>
-                        <a href="{{ url }}" target="_blank" rel="external noreferrer noopener">{% include "svgs/social-" + key + ".svg" %}</a>
+                        <a href="{{ url }}"
+                           target="_blank"
+                           rel="external noreferrer noopener"
+                           aria-label="View {{ alt }} page">{% include "svgs/social-" + key + ".svg" %}</a>
                     </li>
                 {% endfor %}
             </ul>

src/_includes/partials/header.html

@@ -2,10 +2,13 @@
     <nav class="[ wrapper flex items-center justify-between ]">
         <div class="[ site-logo ] [ flex items-center ]">
             <a class="[ logo ] [ flex items-center justify-center ]"
+               aria-label="Go to index"
                href="{{ meta.url }}">
                 <img src="/assets/images/logo.svg" width="32" height="32" alt="" />
             </a>
-            <a class="[ wordmark ] [ flex ]" href="{{ meta.url }}">
+            <a class="[ wordmark ] [ flex ]"
+               href="{{ meta.url }}"
+               aria-label="Go to index">
                 <span>wonderful</span>
                 <span>frog</span>
             </a>

src/_includes/svgs/calendar.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M6 0H3V2H1V5H15V2H13V0H10V2H6V0Z" fill="currentColor"/>
+<path d="M15 7H1V15H15V7Z" fill="currentColor"/>
+</svg>