diff --git a/src/_includes/macros/utils.njk b/src/_includes/macros/utils.njk
index 90fe0ea..4a40aee 100644
--- a/src/_includes/macros/utils.njk
+++ b/src/_includes/macros/utils.njk
@@ -3,10 +3,10 @@
{% set emptyStars = 5 - number %}
{% for i in range(0, filledStars) %}
- - {% include "svgs/star.svg" %}
+ - {% include "svgs/star.svg" %}
{% endfor %}
{% for i in range(0, emptyStars) %}
- - {% include "svgs/star-empty.svg" %}
+ - {% include "svgs/star-empty.svg" %}
{% endfor %}
{% endmacro %}
diff --git a/src/css/blocks/site-header.css b/src/css/blocks/site-header.css
index f93e4c5..96b307d 100644
--- a/src/css/blocks/site-header.css
+++ b/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);
}
diff --git a/src/css/blocks/site-logo.css b/src/css/blocks/site-logo.css
index b9151b9..f22bfc1 100644
--- a/src/css/blocks/site-logo.css
+++ b/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));
}
diff --git a/src/css/blocks/stars.css b/src/css/blocks/stars.css
index ed0627b..495a56b 100644
--- a/src/css/blocks/stars.css
+++ b/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;
}