dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1.Bookmarks {
2 display: grid;
3 gap: 20px;
4}
5
6.Bookmarks-header {
7 align-items: center;
8 display: flex;
9 flex-wrap: wrap;
10 justify-content: space-between;
11
12 & button {
13 margin-block: -9px;
14 }
15}
16
17.Bookmark {
18 border: 5px solid rgb(var(--color-black));
19 box-shadow: inset 0 0 0 4px rgb(var(--color-yellow) / 0.1);
20 border-radius: 10px;
21 border-start-start-radius: 20px;
22 border-end-end-radius: 20px;
23 corner-shape: bevel;
24 display: grid;
25 gap: 10px;
26 grid-template-columns: auto 1fr;
27 padding: 20px;
28 position: relative;
29
30 &:has(a:hover) {
31 box-shadow: inset 0 0 0 4px rgb(var(--color-yellow) / 0.5);
32 }
33
34 & > :is(h2, h3, .flex) {
35 grid-column: 1 / -1;
36 }
37
38 & > :is(h2, h3) {
39 font-size: var(--font-size-3);
40
41 & a {
42 align-items: start;
43 column-gap: 5px;
44 display: flex;
45
46 &::after {
47 content: "";
48 display: block;
49 inset: 0;
50 position: absolute;
51 }
52
53 & img {
54 block-size: 20px;
55 flex: 0 0 auto;
56 inline-size: 20px;
57 margin-block: 2px;
58 }
59 }
60 }
61
62 & > time {
63 align-self: baseline;
64 font-size: var(--font-size-2);
65 font-weight: 700;
66 grid-column: 1;
67 white-space: nowrap;
68 }
69
70 & > code {
71 align-self: baseline;
72 font-size: var(--font-size-1);
73 grid-template-columns: 2;
74 text-overflow: ellipsis;
75 opacity: 0.8;
76 overflow: hidden;
77 white-space: nowrap;
78 pointer-events: none;
79 }
80
81 & form {
82 display: contents;
83 }
84
85 & :is(button, form) {
86 z-index: 1;
87 }
88}