webring-static/style.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;

	// 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)
	}
}

small {
	display: inline-block;
	font-size: 10px;
	line-height: 1.5;
}