body > nav::before, body::after { z-index: -1; content: ""; position: absolute; mask-image: url("/assets/img/theme/sundae_sit-lines.png"); mask-repeat: no-repeat; margin: 0; width: inherit; height: inherit; pointer-events: none; } body > nav::before { bottom: 0; left: 0; mask-size: 150%; -webkit-mask-position-x: -10px; -webkit-mask-position-y: 90%; } body::after { content: none; mask-size: 100%; width: 100%; height: 100vw; -webkit-mask-position-x: 0; -webkit-mask-position-y: bottom; } body > nav { display: flex; flex-direction: column; overflow: hidden; padding: 1rem; position: fixed; width: var(--view); height: 100%; & * svg, li img { margin: 0 8px 0 8px; width: 20px; align-self: center; } & details { cursor: pointer; display: flex; & summary::marker { content: none; } } & ul { margin: var(--pad-sm); padding: 0; & li, button { padding: 0; align-items: center; margin-bottom: inherit; & img { border-radius: 100%; } } } & svg { fill: currentColor; stroke: currentColor; stroke-width: 0; } & details { font-size: 1.4rem; } & a, button { display: flex; font-size: 1.125rem; width: 100%; font-weight: bold; height: var(--pad-xl); line-height: var(--pad-xl); } } body { font-family: "Rubik", sans-serif; & > nav { gap: var(--pad-m); & a, button { border-style: solid; border-width: 2px; border-radius: var(--round); } & details { gap: inherit; border-radius: var(--round); font-weight: bold; } & details > summary { display: flex; justify-content: center; padding: 0 var(--pad-lm) 0 0; height: var(--pad-xl); & > svg { transform: rotate(0deg); transition: transform var(--trans); } } & details:not([open]) > summary { border-radius: var(--round); border-style: solid; border-width: 2px; } & details[open] { border-style: solid; border-width: 2px; & > summary { margin-bottom: var(--pad-sm); & svg { transform: rotate(45deg); } } } } }