1 files changed, 89 insertions, 0 deletions
diff --git a/_sass/_layout.scss b/_sass/_layout.scss
new file mode 100644
index 0000000..58b03a2
--- /dev/null
+++ b/_sass/_layout.scss
@@ -0,0 +1,89 @@
+.container {
+    margin: 0 auto;
+    max-width: 800px;
+    width: 80%;
+}
+
+main, footer, .nav-container {
+    margin: 0 auto;
+    max-width: 800px;
+    width: 80%;
+}
+
+.nav {
+    box-shadow: 0 2px 2px -2px $shadow-color;
+    overflow: auto;
+
+    &-container {
+        margin: 1rem auto;
+        position: relative;
+        text-align: center;
+    }
+
+    &-title {
+        @include transition(all .2s ease-out);
+        color: $default-color;
+        display: inline-block;
+        margin: 0;
+        padding-right: .2rem;
+
+        &:hover,
+        &:focus {
+            opacity: .6;
+        }
+    }
+
+    ul {
+        list-style-type: none;
+        margin: 1rem 0 0;
+        padding: 0;
+        text-align: center;
+    }
+
+    li {
+        @include transition(all .2s ease-out);
+        color: $default-color;
+        display: inline-block;
+        opacity: .6;
+        padding: 0 2rem 0 0;
+
+        &:last-child {
+            padding-right: 0;
+        }
+
+        &:hover,
+        &:focus {
+            opacity: 1;
+        }
+    }
+
+    a {
+        color: $default-color;
+        font-family: $sans-serif;
+    }
+}
+
+@media (min-width: 600px) {
+    .nav {
+        &-container {
+            text-align: left;
+        }
+
+        ul {
+            bottom: 0;
+            position: absolute;
+            right: 0;
+        }
+    }
+}
+
+footer {
+    font-family: $serif-secondary;
+    padding: 2rem 0;
+    text-align: center;
+
+    span {
+        color: $default-color;
+        font-size: .8rem;
+    }
+}