Attic is a cozy space with lofty ambitions. attic.social
11
fork

Configure Feed

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

focus pointer

+44 -3
+1
src/app.html
··· 7 7 </head> 8 8 <body data-sveltekit-preload-data="hover"> 9 9 <attic-app>%sveltekit.body%</attic-app> 10 + <div class="pointer"></div> 10 11 </body> 11 12 </html>
+2 -1
src/css/base/global.css
··· 53 53 } 54 54 55 55 :focus-visible { 56 + anchor-name: --pointer; 56 57 outline: 4px solid magenta; 57 - outline-offset: 4px; 58 + outline-offset: 2px; 58 59 }
+9 -2
src/css/components/form.css
··· 32 32 33 33 &::before { 34 34 background: #40262233; 35 - content: "@"; 35 + content: "@" / ""; 36 36 display: grid; 37 37 place-items: center; 38 38 inline-size: 35px; ··· 41 41 inset-block-end: calc(anchor(end) + 5px); 42 42 position: fixed; 43 43 position-anchor: --handle; 44 + 45 + @supports not (inset: anchor(start)) { 46 + display: none; 47 + } 44 48 } 45 49 46 50 & > input { 47 51 inline-size: 100%; 48 52 grid-column: 1 / 2; 49 - padding-inline: 30px; 53 + 54 + @supports (inset: anchor(start)) { 55 + padding-inline: 30px; 56 + } 50 57 } 51 58 52 59 & > button {
+28
src/css/main.css
··· 15 15 font-weight: 700; 16 16 } 17 17 18 + .pointer { 19 + --size: 50px; 20 + background: url("/images/pointer.svg") center / 100% auto no-repeat; 21 + block-size: var(--size); 22 + filter: drop-shadow(2px 2px 0px #40262233); 23 + inset-block-start: calc( 24 + anchor(start) + ((0.5 * anchor-size(block) - (0.5 * var(--size)))) 25 + ); 26 + inset-inline-end: calc(anchor(start) + 5px); 27 + inline-size: var(--size); 28 + pointer-events: none; 29 + position-anchor: --pointer; 30 + position: fixed; 31 + user-select: none; 32 + 33 + @supports not (inset: anchor(start)) { 34 + display: none; 35 + } 36 + } 37 + 18 38 .avatar { 19 39 --size: 50px; 20 40 align-items: center; ··· 46 66 47 67 #handle { 48 68 anchor-name: --handle; 69 + 70 + &:focus-visible { 71 + anchor-name: --pointer, --handle; 72 + } 49 73 } 50 74 51 75 #handle-listbox { ··· 84 108 &:hover { 85 109 background: #e6a000; 86 110 } 111 + } 112 + 113 + @supports not (inset: anchor(start)) { 114 + display: none; 87 115 } 88 116 }
+4
static/images/pointer.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 100 100"> 2 + <path d="M40 35v-5h5v-5h5v-5h10v10h-5v5h-5v5h45v10H60v5h15v5H55v5h10v5H50v5h10v5h-5v5H30v-5H15v-5H5V45h10v-5h15v-5z" style="fill:#fff"/> 3 + <path d="M50 35h45v5H50zM60 50h35v5H60zM55 60h20v5H55zM50 70h15v5H50zM30 85h25v5H30zM15 80h15v5H15zM5 75h10v5H5zM5 40h10v5H5zM15 35h15v5H15zM30 30h10v5H30zM40 25h5v5h-5zM45 20h5v5h-5zM55 30h5v5h-5zM50 15h10v5H50zM60 20h5v10h-5zM95 40h5v10h-5zM75 55h5v5h-5zM65 65h5v5h-5zM0 40h5v35H0zM60 75h5v5h-5zM55 80h5v5h-5z"/> 4 + </svg>