+5 -5

src/components/generic/Nav.astro

reviewed

··· 19 19 <dialog closedby="any" open={startOpen} id="nav" popover> 20 20 <div class="top"> 21 21 <h1>{current}</h1> 22 22 - <button popovertarget="nav" popovertargetaction="hide" aria-label="close" 23 23 - ><X width={32} height={32} role="img" /></button 24 24 - > 22 22 + <button popovertarget="nav" popovertargetaction="hide" aria-label="close"> 23 23 + <X width={32} height={32} role="img" /> 24 24 + </button> 25 25 </div> 26 26 - {(<NavEntry {data} />)} 26 26 + <NavEntry {data} /> 27 27 </dialog> 28 28 29 29 <style> ··· 72 72 } 73 73 } 74 74 75 75 - /* STUPID ISSUE */ 75 75 + /* STUPID ISSUE (astro tries to add a tag to the backdrop) */ 76 76 :global(::backdrop) { 77 77 background: #00000080; 78 78 backdrop-filter: blur(0.5rem);

+32 -9

src/components/generic/NavEntry.astro

reviewed

··· 26 26 li { 27 27 list-style-type: "╺ "; 28 28 margin-inline-start: 4rem; 29 29 + } 29 30 30 30 - &:has(details) { 31 31 - list-style-type: "🞂 "; 32 32 - background-color: transparent; 31 31 + a:link { 32 32 + color: #0000ff; 33 33 + } 34 34 + 35 35 + a:visited { 36 36 + color: #ff00ff; 37 37 + } 38 38 + 39 39 + a:focus, 40 40 + a:hover { 41 41 + text-decoration: none; 42 42 + color: #4040ff 43 43 + 44 44 + &:visited { 45 45 + color: #ff40ff; 46 46 + } 47 47 + } 48 48 + 49 49 + a:focus { 50 50 + outline: 0.2rem solid #0000ff; 51 51 + outline-offset: 0; 52 52 + border-radius: 0.4rem; 33 53 34 34 - & summary { 35 35 - display: block; 36 36 - background-color: var(--bg); 37 37 - } 54 54 + &:visited { 55 55 + outline-color: #ff00ff; 38 56 } 57 57 + } 39 58 40 40 - &:has(details:open) { 41 41 - list-style-type: "🞃 "; 59 59 + a:active { 60 60 + text-decoration: none; 61 61 + color: #8080ff; 62 62 + 63 63 + &:visited { 64 64 + color: #ff80ff; 42 65 } 43 66 } 44 67 </style>