flasky flasky

static/css/scss/_grid.scss

@@ -0,0 +1,35 @@
+body {
+    min-height: 100vh;
+
+    display: grid;
+    grid-template-areas: 'aside nav'
+                        'aside wrapper'
+                        'footer wrapper';
+
+    grid-template-rows: 3rem auto 3rem;
+    grid-template-columns: 20rem 1fr;
+}
+
+.nav {
+    grid-area: nav;
+}
+.wrapper {
+    grid-area: wrapper;
+}
+.aside {
+    grid-area: aside;
+}
+.footer {
+    grid-area: footer;
+}
+
+@media screen and (max-width: 768px) {
+    body {
+        grid-template-areas: 'nav'
+                            'wrapper'
+                            'footer';
+
+        grid-template-rows: 3rem 1fr 3rem;
+        grid-template-columns: 1fr;
+    }
+}

static/css/scss/_normalize.scss

@@ -0,0 +1,32 @@
+* {
+    box-sizing: border-box;
+
+    font-family: $font-header;
+    font-weight: 400;
+}
+
+html {
+    margin: 0;
+    padding: 0;
+
+    background-color: $black;
+    color: $white;
+
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+
+    ::-webkit-scrollbar {
+        display: none;
+    }
+}
+
+body {
+    margin: 0;
+    padding: 0;
+
+    min-height: 100vh;
+
+    background-color: $black;
+
+    scroll-behavior: smooth;
+}

static/css/scss/_variables.scss

@@ -0,0 +1,44 @@
+$black: #151515;
+$white: #e8e3e3;
+
+$red: #B66467;
+$yellow: #D9BC8C;
+$green: #8C977D;
+$blue: #8DA3B9;
+//$dblue: #222c45;
+$purple: #A988B0;
+
+$primary: $green;
+
+@font-face {
+    font-family: 'Mona-Sans';
+    src: url('../fonts/Mona-Sans.woff2') format('woff2 supports variations'),
+        url('../fonts/Mona-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+@font-face {
+    font-family: 'Hubot-Sans';
+    src: url('../fonts/Hubot-Sans.woff2') format('woff2 supports variations'),
+        url('../fonts/Hubot-Sans.woff2') format('woff2-variations');
+    font-weight: 200 900;
+    font-stretch: 75% 125%;
+}
+
+$font-header: "Mona-Sans", sans-serif;
+$font-body: "Hubot-Sans", sans-serif;
+
+@function hexToRGB($hex) {
+    @return red($hex), green($hex), blue($hex);
+}
+
+:root {
+    --red: #{hexToRGB($red)};
+    --yellow: #{hexToRGB($yellow)};
+    --green: #{hexToRGB($green)};
+    --blue: #{hexToRGB($blue)};
+    --purple: #{hexToRGB($purple)};
+}
+
+// I want to use this somewhere
+//background: linear-gradient(200deg, rgba($primary, 0.5) 1.7%, rgba($black, 0) 30%);