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

feat: improved tab navigation

Browse source
This commit is contained in:
Cory Dransfeldt 2024-06-18 15:32:25 -07:00
parent 7943179e16
commit ccce1537fd
No known key found for this signature in database
20 changed files with 171 additions and 59 deletions
Download patch file Download diff file Expand all files Collapse all files

56
src/assets/styles/components/menu.css
View file

@ -24,22 +24,25 @@
.menu-button-container {
display: none;
margin-left: var(--sizing-md);
outline: 0;
& .menu-open,
& .menu-closed {
cursor: pointer;
&:focus,
&:focus-within {
outline: 2px dashed var(--accent-color);
}
& svg {
cursor: pointer;
transform: rotate(0deg);
transition-property: transform;
transition-timing-function: var(--transition-ease-in-out);
transition-duration: var(--transition-duration-default);
}
& svg:hover,
& svg:active,
& svg:focus {
&:hover svg,
&:focus svg,
&:focus-within svg,
&:active svg {
stroke: var(--accent-color-hover);
transform: rotate(8deg);
}
@ -49,24 +52,24 @@
display: none;
}
#menu-toggle:checked + .menu-button-container {
& .menu-closed {
display: none;
}
& .menu-open {
display: block;
}
#menu-toggle:checked + .menu-button-container .menu-closed {
display: none;
}
#menu-toggle:not(:checked) + .menu-button-container {
& .menu-closed {
display: block;
}
#menu-toggle:checked + .menu-button-container .menu-open {
display: block;
}
& .menu-open {
display: none;
}
#menu-toggle:not(:checked) + .menu-button-container .menu-closed {
display: block;
}
#menu-toggle:not(:checked) + .menu-button-container .menu-open {
display: none;
}
a[role="menu-item"]:focus {
outline: none;
}
@media (max-width: 768px) {
@ -120,6 +123,17 @@
& .active {
font-size: var(--font-size-lg);
}
&:focus a,
&:focus-within a {
outline: 0;
}
&:focus,
&:focus-within {
border-top: 2px dashed var(--accent-color);
border-bottom: 2px dashed var(--accent-color);
}
}
.menu-button-container {