vielle.dev / site-archive
this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

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

afterlifepro 554fa731 778afc0b

+21 -14
+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