// dialogue font (the taller one)
@font-face {
font-family: "SOADialogue";
src: url("font/SOADialogue.ttf") format(truetype);
}
@font-face {
font-family: "SOAUI";
src: url("font/SOAUI.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
);
}
// helper for applying consistent text style
%text {
color: var(--text-color);
text-shadow:
1rem 0 var(--text-shadow),
1rem 1rem var(--text-shadow),
0 1rem var(--text-shadow);
}
// i don't need eyes anyway (transparency spotting)
body {
background: var(--gradient-horiz-stripes);
min-height: 100vh;
margin: 0;
padding-block: 9rem;
// more or less reasonable default probably
font-family: 'SOAUI';
font-size: 10rem;
color:white;
// ideally the background stays pixel aligned with the text for
// perfectionism reasons, however it doesn't look great and kind of flashes
// a lot, which might cause people who use reduced motion settings to have a
// bad time. prevent the background from scrolling with the page for them
@media (prefers-reduced-motion) {
background-attachment: fixed;
}
}
main {
max-width: 250rem;
padding-inline: 3rem;
margin: 0 auto;
}
// 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;
--text-color: #424231;
--text-shadow: #C6C6B5;
// 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;
// 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
// TODO: implement the other styles of box frames
// 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;
min-height: 34rem;
// this accounts for a bunch of things including the width of the
// handles and the padding of <main>
max-width: calc(100vw - 32rem);
// do not overflow outside the box
overflow-wrap: break-word;
// 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: 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;
// apply text styles (--text-color and --text-shadow are inherited
@extend %text;
}
&__advance {
--background: #FFF;
--border: #000;
--shadow: #42424A;
position: absolute;
bottom: 8rem;
right: -6rem;
width: 2rem;
height: 2rem;
background: var(--background);
box-shadow:
// background
// top and middle
-1rem 0 var(--background),
-2rem -2rem var(--background),
-1rem -2rem var(--background),
1rem -2rem var(--background),
// tip of triangle
-0.5rem 1.5rem 0 -0.5rem var(--background),
-0.5rem 2.5rem 0 -0.5rem var(--background),
// borders
// top segments
-2.5rem -2.5rem 0 0.5rem var(--border),
1.5rem -2.5rem 0 0.5rem var(--border),
0 -3rem 0 0 var(--border),
// middle segments
-2rem 0 var(--border),
1rem 0 var(--border),
-1rem 2rem var(--border),
0 2rem var(--border),
// tip
-0.5rem 3.5rem 0 -0.5rem var(--border),
// shadow
// top segments
-1.5rem -1.5rem 0 0.5rem var(--shadow),
2.5rem -1.5rem 0 0.5rem var(--shadow),
1rem -2rem 0 0 var(--shadow),
// middle segments
-1rem 1rem var(--shadow),
2rem 1rem var(--shadow),
0 3rem var(--shadow),
1rem 3rem var(--shadow),
// tip
0.5rem 4.5rem 0 -0.5rem var(--shadow);
@keyframes bounce {
from {
transform: translateY(0);
}
25% {
transform: translateY(-1rem);
}
50% {
transform: translateY(-2rem);
}
75% {
transform: translateY(-1rem);
}
to {
transform: translateY(0);
}
}
@media not (prefers-reduced-motion) {
animation: calc(2 / 3 * 1s) steps(1) bounce infinite;
}
}
}
// custom text colors in text boxes
.color {
@extend %text;
&--red {
--text-color: #C54700;
--text-shadow: #EFC6A5;
}
&--blue {
--text-color: #6352FF;
--text-shadow: #CEC6F7;
}
}
// links do a thing
a {
color: inherit;
text-decoration-thickness: 1rem;
text-underline-offset: 1rem;
text-decoration-skip-ink: none;
}
code {
font: inherit;
background: #7B7B7BBB;
}
ul, ol {
padding-inline-start: 1em;
}
ul {
list-style-type: "ยท ";
}
.silly-little-images {
display: flex;
justify-content: center;
align-items: flex-end;
margin-bottom: 1em;
img {
image-rendering: crisp-edges;
// transform: scale(calc(100% * var(--pixel-scale)));
// transform-origin: bottom;
}
:first-child {
margin-inline-end: -6rem;
margin-bottom: -5rem;
}
}
.eightyeightbythirtyones {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
padding: calc(2px * var(--pixel-scale));
gap: calc(2px * var(--pixel-scale));
img {
display: block;
box-shadow: 0 0 0 calc(1px * var(--pixel-scale)) rgb(255 255 255 / 0.5)
}
}