3 files changed, 26 insertions, 162 deletions
diff --git a/_scss/components/_background.scss b/_scss/components/_background.scss
deleted file mode 100644
index f91231d..0000000
--- a/_scss/components/_background.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-$background-image: '/assets/background.svg';
-
-html {
-  background: $color-bg url($background-image) repeat fixed;
-}
-
-body {
-  border-left: 1px solid $color-bg-alt;
-  border-right: 1px solid $color-bg-alt;
-}
diff --git a/_scss/components/_core.scss b/_scss/components/_core.scss
index 56cbba4..1278e65 100644
--- a/_scss/components/_core.scss
+++ b/_scss/components/_core.scss
@@ -13,7 +13,31 @@ html {
 }
 
 body {
+  display: flex;
+  flex-direction: row;
   min-height: 100%;
-  padding-bottom: 20px;
-  padding-top: 100px;
+}
+
+.container {
+  flex: 75%;
+  padding-right: 32px;
+}
+
+.sidebar {
+  flex: 25%;
+}
+
+@media (max-width: 684px) {
+  body {
+    flex-direction: column;
+  }
+
+  .container {
+    flex: 100%;
+    padding-right: 0;
+  }
+
+  .sidebar {
+    flex: 100%;
+  }
 }
diff --git a/_scss/components/_navigation.scss b/_scss/components/_navigation.scss
deleted file mode 100644
index 128ae0b..0000000
--- a/_scss/components/_navigation.scss
+++ /dev/null
@@ -1,150 +0,0 @@
-.navigation-container {
-  background: $color-bg;
-  border-left: 1px solid $color-bg-alt;
-  border-right: 1px solid $color-bg-alt;
-  height: 100px;
-  left: 0;
-  margin: auto;
-  max-width: 52em;
-  padding: 0;
-  position: fixed;
-  right: 0;
-  top: 0;
-  width: 100%;
-  z-index: 128;
-}
-
-.navigation {
-  background: $color-bg;
-  border-left: 1px solid $color-bg-alt;
-  border-right: 1px solid $color-bg-alt;
-  height: 100%;
-  left: 0;
-  margin: auto;
-  max-width: 52em;
-  padding: 0;
-  position: fixed;
-  right: 0;
-  top: 100px;
-  transform: scale(.1, 0);
-  transform-origin: 100% 0%;
-  transition: none;
-  width: 100%;
-}
-
-.navigation-header {
-  height: 100px;
-  margin: auto;
-  overflow: hidden;
-  padding-bottom: 32px;
-  padding-left: 32px;
-  padding-right: 100px;
-  padding-top: 32px;
-  position: absolute;
-  text-overflow: ellipsis;
-  text-transform: uppercase;
-  white-space: nowrap;
-  width: 100%;
-}
-
-.navigation-footer {
-  bottom: 0;
-  list-style-type: none;
-  margin: auto;
-  max-width: 52em;
-  padding: 20px;
-  position: fixed;
-  text-align: center;
-  width: 100%;
-
-  li {
-    border-right: 1px solid;
-    display: inline;
-    padding: 0 20px;
-
-    @media (max-width: 684px) {
-      padding: 0 10px;
-    }
-  }
-
-  li:last-child {
-    border-right: 0;
-  }
-}
-
-.navigation-pills {
-  height: 100%;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  text-align: center;
-  width: 100%;
-}
-
-.navigation-item {
-  padding-bottom: 5px;
-
-  &:last-child {
-    padding-bottom: 0;
-  }
-
-  a {
-    text-decoration: none;
-    text-transform: uppercase;
-  }
-}
-
-.toggle-button {
-  display: none;
-
-  &:checked ~ .navigation {
-    transform: none;
-    transition: all .1s;
-  }
-
-  &:checked ~ .toggle-label {
-    span {
-      opacity: 0;
-      top: 50%;
-    }
-
-    span:first-child {
-      opacity: 1;
-      transform: rotate(405deg);
-    }
-
-    span:last-child {
-      opacity: 1;
-      transform: rotate(-405deg);
-    }
-  }
-}
-
-.toggle-label {
-  float: right;
-  height: 20px;
-  margin: 40px;
-  position: relative;
-  width: 15px;
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  span {
-    background: $color-text;
-    height: 2px;
-    position: absolute;
-    top: 50%;
-    transition: .5s;
-    width: 100%;
-
-    &:first-child {
-      top: 3px;
-    }
-
-    &:last-child {
-      top: 16px;
-    }
-  }
-}