diff --git a/fontsource/SOAUI_20230717.txt b/fontsource/SOAUI_20230717.txt new file mode 100644 index 0000000..b066f82 --- /dev/null +++ b/fontsource/SOAUI_20230717.txt @@ -0,0 +1 @@ +{"33":[0,0,0,0,0,4,4,4,4,4,0,4,0,0,0,0],"34":[0,0,0,0,12,12,8,4,0,0,0,0,0,0,0,0],"37":[0,0,0,0,0,0,64,44,28,112,104,4,0,0,0,0],"39":[0,0,0,0,12,12,8,4,0,0,0,0,0,0,0,0],"40":[0,0,0,0,0,16,8,4,4,4,8,16,0,0,0,0],"41":[0,0,0,0,0,4,8,16,16,16,8,4,0,0,0,0],"42":[0,0,0,0,0,0,16,84,56,84,16,0,0,0,0,0],"43":[0,0,0,0,0,0,16,16,124,16,16,0,0,0,0,0],"44":[0,0,0,0,0,0,0,0,0,12,12,8,4,0,0,0],"45":[0,0,0,0,0,0,0,0,124,0,0,0,0,0,0,0],"46":[0,0,0,0,0,0,0,0,0,0,12,12,0,0,0,0],"47":[0,0,0,0,0,0,32,16,16,8,4,4,0,0,0,0],"48":[0,0,0,0,0,16,40,68,68,68,40,16,0,0,0,0],"49":[0,0,0,0,0,8,12,8,8,8,8,28,0,0,0,0],"50":[0,0,0,0,0,56,68,64,56,4,4,124,0,0,0,0],"51":[0,0,0,0,0,56,68,64,48,64,68,56,0,0,0,0],"52":[0,0,0,0,0,48,40,40,36,124,32,32,0,0,0,0],"53":[0,0,0,0,0,124,4,4,60,64,68,56,0,0,0,0],"54":[0,0,0,0,0,56,68,4,60,68,68,56,0,0,0,0],"55":[0,0,0,0,0,124,64,64,32,16,16,16,0,0,0,0],"56":[0,0,0,0,0,56,68,68,56,68,68,56,0,0,0,0],"57":[0,0,0,0,0,56,68,68,120,64,68,56,0,0,0,0],"58":[0,0,0,0,0,0,12,12,0,12,12,0,0,0,0,0],"59":[0,0,0,0,0,0,12,12,0,12,12,8,4,0,0,0],"60":[0,0,0,0,0,32,16,8,4,8,16,32,0,0,0,0],"61":[0,0,0,0,0,0,0,124,0,124,0,0,0,0,0,0],"62":[0,0,0,0,0,4,8,16,32,16,8,4,0,0,0,0],"63":[0,0,0,0,0,56,68,68,32,16,0,16,0,0,0,0],"64":[0,0,0,0,0,56,68,116,44,124,68,56,0,0,0,0],"65":[0,0,0,0,0,56,68,68,124,68,68,68,0,0,0,0],"66":[0,0,0,0,0,60,68,68,60,68,68,60,0,0,0,0],"67":[0,0,0,0,0,56,68,4,4,4,68,56,0,0,0,0],"68":[0,0,0,0,0,28,36,68,68,68,36,28,0,0,0,0],"69":[0,0,0,0,0,124,4,4,60,4,4,124,0,0,0,0],"70":[0,0,0,0,0,124,4,4,60,4,4,4,0,0,0,0],"71":[0,0,0,0,0,56,68,4,100,68,68,56,0,0,0,0],"72":[0,0,0,0,0,68,68,68,124,68,68,68,0,0,0,0],"73":[0,0,0,0,0,28,8,8,8,8,8,28,0,0,0,0],"74":[0,0,0,0,0,64,64,64,64,64,68,56,0,0,0,0],"75":[0,0,0,0,0,68,36,20,28,36,68,68,0,0,0,0],"76":[0,0,0,0,0,4,4,4,4,4,4,124,0,0,0,0],"77":[0,0,0,0,0,68,68,108,108,124,84,84,0,0,0,0],"78":[0,0,0,0,0,68,76,84,84,100,68,68,0,0,0,0],"79":[0,0,0,0,0,56,68,68,68,68,68,56,0,0,0,0],"80":[0,0,0,0,0,60,68,68,60,4,4,4,0,0,0,0],"81":[0,0,0,0,0,56,68,68,68,92,36,120,0,0,0,0],"82":[0,0,0,0,0,60,68,68,60,68,68,68,0,0,0,0],"83":[0,0,0,0,0,56,68,4,56,64,68,56,0,0,0,0],"84":[0,0,0,0,0,124,16,16,16,16,16,16,0,0,0,0],"85":[0,0,0,0,0,68,68,68,68,68,68,56,0,0,0,0],"86":[0,0,0,0,0,68,68,68,40,40,16,16,0,0,0,0],"87":[0,0,0,0,0,68,84,84,84,40,40,40,0,0,0,0],"88":[0,0,0,0,0,68,40,40,16,40,40,68,0,0,0,0],"89":[0,0,0,0,0,68,68,40,16,16,16,16,0,0,0,0],"90":[0,0,0,0,0,124,64,32,16,8,4,124,0,0,0,0],"92":[0,0,0,0,0,0,4,4,8,16,16,32,0,0,0,0],"97":[0,0,0,0,0,0,0,56,64,120,68,120,0,0,0,0],"98":[0,0,0,0,0,4,4,4,60,68,68,60,0,0,0,0],"99":[0,0,0,0,0,0,0,56,68,4,68,56,0,0,0,0],"100":[0,0,0,0,0,64,64,64,120,68,68,120,0,0,0,0],"101":[0,0,0,0,0,0,0,56,68,124,4,120,0,0,0,0],"102":[0,0,0,0,0,96,16,124,16,16,16,16,0,0,0,0],"103":[0,0,0,0,0,0,0,120,68,68,120,64,60,0,0,0],"104":[0,0,0,0,0,4,4,4,60,68,68,68,0,0,0,0],"105":[0,0,0,0,0,0,4,0,4,4,4,4,0,0,0,0],"106":[0,0,0,0,0,0,64,0,64,64,64,68,56,0,0,0],"107":[0,0,0,0,0,4,4,68,36,28,36,68,0,0,0,0],"108":[0,0,0,0,0,4,4,4,4,4,4,4,0,0,0,0],"109":[0,0,0,0,0,0,0,60,84,84,84,84,0,0,0,0],"110":[0,0,0,0,0,0,0,60,68,68,68,68,0,0,0,0],"111":[0,0,0,0,0,0,0,56,68,68,68,56,0,0,0,0],"112":[0,0,0,0,0,0,0,60,68,68,60,4,4,0,0,0],"113":[0,0,0,0,0,0,0,120,68,68,120,64,64,0,0,0],"114":[0,0,0,0,0,0,0,116,12,12,4,4,0,0,0,0],"115":[0,0,0,0,0,0,0,120,4,56,64,60,0,0,0,0],"116":[0,0,0,0,0,0,16,124,16,16,16,96,0,0,0,0],"117":[0,0,0,0,0,0,0,68,68,68,68,120,0,0,0,0],"118":[0,0,0,0,0,0,0,68,68,40,40,16,0,0,0,0],"119":[0,0,0,0,0,0,0,68,84,84,40,40,0,0,0,0],"120":[0,0,0,0,0,0,0,68,40,16,40,68,0,0,0,0],"121":[0,0,0,0,0,0,0,68,68,68,120,64,60,0,0,0],"122":[0,0,0,0,0,0,0,124,64,56,4,124,0,0,0,0],"126":[0,0,0,0,0,0,0,152,100,0,0,0,0,0,0,0],"161":[0,0,0,0,0,4,0,4,4,4,4,4,0,0,0,0],"171":[0,0,0,0,0,0,144,72,36,72,144,0,0,0,0,0],"183":[0,0,0,0,0,0,0,0,4,0,0,0,0,0,0,0],"187":[0,0,0,0,0,0,36,72,144,72,36,0,0,0,0,0],"191":[0,0,0,0,0,16,0,16,8,68,68,56,0,0,0,0],"192":[0,0,8,16,0,56,68,68,124,68,68,68,0,0,0,0],"193":[0,0,32,16,0,56,68,68,124,68,68,68,0,0,0,0],"194":[0,0,16,40,0,56,68,68,124,68,68,68,0,0,0,0],"195":[0,0,88,36,0,56,68,68,124,68,68,68,0,0,0,0],"196":[0,0,40,0,0,56,68,68,124,68,68,68,0,0,0,0],"197":[0,0,56,68,68,56,68,68,124,68,68,68,0,0,0,0],"200":[0,0,8,16,0,124,4,4,60,4,4,124,0,0,0,0],"201":[0,0,32,16,0,124,4,4,60,4,4,124,0,0,0,0],"202":[0,0,16,40,0,124,4,4,60,4,4,124,0,0,0,0],"203":[0,0,40,0,0,124,4,4,60,4,4,124,0,0,0,0],"204":[0,0,4,8,0,28,8,8,8,8,8,28,0,0,0,0],"205":[0,0,16,8,0,28,8,8,8,8,8,28,0,0,0,0],"206":[0,0,8,20,0,28,8,8,8,8,8,28,0,0,0,0],"207":[0,0,20,0,0,28,8,8,8,8,8,28,0,0,0,0],"210":[0,0,8,16,0,56,68,68,68,68,68,56,0,0,0,0],"211":[0,0,32,16,0,56,68,68,68,68,68,56,0,0,0,0],"212":[0,0,16,40,0,56,68,68,68,68,68,56,0,0,0,0],"213":[0,0,88,36,0,56,68,68,68,68,68,56,0,0,0,0],"214":[0,0,40,0,0,56,68,68,68,68,68,56,0,0,0,0],"217":[0,0,8,16,0,68,68,68,68,68,68,56,0,0,0,0],"218":[0,0,32,16,0,68,68,68,68,68,68,56,0,0,0,0],"219":[0,0,16,40,0,68,68,68,68,68,68,56,0,0,0,0],"220":[0,0,40,0,0,68,68,68,68,68,68,56,0,0,0,0],"224":[0,0,0,0,8,16,0,56,64,120,68,120,0,0,0,0],"225":[0,0,0,0,32,16,0,56,64,120,68,120,0,0,0,0],"226":[0,0,0,0,16,40,0,56,64,120,68,120,0,0,0,0],"227":[0,0,0,0,88,36,0,56,64,120,68,120,0,0,0,0],"228":[0,0,0,0,40,0,0,56,64,120,68,120,0,0,0,0],"229":[0,0,0,0,16,40,16,56,64,120,68,120,0,0,0,0],"232":[0,0,0,0,8,16,0,56,68,124,4,120,0,0,0,0],"233":[0,0,0,0,32,16,0,56,68,124,4,120,0,0,0,0],"234":[0,0,0,0,16,40,0,56,68,124,4,120,0,0,0,0],"235":[0,0,0,0,40,0,0,56,68,124,4,120,0,0,0,0],"236":[0,0,0,0,4,8,0,0,8,8,8,8,0,0,0,0],"237":[0,0,0,0,8,4,0,0,4,4,4,4,0,0,0,0],"238":[0,0,0,0,8,20,0,0,8,8,8,8,0,0,0,0],"239":[0,0,0,0,20,0,0,0,8,8,8,8,0,0,0,0],"241":[0,0,0,0,88,36,0,60,68,68,68,68,0,0,0,0],"242":[0,0,0,0,8,16,0,56,68,68,68,56,0,0,0,0],"243":[0,0,0,0,32,16,0,56,68,68,68,56,0,0,0,0],"244":[0,0,0,0,16,40,0,56,68,68,68,56,0,0,0,0],"245":[0,0,0,0,88,36,0,56,68,68,68,56,0,0,0,0],"246":[0,0,0,0,40,0,0,56,68,68,68,56,0,0,0,0],"249":[0,0,0,0,8,16,0,68,68,68,68,120,0,0,0,0],"250":[0,0,0,0,32,16,0,68,68,68,68,120,0,0,0,0],"251":[0,0,0,0,16,40,0,68,68,68,68,120,0,0,0,0],"252":[0,0,0,0,40,0,0,68,68,68,68,120,0,0,0,0],"253":[0,0,0,0,32,16,0,68,68,68,120,64,60,0,0,0],"256":[0,0,56,0,0,56,68,68,124,68,68,68,0,0,0,0],"257":[0,0,0,0,56,0,0,56,64,120,68,120,0,0,0,0],"258":[0,0,40,56,0,56,68,68,124,68,68,68,0,0,0,0],"259":[0,0,0,0,40,56,0,56,64,120,68,120,0,0,0,0],"274":[0,0,56,0,0,124,4,4,60,4,4,124,0,0,0,0],"275":[0,0,0,0,56,0,0,56,68,124,4,120,0,0,0,0],"276":[0,0,40,56,0,124,4,4,60,4,4,124,0,0,0,0],"277":[0,0,0,0,40,56,0,56,68,124,4,120,0,0,0,0],"278":[0,0,16,0,0,124,4,4,60,4,4,124,0,0,0,0],"279":[0,0,0,0,16,0,0,56,68,124,4,120,0,0,0,0],"282":[0,0,40,16,0,124,4,4,60,4,4,124,0,0,0,0],"283":[0,0,0,0,40,16,0,56,68,124,4,120,0,0,0,0],"379":[0,0,16,0,0,124,64,32,16,8,4,124,0,0,0,0],"380":[0,0,0,0,16,0,0,124,64,56,4,124,0,0,0,0],"381":[0,0,40,16,0,124,64,32,16,8,4,124,0,0,0,0],"382":[0,0,0,0,40,16,0,124,64,56,4,124,0,0,0,0],"8216":[0,0,0,0,8,4,12,12,0,0,0,0,0,0,0,0],"8217":[0,0,0,0,12,12,8,4,0,0,0,0,0,0,0,0],"8220":[0,0,0,0,72,36,108,108,0,0,0,0,0,0,0,0],"8221":[0,0,0,0,108,108,72,36,0,0,0,0,0,0,0,0],"8222":[0,0,0,0,0,0,0,0,0,108,108,72,36,0,0,0],"8230":[0,0,0,0,0,0,0,0,0,0,0,292,0,0,0,0],"9633":[0,0,0,0,0,508,260,260,260,260,260,508,0,0,0,0],"9651":[0,0,0,0,0,32,80,80,136,136,260,508,0,0,0,0],"9671":[0,0,0,0,0,32,80,136,260,136,80,32,0,0,0,0],"9675":[0,0,0,0,0,112,136,260,260,260,136,112,0,0,0,0],"9678":[0,0,0,0,0,112,136,292,340,292,136,112,0,0,0,0],"9733":[0,0,0,0,0,32,112,508,248,112,216,396,0,0,0,0],"9792":[0,0,0,0,0,56,68,68,56,16,124,16,0,0,0,0],"9794":[0,0,0,0,0,16,56,84,56,68,68,56,0,0,0,0],"9834":[0,0,0,0,0,32,96,96,160,56,60,24,0,0,0,0],"name":"SOAUI","copy":"","letterspace":"64","basefont_size":"512","basefont_left":"62","basefont_top":"0","basefont":"Arial","basefont2":"","ascender":"8","descender":"2","linegap":"4","wordspacing":"3"} \ No newline at end of file diff --git a/out/font/SOAUI.ttf b/out/font/SOAUI.ttf new file mode 100644 index 0000000..4404aff Binary files /dev/null and b/out/font/SOAUI.ttf differ diff --git a/out/index.html b/out/index.html index 7de3ade..b013bcf 100644 --- a/out/index.html +++ b/out/index.html @@ -7,10 +7,16 @@ <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> - <div class="textbox textbox--simple textbox--red"> - <div class="textbox__text"> - Welcome to <span class="textbox__span textbox__span--blue">webring.umbreon.online</span>! + <main> + <div class="textbox textbox--simple textbox--red"> + <div class="textbox__text"> + Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>! + </div> </div> - </div> + + <p> + hey yeah i sure am some text on the page aren't i + </p> + </main> </body> </html> diff --git a/out/style.css b/out/style.css index 88f889b..790a871 100644 --- a/out/style.css +++ b/out/style.css @@ -2,6 +2,10 @@ font-family: "SOADialogue"; src: url("font/SOADialogue.ttf") format(truetype); } +@font-face { + font-family: "SOAUI"; + src: url("font/SOAUI.ttf") format(truetype); +} :root { --pixel-scale: 2; font-size: calc(var(--pixel-scale) * 1px); @@ -17,8 +21,15 @@ body { background: var(--gradient-horiz-stripes); min-height: 100vh; margin: 0; - padding: 4rem; - font-size: 8rem; + padding: 9rem 4rem; + font-family: "SOAUI"; + font-size: 10rem; + color: white; +} + +main { + max-width: 256rem; + margin: 0 auto; } .textbox { @@ -107,7 +118,8 @@ body { .textbox__text { margin: 2rem; width: 224rem; - height: 34rem; + min-height: 34rem; + max-width: calc(100vw - 34rem); box-shadow: 0 2rem 0 -1rem var(--textbox-bg-fade), 0 -2rem 0 -1rem var(--textbox-bg-fade), 2rem 0 0 -1rem var(--textbox-bg-fade), -2rem 0 0 -1rem var(--textbox-bg-fade), inset 0 0 0 1rem var(--textbox-bg-fade); background: var(--textbox-bg); padding: 0 1rem; diff --git a/out/style.css.map b/out/style.css.map index 7b4edc9..e6280aa 100644 --- a/out/style.css.map +++ b/out/style.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAOA;EACC;EACA,aACC;;;AASH;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["../style.scss"],"names":[],"mappings":"AACA;EACC;EACA;;AAGD;EACC;EACA;;AAGD;EAEC;EAGA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AASD;EACC;EACA;EACA;EACA;EAEA;EACA;EACA;;;AAGD;EACC;EACA;;;AAID;EAKC;;AAIA;EAEC;EACA;EACA;EACA;EAIA;EAGA;EACA;EAGA;;AAGA;EAEC;EACA;EACA;EACA;EACA;EACA;EAIA;EAMA;EAGA,YAEA;;AAqBD;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAKD;EACC;;AAEA;EACC;;AAED;EACC;;AAGD;EACC;EACA;;AAMH;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;;AAKD;EAGC;EAIA;EACA;EACA;EAGA,YACQ;EAOR;EAGA;EAGA;EAEA;;AAQA;EACC;EACA,aACC;;;AASH;EACC;EACA;;AAGD;EACC;EACA;;;AAKF;EACC;EACA;EACA;EACA;EACA","file":"style.css"} \ No newline at end of file diff --git a/style.scss b/style.scss index 32074ee..93d75f4 100644 --- a/style.scss +++ b/style.scss @@ -1,7 +1,12 @@ // dialogue font (the taller one) @font-face { font-family: "SOADialogue"; - src: url("https://i.eritbh.me/temp/SOADialogue-10-2-6.ttf") format(truetype); + src: url("font/SOADialogue.ttf") format(truetype); +} + +@font-face { + font-family: "SOAUI"; + src: url("font/SOAUI.ttf") format(truetype); } :root { @@ -26,9 +31,16 @@ body { background: var(--gradient-horiz-stripes); min-height: 100vh; margin: 0; - padding: 4rem; + padding: 9rem 4rem; // more or less reasonable default probably - font-size: 8rem; + font-family: 'SOAUI'; + font-size: 10rem; + color:white; +} + +main { + max-width: 256rem; + margin: 0 auto; } // aren't text boxes fun @@ -181,7 +193,8 @@ body { // box shadows because pixelated round corners are hard, so we subtract // that margin width: 224rem; - height: 34rem; + min-height: 34rem; + max-width: calc(100vw - 34rem); // get the slightly off-white region around the text box-shadow: @@ -200,7 +213,8 @@ body { // font setup font-family: "SOADialogue"; // font exported with 10px ascenders, 2px descenders - font-size: calc((10 + 2) * 1rem); + font-size: 12rem; + // trying our goddamn best to make the browser render the pixel font // correctly, except i dont think this actually helps lol // text-rendering: geometricPrecision;