this sure do be a website
This commit is contained in:
7
README.md
Normal file
7
README.md
Normal file
|
|
@ -0,0 +1,7 @@
|
|||
# webring.umbreon.online static files
|
||||
|
||||
the webring.umbreon.online homepage
|
||||
|
||||
i use sass because i don't hate myself. `npx sass --watch
|
||||
style.sass:out/style.css`. after that just copy over the `out` folder to the
|
||||
site's webroot
|
||||
5
fontsource/README.md
Normal file
5
fontsource/README.md
Normal file
|
|
@ -0,0 +1,5 @@
|
|||
These are the sources of the fonts used on this site. To edit, import the `.txt`
|
||||
files in this directory into
|
||||
[BitFontMaker2](https://www.pentacom.jp/pentacom/bitfontmaker2). The fonts are
|
||||
mostly reproduced from the character select sequence, though some additional
|
||||
diacritic glyphs were added.
|
||||
1
fontsource/SOADialogue_20230717.txt
Normal file
1
fontsource/SOADialogue_20230717.txt
Normal file
File diff suppressed because one or more lines are too long
BIN
out/font/SOADialogue.ttf
Normal file
BIN
out/font/SOADialogue.ttf
Normal file
Binary file not shown.
16
out/index.html
Normal file
16
out/index.html
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en-US">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Document</title>
|
||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||
<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>!
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
139
out/style.css
Normal file
139
out/style.css
Normal file
|
|
@ -0,0 +1,139 @@
|
|||
@font-face {
|
||||
font-family: "SOADialogue";
|
||||
src: url("font/SOADialogue.ttf") format(truetype);
|
||||
}
|
||||
:root {
|
||||
--pixel-scale: 2;
|
||||
font-size: calc(var(--pixel-scale) * 1px);
|
||||
--gradient-horiz-stripes: repeating-linear-gradient(to bottom,
|
||||
#1d6c5a,
|
||||
#1d6c5a 2rem,
|
||||
#025a49 2rem,
|
||||
#025a49 4rem
|
||||
);
|
||||
}
|
||||
|
||||
body {
|
||||
background: var(--gradient-horiz-stripes);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 4rem;
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
.textbox {
|
||||
display: inline-block;
|
||||
}
|
||||
.textbox--simple {
|
||||
--textbox-bg: #FFFFFF;
|
||||
--textbox-bg-fade: #F7F7EF;
|
||||
--textbox-text-color: #424231;
|
||||
--textbox-text-shadow: #C6C6B5;
|
||||
margin: 0 9rem;
|
||||
border: 1rem solid var(--textbox-border-outer);
|
||||
background: var(--textbox-border-inner);
|
||||
position: relative;
|
||||
}
|
||||
.textbox--simple::before, .textbox--simple::after {
|
||||
content: "";
|
||||
display: block;
|
||||
background: var(--textbox-handle-bg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
width: 7rem;
|
||||
box-shadow: 3rem 0 0 -1rem var(--textbox-handle-bg), -3rem 0 0 -1rem var(--textbox-handle-bg), 6rem 0 0 -3rem var(--textbox-handle-bg), -6rem 0 0 -3rem var(--textbox-handle-bg), 0 1rem 0 0 var(--textbox-handle-border), 0 -1rem 0 0 var(--textbox-handle-border), 2rem 0 0 0rem var(--textbox-handle-border), -2rem 0 0 0rem var(--textbox-handle-border), 4rem 0 0 -1rem var(--textbox-handle-border), -4rem 0 0 -1rem var(--textbox-handle-border), 7rem 0 0 -3rem var(--textbox-handle-border), -7rem 0 0 -3rem var(--textbox-handle-border);
|
||||
}
|
||||
.textbox--simple::before {
|
||||
left: 1rem;
|
||||
transform: translateX(-100%);
|
||||
border-right: 0;
|
||||
}
|
||||
.textbox--simple::after {
|
||||
right: 1rem;
|
||||
transform: translateX(100%);
|
||||
border-left: 0;
|
||||
}
|
||||
.textbox--simple.textbox--theme-button {
|
||||
margin: 0 10rem;
|
||||
}
|
||||
.textbox--simple.textbox--theme-button::before {
|
||||
left: 0;
|
||||
}
|
||||
.textbox--simple.textbox--theme-button::after {
|
||||
right: 0;
|
||||
}
|
||||
.textbox--simple.textbox--theme-button .textbox__text {
|
||||
width: 14rem;
|
||||
height: 10rem;
|
||||
}
|
||||
.textbox--yellow {
|
||||
--textbox-border-outer: #7B6321;
|
||||
--textbox-border-inner: #A58429;
|
||||
--textbox-handle-bg: #FFB539;
|
||||
--textbox-handle-border: #AD8400;
|
||||
}
|
||||
.textbox--red {
|
||||
--textbox-border-outer: #632921;
|
||||
--textbox-border-inner: #7B3129;
|
||||
--textbox-handle-bg: #C63908;
|
||||
--textbox-handle-border: #9C3108;
|
||||
}
|
||||
.textbox--green {
|
||||
--textbox-border-outer: #215A18;
|
||||
--textbox-border-inner: #216318;
|
||||
--textbox-handle-bg: #42AD31;
|
||||
--textbox-handle-border: #297321;
|
||||
}
|
||||
.textbox--blue {
|
||||
--textbox-border-outer: #084263;
|
||||
--textbox-border-inner: #085284;
|
||||
--textbox-handle-bg: #1084C6;
|
||||
--textbox-handle-border: #005A94;
|
||||
}
|
||||
.textbox--gray {
|
||||
--textbox-border-outer: #4A4242;
|
||||
--textbox-border-inner: #5A5A52;
|
||||
--textbox-handle-bg: #7B7B73;
|
||||
--textbox-handle-border: #5E5E55;
|
||||
}
|
||||
.textbox--pink {
|
||||
--textbox-border-outer: #CE394A;
|
||||
--textbox-border-inner: #E76B6B;
|
||||
--textbox-handle-bg: #F79CA5;
|
||||
--textbox-handle-border: #EF6B7B;
|
||||
}
|
||||
.textbox__text {
|
||||
margin: 2rem;
|
||||
width: 224rem;
|
||||
height: 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;
|
||||
font-family: "SOADialogue";
|
||||
font-size: 12rem;
|
||||
}
|
||||
.textbox__text, .textbox__text .textbox__span {
|
||||
color: var(--textbox-text-color);
|
||||
text-shadow: 1rem 0 var(--textbox-text-shadow), 1rem 1rem var(--textbox-text-shadow), 0 1rem var(--textbox-text-shadow);
|
||||
}
|
||||
|
||||
.textbox__span--red {
|
||||
--textbox-text-color: #C54700;
|
||||
--textbox-text-shadow: #EFC6A5;
|
||||
}
|
||||
.textbox__span--blue {
|
||||
--textbox-text-color: #6352FF;
|
||||
--textbox-text-shadow: #CEC6F7;
|
||||
}
|
||||
|
||||
.theme-options-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 186rem;
|
||||
gap: 8rem 6rem;
|
||||
padding: 4rem 3rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
1
out/style.css.map
Normal file
1
out/style.css.map
Normal file
|
|
@ -0,0 +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"}
|
||||
240
style.scss
Normal file
240
style.scss
Normal file
|
|
@ -0,0 +1,240 @@
|
|||
// dialogue font (the taller one)
|
||||
@font-face {
|
||||
font-family: "SOADialogue";
|
||||
src: url("https://i.eritbh.me/temp/SOADialogue-10-2-6.ttf") format(truetype);
|
||||
}
|
||||
|
||||
:root {
|
||||
// rendering scale
|
||||
--pixel-scale: 2;
|
||||
|
||||
// 1rem = 1 source pixel at the current render scale
|
||||
font-size: calc(var(--pixel-scale) * 1px);
|
||||
|
||||
|
||||
// some other bullshit
|
||||
--gradient-horiz-stripes: repeating-linear-gradient(to bottom,
|
||||
#1d6c5a,
|
||||
#1d6c5a 2rem,
|
||||
#025a49 2rem,
|
||||
#025a49 4rem
|
||||
);
|
||||
}
|
||||
|
||||
// i don't need eyes anyway (transparency spotting)
|
||||
body {
|
||||
background: var(--gradient-horiz-stripes);
|
||||
min-height: 100vh;
|
||||
margin: 0;
|
||||
padding: 4rem;
|
||||
// more or less reasonable default probably
|
||||
font-size: 8rem;
|
||||
}
|
||||
|
||||
// aren't text boxes fun
|
||||
.textbox {
|
||||
// i cannot believe there is no better way to do this than
|
||||
// - inline-block, or
|
||||
// - shove it in a flex container (which i won't do because we have enough
|
||||
// containers)
|
||||
display: inline-block;
|
||||
|
||||
// Most of the text box styles in the game are just recolors of the same
|
||||
// thing
|
||||
&--simple {
|
||||
// Variables for all the different colors
|
||||
--textbox-bg: #FFFFFF;
|
||||
--textbox-bg-fade: #F7F7EF;
|
||||
--textbox-text-color: #424231;
|
||||
--textbox-text-shadow: #C6C6B5;
|
||||
|
||||
// make room for the handles which are `position:absolute`'d outside
|
||||
// this box
|
||||
margin: 0 9rem;
|
||||
|
||||
// set up basic frame of inner section
|
||||
border: 1rem solid var(--textbox-border-outer);
|
||||
background: var(--textbox-border-inner);
|
||||
|
||||
// who's ready for position shenanigans
|
||||
position: relative;
|
||||
|
||||
// box handles
|
||||
&::before,
|
||||
&::after {
|
||||
content: "";
|
||||
display: block;
|
||||
background: var(--textbox-handle-bg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
|
||||
// styles for left and right curves are present on both handles, but
|
||||
// they're layered behind the main box
|
||||
z-index: -1;
|
||||
|
||||
// width cannot be lower than this because we need to be able to
|
||||
// shrink the box shadow of the element at least two stages without
|
||||
// it disappearing entirely in order to make the rounded corners
|
||||
// work
|
||||
width: 7rem;
|
||||
|
||||
// hell world
|
||||
box-shadow:
|
||||
// background extensions
|
||||
3rem 0 0 -1rem var(--textbox-handle-bg),
|
||||
-3rem 0 0 -1rem var(--textbox-handle-bg),
|
||||
|
||||
6rem 0 0 -3rem var(--textbox-handle-bg),
|
||||
-6rem 0 0 -3rem var(--textbox-handle-bg),
|
||||
|
||||
// horizontal border segments (very top and bottom)
|
||||
0 1rem 0 0 var(--textbox-handle-border),
|
||||
0 -1rem 0 0 var(--textbox-handle-border),
|
||||
|
||||
// vertical border segments
|
||||
2rem 0 0 0rem var(--textbox-handle-border),
|
||||
-2rem 0 0 0rem var(--textbox-handle-border),
|
||||
|
||||
4rem 0 0 -1rem var(--textbox-handle-border),
|
||||
-4rem 0 0 -1rem var(--textbox-handle-border),
|
||||
|
||||
7rem 0 0 -3rem var(--textbox-handle-border),
|
||||
-7rem 0 0 -3rem var(--textbox-handle-border);
|
||||
|
||||
}
|
||||
&::before {
|
||||
left: 1rem;
|
||||
transform: translateX(-100%);
|
||||
border-right: 0;
|
||||
}
|
||||
&::after {
|
||||
right: 1rem;
|
||||
transform: translateX(100%);
|
||||
border-left: 0;
|
||||
}
|
||||
|
||||
// if this is a selection button, the handles are annoyingly 1 source
|
||||
// pixel wider, and the text region is tiny and empty
|
||||
&.textbox--theme-button {
|
||||
margin: 0 10rem;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
&::after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.textbox__text {
|
||||
width: 14rem;
|
||||
height: 10rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// #region .textbox--simple color variants
|
||||
&--yellow {
|
||||
--textbox-border-outer: #7B6321;
|
||||
--textbox-border-inner: #A58429;
|
||||
--textbox-handle-bg: #FFB539;
|
||||
--textbox-handle-border: #AD8400;
|
||||
}
|
||||
&--red {
|
||||
--textbox-border-outer: #632921;
|
||||
--textbox-border-inner: #7B3129;
|
||||
--textbox-handle-bg: #C63908;
|
||||
--textbox-handle-border: #9C3108;
|
||||
}
|
||||
&--green {
|
||||
--textbox-border-outer: #215A18;
|
||||
--textbox-border-inner: #216318;
|
||||
--textbox-handle-bg: #42AD31;
|
||||
--textbox-handle-border: #297321;
|
||||
}
|
||||
&--blue {
|
||||
--textbox-border-outer: #084263;
|
||||
--textbox-border-inner: #085284;
|
||||
--textbox-handle-bg: #1084C6;
|
||||
--textbox-handle-border: #005A94;
|
||||
}
|
||||
&--gray {
|
||||
--textbox-border-outer: #4A4242;
|
||||
--textbox-border-inner: #5A5A52;
|
||||
--textbox-handle-bg: #7B7B73;
|
||||
--textbox-handle-border: #5E5E55;
|
||||
}
|
||||
&--pink {
|
||||
--textbox-border-outer: #CE394A;
|
||||
--textbox-border-inner: #E76B6B;
|
||||
--textbox-handle-bg: #F79CA5;
|
||||
--textbox-handle-border: #EF6B7B;
|
||||
}
|
||||
// #endregion
|
||||
|
||||
// Text inside the text box
|
||||
&__text {
|
||||
// offset by a bit to leave room for the rounded corners we do via box
|
||||
// shadow
|
||||
margin: 2rem;
|
||||
// in game this region is 228x38, but again, part of that is done via
|
||||
// box shadows because pixelated round corners are hard, so we subtract
|
||||
// that margin
|
||||
width: 224rem;
|
||||
height: 34rem;
|
||||
|
||||
// get the slightly off-white region around the text
|
||||
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);
|
||||
|
||||
// the innermost part with the text is just white
|
||||
background: var(--textbox-bg);
|
||||
|
||||
// text still needs to be offset a bit from left/right
|
||||
padding: 0 1rem;
|
||||
|
||||
// font setup
|
||||
font-family: "SOADialogue";
|
||||
// font exported with 10px ascenders, 2px descenders
|
||||
font-size: calc((10 + 2) * 1rem);
|
||||
// trying our goddamn best to make the browser render the pixel font
|
||||
// correctly, except i dont think this actually helps lol
|
||||
// text-rendering: geometricPrecision;
|
||||
|
||||
// text colors and shadow - `.textbox__span`'s use the same logic but
|
||||
// change the colors via variables
|
||||
&, .textbox__span {
|
||||
color: var(--textbox-text-color);
|
||||
text-shadow:
|
||||
1rem 0 var(--textbox-text-shadow),
|
||||
1rem 1rem var(--textbox-text-shadow),
|
||||
0 1rem var(--textbox-text-shadow);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// custom text colors in text boxes
|
||||
.textbox__span {
|
||||
&--red {
|
||||
--textbox-text-color: #C54700;
|
||||
--textbox-text-shadow: #EFC6A5;
|
||||
}
|
||||
|
||||
&--blue {
|
||||
--textbox-text-color: #6352FF;
|
||||
--textbox-text-shadow: #CEC6F7;
|
||||
}
|
||||
}
|
||||
|
||||
// misc shit
|
||||
.theme-options-grid {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 186rem;
|
||||
gap: 8rem 6rem;
|
||||
padding: 4rem 3rem;
|
||||
}
|
||||
Loading…
Reference in a new issue