dbushell.com / attic.social
Attic is a cozy space with lofty ambitions. attic.social
fork atom

pwa assets

dbushell.com a4bb5aff 38cc460f

verified
+48 -15
unified split
+1
.gitignore
··· 17 17 !static/**/*.png 18 18 !static/**/*.svg 19 19 !static/**/*.txt 20 + !static/*.webmanifest 20 21 !.env.example 21 22 !.gitignore 22 23 !lex.config.ts
+3
src/app.html
··· 3 3 <head> 4 4 <meta charset="utf-8" /> 5 5 <meta name="viewport" content="width=device-width, initial-scale=1" /> 6 + <link rel="icon" sizes="32x32" href="/favicon.ico" /> 7 + <link rel="icon" type="image/svg+xml" href="/images/favicon.svg" /> 8 + <link rel="manifest" href="/manifest.webmanifest" /> 6 9 %sveltekit.head% 7 10 </head> 8 11 <body data-sveltekit-preload-data="hover">
+5
src/css/base/properties.css
··· 18 18 --color-red: 222 34 68; 19 19 20 20 --app-margin: max(20px, min(5vi, 100px)); 21 + 22 + --input-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M5 5h90v90H5z"/><path d="M0 5h5v90H0zM5 0h90v5H5zM5 95h90v5H5zM95 5h5v90h-5z"/></svg>'); 23 + --button-border: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>'); 24 + --button-border-hover: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 190 50)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>'); 25 + --button-border-danger: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/><path fill="rgb(222 34 68)" d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/></svg>'); 21 26 }
+4 -4
src/css/components/button.css
··· 1 1 button[type] { 2 2 border: 15px solid transparent; 3 - border-image: url("/images/button.svg") 15 fill stretch; 3 + border-image: var(--button-border) 15 fill stretch; 4 4 block-size: calc(var(--font-size-button) + 30px); 5 5 color: rgb(var(--color-black)); 6 6 font-family: var(--font-family-2); ··· 12 12 text-box: trim-both ex alphabetic; 13 13 text-transform: uppercase; 14 14 text-shadow: 2px 2px rgb(var(--color-brown) / 0.3); 15 - transition: border-image 200ms; 15 + transition: border-image 100ms; 16 16 17 17 &:hover { 18 - border-image-source: url("/images/button-hover.svg"); 18 + border-image-source: var(--button-border-hover); 19 19 } 20 20 21 21 &[data-danger] { 22 22 &:not(:hover) { 23 - border-image-source: url("/images/button-danger.svg"); 23 + border-image-source: var(--button-border-danger); 24 24 color: rgb(var(--color-red)); 25 25 } 26 26 }
+1 -1
src/css/components/input.css
··· 1 1 input { 2 2 border: 15px solid transparent; 3 - border-image: url("/images/input.svg") 15 fill stretch; 3 + border-image: var(--input-border) 15 fill stretch; 4 4 block-size: calc(var(--font-size-button) + 30px); 5 5 color: rgb(var(--color-black)); 6 6 font-family: var(--font-family-1);
static/images/192x192.png

This is a binary file and will not be displayed.

static/images/512x512.png

This is a binary file and will not be displayed.

+3 -3
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"/> 1 + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> 2 + <path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/> 3 + <path fill="rgb(222 34 68)" d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/> 4 4 </svg>
+2 -2
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"/> 1 + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> 2 + <path fill="rgb(255 190 50)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/> 3 3 <path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/> 4 4 </svg>
+2 -2
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"/> 1 + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> 2 + <path fill="rgb(255 255 255)" d="M10 90H5V10h5V5h80v5h5v80h-5v5H10z"/> 3 3 <path d="M5 5h5v5H5zM0 10h5v80H0zM10 0h80v5H10zM10 95h80v5H10zM90 5h5v5h-5zM5 90h5v5H5zM90 90h5v5h-5zM95 10h5v80h-5z"/> 4 4 </svg>
+4
static/images/favicon.svg
··· 1 + <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 512 512"> 2 + <path fill="rgb(64 38 34)" d="M0 0h512v512H0z"/> 3 + <path fill="rgb(230 160 0)" d="M375.6 425.2H136.4L90 398.4V113.6l46.4-26.8h239.2l46.4 26.8v213.6L375.6 354H308l-26.4-16.4-30.4 16.4h-40.4l-43.6-26.8 15.6-146.4L232 154h40.4l26.4 16.4 30.4-16.4h10.4L322 322h64V118.8H126v274.4h249.6zM220.8 188.8l-14 130.4h76.4l14-130.4z"/> 4 + </svg>
+2 -2
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"/> 1 + <svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"> 2 + <path fill="rgb(255 255 255)" d="M5 5h90v90H5z"/> 3 3 <path d="M0 5h5v90H0zM5 0h90v5H5zM5 95h90v5H5zM95 5h5v90h-5z"/> 4 4 </svg>
+1 -1
static/images/pointer.svg
··· 1 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="M40 35v-5h5v-5h5v-5h10v10h-5v5h-5v5h45v10H60v5h15v5H55v5h10v5H50v5h10v5h-5v5H30v-5H15v-5H5V45h10v-5h15v-5z" style="fill:#fff"/> 2 + <path fill="rgb(255 255 255)" d="M40 35v-5h5v-5h5v-5h10v10h-5v5h-5v5h45v10H60v5h15v5H55v5h10v5H50v5h10v5h-5v5H30v-5H15v-5H5V45h10v-5h15v-5z"/> 3 3 <path d="M50 35h45v5H50zM60 50h35v5H60zM55 60h20v5H55zM50 70h15v5H50zM30 85h25v5H30zM15 80h15v5H15zM5 75h10v5H5zM5 40h10v5H5zM15 35h15v5H15zM30 30h10v5H30zM40 25h5v5h-5zM45 20h5v5h-5zM55 30h5v5h-5zM50 15h10v5H50zM60 20h5v10h-5zM95 40h5v10h-5zM75 55h5v5h-5zM65 65h5v5h-5zM0 40h5v35H0zM60 75h5v5h-5zM55 80h5v5h-5z"/> 4 4 </svg>
+20
static/manifest.webmanifest
··· 1 + { 2 + "name": "Attic", 3 + "short_name": "Attic", 4 + "icons": [ 5 + { 6 + "src": "/images/192x192.png", 7 + "sizes": "192x192", 8 + "type": "image/png" 9 + }, 10 + { 11 + "src": "/images/512x512.png", 12 + "sizes": "512x512", 13 + "type": "image/png" 14 + } 15 + ], 16 + "theme_color": "#402622", 17 + "background_color": "#402622", 18 + "display": "standalone", 19 + "start_url": "/" 20 + }