vielle.dev / site-archive
[Archived] Archived WIP of vielle.dev
fork atom

Make popouts actually pop out instead of breaking the page

Note: currently with `position: absolute` the Projects dropdown (and potentially others if content text gets too long) overflow the viewport

vielle.dev 301cc2db 2714e18b

verified
+28 -3
unified split
+28 -3
src/components/generic/Nav.astro
··· 66 66 padding: 10px 40px; 67 67 } 68 68 69 - ul { 69 + header > ul { 70 70 display: flex; 71 71 flex-direction: row; 72 72 align-items: center; ··· 92 92 } 93 93 94 94 details { 95 - ::marker { 95 + position: relative; 96 + > ul { 97 + position: absolute; 98 + background-color: white; 99 + } 100 + 101 + summary::marker { 96 102 content: url(../../assets/arrow-right.svg); 103 + + { 104 + margin-left: 5px; 105 + } 97 106 } 98 - &:open ::marker { 107 + &[open] > summary::marker { 99 108 content: url(../../assets/arrow-down.svg); 109 + } 110 + } 111 + 112 + details > ul { 113 + padding: 10px 20px; 114 + width: max-content; 115 + border: 5px solid black; 116 + border-radius: 20px; 117 + box-shadow: 0 10px; 118 + 119 + ul { 120 + margin-left: 1em; 121 + } 122 + 123 + summary::marker + * { 124 + margin-left: 0; 100 125 } 101 126 } 102 127