scss styling and remove astro elements

src/pages/index.astro

@@ -11,30 +11,5 @@ import Motd from '../components/terminal/motd.astro';
 </Webpage>
 
 <style lang="scss" is:global>
-	@use "../scss/variables";
-	@use "../scss/terminal";
 
-	::spelling-error {
-		text-decoration: none
-	}
-
-	main {
-		@include terminal.formatting;
-
-		width: 100vw;
-		height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
-		padding: 5px;
-		overflow-y: auto;
-	}
-	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 }
-	}
 </style>

src/scss/elements/footer.scss

@@ -0,0 +1,27 @@
+@use "../variables.scss";
+
+@mixin styling {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	width: 100vw;
+	height: variables.$footer-Y;
+	background-color: var(--body-background-color)
+
+	p { padding: 0 20px 0 20px; }
+	section {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		height: 100%;
+
+		button {
+			height: 100%;
+			padding: 0 20px 0 20px;
+
+			&:hover { background-color: var(--hf-button-hover-color) }
+		}
+	}
+
+	#toggle-term-mode { background-color: rgb(0,50,90) }
+}

src/scss/elements/header.scss

@@ -1,3 +1,5 @@
+@use "../variables.scss";
+
 @mixin styling {
 	display: flex;
 	justify-content: space-between;

src/scss/elements/main.scss

@@ -1,4 +1,5 @@
 @use "./terminal";
+@use "../variables.scss";
 
 @mixin input {
 	font-size: 1.2rem;
@@ -16,7 +17,7 @@
 	@include terminal.formatting;
 
 	width: 100vw;
-	height: calc(99.3vh - $header-Y - $footer-Y);
+	height: calc(99.3vh - variables.$header-Y - variables.$footer-Y);
 	padding: 5px;
 	overflow-y: auto;
 

src/scss/global.scss

@@ -1,13 +1,10 @@
 @forward "./font.scss";
 
+@use "./variables.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;
 

src/scss/variables.scss

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

src/ts/links.ts

@@ -1,10 +0,0 @@
-const enum Links {
-	Self = "https://rhpidfyre.io/",
-	Cloud = "https://files.rhpidfyre.io/",
-	Gsm = "https://gsm.rhpidfyre.io/",
-	Git = "https://git.rhpidfyre.io/",
-	RepoGitea = "https://git.rhpidfyre.io/rhpidfyre/rhpidfyre.io/",
-	RepoGithub = "https://github.com/unixtensor/rhpidfyre.io/"
-}
-
-export { Links }