move front end files into repo

AobaClient/assets/style/colors.scss

@@ -0,0 +1,8 @@
+$mainBGColor: #584577;
+$featureColor: #CE2D4F;
+$accentColor: #f0eaf8;
+
+$mainTextColor: #eee;
+$brightTextColor: #fff;
+$invertTextColor: #222;
+$invertBrightTextColor: #000;

AobaClient/assets/style/main.scss

@@ -0,0 +1,30 @@
+@import 'mixins';
+@import 'colors';
+
+:root {
+	background-color: $mainBGColor;
+	color: $mainTextColor;
+	box-sizing: border-box;
+	font-family: "Noto Sans", sans-serif;
+	font-optical-sizing: auto;
+	font-weight: 400;
+	font-style: normal;
+	font-variation-settings:
+		"wdth" 100;
+}
+
+body {
+	padding: 0;
+	margin: 0;
+}
+
+#main {
+	display: grid;
+	grid-template-columns: $navBarSize 1fr;
+	grid-template-areas: "Nav Content";
+}
+
+#content {
+	grid-area: Content;
+	margin-left: $navBarSize;
+}

AobaClient/assets/style/mixins.scss

@@ -0,0 +1,43 @@
+$navBarSize: 40px;
+
+@mixin mobile {
+	@media (max-width: 700px) {
+		@content;
+	}
+}
+
+@mixin max-screen($size) {
+	@media (max-width: #{$size}) {
+		@content;
+	}
+}
+
+@mixin max-container($size) {
+	@container (max-width: #{$size}) {
+		@content;
+	}
+}
+
+@mixin small-container {
+	@container (max-width: 500px) {
+		@content;
+	}
+}
+
+@mixin medium-container {
+	@container (max-width: 800px) {
+		@content;
+	}
+}
+
+@mixin large-container {
+	@container (max-width: 1000px) {
+		@content;
+	}
+}
+
+@mixin xlarge-container {
+	@container (max-width: 1200px) {
+		@content;
+	}
+}

AobaClient/assets/style/nav.scss

@@ -0,0 +1,34 @@
+@import 'mixins';
+@import 'colors';
+
+
+nav {
+	display: grid;
+	grid-template-areas: "Branding" "Nav" "Widgets" "Utils";
+	grid-template-rows: auto 1fr auto auto;
+	background-color: $featureColor;
+	height: 100dvh;
+	position: fixed;
+
+	>* {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.branding {
+		grid-area: Branding;
+	}
+
+	.mainNav {
+		grid-area: Nav;
+	}
+
+	.widgets {
+		grid-area: Widgets;
+	}
+
+	.utils {
+		grid-area: Utils;
+	}
+
+}