366 lines
8.5 KiB
SCSS
366 lines
8.5 KiB
SCSS
// 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;
|
|
}
|
|
|
|
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;
|
|
}
|
|
}
|