diff --git a/.gitignore b/.gitignore index e2c970d..b36c1f4 100644 --- a/.gitignore +++ b/.gitignore @@ -17,6 +17,7 @@ !static/**/*.png !static/**/*.svg !static/**/*.txt +!static/*.webmanifest !.env.example !.gitignore !lex.config.ts diff --git a/src/app.html b/src/app.html index 9e70654..e64cf02 100644 --- a/src/app.html +++ b/src/app.html @@ -3,6 +3,9 @@ + + + %sveltekit.head% diff --git a/src/css/base/properties.css b/src/css/base/properties.css index 06131e9..7f84bd2 100644 --- a/src/css/base/properties.css +++ b/src/css/base/properties.css @@ -18,4 +18,9 @@ --color-red: 222 34 68; --app-margin: max(20px, min(5vi, 100px)); + + --input-border: url('data:image/svg+xml;utf8,'); + --button-border: url('data:image/svg+xml;utf8,'); + --button-border-hover: url('data:image/svg+xml;utf8,'); + --button-border-danger: url('data:image/svg+xml;utf8,'); } diff --git a/src/css/components/button.css b/src/css/components/button.css index 27a4aac..48036a0 100644 --- a/src/css/components/button.css +++ b/src/css/components/button.css @@ -1,6 +1,6 @@ button[type] { border: 15px solid transparent; - border-image: url("/images/button.svg") 15 fill stretch; + border-image: var(--button-border) 15 fill stretch; block-size: calc(var(--font-size-button) + 30px); color: rgb(var(--color-black)); font-family: var(--font-family-2); @@ -12,15 +12,15 @@ button[type] { text-box: trim-both ex alphabetic; text-transform: uppercase; text-shadow: 2px 2px rgb(var(--color-brown) / 0.3); - transition: border-image 200ms; + transition: border-image 100ms; &:hover { - border-image-source: url("/images/button-hover.svg"); + border-image-source: var(--button-border-hover); } &[data-danger] { &:not(:hover) { - border-image-source: url("/images/button-danger.svg"); + border-image-source: var(--button-border-danger); color: rgb(var(--color-red)); } } diff --git a/src/css/components/input.css b/src/css/components/input.css index 5a0facc..4e32f66 100644 --- a/src/css/components/input.css +++ b/src/css/components/input.css @@ -1,6 +1,6 @@ input { border: 15px solid transparent; - border-image: url("/images/input.svg") 15 fill stretch; + border-image: var(--input-border) 15 fill stretch; block-size: calc(var(--font-size-button) + 30px); color: rgb(var(--color-black)); font-family: var(--font-family-1); diff --git a/static/images/192x192.png b/static/images/192x192.png new file mode 100644 index 0000000000000000000000000000000000000000..8268e127d9a8df9817bd8412db1fd29e880ecc06 GIT binary patch literal 611 zcmeAS@N?(olHy`uVBq!ia0y~yU^oE6EX)iH3=2LLnlLah@CW#WxH_mQJzK!Aw~2Fd zvS600)Px5=W-u@?@q4;BhE&{odm}LKm4QI(L*{Qx678%%Zw&#Z{B8 zt$X=EGHS_B`OgOTyO%aMq()8yqic8b#NC8%SSB46t5I3Dpk{s>kKe=_ya`h}LRx2f zgwA+*Q0*9VsEEwObpk6FPbk#)kNqpbA)eOBDRb~mRs$oO#0QxJ`*m~or#K!Ez5QBQ zmbKy2@=O1}cFR0S-q72J z)`l;u8CV*2)Nn4(4V07Ec$SmtYW%a`Pm?QH4}>?~wc-tOxW*JCy5kh{3PyKRg_DfG z#R?`cH!%h5o4)mjNJqF7}nIOVkVcprIQ<(d*99A*L$yszT_Z)r0 zc&m9C{{rz0{#kYcR~qKZT#(xm&LGvS#y_R`8<#`%g)0pjtZVfDy$xREu=w*aAAY9r zUzzoyA0}GNJ;?f?;=3h7yaYqXA4BOCQ4G>6xE1fO`u=$_Lr|f{)_0#7!{xMEIdc~1 z`7DjJQ7~(`{jJW|Vln@L{g*Fw^xw(6ELqbqosmr~)z5BNCwuL}LVnhOCoEK}yJ`snMbquro{+r&N?`U?0>gKZ_CXOL!`%={of{PA<~nZA4n z@|ljE*EfomX}CX2m+wG$Y|ABA1_p)$uNmz8-ls53pEhkjCj(Y+#}7rg0jlsp_0@a% zwYA^=U0E&F5W48>yFkYf#)^qHjS8z6_Sj_2DVH}emt{Dt!oU07-1vK;3@+#P>u>1N zYDk=P_u1Q@p^Q1_v@cAo;l1c8+iqem>tlXy6Y?FhOXR(&{bdWDId_<#;6yxvAUgM{x!y?kQ_FKhIb5V zD{nA4)H4KambZ|LYPb;_$FqUq zf_%dirkIrIe)(CGa?8CLoPWCc=sWy$TH(yV?{KzvhET(i)(LzK+zh7TPO?lg5gaR7 zEj9=ku_{=JnOvASgqvrGgBi^T@P%iIC`1dUk*N*G+)B^g>7w(~La z>9jE1_;OG2Kx3-_gBHUoy_R=Y419ZBPYE@IGYRZI&A5Rjpj>$w^Mg2^3y;^Iotl3H zqIoIEejAW4y%^@GHguOZ?8={biP3;5U=ROG0flV>Ob3J)9G+l`B#W)7=>v8aNxeZBB7COb_0@ZKr5m)(QNJIm@*pZV{dXU~41_T*zLnFecyo7WxoKksK0;V7|W z@MickrMl(X`T3j=YTgO%yCvIjlHn=S`d7&LIt z4Bw$I$)L;p%{_)3IR|%?q5{r&ki!aRqcF~eZF>3mNZpR<>Y}e7E#Abyz~FH4xx^Kw z3QuochgA)64K9pF88Vq>F;3ERy2_x*w2M)QWePKoKkF1`oBbSHnQcS^_&@kK*f;#v ztd?ZBA(hSy2ZVV>%%|%J^Lg#rJxP{L09bjg3W+-IzX0TIB x;8d{U@?ku}lEdi2(!;nTUj1nY(cnbHf5w33r|lftG50`T@^tlcS?83{1OWO~Y-j)g literal 0 HcmV?d00001 diff --git a/static/images/button-danger.svg b/static/images/button-danger.svg index ac2a794..93a8b0c 100644 --- a/static/images/button-danger.svg +++ b/static/images/button-danger.svg @@ -1,4 +1,4 @@ - - - + + + diff --git a/static/images/button-hover.svg b/static/images/button-hover.svg index 4a235b7..9cc8f7f 100644 --- a/static/images/button-hover.svg +++ b/static/images/button-hover.svg @@ -1,4 +1,4 @@ - - + + diff --git a/static/images/button.svg b/static/images/button.svg index 0aef633..434c203 100644 --- a/static/images/button.svg +++ b/static/images/button.svg @@ -1,4 +1,4 @@ - - + + diff --git a/static/images/favicon.svg b/static/images/favicon.svg new file mode 100644 index 0000000..2c4732d --- /dev/null +++ b/static/images/favicon.svg @@ -0,0 +1,4 @@ + + + + diff --git a/static/images/input.svg b/static/images/input.svg index 67217d3..2c76114 100644 --- a/static/images/input.svg +++ b/static/images/input.svg @@ -1,4 +1,4 @@ - - + + diff --git a/static/images/pointer.svg b/static/images/pointer.svg index b77e691..001d32c 100644 --- a/static/images/pointer.svg +++ b/static/images/pointer.svg @@ -1,4 +1,4 @@ - + diff --git a/static/manifest.webmanifest b/static/manifest.webmanifest new file mode 100644 index 0000000..e044763 --- /dev/null +++ b/static/manifest.webmanifest @@ -0,0 +1,20 @@ +{ + "name": "Attic", + "short_name": "Attic", + "icons": [ + { + "src": "/images/192x192.png", + "sizes": "192x192", + "type": "image/png" + }, + { + "src": "/images/512x512.png", + "sizes": "512x512", + "type": "image/png" + } + ], + "theme_color": "#402622", + "background_color": "#402622", + "display": "standalone", + "start_url": "/" +}