feat: header and other style updates

src/_includes/macros/utils.njk

@@ -3,10 +3,10 @@
     {% set emptyStars = 5 - number %}
     <ul class="[ stars ] [ flex list-none p-0 m-0 text-primary ]" aria-description="{{ number }} out of 5 stars">
     {% for i in range(0, filledStars) %}
-        <li>{% include "svgs/star.svg" %}</li>
+        <li class="[ star-filled ]">{% include "svgs/star.svg" %}</li>
     {% endfor %}
     {% for i in range(0, emptyStars) %}
-        <li>{% include "svgs/star-empty.svg" %}</li>
+        <li class="[ star-empty ]">{% include "svgs/star-empty.svg" %}</li>
     {% endfor %}
     </ul>
 {% endmacro %}

src/css/blocks/site-header.css

@@ -17,9 +17,18 @@
   right: 0;
 }
 
+.menu > li {
+  filter: drop-shadow(1px 0 0 var(--color-white))
+    drop-shadow(-1px 0 0 var(--color-white))
+    drop-shadow(0 -1px 0 var(--color-white))
+    drop-shadow(0 1px 0 var(--color-white));
+}
+
 .menu-button {
+  display: block;
+  line-height: 1rem;
   background-color: var(--color-white);
-  color: var(--color-black);
+  color: var(--color-shadow);
   box-shadow:
     1px 1px 0px var(--color-shadow),
     2px 2px 0 var(--color-shadow);
@@ -29,4 +38,22 @@
   border: 1px solid var(--color-shadow);
   text-decoration: none;
   font-size: 0.8rem;
+  transition:
+    box-shadow var(--transition-duration),
+    transform var(--transition-duration),
+    background-color var(--transition-duration),
+    color var(--transition-duration);
+}
+
+.menu-button:hover {
+  background-color: color-mix(
+    in srgb,
+    var(--color-white) 90%,
+    var(--color-primary)
+  );
+}
+
+.menu-button:active {
+  box-shadow: 0 0 0 var(--color-shadow);
+  transform: translate(2px, 2px);
 }

src/css/blocks/site-logo.css

@@ -4,6 +4,16 @@
   transform: skew(0deg, -1deg) translateY(2px);
 }
 
+.site-logo .logo img {
+  filter: drop-shadow(0 1px 0 var(--color-white))
+    drop-shadow(1px 0 0 var(--color-white))
+    drop-shadow(-1px 0 0 var(--color-white))
+    drop-shadow(0 -1px 0 var(--color-white))
+    drop-shadow(
+      0 0 6px color-mix(in srgb, var(--color-primary) 80%, var(--color-white))
+    );
+}
+
 .site-logo .wordmark > span {
   text-shadow:
     -1px 1px 0 var(--shadow-color),
@@ -35,4 +45,5 @@
 
 .site-logo .wordmark > :nth-child(2) {
   z-index: 0;
+  color: color-mix(in srgb, var(--color-white) 90%, var(--color-primary));
 }

src/css/blocks/stars.css

@@ -3,6 +3,15 @@
   transition: margin ease-in-out var(--transition-duration);
 }
 
+.star-filled {
+  color: var(--color-primary);
+  z-index: 1;
+}
+
+.star-empty {
+  color: var(--color-fadeText);
+}
+
 .stars li:not(:first-child) {
   margin-inline-start: -6px;
 }