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 94 details { 95 position: relative; 96 summary::marker { 97 content: url(../../assets/arrow-right.svg); 98 + { ··· 105 } 106 107 details > ul { 108 - position: absolute; 109 background-color: white; 110 border: 5px solid black; 111 border-radius: 20px; ··· 114 padding: 10px 20px; 115 width: max-content; 116 117 - /* fallback for no anchor support */ 118 - right: -20px; 119 120 - /* browser native anchor-positioning (chromium 125+ at time of writing) */ 121 - @supports (anchor-name: --supports-anchor) { 122 - right: unset; 123 - } 124 125 - /* polyfilled anchor-positioning 126 - polyfill doesnt trigger support */ 127 - @supports not (anchor-name: --supports-anchor) { 128 - [data-anchor-polyfill="loaded"] & { 129 right: unset; 130 } 131 - } 132 133 - ul { 134 - margin-left: 1em; 135 } 136 } 137
··· 93 94 details { 95 position: relative; 96 + 97 summary::marker { 98 content: url(../../assets/arrow-right.svg); 99 + { ··· 106 } 107 108 details > ul { 109 background-color: white; 110 border: 5px solid black; 111 border-radius: 20px; ··· 114 padding: 10px 20px; 115 width: max-content; 116 117 + ul { 118 + margin-left: 1em; 119 + } 120 + } 121 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; 130 131 + /* remove fallback when supported */ 132 + @supports (anchor-name: --supports-anchor) { 133 + position: fixed; 134 right: unset; 135 } 136 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; 142 } 143 } 144