Off-piste first pass

.netlify/state.json

@@ -1,3 +1,3 @@
 {
-	"siteId": "cd85a3ac-8bcd-4309-86cd-699127122d3d"
+	"siteId": "3d80cd69-6f30-4efd-85ea-fd1c6b980107"
 }

Gemfile.lock

@@ -140,10 +140,11 @@ DEPENDENCIES
   contentful_middleman!
   fastimage
   middleman (>= 4.2.0)
+  middleman-cli (>= 4.2.1)
   middleman-livereload
   redcarpet
   tzinfo-data
   wdm (~> 0.1.0)
 
 BUNDLED WITH
-   1.14.6
+   1.16.6

README.md

@@ -1,6 +1,9 @@
 # graz.io
 Sebastian Graz's personal portfolio
 
+`rvm use 2.3.3`
+`n node/8.11.2`
+
 Commands:
 
 Get started

assets/javascript/all.js

@@ -106,6 +106,19 @@ function tileHover() {
   });
 };
 
+function hideNavOnScroll() {
+  var prevScrollpos = window.pageYOffset;
+window.onscroll = function() {
+  var currentScrollPos = window.pageYOffset;
+  if (prevScrollpos > currentScrollPos) {
+    document.querySelector(".navigation").classList.remove('hidden-nav');
+  } else {
+    document.querySelector(".navigation").classList.add('hidden-nav');
+  }
+  prevScrollpos = currentScrollPos;
+}
+}
+
 var BarbaWidget = {
     init: function() {
 
@@ -138,7 +151,7 @@ var BarbaWidget = {
             scrollReveal();
             tileHover();
             fixTouchLinks();
-
+            hideNavOnScroll();
               // The Transition has just finished.
           },
           onLeave: function() {
@@ -157,7 +170,7 @@ var BarbaWidget = {
 
 
 $doc.ready(function() {
-
+  hideNavOnScroll();
   detectMobile();
   videoInView();
   BarbaWidget.init();

assets/stylesheets/_layout/_elements.scss

@@ -55,3 +55,8 @@ kbd {
 blockquote {
   margin: 12%;
 }
+footer {
+  .spacer {
+    display: none;
+  }
+}

assets/stylesheets/_layout/_typography.scss

@@ -40,7 +40,6 @@ body {
   // font-variant-numeric: oldstyle-nums;
 }
 
-
 h1,
 h2,
 h3,

assets/stylesheets/_module/_nav.scss

@@ -3,11 +3,11 @@ nav {
     stroke: $text-color;
   }
   .navigation {
-    pointer-events: none;
     width: 100%;
+    pointer-events: none;
     margin: 0 auto;
     top:1rem;
-    transition: .4s $bezier top;
+    transition: .4s $bezier top, .9s $bezier opacity, .7s $bezier transform;
     position: fixed;
     z-index: 3;
     @include mq(sm) {
@@ -27,6 +27,10 @@ nav {
       }
     }
   }
+  .navigation.hidden-nav {
+    opacity: 0.3;
+    pointer-events: none;
+  } 
   ul {
     display: flex;
     align-items: center;

assets/stylesheets/_module/_tiles.scss

@@ -29,7 +29,6 @@
   left: 0;
   width: 100%;
   transform: scale(0);
-  will-change: transform;
   height: 100%;
   position : absolute;
 }
@@ -80,8 +79,11 @@
   }
 
   .tile-link {
-    position: static;
+    display:block;
+    width: 100%;
+    height: 100%;
   }
+
   .tile-video {
     transition: .4s $bezier all;
     width: 50%;
@@ -90,7 +92,7 @@
     opacity: 1;
     right: 0;
     z-index: 3;
-
+    overflow: hidden;
     @include mq(md) {
       opacity: 0;
       width: 70%;
@@ -99,6 +101,15 @@
       display: none;
     }
   }
+  .tile-video.full-width-video {
+    width: 100%;
+    height: 100%;
+    video {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
   .tile-image {
     transition: .4s $bezier all;
     width: 50%;
@@ -122,6 +133,7 @@
   }
 
   .tile-title {
+    letter-spacing: -0.01em;
     font-size: 1.25rem;
     margin: 0;
     visibility: hidden;

assets/stylesheets/main.scss

@@ -1,6 +1,6 @@
 @charset "utf-8";
 
-$text-color : #362f3e;
+$text-color : #000; //362f3e
 $max-width : 960px;
 $link-color : rgba($text-color, 0.6);
 $bezier: cubic-bezier(.03, .82, .34, .99);
@@ -88,10 +88,12 @@ $mq-sm : 30;
   margin-left: auto;
 }
 .case-char-padding {
-  padding: .1em .2em;
+  padding: 0 .15em;
 }
 .case-char {
+  letter-spacing: -0.04em;
   display: flex;
+  font-weight: 100;
   margin-right: 1px;
   margin-bottom: 1px;
   &.reveal {