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

Add anchor positioning. Nav popouts will now aim to always be on screen on devices with anchor positioning

vielle.dev 554fa731 778afc0b

verified
+21 -14
unified split
+21 -14
src/components/generic/Nav.astro
··· 93 93 94 94 details { 95 95 position: relative; 96 + 96 97 summary::marker { 97 98 content: url(../../assets/arrow-right.svg); 98 99 + { ··· 105 106 } 106 107 107 108 details > ul { 108 - position: absolute; 109 109 background-color: white; 110 110 border: 5px solid black; 111 111 border-radius: 20px; ··· 114 114 padding: 10px 20px; 115 115 width: max-content; 116 116 117 - /* fallback for no anchor support */ 118 - right: -20px; 117 + ul { 118 + margin-left: 1em; 119 + } 120 + } 119 121 120 - /* browser native anchor-positioning (chromium 125+ at time of writing) */ 121 - @supports (anchor-name: --supports-anchor) { 122 - right: unset; 123 - } 122 + /* positioning */ 123 + details[open] { 124 + anchor-name: --detail-anchor; 125 + > ul { 126 + position: absolute; 127 + 128 + /* fallback for no anchor support */ 129 + right: -20px; 124 130 125 - /* polyfilled anchor-positioning 126 - polyfill doesnt trigger support */ 127 - @supports not (anchor-name: --supports-anchor) { 128 - [data-anchor-polyfill="loaded"] & { 131 + /* remove fallback when supported */ 132 + @supports (anchor-name: --supports-anchor) { 133 + position: fixed; 129 134 right: unset; 130 135 } 131 - } 132 136 133 - ul { 134 - margin-left: 1em; 137 + /* anchor positioning. all properties should progressive enhance */ 138 + position-anchor: --detail-anchor; 139 + position-area: bottom span-right; 140 + position-try-fallbacks: flip-inline; 141 + position-try: flip-inline; 135 142 } 136 143 } 137 144