begin an scss file structure concept

src/scss/elements/header.scss

@@ -0,0 +1,10 @@
+@mixin styling {
+	display: flex;
+	justify-content: space-between;
+	width: 100vw;
+	height: variables.$header-Y;
+	background-color: rgb(10,10,10);
+
+	p { margin-left: 10px; }
+	section { height: 100%; }
+}

src/scss/elements/main.scss

@@ -0,0 +1,24 @@
+@use "./terminal";
+
+@mixin input {
+	font-size: 1.2rem;
+	background-color: transparent;
+	border: 0;
+	outline: 0;
+	width: 90%;
+	/* Pester me when this gets undrafted */
+	caret-shape: block;
+
+	&:disabled { color: white }
+}
+
+@mixin styling {
+	@include terminal.formatting;
+
+	width: 100vw;
+	height: calc(99.3vh - $header-Y - $footer-Y);
+	padding: 5px;
+	overflow-y: auto;
+
+	input { @include input; }
+}

src/scss/elements/terminal.scss

@@ -17,11 +17,14 @@
 	}
 }
 
-@mixin formatting {
-	@include stdout-layouts;
-
+@mixin term-elements {
 	.return { margin-top: 25px; }
 	.shell-prompt { display: flex; }
+}
+
+@mixin formatting {
+	@include stdout-layouts;
+	@include term-elements;
 
 	p {
 		@include color-matrix;

src/scss/font.scss

@@ -1,8 +1,10 @@
 @font-face {
-	font-display: swap;
-	font-family: 'Terminus';
-	font-style: normal;
-	font-weight: 500;
+	font: {
+		family: 'Terminus';
+		display: swap;
+		style: normal;
+		weight: 500;
+	};
 	src: url('/Terminus.woff2') format('woff2');
 }
 

src/scss/global.scss

@@ -0,0 +1,44 @@
+@forward "./font.scss";
+
+@use "./elements/header.scss";
+@use "./elements/main.scss";
+@use "./elements/footer.scss";
+
+$header-Y: 30px;
+$footer-Y: 30px;
+$component-padding: 20px;
+
+:root {
+	color-scheme: dark;
+
+	--body-background-color: rgb(0,0,0);
+	--hf-button-hover-color: rgb(255,255,255);
+}
+::selection {
+	background-color: rgb(255,255,255);
+	color: rgb(0,0,0);
+}
+::spelling-error {
+	text-decoration: none
+}
+
+body {
+	box-sizing: border-box;
+	margin: 0;
+	overflow: hidden;
+	background-color: var(--body-background-color);
+}
+button {
+	background-color: transparent;
+	border: 0;
+}
+a {
+	color: white;
+	cursor:	unset;
+
+	&:hover, &:active, &:link { text-decoration: none; }
+}
+
+header { @include header.styling; }
+main   { @include main.styling; }
+footer { @include footer.styling; }

src/scss/variables.scss

@@ -1,3 +0,0 @@
-$header-Y: 30px;
-$footer-Y: 30px;
-$component-padding: 20px;