WIP work on styling

template/scss/_colors.scss

@@ -1,3 +1,5 @@
 $green: #69a840;
 $black: #000000;
 $light-gray: #d3d3d3;
+
+$background-color: $light-gray;

template/scss/_header.scss

@@ -0,0 +1,49 @@
+@use './colors' as *;
+@use './responsive' as r;
+@use './sizes';
+
+#header {
+    .text {
+        background-color: $green;
+        display: flex;
+        justify-content: center;
+
+        padding: 5px 0px;
+
+        .logo-link {
+            max-width: 85%;
+
+            @include r.normal {
+                max-height: 100px;
+            }
+
+            img {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+    }
+
+    .track {
+        height: 50px;
+        background-image: url('../images/track.png');
+        background-repeat: repeat-x;
+        background-size: contain;
+    }
+
+    .black-background {
+        display: none;
+
+        @include r.normal {
+            display: block;
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: sizes.$left-menu-width;
+            height: 100%;
+            background-color: $black;
+            z-index: -1;
+        }
+    }
+}

template/scss/_positions.scss

@@ -0,0 +1,39 @@
+@use './colors' as *;
+@use './responsive' as r;
+@use './sizes';
+
+body {
+    display: flex;
+    flex-direction: column;
+}
+
+#main-row {
+    display: flex;
+    flex-direction: column;
+    flex: 1 0 auto;
+    gap: 10px;
+
+    @include r.normal {
+        flex-direction: row-reverse;
+    }
+
+    #main {
+        flex: 1 0 auto;
+    }
+
+    #menu {
+        background-color: $black;
+        padding: 5px;
+        box-sizing: border-box;
+
+        @include r.normal {
+            flex: 0 0 sizes.$left-menu-width;
+        }
+    }
+}
+
+#footer {
+    padding: 2px 0;
+    color: $light-gray;
+    background-color: black;
+}

template/scss/_sizes.scss

@@ -0,0 +1 @@
+$left-menu-width: 20%;

template/scss/main.scss

@@ -1,6 +1,9 @@
 @use './fonts';
 @use './colors';
 @use './responsive' as r;
+@use './header';
+@use './positions';
+@use './menu';
 
 $color-green-1: rgb(184,229,162);
 $color-green-2: rgb(162,221,131);
@@ -24,16 +27,17 @@ $width-wide: 1600px;
 $indent-menu-left: 25px;
 
 body {
-	padding: 5px;
+	padding: 0px;
 	margin: 0px auto;
 	font-size: 12px;
-	max-width: 1100px;
+	// max-width: 1100px;
 	min-height: 100.1vh;
+	background-color: colors.$background-color;
 	
 	font-family: 'Noto Sans', sans-serif;
 	
 	@include r.narrow {
-		padding: 20px;
+		font-size: 13px;
 	}
 	
 	@include r.normal {
@@ -41,7 +45,7 @@ body {
 	}
 	
 	@include r.wide {
-		max-width: 70%;
+		// max-width: 70%;
 	}
 }