cdransf/coryd.dev
1
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(nav): primary nav design shifts to blocks with per section colors

Browse source
This commit is contained in:
Cory Dransfeldt 2025-04-13 19:23:49 -07:00
parent b50c6f94b6
commit 474a02e4ff
No known key found for this signature in database
8 changed files with 37 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

10
src/assets/styles/base/index.css
View file

@ -239,13 +239,14 @@ a {
transition: color var(--transition-duration-default) var(--transition-ease-in-out),
text-underline-offset var(--transition-duration-default) var(--transition-ease-in-out);
img {
img:not(.icon) {
border: var(--border-default);
filter: var(--filter-image-default);
transition: filter var(--transition-duration-default) var(--transition-ease-in-out);
}
svg {
svg,
.icon {
transform: var(--transform-icon-default);
}
@ -266,7 +267,7 @@ a {
color: var(--link-color-hover);
text-underline-offset: var(--underline-offset-hover);
img {
img:not(.icon) {
filter: var(--filter-image-light);
@media (prefers-color-scheme: dark) {
@ -274,7 +275,8 @@ a {
}
}
svg {
svg,
.icon {
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
transform: var(--transform-icon-tilt);
}

22
src/assets/styles/components/buttons.css
View file

@ -4,23 +4,31 @@
button:not([data-modal-button]),
.button {
appearance: none;
border: 2px solid var(--accent-color);
border-radius: var(--border-radius-full);
border: 2px solid var(--section-color, var(--accent-color));
border-radius: var(--border-radius-slight);
padding: var(--spacing-xs) var(--spacing-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-bold);
line-height: var(--line-height-base);
line-height: var(--line-height-md);
text-align: center;
text-decoration: none;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
color: var(--text-color-inverted);
background-color: var(--accent-color);
transition: color var(--transition-duration-default) var(--transition-ease-in-out);
background-color: var(--section-color, var(--accent-color));
&:not(.active):is(:hover, :active, :focus, :focus-within) {
background-color: var(--accent-color-hover);
border: 2px solid var(--accent-color-hover);
transition:
font-size var(--transition-duration-default) var(--transition-ease-in-out),
background-color var(--transition-duration-default) var(--transition-ease-in-out),
border var(--transition-duration-default) var(--transition-ease-in-out),
color var(--transition-duration-default) var(--transition-ease-in-out);
border var(--transition-duration-default) var(--transition-ease-in-out);
}
&.active {
background: transparent;
color: var(--accent-color);
}
}

8
src/assets/styles/components/header.css
View file

@ -19,9 +19,6 @@
img {
max-width: calc(var(--sizing-3xl) * 1.25);
transform: var(--transform-icon-default);
border: none;
filter: none;
}
span {
@ -40,9 +37,4 @@
}
}
}
h1 a:is(:hover, :focus, :active) img {
transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
transform: var(--transform-icon-tilt);
}
}

6
src/assets/styles/components/nav.css
View file

@ -21,6 +21,12 @@ nav {
&.primary {
margin-top: var(--spacing-base);
display: grid;
grid-template-columns: var(--grid-columns-three);
@media screen and (min-width: 768px) {
grid-template-columns: var(--grid-columns-six);
}
}
&.icons {