Made first iteration of the nav css

public/stylesheets/style.css

@@ -1,8 +1,103 @@
-body {
+@font-face {
-  padding: 50px;
+  font-family: 'Titling Gothic FB';
-  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif; }
+  src: url("../fonts/TITLINGGOTHICFB-WIDE.OTF") format("opentype"); }
 
-a {
+@font-face {
-  color: #00B7FF; }
+  font-family: 'Grifter';
+  src: url("../fonts/GRIFTER.otf") format("opentype"); }
+
+body {
+  background-color: #002234; }
+
+article {
+  min-height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr auto;
+  grid-template-columns: 100%; }
+
+main {
+  padding: 0.5rem; }
+
+footer {
+  padding-bottom: 0.5rem; }
+
+/* Icon 1 */
+.ham {
+  width: 30px;
+  height: 20px;
+  position: relative;
+  margin: 0px;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: .5s ease-in-out;
+  -moz-transition: .5s ease-in-out;
+  -o-transition: .5s ease-in-out;
+  transition: .5s ease-in-out;
+  cursor: pointer; }
+
+.ham span {
+  display: block;
+  position: absolute;
+  height: 3px;
+  width: 100%;
+  border-radius: 9px;
+  opacity: 1;
+  left: 0;
+  -webkit-transform: rotate(0deg);
+  -moz-transform: rotate(0deg);
+  -o-transform: rotate(0deg);
+  transform: rotate(0deg);
+  -webkit-transition: .25s ease-in-out;
+  -moz-transition: .25s ease-in-out;
+  -o-transition: .25s ease-in-out;
+  transition: .25s ease-in-out; }
+
+.ham span {
+  background: #CC7A98; }
+
+.ham span:nth-child(1) {
+  top: 0px; }
+
+.ham span:nth-child(2), .ham span:nth-child(3) {
+  top: 10px; }
+
+.ham span:nth-child(4) {
+  top: 20px; }
+
+.ham.open span:nth-child(1) {
+  top: 11px;
+  width: 0%;
+  left: 50%; }
+
+.ham.open span:nth-child(2) {
+  -webkit-transform: rotate(45deg);
+  -moz-transform: rotate(45deg);
+  -o-transform: rotate(45deg);
+  transform: rotate(45deg); }
+
+.ham.open span:nth-child(3) {
+  -webkit-transform: rotate(-45deg);
+  -moz-transform: rotate(-45deg);
+  -o-transform: rotate(-45deg);
+  transform: rotate(-45deg); }
+
+.ham.open span:nth-child(4) {
+  top: 11px;
+  width: 0%;
+  left: 50%; }
+
+header {
+  padding-top: 0.5rem;
+  padding-left: 1rem;
+  padding-right: 1rem; }
+  header nav a p {
+    font-size: 3vh;
+    font-family: 'Titling Gothic FB';
+    color: #CC7A98; }
+    header nav a p span {
+      font-size: 3.2vh;
+      font-family: 'Grifter'; }
 
 /*# sourceMappingURL=style.css.map */

public/stylesheets/style.sass

@@ -1,6 +1,127 @@
-body
+$pink: #CC7A98
-    padding: 50px
+$black: #002234
-    font: 14px "Lucida Grande", Helvetica, Arial, sans-serif
 
-a
+@font-face
-    color: #00B7FF
+    font-family: 'Titling Gothic FB'
+    src: url("../fonts/TITLINGGOTHICFB-WIDE.OTF") format('opentype')
+
+@font-face
+    font-family: 'Grifter'
+    src: url("../fonts/GRIFTER.otf") format('opentype')
+
+body
+    background-color: $black
+
+article
+    min-height: 100%
+    display: grid
+    grid-template-rows: auto 1fr auto
+    grid-template-columns: 100%
+
+
+
+main
+    padding: 0.5rem
+
+footer
+    padding-bottom: 0.5rem
+
+
+
+
+
+
+
+
+// nav stuff
+/* Icon 1 */
+
+.ham
+    width: 30px
+    height: 20px
+    position: relative
+    margin: 0px
+    -webkit-transform: rotate(0deg)
+    -moz-transform: rotate(0deg)
+    -o-transform: rotate(0deg)
+    transform: rotate(0deg)
+    -webkit-transition: .5s ease-in-out
+    -moz-transition: .5s ease-in-out
+    -o-transition: .5s ease-in-out
+    transition: .5s ease-in-out
+    cursor: pointer
+
+
+.ham span
+    display: block
+    position: absolute
+    height: 3px
+    width: 100%
+    border-radius: 9px
+    opacity: 1
+    left: 0
+    -webkit-transform: rotate(0deg)
+    -moz-transform: rotate(0deg)
+    -o-transform: rotate(0deg)
+    transform: rotate(0deg)
+    -webkit-transition: .25s ease-in-out
+    -moz-transition: .25s ease-in-out
+    -o-transition: .25s ease-in-out
+    transition: .25s ease-in-out
+
+
+.ham span
+    background: $pink
+
+.ham span:nth-child(1)
+    top: 0px
+
+
+.ham span:nth-child(2), .ham span:nth-child(3)
+    top: 10px
+
+
+.ham span:nth-child(4)
+    top: 20px
+
+
+.ham.open span:nth-child(1)
+    top: 11px
+    width: 0%
+    left: 50%
+
+
+.ham.open span:nth-child(2)
+    -webkit-transform: rotate(45deg)
+    -moz-transform: rotate(45deg)
+    -o-transform: rotate(45deg)
+    transform: rotate(45deg)
+
+
+.ham.open span:nth-child(3)
+    -webkit-transform: rotate(-45deg)
+    -moz-transform: rotate(-45deg)
+    -o-transform: rotate(-45deg)
+    transform: rotate(-45deg)
+
+
+.ham.open span:nth-child(4)
+    top: 11px
+    width: 0%
+    left: 50%
+
+
+header
+    padding-top: 0.5rem
+    padding-left: 1rem
+    padding-right: 1rem
+    nav
+        a
+            p
+                font-size: 3vh
+                font-family: 'Titling Gothic FB'
+                color: $pink
+
+                span
+                    font-size: 3.2vh
+                    font-family: 'Grifter'