Made code shorter & work, started on main content

public/stylesheets/style.css

@@ -6,8 +6,28 @@
   font-family: 'Grifter';
   src: url("../fonts/GRIFTER.otf") format("opentype"); }
 
+@font-face {
+  font-family: 'Gilroy';
+  src: url("../fonts/Gilroy-ExtraBold.otf") format("opentype"); }
+
+@font-face {
+  font-family: 'Apercu Mono';
+  src: url("../fonts/ApercuMono.ttf") format("truetype"); }
+
+html, body {
+  width: 100%;
+  height: 100%;
+  color: white; }
+
 body {
-  background-color: #002234; }
+  background-color: #002234;
+  color: #CC7A98; }
+
+h1 {
+  font-family: "Gilroy"; }
+
+p {
+  font-family: "Apercu Mono"; }
 
 article {
   min-height: 100%;
@@ -15,13 +35,32 @@ article {
   grid-template-rows: auto 1fr auto;
   grid-template-columns: 100%; }
 
+header nav a span {
+  font-size: 3vh;
+  font-family: 'Titling Gothic FB';
+  color: #CC7A98; }
+  header nav a span span {
+    font-size: 3.2vh;
+    font-family: 'Grifter'; }
+
+header nav #navbarSupportedContent23 ul {
+  background-color: #CC7A98; }
+  header nav #navbarSupportedContent23 ul li {
+    text-align: center; }
+    header nav #navbarSupportedContent23 ul li a {
+      color: #002234; }
+
 main {
   padding: 0.5rem; }
+  main h1 span {
+    text-decoration: underline #CC7A98; }
+  main p {
+    margin-bottom: 5px; }
 
 footer {
+  text-align: center;
   padding-bottom: 0.5rem; }
 
-/* Icon 1 */
 .ham {
   width: 30px;
   height: 20px;
@@ -52,9 +91,7 @@ footer {
   -webkit-transition: .25s ease-in-out;
   -moz-transition: .25s ease-in-out;
   -o-transition: .25s ease-in-out;
-  transition: .25s ease-in-out; }
+  transition: .25s ease-in-out;
-
-.ham span {
   background: #CC7A98; }
 
 .ham span:nth-child(1) {
@@ -88,16 +125,4 @@ footer {
   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

@@ -9,8 +9,28 @@ $black: #002234
     font-family: 'Grifter'
     src: url("../fonts/GRIFTER.otf") format('opentype')
 
+@font-face
+    font-family: 'Gilroy'
+    src: url("../fonts/Gilroy-ExtraBold.otf") format('opentype')
+
+@font-face
+    font-family: 'Apercu Mono'
+    src: url("../fonts/ApercuMono.ttf") format('truetype')
+
+html, body
+    width: 100%
+    height: 100%
+    color: white
+
 body
     background-color: $black
+    color: $pink
+
+h1
+    font-family: "Gilroy"
+
+p
+    font-family: "Apercu Mono"
 
 article
     min-height: 100%
@@ -18,23 +38,39 @@ article
     grid-template-rows: auto 1fr auto
     grid-template-columns: 100%
 
+header
+    nav
+        a
+            span
+                font-size: 3vh
+                font-family: 'Titling Gothic FB'
+                color: $pink
+                span
+                    font-size: 3.2vh
+                    font-family: 'Grifter'
 
+        #navbarSupportedContent23
+            ul
+                background-color: $pink
+                li
+                    text-align: center
+                    a
+                        color: $black
 
 main
     padding: 0.5rem
+    h1
+        span
+            text-decoration: underline $pink
+    p
+        margin-bottom: 5px
+
 
 footer
+    text-align: center
     padding-bottom: 0.5rem
 
-
+// Nav stuff
-
-
-
-
-
-
-// nav stuff
-/* Icon 1 */
 
 .ham
     width: 30px
@@ -51,7 +87,6 @@ footer
     transition: .5s ease-in-out
     cursor: pointer
 
-
 .ham span
     display: block
     position: absolute
@@ -68,60 +103,35 @@ footer
     -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'

views/index.pug

@@ -4,13 +4,13 @@ block content
     article
         header
             // Navbar
-            nav.navbar.mb-4
+            nav.navbar
                 // Navbar brand
                 a.navbar-brand(href='#')
-                    p ESTR
+                    span ESTR
                         span //
                 // Collapse button
-                button.navbar-toggler.ham-button(type='button' data-toggle='collapse' data-target='#navbarSupportedContent23' aria-controls='navbarSupportedContent23' aria-expanded='false' aria-label='Toggle navigation')
+                button.navbar-toggler.ham-button(type='button' data-toggle='collapse' data-target='#navbarSupportedContent23' aria-controls='navbarSupportedContent23' aria-expanded='false' aria-label='Toggle navigation' style='cursor: pointer;')
                     .ham
                         span
                         span
@@ -25,23 +25,31 @@ block content
                                 | Home
                                 span.sr-only (current)
                         li.nav-item
-                            a.nav-link(href='#') Features
+                            a.nav-link(href='#') About
                         li.nav-item
-                            a.nav-link(href='#') Pricing
+                            a.nav-link(href='#') CV
-                    // Links
+                        li.nav-item
-                // Collapsible content
+                            a.nav-link(href='#') Projects
-
+                        li.nav-item
+                            a.nav-link(href='#') Blog
+                        li.nav-item
+                            a.nav-link(href='#') Contact
 
         main
             // left hand text
-            h1
+            .home-content
-                | Hello,
+                .left
-                br
+                    h1
-                | I'm Esther
+                        | Hello,
-            p I'm a Programmer & Designer from the UK.
+                        br
-            p I like to make stuff
+                        | I'm
-
+                        |
-            // The pink right block images and stuff here
+                        span Esther
+                    p I'm a Programmer & Designer from the UK.
+                    p I like to make stuff.
+                .right
+                    .pink-box
+                        //icons
 
         footer
             p piss