adds color themeing support to the site

This commit is contained in:
2026-06-29 21:23:51 +00:00
parent bfd6c5bb9e
commit ee79662e5d
37 changed files with 1046 additions and 15 deletions
+46 -6
View File
@@ -80,26 +80,66 @@ img, svg {
}
.btn {
@include button-style($accent-orange, $neutral-white);
background: var(--color-accent);
color: var(--color-white);
border: none;
border-radius: $radius-md;
padding: $spacing-sm $spacing-lg;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background $transition-fast, transform $transition-fast;
display: inline-flex;
align-items: center;
gap: $spacing-xs;
text-decoration: none;
font-family: var(--font-primary);
letter-spacing: 0.02em;
&:hover {
background: var(--color-accent-dark);
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
}
.btn-secondary {
@include button-style($primary-blue, $neutral-white, $primary-blue-dark);
background: var(--color-primary);
color: var(--color-white);
border: none;
border-radius: $radius-md;
padding: $spacing-sm $spacing-lg;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background $transition-fast, transform $transition-fast;
&:hover {
background: var(--color-primary-dark);
transform: translateY(-1px);
}
&:active {
transform: translateY(0);
}
}
.btn-outline {
background: transparent;
border: 2px solid $accent-orange;
color: $accent-orange;
border: 2px solid var(--color-accent);
color: var(--color-accent);
border-radius: $radius-md;
padding: $spacing-sm $spacing-lg;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: background $transition-fast, color $transition-fast;
&:hover {
background: $accent-orange;
color: $neutral-white;
background: var(--color-accent);
color: var(--color-white);
}
}