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 :where(body:not(:has(:is(a[href], button):hover, :focus-visible))) & {
40 display: none;
41 }
42
43 @supports not (inset: anchor(start)) {
44 display: none;
45 }
46}
47
48#handle {
49 anchor-name: --handle;
50
51 &:focus-visible {
52 anchor-name: --pointer, --handle;
53 }
54}
55
56#handle-listbox {
57 background: rgb(var(--color-white));
58 border: 5px solid rgb(var(--color-black));
59 display: grid;
60 inline-size: anchor-size(--handle inline);
61 inset-block-start: -5px;
62 max-block-size: 230px;
63 overflow-x: hidden;
64 overflow-y: auto;
65 position: fixed;
66 position-anchor: --handle;
67 position-area: block-end center;
68 position-visibility: no-overflow;
69
70 & .Avatar {
71 --size: 40px;
72 padding: 5px 10px;
73 }
74
75 & [aria-selected="true"] {
76 background: rgb(var(--color-light-yellow));
77 }
78
79 & > p {
80 background: rgb(var(--color-brown) / 0.2);
81 color: rgb(var(--color-brown));
82 font-size: var(--font-size-1);
83 padding: 5px 10px;
84 }
85
86 & [role="option"] {
87 cursor: pointer;
88
89 &:hover {
90 background: rgb(var(--color-yellow));
91 }
92 }
93
94 @supports not (inset: anchor(start)) {
95 display: none;
96 }
97}