1 files changed, 29 insertions, 23 deletions

diff --git a/src/styles/_components/base.scss b/src/styles/_components/base.scss
index c5cf2f5..ded29ae 100644
--- a/src/styles/_components/base.scss
+++ b/src/styles/_components/base.scss
@@ -1,33 +1,39 @@
 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;
-  height: 100%;
-  height: 100vh;  // To make sure it takes 100% height on Safari
   line-height: $base-line-height;
-  margin: 0;
-  padding: 0;
-  width: 100%;
+  text-rendering: optimizeLegibility;
 }
 
 body {
-  background-color: $color-white;
-  display: grid;
-  font-family: 'Roboto', sans-serif;
-  grid-template-areas: "nav" "main" "footer";
-  grid-template-columns: 1fr;
-  grid-template-rows: $navbarHeight 1fr $footerHeight;
-}
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
 
-nav {
-  align-self: center;
-  grid-area: nav;
-}
+  a {
+    color: $links-color;
+    text-decoration: none;
 
-main {
-  // align-self: center;
-  grid-area: main;
-}
+    &: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;
+  }
 
-footer {
-  align-self: center;
-  grid-area: footer;
+  main {
+    box-sizing: border-box;
+    flex: 1;
+    margin: 0 auto;
+    max-width: 900px;
+    padding: $navbar-height+2rem 1rem 2rem 1rem;
+    width: 100%;
+  }
 }