added more structure, sass, and page routers

src/scss/base/_main.scss

@@ -0,0 +1,7 @@
+// Main
+
+@use '../base/settings' as *;
+
+main {
+    padding: $section-padding;
+}

src/scss/base/_reset.scss

@@ -0,0 +1,21 @@
+// Resets
+html {
+  box-sizing: border-box;
+}
+*, *:before, *:after {
+  box-sizing: inherit;
+}
+
+body {
+    margin: 0;
+}
+
+img {
+    max-width: 100%;
+    height: auto;
+}
+
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}

src/scss/base/_settings.scss

@@ -0,0 +1,17 @@
+// App Style Settings
+
+@use '../utilities/functions' as *;
+
+// Colors
+$dark: #1c1c1c;
+$light: #fcfcfc;
+$yellow: #f7df1c;
+$grey: #e1e1e1;
+$red: #d75b5b;
+
+// Type
+$bodyFont: 'Roboto', sans-serif;
+$headingFont: 'Alatsi', sans-serif;
+
+// Layout
+$section-padding: em(16) em(20);

src/scss/base/_type.scss

@@ -0,0 +1,20 @@
+// Type
+
+@use 'settings' as *;
+
+body {
+    font-family: $bodyFont;
+    color: $dark;
+}
+
+h1, h2, h3, h4 {
+    font-family: $headingFont;
+}
+
+h1, h2, h3, h4, p {
+    margin-top: 0;
+}
+
+p {
+    line-height: 1.4;
+}

src/scss/components/_body.scss

@@ -0,0 +1,7 @@
+// Body
+
+@use '../base/settings' as *;
+
+body {
+    background-color: $light;
+}

src/scss/components/_footer.scss

@@ -0,0 +1,13 @@
+// Footer
+
+@use "../base/settings" as *;
+@use "../utilities/mixins" as *;
+@use "sass:color";
+
+footer {
+  padding: $section-padding;
+  border-top: 1px dotted color.adjust($grey, $lightness: -20%);
+  p {
+    @include flatten;
+  }
+}

src/scss/components/_header.scss

@@ -0,0 +1,11 @@
+// Header
+
+@use '../base/settings' as *;
+@use '../utilities/mixins' as *;
+
+header {
+    padding: $section-padding;
+    h1 {
+        @include flatten;
+    }
+}

src/scss/styles.scss

@@ -0,0 +1,21 @@
+// Imports
+
+// Resets and base styling
+@use './base/reset';
+@use './base/type';
+@use './base/main';
+
+
+// Components
+@use './components/body';
+@use './components/header';
+@use './components/footer';
+
+//page specific styling
+@use './page//home';
+
+// Utilities
+@use './utilities/utility-classes';
+
+// Google Fonts - Import
+@import url('https://fonts.googleapis.com/css?family=Alatsi|Roboto:400,400i,700,700i&display=swap');

src/scss/utilities/_functions.scss

@@ -0,0 +1,13 @@
+// Functions
+
+// Function to
+// Convert Px to Ems
+@function em($px, $bc: 16) {
+  @return calc($px / $bc) * 1em;
+}
+
+// Function to
+// Convert Px to Rems
+@function rem($px, $bc: 16) {
+  @return calc($px / $bc) * 1rem;
+}

src/scss/utilities/_mixins.scss

@@ -0,0 +1,31 @@
+// Mixins
+
+// Margin center...
+@mixin mc($set-tb: false, $t: 0, $b: 0) {
+    @if($set-tb){
+        margin: {
+            top: $t;
+            bottom: $b;
+            left: auto;
+            right: auto;
+        }
+    }@else {
+        margin: {
+            left: auto;
+            right: auto;
+        }
+    }
+}
+
+@mixin flatten($is-list: false, $is-text: true) {
+    margin: 0;
+    padding: 0;
+    @if($is-list: true){
+        list-style: none;
+    }
+    @if($is-text) {
+        line-height: 1;
+    }
+    
+}
+

src/scss/utilities/_utility-classes.scss

@@ -0,0 +1,15 @@
+// Utility Classes
+
+// Visually hide text
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    -webkit-clip-path: inset(50%);
+    clip-path: inset(50%);
+    border: 0;
+}