dbushell.com
Attic is a cozy space with lofty ambitions.
attic.social
1form {
2 background: rgb(var(--color-off-white));
3 border: 5px solid rgb(var(--color-black));
4 box-shadow: inset 0 0 0 4px rgb(var(--color-yellow));
5 border-radius: 10px;
6 border-start-start-radius: 20px;
7 border-end-end-radius: 20px;
8 corner-shape: bevel;
9 color: rgb(var(--color-black));
10 display: grid;
11 gap: 10px;
12 justify-items: start;
13 padding: 30px;
14 padding-block-start: 25px;
15
16 & label {
17 display: block;
18 font-size: var(--font-size-3);
19 font-weight: 700;
20 inline-size: fit-content;
21 line-height: var(--line-height-2);
22 }
23
24 & > * {
25 grid-column: 1 / -1;
26 }
27
28 & > :is(.flex) {
29 inline-size: 100%;
30 }
31
32 &[action*="editBookmark"] {
33 & input {
34 inline-size: 100%;
35 }
36 }
37
38 &[action*="createBookmark"] {
39 & input {
40 inline-size: 100%;
41 }
42
43 & div:has(input[name="title"]) {
44 display: grid;
45 inline-size: 100%;
46 grid-template-columns: 1fr auto;
47 gap: 10px;
48
49 & input {
50 grid-column: 1;
51 }
52 }
53 }
54
55 @media (width >= 600px) {
56 &[action*="logout"] {
57 grid-template-columns: 1fr auto;
58
59 & > * {
60 grid-column: 1 / 2;
61 }
62
63 & > button {
64 grid-column: 2;
65 grid-row: 1 / 3;
66 }
67 }
68 }
69
70 &[action*="login"] {
71 position: relative;
72
73 &::before {
74 background: rgb(var(--color-brown) / 0.2);
75 content: "@" / "";
76 display: grid;
77 place-items: center;
78 inline-size: 40px;
79 inset-inline-start: calc(anchor(start) + 5px);
80 inset-block-start: calc(anchor(start) + 5px);
81 inset-block-end: calc(anchor(end) + 5px);
82 position: fixed;
83 position-anchor: --handle;
84
85 @supports not (inset: anchor(start)) {
86 display: none;
87 }
88 }
89
90 & > input {
91 inline-size: 100%;
92
93 @supports (inset: anchor(start)) {
94 padding-inline-start: 40px;
95 }
96 }
97
98 @media (width >= 600px) {
99 grid-template-columns: 1fr auto;
100
101 & > input {
102 grid-column: 1 / 2;
103 }
104
105 & > button {
106 grid-column: 2 / 3;
107 }
108 }
109 }
110}