1 files changed, 55 insertions, 0 deletions
diff --git a/assets/src/styles/_components/base.scss b/assets/src/styles/_components/base.scss
new file mode 100644
index 0000000..00a0ec8
--- /dev/null
+++ b/assets/src/styles/_components/base.scss
@@ -0,0 +1,55 @@
+html, body {
+  background-color: $base-background-color;
+  color: $base-font-color;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  font-size: $base-font-size;
+  line-height: $base-line-height;
+  height: 100%;
+  margin: 0;
+  text-rendering: optimizeLegibility;
+}
+
+body {
+  display: grid;
+  grid-gap: 1rem;
+  height: 100%;
+  grid-template-columns: 1fr;
+  grid-template-areas: "nav" "main" "footer";
+
+  grid-template-rows: 5rem 1fr 3rem;
+  @media screen and (max-width: $breakpoint) {
+    grid-template-rows: 5rem 1fr 6rem;
+  }
+
+  a {
+    color: $links-color;
+    text-decoration: none;
+
+    &:hover, &:active, &:visited {
+      text-decoration: underline;
+    }
+  }
+
+  hr {
+    border: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    height: 0;
+  }
+
+  nav {
+    grid-area: nav;
+  }
+
+  main {
+    grid-area: main;
+    justify-self: center;
+    grid-column: 1 / -1;
+    max-width: 900px;
+    width: 90%;
+  }
+
+  footer {
+      grid-area: footer;
+  }
+}