erin/webring-static
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

get the other font working as well

Browse source
This commit is contained in:
Erin 2023-07-17 23:54:15 -04:00
parent 0636d4f296
commit 0cd7593d8b
6 changed files with 46 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
fontsource/SOAUI_20230717.txt Normal file
View file

File diff suppressed because one or more lines are too long

BIN
out/font/SOAUI.ttf Normal file
View file

Binary file not shown.

14
out/index.html
View file

@ -7,10 +7,16 @@
<link rel="stylesheet" type="text/css" href="style.css"> <link rel="stylesheet" type="text/css" href="style.css">
</head> </head>
<body> <body>
<div class="textbox textbox--simple textbox--red"> <main>
<div class="textbox__text"> <div class="textbox textbox--simple textbox--red">
Welcome to <span class="textbox__span textbox__span--blue">webring.umbreon.online</span>! <div class="textbox__text">
Welcome to <span class="textbox__span textbox__span--red">webring.umbreon.online</span>!
</div>
</div> </div>
</div>
<p>
hey yeah i sure am some text on the page aren't i
</p>
</main>
</body> </body>
</html> </html>

18
out/style.css
View file

@ -2,6 +2,10 @@
font-family: "SOADialogue"; font-family: "SOADialogue";
src: url("font/SOADialogue.ttf") format(truetype); src: url("font/SOADialogue.ttf") format(truetype);
} }
@font-face {
font-family: "SOAUI";
src: url("font/SOAUI.ttf") format(truetype);
}
:root { :root {
--pixel-scale: 2; --pixel-scale: 2;
font-size: calc(var(--pixel-scale) * 1px); font-size: calc(var(--pixel-scale) * 1px);
@ -17,8 +21,15 @@ body {
background: var(--gradient-horiz-stripes); background: var(--gradient-horiz-stripes);
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
padding: 4rem; padding: 9rem 4rem;
font-size: 8rem; font-family: "SOAUI";
font-size: 10rem;
color: white;
}
main {
max-width: 256rem;
margin: 0 auto;
} }
.textbox { .textbox {
@ -107,7 +118,8 @@ body {
.textbox__text { .textbox__text {
margin: 2rem; margin: 2rem;
width: 224rem; 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); 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); background: var(--textbox-bg);
padding: 0 1rem; padding: 0 1rem;

2
out/style.css.map
View file

@ -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"} {"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"}

24
style.scss
View file

@ -1,7 +1,12 @@
// dialogue font (the taller one) // dialogue font (the taller one)
@font-face { @font-face {
font-family: "SOADialogue"; 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 { :root {
@ -26,9 +31,16 @@ body {
background: var(--gradient-horiz-stripes); background: var(--gradient-horiz-stripes);
min-height: 100vh; min-height: 100vh;
margin: 0; margin: 0;
padding: 4rem; padding: 9rem 4rem;
// more or less reasonable default probably // 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 // aren't text boxes fun
@ -181,7 +193,8 @@ body {
// box shadows because pixelated round corners are hard, so we subtract // box shadows because pixelated round corners are hard, so we subtract
// that margin // that margin
width: 224rem; width: 224rem;
height: 34rem; min-height: 34rem;
max-width: calc(100vw - 34rem);
// get the slightly off-white region around the text // get the slightly off-white region around the text
box-shadow: box-shadow:
@ -200,7 +213,8 @@ body {
// font setup // font setup
font-family: "SOADialogue"; font-family: "SOADialogue";
// font exported with 10px ascenders, 2px descenders // 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 // trying our goddamn best to make the browser render the pixel font
// correctly, except i dont think this actually helps lol // correctly, except i dont think this actually helps lol
// text-rendering: geometricPrecision; // text-rendering: geometricPrecision;