Attic is a cozy space with lofty ambitions.
attic.social
style tweaks
+50
-40
+2
-1
src/css/base/global.css
+2
-1
src/css/base/global.css
···
1
1
html {
2
2
background: rgb(var(--color-brown));
3
3
color: rgb(var(--color-white));
4
+
scrollbar-color: rgb(var(--color-yellow)) rgb(var(--color-brown));
4
5
}
5
6
6
7
body {
···
8
9
font-size: var(--font-size-3);
9
10
font-weight: 400;
10
11
font-synthesis: none;
11
-
line-height: 1.5;
12
+
line-height: var(--line-height-2);
12
13
min-block-size: 100svb;
13
14
}
14
15
+3
src/css/base/properties.css
+3
src/css/base/properties.css
+29
src/css/components/avatar.css
+29
src/css/components/avatar.css
···
1
+
.Avatar {
2
+
--size: 50px;
3
+
align-items: center;
4
+
display: grid;
5
+
column-gap: 10px;
6
+
grid-template-columns: var(--size) auto;
7
+
8
+
& img {
9
+
border: 2px solid rgb(var(--color-black));
10
+
block-size: var(--size);
11
+
inline-size: var(--size);
12
+
grid-column: 1;
13
+
grid-row: 1 / 5;
14
+
}
15
+
16
+
& p {
17
+
font-size: var(--font-size-3);
18
+
font-weight: 700;
19
+
grid-column: 2;
20
+
grid-row: 2;
21
+
line-height: var(--line-height-1);
22
+
23
+
& + & {
24
+
font-size: var(--font-size-2);
25
+
font-weight: 400;
26
+
grid-row: 3;
27
+
}
28
+
}
29
+
}
+11
-6
src/css/components/form.css
+11
-6
src/css/components/form.css
···
18
18
font-size: var(--font-size-3);
19
19
font-weight: 700;
20
20
inline-size: fit-content;
21
-
line-height: 1.5;
21
+
line-height: var(--line-height-2);
22
22
}
23
23
24
24
& > * {
···
52
52
}
53
53
54
54
&[action*="login"] {
55
-
grid-template-columns: 1fr auto;
56
-
/*inline-size: min(100%, 600px);*/
57
55
position: relative;
58
56
59
57
&::before {
···
75
73
76
74
& > input {
77
75
inline-size: 100%;
78
-
grid-column: 1 / 2;
79
76
80
77
@supports (inset: anchor(start)) {
81
78
padding-inline-start: 40px;
82
79
}
83
80
}
84
81
85
-
& > button {
86
-
grid-column: 2 / 3;
82
+
@media (width >= 600px) {
83
+
grid-template-columns: 1fr auto;
84
+
85
+
& > input {
86
+
grid-column: 1 / 2;
87
+
}
88
+
89
+
& > button {
90
+
grid-column: 2 / 3;
91
+
}
87
92
}
88
93
}
89
94
}
+1
-1
src/css/components/input.css
+1
-1
src/css/components/input.css
+2
-30
src/css/main.css
+2
-30
src/css/main.css
···
6
6
@import "base/properties.css" layer(base);
7
7
@import "base/typography.css" layer(base);
8
8
9
+
@import "components/avatar.css" layer(base);
9
10
@import "components/button.css" layer(base);
10
11
@import "components/input.css" layer(base);
11
12
@import "components/form.css" layer(base);
···
40
41
}
41
42
}
42
43
43
-
.avatar {
44
-
--size: 50px;
45
-
align-items: center;
46
-
display: grid;
47
-
column-gap: 10px;
48
-
grid-template-columns: var(--size) auto;
49
-
50
-
& img {
51
-
block-size: var(--size);
52
-
inline-size: var(--size);
53
-
grid-column: 1;
54
-
grid-row: 1 / 5;
55
-
}
56
-
57
-
& p {
58
-
font-size: var(--font-size-3);
59
-
font-weight: 700;
60
-
grid-column: 2;
61
-
grid-row: 2;
62
-
line-height: 1.25;
63
-
64
-
& + & {
65
-
font-size: var(--font-size-2);
66
-
font-weight: 400;
67
-
grid-row: 3;
68
-
}
69
-
}
70
-
}
71
-
72
44
#handle {
73
45
anchor-name: --handle;
74
46
···
91
63
position-area: block-end center;
92
64
position-visibility: no-overflow;
93
65
94
-
& .avatar {
66
+
& .Avatar {
95
67
--size: 40px;
96
68
padding: 5px 10px;
97
69
}
+2
-2
src/routes/+page.svelte
+2
-2
src/routes/+page.svelte
···
144
144
{#if data.user}
145
145
<form method="POST" action="?/logout">
146
146
<h2>Signed in as:</h2>
147
-
<div class="avatar">
147
+
<div class="Avatar">
148
148
<img alt="avatar" src="/avatar/{data.user.did}" width="50" height="50" />
149
149
<p>{data.user.displayName}</p>
150
150
<p>@{data.user.handle}</p>
···
213
213
<p><small>Suggestions provided by Bluesky.</small></p>
214
214
{#each bskyUsers as user (user.did)}
215
215
<button
216
-
class="avatar"
216
+
class="Avatar"
217
217
role="option"
218
218
tabindex="-1"
219
219
aria-selected={activeOption &&