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 %} {% 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; }