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 margin-block-end: 10px;
12 row-gap: 20px;
13
14 & > button {
15 margin-block: -9px;
16 }
17
18 & > div:has(button, .Button) {
19 margin-block: -9px;
20 }
21}
22
23.Bookmark {
24 border: 5px solid rgb(var(--color-black));
25 box-shadow: inset 0 0 0 4px rgb(var(--color-yellow) / 0.1);
26 border-radius: 10px;
27 border-start-start-radius: 20px;
28 border-end-end-radius: 20px;
29 corner-shape: bevel;
30 display: grid;
31 gap: 10px;
32 grid-template-columns: auto 1fr;
33 padding: 20px;
34 position: relative;
35
36 &:has(a:hover) {
37 box-shadow: inset 0 0 0 4px rgb(var(--color-yellow) / 0.5);
38 }
39
40 & > :is(h2, h3) {
41 font-size: var(--font-size-3);
42 grid-column: 1 / -1;
43
44 &:has(button) {
45 align-items: start;
46 grid-template-columns: 1fr auto;
47 display: grid;
48 gap: 10px;
49 }
50
51 & a {
52 align-items: start;
53 column-gap: 10px;
54 display: flex;
55
56 &::after {
57 content: "";
58 display: block;
59 inset: 0;
60 position: absolute;
61 }
62
63 & img {
64 block-size: 20px;
65 flex: 0 0 auto;
66 inline-size: 20px;
67 margin-block: 2px;
68 }
69 }
70 }
71
72 & > time {
73 align-self: baseline;
74 font-size: var(--font-size-2);
75 font-weight: 700;
76 grid-column: 1;
77 white-space: nowrap;
78 }
79
80 & > code {
81 align-self: baseline;
82 font-size: var(--font-size-1);
83 grid-column: 2;
84 text-overflow: ellipsis;
85 opacity: 0.8;
86 overflow: hidden;
87 white-space: nowrap;
88 pointer-events: none;
89 }
90
91 & form {
92 display: contents;
93 z-index: 1;
94 }
95
96 & button {
97 margin-block: -10px;
98 margin-inline-end: -10px;
99 z-index: 1;
100 }
101
102 & ul {
103 display: flex;
104 flex-wrap: wrap;
105 gap: 5px;
106 grid-column: 1 / -1;
107
108 & li {
109 background: rgb(var(--color-yellow));
110 color: rgb(var(--color-black));
111 font-size: var(--font-size-1);
112 font-weight: 700;
113 display: block;
114 line-height: 1;
115 min-inline-size: 0;
116 padding: 5px;
117 }
118 }
119}