Attic is a cozy space with lofty ambitions.
attic.social
focus pointer
+44
-3
+1
src/app.html
+1
src/app.html
+2
-1
src/css/base/global.css
+2
-1
src/css/base/global.css
+9
-2
src/css/components/form.css
+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
+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
+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>
