dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1@layer base, components, utility;
2
3@import "base/fonts.css" layer(base);
4@import "base/reset.css" layer(base);
5@import "base/global.css" layer(base);
6@import "base/properties.css" layer(base);
7@import "base/typography.css" layer(base);
8
9@import "components/avatar.css" layer(base);
10@import "components/button.css" layer(base);
11@import "components/input.css" layer(base);
12@import "components/form.css" layer(base);
13@import "components/bookmark.css" layer(base);
14
15@import "utility/hidden.css" layer(base);
16@import "utility/flex.css" layer(base);
17
18.error {
19 color: rgb(var(--color-red));
20 font-weight: 700;
21}
22
23.pointer {
24 --size: 50px;
25 background: url("/images/pointer.svg") center / 100% auto no-repeat;
26 block-size: var(--size);
27 filter: drop-shadow(2px 2px 0px rgb(var(--color-brown) / 0.3));
28 inset-block-start: calc(
29 anchor(start) + ((0.5 * anchor-size(block) - (0.5 * var(--size))))
30 );
31 inset-inline-end: calc(anchor(start) + 5px);
32 inline-size: var(--size);
33 pointer-events: none;
34 position-anchor: --pointer;
35 position: fixed;
36 user-select: none;
37 z-index: 999;
38
39 @supports not (inset: anchor(start)) {
40 display: none;
41 }
42}
43
44#handle {
45 anchor-name: --handle;
46
47 &:focus-visible {
48 anchor-name: --pointer, --handle;
49 }
50}
51
52#handle-listbox {
53 background: rgb(var(--color-white));
54 border: 5px solid rgb(var(--color-black));
55 display: grid;
56 inline-size: anchor-size(--handle inline);
57 inset-block-start: -5px;
58 max-block-size: 230px;
59 overflow-x: hidden;
60 overflow-y: auto;
61 position: fixed;
62 position-anchor: --handle;
63 position-area: block-end center;
64 position-visibility: no-overflow;
65
66 & .Avatar {
67 --size: 40px;
68 padding: 5px 10px;
69 }
70
71 & [aria-selected="true"] {
72 background: rgb(var(--color-light-yellow));
73 }
74
75 & > p {
76 background: rgb(var(--color-brown) / 0.2);
77 color: rgb(var(--color-brown));
78 font-size: var(--font-size-1);
79 padding: 5px 10px;
80 }
81
82 & [role="option"] {
83 cursor: pointer;
84
85 &:hover {
86 background: rgb(var(--color-yellow));
87 }
88 }
89
90 @supports not (inset: anchor(start)) {
91 display: none;
92 }
93}