dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1html {
2 background: rgb(var(--color-brown));
3 color: rgb(var(--color-white));
4 scrollbar-color: rgb(var(--color-yellow)) rgb(var(--color-brown));
5}
6
7body {
8 font-family: var(--font-family-1);
9 font-size: var(--font-size-3);
10 font-weight: 400;
11 font-synthesis: none;
12 line-height: var(--line-height-2);
13 min-block-size: 100svb;
14}
15
16attic-app {
17 display: flex;
18 flex-direction: column;
19 justify-content: start;
20 min-block-size: 100svb;
21
22 & > :is(header, footer, main) {
23 display: grid;
24 grid-template-columns:
25 [full-start]
26 1fr
27 [margin-start]
28 var(--app-margin)
29 [main-start]
30 minmax(260px, calc((900 / 16) * 1rem))
31 [main-end]
32 var(--app-margin)
33 [margin-end]
34 1fr
35 [full-end];
36
37 & > * {
38 grid-column: main;
39 }
40 }
41
42 & > header {
43 padding-block: 30px;
44
45 & > nav {
46 display: flex;
47 flex-wrap: wrap;
48 gap: 20px;
49
50 & a {
51 display: block;
52 }
53 }
54 }
55
56 & > footer {
57 color: rgb(var(--color-white) / 0.7);
58 margin-block-start: auto;
59 padding-block: 60px 30px;
60
61 & a {
62 color: currentColor;
63 }
64
65 & p small {
66 column-gap: 10px;
67 display: flex;
68 flex-wrap: wrap;
69 }
70 }
71
72 & > main {
73 row-gap: 30px;
74 }
75}
76
77:focus-visible {
78 outline: 4px solid magenta;
79 outline-offset: 2px;
80}
81
82:is(a[href], button) {
83 &:hover {
84 anchor-name: --pointer;
85 }
86}
87
88:where(body:not(:has(a[href]:hover, button:hover))) {
89 & :focus-visible {
90 anchor-name: --pointer;
91 }
92}
93
94dialog {
95 inline-size: min(min(100%, 900px), calc(100vi - (2 * var(--app-margin))));
96
97 & [command="close"] {
98 inset-block-start: 20px;
99 inset-inline-end: 20px;
100 position: absolute;
101 z-index: 1;
102
103 &::before {
104 content: "×" / "";
105 }
106 }
107
108 &::backdrop {
109 background: rgb(var(--color-brown) / 0.5);
110 backdrop-filter: blur(5px);
111 }
112}