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 position: relative;
16
17 & label {
18 display: block;
19 font-size: var(--font-size-3);
20 font-weight: 700;
21 inline-size: fit-content;
22 line-height: var(--line-height-2);
23
24 & span {
25 font-weight: 400;
26 }
27 }
28
29 & > * {
30 grid-column: 1 / -1;
31 }
32
33 & > :is(.flex) {
34 inline-size: 100%;
35 }
36
37 :where(&[action*="editBookmark"]),
38 :where(&[action*="createBookmark"]) {
39 & input {
40 inline-size: 100%;
41 }
42
43 & div:has(input + button) {
44 display: grid;
45 inline-size: 100%;
46 gap: 10px;
47
48 & button {
49 --min-inline-size: 7ch;
50 }
51
52 & [type="url"] + button {
53 &:disabled {
54 text-decoration: line-through;
55 }
56 }
57
58 @media (width >= 600px) {
59 grid-template-columns: 1fr auto;
60 & input {
61 grid-column: 1;
62 }
63
64 & button {
65 grid-column: 2;
66 }
67 }
68 }
69 }
70
71 @media (width >= 600px) {
72 &[action*="logout"] {
73 grid-template-columns: 1fr auto;
74
75 & > * {
76 grid-column: 1 / 2;
77 }
78
79 & > button {
80 grid-column: 2;
81 grid-row: 1 / 3;
82 }
83 }
84 }
85
86 &[action*="login"] {
87 position: relative;
88
89 &::before {
90 background: rgb(var(--color-brown) / 0.2);
91 content: "@" / "";
92 display: grid;
93 place-items: center;
94 inline-size: 40px;
95 inset-inline-start: calc(anchor(start) + 5px);
96 inset-block-start: calc(anchor(start) + 5px);
97 inset-block-end: calc(anchor(end) + 5px);
98 position: fixed;
99 position-anchor: --handle;
100
101 @supports not (inset: anchor(start)) {
102 display: none;
103 }
104 }
105
106 & > input {
107 inline-size: 100%;
108
109 @supports (inset: anchor(start)) {
110 padding-inline-start: 40px;
111 }
112 }
113
114 @media (width >= 600px) {
115 grid-template-columns: 1fr auto;
116
117 & > input {
118 grid-column: 1 / 2;
119 }
120
121 & > button {
122 grid-column: 2 / 3;
123 }
124 }
125 }
126}