120 lines
2.3 KiB
CSS
120 lines
2.3 KiB
CSS
body:has(aside.show) {
|
|
overflow: hidden;
|
|
scrollbar-gutter: stable;
|
|
}
|
|
|
|
aside {
|
|
--sidebar-width: min(50ch, 100vw);
|
|
|
|
position: absolute;
|
|
z-index: 3000;
|
|
|
|
visibility: hidden;
|
|
|
|
background-color: #2c1c59;
|
|
color: #fff;
|
|
padding: 3rem;
|
|
border: none;
|
|
|
|
/*position: fixed;*/
|
|
/*position: sticky;*/
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: calc(100vw - var(--sidebar-width));
|
|
width: var(--sidebar-width);
|
|
height: 100vh;
|
|
|
|
transition: opacity 0.25s, translate 0.25s, overlay 0.25s allow-discrete, display 0.25s allow-discrete;
|
|
|
|
opacity: 0;
|
|
translate: 100% 0;
|
|
|
|
&.show {
|
|
visibility: visible;
|
|
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
}
|
|
|
|
button {
|
|
place-content: end;
|
|
background-color: transparent;
|
|
border: none;
|
|
cursor: pointer;
|
|
padding: 0;
|
|
appearance: none;
|
|
font-size: 2rem;
|
|
font-weight: 700;
|
|
|
|
margin-inline-end: 0.5rem;
|
|
float: right;
|
|
|
|
|
|
&:hover {
|
|
color: #fff;
|
|
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
/* Backdrop */
|
|
.backdrop {
|
|
position: fixed;
|
|
inset: 0;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
backdrop-filter: blur(4px);
|
|
opacity: 0;
|
|
pointer-events: none;
|
|
transition: opacity 0.3s ease;
|
|
z-index: 1000;
|
|
|
|
/*cursor: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/9632/heart.svg), auto;*/
|
|
}
|
|
:is(aside.show) .backdrop {
|
|
opacity: 1;
|
|
}
|
|
body:has(aside.show) .backdrop {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
aside > nav > ul {
|
|
|
|
padding-block-start: 10rem;
|
|
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
list-style: none;
|
|
gap: 3rem;
|
|
|
|
a {
|
|
text-decoration: none;
|
|
font-weight: 700;
|
|
text-transform: uppercase;
|
|
font-size: 1rem;
|
|
/*font-size: 1.5rem;*/
|
|
}
|
|
|
|
@media (hover) and (prefers-reduced-motion: no-preference) {
|
|
& > li {
|
|
transition: opacity .3s ease;
|
|
}
|
|
|
|
&:has(:hover) > li:not(:hover) {
|
|
opacity: .85;
|
|
}
|
|
|
|
/* for keyboard support */
|
|
&:is(:hover, :focus-within) > li:not(:hover, :focus-within) {
|
|
opacity: .85;
|
|
}
|
|
}
|
|
}
|
|
|
|
.backdrop:has( ~ #sidebar a:hover, ~ #sidebar a:focus)/*, .backdrop:has( ~ #sidebar a:focus)*/ {
|
|
background-color: rgba(0 0 0 / 0.1);
|
|
}
|