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

feat(nav): refactor primary navigation to split labels + icons; remove redundant nav code

Browse source
This commit is contained in:
Cory Dransfeldt 2025-04-13 16:56:47 -07:00
parent 38992d10f1
commit b6d5933433
No known key found for this signature in database
23 changed files with 319 additions and 419 deletions
Download patch file Download diff file Expand all files Collapse all files

44
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);
}
@ -341,6 +343,7 @@ hr {
time {
color: var(--gray-dark);
font-size: var(--font-size-sm);
line-height: var(--sizing-sm);
}
article {
@ -453,40 +456,9 @@ td:first-of-type,
border-inline-start: none;
}
/* header */
.main-title {
display: flex;
flex-direction: column;
gap: var(--spacing-base);
width: var(--sizing-full);
padding-top: var(--spacing-3xl);
@media screen and (min-width: 768px) {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0;
}
h1 {
margin: 0;
padding: 0;
white-space: nowrap;
}
}
/* nav */
.active,
.active svg {
--icon-color: var(--accent-color-active);
cursor: not-allowed;
color: var(--accent-color-active);
}
/* layout */
.default-wrapper {
padding-top: var(--spacing-2xl);
padding-top: var(--spacing-base);
}
.main-wrapper {

5
src/assets/styles/base/vars.css
View file

@ -45,7 +45,7 @@
--brand-mastodon: light-dark(#563acc, #858afa);
--brand-npm: #cb3837;
--brand-rss: light-dark(#c24f19, #f26522);
--brand-stalwart: light-dark(#db2c53, #d999a7);
--brand-stalwart: light-dark(#db2c53, #ff4c6a);
--article: light-dark(#007272, #00ffff);
--about: light-dark(#e4513a, #ff967d);
@ -59,7 +59,7 @@
--music: light-dark(#3d7099, #76b8cc);
--newsletter: light-dark(#37b0b0, #91fffa);
--now: light-dark(#cc1076, #ff82d5);
--search: light-dark(#6b5e3a, #c0b594);
--search: light-dark(#007c9d, #3fd9ff);
--tattoo: light-dark(#951b1b, #ff7373);
--tv: light-dark(#cc3600, #d65f2b);
--warning: light-dark(#cc6f00, #ffbf66);
@ -94,6 +94,7 @@
--underline-offset-default: 3px;
--underline-offset-hover: 5px;
--button-offset-hover: 2px;
/* sizing */
--sizing-xs: 0.25rem;

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

@ -4,23 +4,27 @@
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));
transition: var(--transition-duration-default) var(--transition-ease-in-out);
&:not(.active):is(:hover, :active, :focus, :focus-within) {
background-color: var(--accent-color-hover);
border: 2px solid var(--accent-color-hover);
transition:
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);
transform: translateY(var(--button-offset-hover));
}
&.active {
background: transparent;
color: var(--accent-color);
}
}

4
src/assets/styles/components/forms.css
View file

@ -26,6 +26,10 @@ textarea {
textarea {
resize: vertical;
&:has(+ button) {
margin-bottom: var(--sizing-md);
}
}
.search__form {

40
src/assets/styles/components/header.css Normal file
View file

@ -0,0 +1,40 @@
.main-title {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 0;
align-items: center;
width: var(--sizing-full);
padding-top: var(--spacing-3xl);
h1,
h1 a {
margin: 0;
padding: 0;
white-space: nowrap;
display: flex;
align-items: center;
gap: var(--spacing-sm);
img {
max-width: calc(var(--sizing-3xl) * 1.25);
}
span {
display: none;
}
@media screen and (min-width: 280px) {
span:first-of-type {
display: inline;
}
}
@media screen and (min-width: 480px) {
span:last-of-type {
display: inline;
}
}
}
}

65
src/assets/styles/components/nav.css Normal file
View file

@ -0,0 +1,65 @@
nav {
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: var(--spacing-md);
padding: 0;
margin: 0;
.icon > span,
.active > span {
display: none;
}
.active,
.active svg {
--icon-color: var(--accent-color-active);
cursor: not-allowed;
color: var(--accent-color-active);
}
&.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 {
justify-content: end;
}
&.primary,
&.sub-pages {
gap: var(--sizing-sm);
}
&.social,
&.sub-pages {
align-items: center;
justify-content: center;
}
&.icons,
&.social {
gap: var(--spacing-md);
}
&.social {
margin-bottom: var(--spacing-lg);
}
&.primary,
&.social {
width: var(--sizing-full);
}
&.sub-pages {
font-size: var(--font-size-sm);
padding-bottom: var(--spacing-3xl);
}
}

31
src/assets/styles/components/nav/footer.css
View file

@ -1,31 +0,0 @@
nav {
&.social,
&.sub-pages {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
&.social {
gap: var(--spacing-md);
margin-bottom: var(--spacing-lg);
width: var(--sizing-full);
.icon > span,
.active > span {
display: none;
}
.active {
display: flex;
}
}
&.sub-pages {
font-size: var(--font-size-sm);
padding-bottom: var(--spacing-3xl);
gap: var(--sizing-sm);
}
}

25
src/assets/styles/components/nav/primary.css
View file

@ -1,25 +0,0 @@
.nav-list {
display: flex;
flex-direction: row;
flex-wrap: wrap;
list-style: none;
gap: var(--spacing-md);
padding: 0;
margin: 0;
@media screen and (min-width: 768px) {
justify-content: center;
}
& > li {
margin-bottom: 0;
:is(.icon, .active) svg {
display: block;
}
:is(.icon, .active) span {
display: none;
}
}
}

4
src/assets/styles/components/tab-buttons.css
View file

@ -32,3 +32,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
#tracks-chart:not(:checked) ~ [for="tracks-chart"]:is(:hover, :active) {
color: var(--accent-color-hover);
}
[for="tracks-recent"] {
margin-right: var(--sizing-xs);
}

4
src/assets/styles/index.css
View file

@ -27,9 +27,9 @@
@import url("./components/banners.css") layer(components);
@import url("./components/buttons.css") layer(components);
@import url("./components/forms.css") layer(components);
@import url("./components/header.css") layer(components);
@import url("./components/media-grid.css") layer(components);
@import url("./components/nav/primary.css") layer(components);
@import url("./components/nav/footer.css") layer(components);
@import url("./components/nav.css") layer(components);
@import url("./components/modal.css") layer(components);
@import url("./components/music-chart.css") layer(components);
@import url("./components/paginator.css") layer(components);