SebinNyshkim/character-ref
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: ✨ add home button to navigate back to character select

Browse source 
When deep-linking character pages there's no way for a visitor to know there's other characters as well
This commit is contained in:
Sebin Nyshkim 2025-08-02 23:02:25 +02:00
parent 06866831a3
commit c096fc1dfd
Signed by: SebinNyshkim
SSH key fingerprint: SHA256:LG1WHMySL/4iW/Yci+0eHgbf0te5beRiLlmyoY8E5D0
1 changed files with 35 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

39
src/components/navigation.webc
View file

@ -1,4 +1,5 @@
<nav :aria-label="label" webc:root="override"> <nav :aria-label="label" webc:root="override">
<a class="home link" href="/#characters"> <icon icon="fa6-solid:chevron-left"></icon> Home </a>
<label for="nav-toggle"> <label for="nav-toggle">
<icon icon="fa6-solid:bars"></icon> <icon icon="fa6-solid:bars"></icon>
</label> </label>
@ -32,7 +33,11 @@
inset: 0.5em; inset: 0.5em;
display: grid; display: grid;
grid-auto-flow: column;
justify-content: space-between;
justify-items: end; justify-items: end;
align-items: center;
gap: 1em;
background-color: var(--nav-background-color); background-color: var(--nav-background-color);
box-shadow: var(--box-shadow); box-shadow: var(--box-shadow);
@ -44,7 +49,7 @@
z-index: 2; z-index: 2;
@media (min-width: 35em) { @media (min-width: 48em) {
--nav-spacing: 1.5em; --nav-spacing: 1.5em;
--nav-background-color: transparent; --nav-background-color: transparent;
--nav-border: none; --nav-border: none;
@ -70,7 +75,7 @@
margin-block: 0.75em; margin-block: 0.75em;
margin-inline: 1em; margin-inline: 1em;
@media (min-width: 35em) { @media (min-width: 48em) {
display: none; display: none;
} }
} }
@ -109,7 +114,7 @@
opacity: 0; opacity: 0;
transition: opacity 0.4s ease-in-out; transition: opacity 0.4s ease-in-out;
@media (min-width: 35em) { @media (min-width: 48em) {
--nav-items-position: static; --nav-items-position: static;
--nav-items-orientation: row nowrap; --nav-items-orientation: row nowrap;
align-items: start; align-items: start;
@ -123,7 +128,7 @@
height: 0; height: 0;
transition: height 0.4s ease-in-out; transition: height 0.4s ease-in-out;
@media (min-width: 35em) { @media (min-width: 48em) {
height: 100%; height: 100%;
} }
} }
@ -138,10 +143,36 @@
padding-block: calc(var(--nav-spacing) / 2); padding-block: calc(var(--nav-spacing) / 2);
transition: color 0.4s ease; transition: color 0.4s ease;
& svg {
width: 1em;
height: 1em;
transition: fill 0.4s ease;
}
}
:host .home {
display: flex;
align-items: center;
gap: 0.125em;
padding-inline: 0.75em 1em;
z-index: 3;
@media (min-width: 48em) {
background-color: var(--clr-nav-background);
box-shadow: var(--box-shadow);
border-radius: inherit;
}
} }
:host .link:hover { :host .link:hover {
color: var(--clr-nav-link-hover); color: var(--clr-nav-link-hover);
& svg {
fill: var(--clr-nav-link-hover);
}
} }
:host .link-active { :host .link-active {