Attic is a cozy space with lofty ambitions. attic.social
11
fork

Configure Feed

Select the types of activity you want to include in your feed.

styles

+119 -30
+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
··· 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
··· 1 + :root { 2 + --font-family-1: "Quantico", sans-serif; 3 + --font-family-2: "Silkscreen", sans-serif; 4 + }
+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 }
+17 -4
src/css/components/button.css
··· 1 1 button { 2 - border: 2px solid currentColor; 3 - font-weight: 700; 2 + /*background: white;*/ 3 + --font-size: calc(23 / 16 * 1rem); 4 + border: 15px solid transparent; 5 + border-image: url("/images/button.svg") 15 fill stretch; 6 + block-size: calc(var(--font-size) + 30px); 7 + font-family: var(--font-family-2); 8 + font-size: var(--font-size); 9 + font-weight: 400; 4 10 inline-size: fit-content; 5 - line-height: 1.5; 6 - padding: 5px 10px; 11 + line-height: 1; 12 + padding: 0 5px; 13 + text-box: trim-both ex alphabetic; 14 + text-transform: uppercase; 15 + text-shadow: 2px 2px #40262244; 16 + transition: border-image 200ms; 17 + &:hover { 18 + border-image-source: url("/images/button-hover.svg"); 19 + } 7 20 }
+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
··· 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
··· 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
··· 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
··· 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 };
+4
static/images/button-danger.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 fill="#fff" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/> 3 + <path fill="#dd2244" d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/> 4 + </svg>
+4
static/images/button-hover.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 fill="#ffc133" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/> 3 + <path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/> 4 + </svg>
+4
static/images/button.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 fill="#fff" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/> 3 + <path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/> 4 + </svg>
static/images/favicon.ico

This is a binary file and will not be displayed.

+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>