admin/site-portfolio
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style(cards): softer visible card border (inline color-mix, text-muted; accent/brand on hover)

Browse Source
This commit is contained in:
root committed 2026-09-19 16:22:40 +02:00
1 parent cb24acd3dd
commit 7bb7fca7ae
1 file changed
+6 -7
Download Patch File Download Diff File Expand all files Collapse all files
public/css/main.css
+6 -7
View File
@@ -77,7 +77,6 @@ html[data-theme="dark"] {
--text: hsl(var(--theme-h), 4%, 92%);
--text-muted: color-mix(in hsl, hsl(var(--theme-h), 5%, 58%), var(--accent) 6%);
--line: color-mix(in hsl, hsla(var(--theme-h), 8%, 48%, 0.18), var(--accent) 5%);
--card-border: color-mix(in srgb, var(--line) 40%, var(--surface));
--accent-hover: color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), white 18%);
--accent-soft: color-mix(in hsl, hsl(var(--theme-h) calc(var(--theme-s) * 1%) calc(var(--theme-l) * 1%)), transparent 82%);
--shadow-strong: 0 24px 60px hsla(0, 0%, 0%, 0.45);
@@ -3290,7 +3289,7 @@ body.home .section__title {
width: 100%;
min-height: 100%;
height: 100%;
border: 1px solid var(--card-border);
border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
border-radius: var(--radius-card);
background: var(--surface);
color: inherit;
@@ -3300,7 +3299,7 @@ body.home .section__title {
.mp-card:hover,
.mp-card:focus-visible {
border-color: color-mix(in srgb, var(--accent) 58%, var(--card-border));
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.mp-card--link {
@@ -3746,7 +3745,7 @@ html[data-theme="dark"] .mp-card--stack-bottom .mp-card__tag {
height: auto;
padding: 0;
border-radius: var(--radius-card);
border: 1px solid var(--card-border);
border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
background: color-mix(in srgb, var(--surface) 94%, transparent);
color: inherit;
text-decoration: none;
@@ -3756,7 +3755,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) 55%, var(--card-border));
border-color: color-mix(in srgb, var(--accent) 50%, transparent);
}
.portfolio-card:focus-visible {
@@ -4462,7 +4461,7 @@ html[data-radius="strong"] .skill-task-card__solution {
width: 100%;
min-height: 100%;
padding: 1rem 2.35rem 1rem 1.1rem;
border: 1px solid var(--card-border);
border: 1px solid color-mix(in srgb, var(--text-muted) 30%, transparent);
border-radius: var(--radius-card);
background: var(--surface);
color: inherit;
@@ -4511,7 +4510,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) 58%, var(--card-border));
border-color: color-mix(in srgb, var(--contact-brand) 50%, transparent);
transform: translateY(-5px);
z-index: 2;
box-shadow: 0 8px 18px -10px color-mix(in srgb, var(--contact-brand) 28%, transparent),