Attic is a cozy space with lofty ambitions.
attic.social
styles
+119
-30
+27
src/css/base/fonts.css
+27
src/css/base/fonts.css
···
1
+
@font-face {
2
+
font-family: "Quantico";
3
+
src: url("/fonts/Quantico-Regular.woff2") format("woff2");
4
+
font-display: swap;
5
+
font-weight: 400;
6
+
}
7
+
8
+
@font-face {
9
+
font-family: "Quantico";
10
+
src: url("/fonts/Quantico-Bold.woff2") format("woff2");
11
+
font-display: swap;
12
+
font-weight: 700;
13
+
}
14
+
15
+
@font-face {
16
+
font-family: "Silkscreen";
17
+
src: url("/fonts/Silkscreen-Regular.woff2") format("woff2");
18
+
font-display: block;
19
+
font-weight: 400;
20
+
}
21
+
22
+
@font-face {
23
+
font-family: "Silkscreen";
24
+
src: url("/fonts/Silkscreen-Bold.woff2") format("woff2");
25
+
font-display: block;
26
+
font-weight: 700;
27
+
}
+6
-6
src/css/base/global.css
+6
-6
src/css/base/global.css
···
1
1
html {
2
-
background: wheat;
3
-
color: black;
2
+
background: #402622;
3
+
color: #fff;
4
4
}
5
5
6
6
body {
7
-
font-family: sans-serif;
8
-
font-size: 1.125rem;
7
+
font-family: var(--font-family-1);
8
+
font-size: calc(20 / 16 * 1rem);
9
9
font-weight: 400;
10
10
font-synthesis: none;
11
11
line-height: 1.5;
···
53
53
}
54
54
55
55
:focus-visible {
56
-
outline: 2px solid magenta;
57
-
outline-offset: 2px;
56
+
outline: 4px solid magenta;
57
+
outline-offset: 4px;
58
58
}
+4
src/css/base/properties.css
+4
src/css/base/properties.css
+11
-6
src/css/base/typography.css
+11
-6
src/css/base/typography.css
···
1
-
h1 {
2
-
font-size: 2rem;
1
+
:is(h1, h2, h3) {
2
+
font-family: var(--font-family-1);
3
+
font-size: calc(30 / 16 * 1rem);
3
4
font-weight: 700;
5
+
line-height: 1.2;
4
6
}
5
7
6
-
:is(h2, h3, h4, h5, h6) {
7
-
font-size: 1.5rem;
8
-
font-weight: 700;
8
+
h1 {
9
+
font-size: calc(40 / 16 * 1rem);
9
10
}
10
11
11
12
p:has(small:read-only) {
12
-
font-size: 1rem;
13
+
font-size: calc(16 / 16 * 1rem);
14
+
}
15
+
16
+
a[href] {
17
+
color: #e6a000;
13
18
}
+21
-4
src/css/components/form.css
+21
-4
src/css/components/form.css
···
1
1
form {
2
-
background: white;
2
+
background: #ffeabc;
3
+
border: 5px solid black;
4
+
box-shadow: inset 0 0 0 4px #e6a000;
5
+
border-radius: 10px;
6
+
border-start-start-radius: 20px;
7
+
border-end-end-radius: 20px;
8
+
corner-shape: bevel;
9
+
color: #000;
3
10
display: grid;
4
11
gap: 10px;
5
12
justify-items: start;
6
-
padding: 20px;
13
+
padding: 30px;
14
+
padding-block-start: 25px;
7
15
8
16
& label {
9
17
display: block;
10
-
font-size: 1rem;
18
+
font-size: calc(20 / 16 * 1rem);
11
19
font-weight: 700;
12
20
inline-size: fit-content;
13
21
line-height: 1.5;
···
19
27
20
28
&[action*="login"] {
21
29
grid-template-columns: 1fr auto;
22
-
inline-size: min(100%, 400px);
30
+
inline-size: min(100%, 600px);
23
31
24
32
& input {
25
33
inline-size: 100%;
···
28
36
29
37
& button {
30
38
grid-column: 2 / 3;
39
+
}
40
+
}
41
+
42
+
&[action*="purge"] {
43
+
& button {
44
+
&:not(:hover) {
45
+
border-image-source: url("/images/button-danger.svg");
46
+
color: #dd2244;
47
+
}
31
48
}
32
49
}
33
50
}
+9
-5
src/css/components/input.css
+9
-5
src/css/components/input.css
···
1
-
input[type="text"] {
2
-
background: white;
3
-
border: 2px solid currentColor;
1
+
input {
2
+
/*background: white;*/
3
+
border: 15px solid transparent;
4
+
border-image: url("/images/input.svg") 15 fill stretch;
5
+
block-size: calc((22 / 16 * 1rem) + 30px);
6
+
font-family: var(--font-family-1);
7
+
font-size: calc(18 / 16 * 1rem);
4
8
font-weight: 400;
5
9
inline-size: min(100%, 300px);
6
-
line-height: 1.5;
7
-
padding: 5px 10px;
10
+
line-height: calc(22 / 16 * 1rem);
11
+
padding: 0;
8
12
}
+3
-1
src/css/main.css
+3
-1
src/css/main.css
···
1
1
@layer base, components, utility;
2
2
3
+
@import "base/fonts.css" layer(base);
3
4
@import "base/reset.css" layer(base);
4
5
@import "base/global.css" layer(base);
6
+
@import "base/properties.css" layer(base);
5
7
@import "base/typography.css" layer(base);
6
8
7
9
@import "components/button.css" layer(base);
···
21
23
grid-template-columns: var(--size) auto;
22
24
23
25
& img {
24
-
border-radius: calc(1px * infinity);
26
+
/*border-radius: calc(1px * infinity);*/
25
27
block-size: var(--size);
26
28
inline-size: var(--size);
27
29
grid-column: 1;
+5
-1
src/routes/+page.svelte
+5
-1
src/routes/+page.svelte
···
113
113
};
114
114
</script>
115
115
116
+
<svelte:head>
117
+
<title>Attic</title>
118
+
</svelte:head>
119
+
116
120
{#if data.user}
117
121
<h2>Signed in as:</h2>
118
122
<div class="avatar">
···
199
203
</ul>
200
204
{/if}
201
205
<button type="submit">Sign in</button>
202
-
<p>Suggestions provided by Bluesky.</p>
206
+
<p><small>Suggestions provided by Bluesky.</small></p>
203
207
</form>
204
208
{/if}
-3
src/routes/favicon.ico/+server.ts
-3
src/routes/favicon.ico/+server.ts
···
8
8
const response = await event.platform.env.ASSETS.fetch(
9
9
new URL("/images/favicon.ico", event.platform.env.ORIGIN),
10
10
);
11
-
// if (dev) {
12
11
const headers = new Headers(response.headers);
13
12
headers.set("Content-Type", "image/x-icon");
14
13
return new Response(response.body, { headers });
15
-
// }
16
-
// return response;
17
14
};
static/images/favicon.ico
static/images/favicon.ico
This is a binary file and will not be displayed.
+4
static/images/input.svg
+4
static/images/input.svg
···
1
+
<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2" viewBox="0 0 100 100">
2
+
<path d="M5 5h90v90H5z" style="fill:#fff"/>
3
+
<path d="M0 5h5v90H0zM5 0h90v5H5zM5 95h90v5H5zM95 5h5v90h-5z"/>
4
+
</svg>
