add aspnet server

client/assets/styling/colors.scss

@@ -0,0 +1,15 @@
+//Colors
+$mainAccent: #ff0064;
+$mainAccentLight: #ff3385;
+$mainAccentDark: #e0005a;
+$secondaryAccent: #57c9ef;
+$secondaryAccentLight: #7cd5f3;
+$secondaryAccentDark: #32bdec;
+$mainBackground: #2a2d43;
+$darkBackground: #0d1821;
+$lightBackground: #394053;
+$featureBackround: #073b4c;
+$featureBackroundDark: #031d25;
+$mainTextColor: #eee;
+$lightTextColor: #fff;
+$darkTextColor: #ccc;

client/assets/styling/main.scss

@@ -0,0 +1,46 @@
+@import "mixins";
+@import "colors";
+
+:root {
+	background-color: $mainBackground;
+	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;
+	color: $mainTextColor;
+}
+
+body {
+	padding: 0;
+	margin: 0;
+}
+
+#main:has(#content) {
+	display: grid;
+	grid-template-columns: $navBarSize 1fr;
+	grid-template-areas: "Nav Content";
+}
+
+#content {
+	$contentPad: 10px;
+	grid-area: Content;
+	overflow-x: hidden;
+	overflow-y: auto;
+	position: fixed;
+	left: $navBarSize;
+	height: calc(100dvh - (2 * $contentPad));
+	width: calc(100dvw - $navBarSize - (2 * $contentPad));
+	padding: $contentPad;
+}
+
+a {
+	color: $secondaryAccent;
+	&:hover {
+		color: $secondaryAccentLight;
+	}
+	&:visited {
+		color: $secondaryAccentDark;
+	}
+}

client/assets/styling/mixins.scss

@@ -0,0 +1,43 @@
+$navBarSize: 64px;
+
+@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;
+	}
+}

client/assets/styling/navbar.scss

@@ -0,0 +1,61 @@
+@import "mixins.scss";
+@import "colors.scss";
+
+nav {
+	display: grid;
+	grid-template-areas: "Branding" "Nav" "Widgets" "Utils";
+	grid-template-rows: auto 1fr auto auto;
+	background-color: $mainAccent;
+	height: 100dvh;
+	position: fixed;
+	width: $navBarSize;
+	box-shadow: 0 0 3px #000;
+	gap: 20px;
+	padding: 20px 0;
+
+	> * {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		gap: 10px;
+	}
+
+	.branding {
+		grid-area: Branding;
+
+		img {
+			width: $navBarSize;
+			object-fit: contain;
+		}
+	}
+
+	.mainNav {
+		grid-area: Nav;
+	}
+
+	.widgets {
+		grid-area: Widgets;
+	}
+
+	.utils {
+		grid-area: Utils;
+	}
+
+	.navItem {
+		height: $navBarSize;
+		width: $navBarSize;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		transition: 0.2s ease-out background;
+
+		&:active,
+		&[aria-current="page"] {
+			background-color: $mainAccentDark;
+		}
+
+		&:hover {
+			background-color: $mainAccentLight;
+		}
+	}
+}

client/assets/styling/player.scss

@@ -0,0 +1,22 @@
+@import "mixins.scss";
+@import "colors.scss";
+#content {
+	display: grid;
+}
+#player {
+	background-color: $darkBackground;
+	display: grid;
+	grid-template-areas: "Head ControlPanel" "ViewPort ControlPanel" "Timeline Timeline";
+	grid-template-rows: auto 1fr 500px;
+	grid-template-columns: 1fr auto;
+}
+
+#viewport {
+	grid-area: ViewPort;
+	border: 1px solid $lightBackground;
+}
+
+#timeline {
+	grid-area: Timeline;
+	border: 1px solid $lightBackground;
+}