Initial commit

Frontend/pages/layouts/main/sass/Anchors.scss

@@ -0,0 +1,8 @@
+a {
+    color: var(--main-color);
+    text-decoration: none;
+
+    &:hover {
+        color: var(--main-hover-color);
+    }
+}

Frontend/pages/layouts/main/sass/Button.scss

@@ -0,0 +1,21 @@
+.button {
+    padding: 4px 15px;
+    background: var(--main-color);
+    border-radius: var(--border-radius);
+    text-decoration: none;
+    transition-duration: .2s;
+    cursor: pointer;
+    font-weight: 500;
+
+    &.secondary {
+        background: #565656;
+
+        &:hover {
+            background: #303030;
+        }
+    }
+
+    &:hover {
+        background: var(--main-hover-color);
+    }
+}

Frontend/pages/layouts/main/sass/Feedback.scss

@@ -0,0 +1,38 @@
+.feedback {
+    position: absolute;
+    inset: 0px;
+    z-index: 2;
+    overflow: hidden;
+    pointer-events: none;
+
+
+    .notificationcontainer {
+        position: absolute;
+        bottom: -50px;
+        left: 20px;
+        right: 20px;
+        display: flex;
+        justify-content: center;
+        align-items: flex-end;
+
+        .notification {
+            padding: 10px 100px;
+            border-radius: var(--border-radius);
+            font-size: 14px;
+            font-weight: 600;
+            pointer-events: auto;
+            cursor: pointer;
+
+            &.info {
+
+                background: var(--main-hover-color);
+                box-shadow: 0px 0px 4px #243d5e;
+            }
+
+            &.error {
+                background: var(--color-red-hover);
+                box-shadow: 0px 0px 4px #431616;
+            }
+        }
+    }
+}

Frontend/pages/layouts/main/sass/Input.scss

@@ -0,0 +1,37 @@
+input,
+select,
+textarea {
+    border: 2px solid var(--main-hover-color);
+    transition-duration: .2s;
+    border-radius: var(--border-radius);
+    padding: 5px 10px;
+    background: var(--background);
+    color: white;
+    font-family: 'Montserrat', sans-serif;
+    font-size: 12px;
+
+
+    &:hover {
+        border: 2px solid var(--main-color);
+    }
+
+    &:focus,
+    &:active {
+        border: 2px solid var(--main-color);
+        outline: none;
+    }
+}
+
+input[type="color"] {
+    overflow: hidden;
+
+    &::-webkit-color-swatch-wrapper {
+        padding: 0px;
+        width: calc(100% + 22px);
+        height: calc(100% + 12px);
+        margin-top: -6px;
+        margin-left: -11px;
+        outline: none;
+        border: none;
+    }
+}

Frontend/pages/layouts/main/sass/Layout.scss

@@ -0,0 +1,67 @@
+:root {
+    --background: #323232;
+    --main-color: #4676b7;
+    --main-hover-color: #305383;
+    --main-secondary-color: #253e5e;
+    --border-radius: 10px;
+    --small-border-radius: 10px;
+    --panel-color: #222;
+    --subpanel-color: #2c2c2c;
+    --color-red: #af2a20;
+    --color-red-hover: #76201a;
+    --color-green: #195e19;
+    --color-green-hover: #124412;
+}
+
+body {
+    background: var(--background);
+    color: white;
+    padding: 0px;
+    margin: 0px;
+
+    font-family: 'Montserrat', sans-serif;
+}
+
+.headercontainer {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    right: 10px;
+    height: 40px;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+
+    img {
+        height: 100%;
+    }
+
+    .title {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+
+        margin-left: 10px;
+
+        .main {
+            font-size: 24px;
+            font-weight: 300;
+        }
+
+        .sub {
+            font-size: 12px;
+            font-weight: 300;
+            color: lightgrey;
+        }
+    }
+}
+
+.bodycontainer {
+    position: absolute;
+    top: 60px;
+    bottom: 10px;
+    left: 10px;
+    right: 10px;
+
+
+}