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 column-gap: 20px;
47 display: flex;
48 flex-wrap: wrap;
49 row-gap: 10px;
50
51 & a {
52 display: block;
53
54 &[aria-current] {
55 &:not(:hover) {
56 color: rgb(var(--color-light-yellow));
57 }
58 }
59 }
60 }
61 }
62
63 & > footer {
64 color: rgb(var(--color-white) / 0.7);
65 margin-block-start: auto;
66 padding-block: 60px 30px;
67
68 & a {
69 color: currentColor;
70 }
71
72 & p small {
73 column-gap: 10px;
74 display: flex;
75 flex-wrap: wrap;
76 }
77 }
78
79 & > main {
80 row-gap: 30px;
81 }
82}
83
84:focus-visible {
85 outline: 4px solid magenta;
86 outline-offset: 2px;
87}
88
89:is(a[href], button) {
90 &:hover {
91 anchor-name: --pointer;
92 }
93}
94
95:where(body:not(:has(a[href]:hover, button:hover))) {
96 & :focus-visible {
97 anchor-name: --pointer;
98 }
99}
100
101dialog {
102 inline-size: 100%;
103 max-block-size: 100vb;
104 margin-inline: 0;
105 overscroll-behavior: contain;
106 padding-block: 10px;
107
108 & > form {
109 inline-size: calc(100vi - 20px);
110 margin-inline: auto;
111 }
112
113 @media (width >= 600px) {
114 padding-block: 30px;
115
116 & > form {
117 inline-size: min(min(100%, 900px), calc(100vi - (2 * var(--app-margin))));
118 }
119 }
120
121 & [command="close"] {
122 inset-block-start: 20px;
123 inset-inline-end: 0;
124 position: absolute;
125 z-index: 1;
126
127 &::before {
128 content: "×" / "";
129 }
130 }
131
132 &::backdrop {
133 background: rgb(var(--color-brown) / 0.5);
134 backdrop-filter: blur(5px);
135 }
136}