From 7aab95729043978daa01ba9adbffc227079e7fa0 Mon Sep 17 00:00:00 2001 From: root Date: Sat, 19 Sep 2026 16:47:13 +0200 Subject: [PATCH] style(cards): make --card-border a single base token (muted, inherited by all themes) --- public/css/main.css | 13 +++++++------ 1 file changed, 7 insertions(+), 6 deletions(-) diff --git a/public/css/main.css b/public/css/main.css index 1d7b9b1..2d3af0c 100644 --- a/public/css/main.css +++ b/public/css/main.css @@ -50,6 +50,7 @@ html { --icon-nav-overflow: 1.125rem; --icon-contact: 1.5rem; --icon-contact-meta: 1.125rem; + --card-border: hsla(210, 10%, 55%, 0.2); } html[data-theme="dark"] { @@ -3289,7 +3290,7 @@ body.home .section__title { width: 100%; min-height: 100%; height: 100%; - border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent); + border: 1px solid var(--card-border); border-radius: var(--radius-card); background: var(--surface); color: inherit; @@ -3299,7 +3300,7 @@ body.home .section__title { .mp-card:hover, .mp-card:focus-visible { - border-color: color-mix(in srgb, var(--accent) 50%, transparent); + border-color: color-mix(in srgb, var(--accent) 58%, var(--card-border)); } .mp-card--link { @@ -3745,7 +3746,7 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag { height: auto; padding: 0; border-radius: var(--radius-card); - border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent); + border: 1px solid var(--card-border); background: color-mix(in srgb, var(--surface) 94%, transparent); color: inherit; text-decoration: none; @@ -3755,7 +3756,7 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag { .portfolio-card:hover, .portfolio-card:focus-visible { - border-color: color-mix(in srgb, var(--accent) 50%, transparent); + border-color: color-mix(in srgb, var(--accent) 55%, var(--card-border)); } .portfolio-card:focus-visible { @@ -4461,7 +4462,7 @@ html[data-radius="strong"] .skill-task-card__solution { width: 100%; min-height: 100%; padding: 1rem 2.35rem 1rem 1.1rem; - border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent); + border: 1px solid var(--card-border); border-radius: var(--radius-card); background: var(--surface); color: inherit; @@ -4510,7 +4511,7 @@ html[data-radius="strong"] .skill-task-card__solution { .contact-card:hover, .contact-card:focus-visible { - border-color: color-mix(in srgb, var(--contact-brand) 50%, transparent); + border-color: color-mix(in srgb, var(--contact-brand) 58%, var(--card-border)); transform: translateY(-5px); z-index: 2; box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--contact-brand) 28%, transparent),