adjust the height of the main header after the user scrolls

Guardfile

@@ -8,7 +8,7 @@ end
 
 # compile COFFEE
 # guard 'coffeescript', :input => '_assets/javascripts'
-# guard :concat, type: "js", files: %w(jquery app), input_dir: "_assets/javascripts", output: "application"
-# guard 'process', :name => 'Minify application javascript', :command => 'juicer merge application.js --force -s' do
-#   watch %r{application\.js}
-# end
+guard :concat, type: "js", files: %w(app), input_dir: "_assets/javascripts", output: "application"
+guard 'process', :name => 'Minify application javascript', :command => 'juicer merge application.js --force -s' do
+  watch %r{application\.js}
+end

_assets/javascripts/app.js

@@ -0,0 +1,19 @@
+var scrolled = false;
+
+window.onscroll = function() {
+    scrolled = true;
+}
+
+setInterval(function(){
+    if (scrolled) {
+        scrolled = false;
+        var header = document.querySelectorAll("#main-header")[0];
+        if (window.scrollY > 100) {
+            if (!header.classList.contains("small")) {
+              header.classList.add("small")
+            }
+        } else {
+            header.classList.remove("small")
+        }
+    }
+}, 300);

_assets/stylesheets/about.css

@@ -1,7 +1,7 @@
 #about {
   width: 100%;
   overflow: hidden;
-  padding: 150px 0px 70px;
+  padding: 125px 0px 70px;
   background: white;
   font-size: 20px;
   text-align: center; }

_assets/stylesheets/about.css.sass

@@ -3,7 +3,7 @@
 #about
   width: 100%
   overflow: hidden
-  padding: 150px 0px 70px
+  padding: 125px 0px 70px
   background: #fff
   font-size: 20px
   text-align: center

_assets/stylesheets/app.css

@@ -144,28 +144,17 @@ header {
   border-bottom: 1px solid #e2e2e2;
   padding-top: 20px;
   color: #cccccc;
-  text-align: center; }
+  text-align: center;
+  transition: all 0.2s ease-in-out;
+  height: 50px; }
+  header.small {
+    padding-top: 10px;
+    height: 38px; }
   header h1 {
     font-size: 13px;
-    display: inline-block;
-    margin-bottom: 25px; }
+    display: inline-block; }
     header h1:before {
       border-bottom: 1px solid #333333; }
-  header .links {
-    position: absolute;
-    top: 58px;
-    left: -105px;
-    width: 81px;
-    text-align: right;
-    display: none; }
-    header .links a {
-      padding: 5px;
-      display: block;
-      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-      opacity: 0.7;
-      text-align: right; }
-      header .links a:hover {
-        text-decoration: underline; }
 
 small {
   font-size: 11px; }

_assets/stylesheets/app.css.sass

@@ -151,27 +151,16 @@ header
   padding-top: 20px
   color: #ccc
   text-align: center
+  transition: all 0.2s ease-in-out
+  height: 50px
+  &.small
+    padding-top: 10px
+    height: 38px
   h1
     font-size: 13px
     display: inline-block
-    margin-bottom: 25px
     &:before
       border-bottom: 1px solid #333
-  .links
-    position: absolute
-    top: 58px
-    left: -105px
-    width: 81px
-    text-align: right
-    display: none
-    a
-      padding: 5px
-      display: block
-      +opacity(0.7)
-      text-align: right
-      &:hover
-        text-decoration: underline
-
 
 small
   font-size: 11px

_assets/stylesheets/posts.css

@@ -20,7 +20,6 @@
       #posts article h1:before {
         border-bottom: 0px solid; }
     #posts article h2 {
-      border-bottom: 2px solid;
       display: inline-block;
       margin-top: 10px; }
     #posts article p {

_assets/stylesheets/posts.css.sass

@@ -22,7 +22,6 @@
       &:before
         border-bottom: 0px solid
     h2
-      border-bottom: 2px solid
       display: inline-block
       margin-top: 10px
     p

_assets/stylesheets/responsive.css

@@ -22,6 +22,10 @@
 
   #about {
     padding: 70px 0px; }
+    #about .subheading {
+      width: 100%; }
+    #about .portrait {
+      margin-top: 30px; }
 
   #photos img {
     width: auto; }
@@ -31,9 +35,5 @@
 
   .project h2, .project h2 a {
     text-align: left; }
-
-  .project p {
-    margin-left: 0px; }
-
-  .project .description {
+  .project p, .project .description {
     margin-left: 0px; } }

_assets/stylesheets/responsive.css.sass

@@ -22,18 +22,19 @@
 
   #about
     padding: 70px 0px
+    .subheading
+      width: 100%
+    .portrait
+      margin-top: 30px
 
   #photos img
     width: auto
 
   header a:last-child
     display: none
 
-  .project h2, .project h2 a
-    text-align: left
-
-  .project p
-    margin-left: 0px
-
-  .project .description
-    margin-left: 0px
+  .project
+    h2, h2 a
+      text-align: left
+    p, .description
+      margin-left: 0px

_includes/head.html

@@ -7,6 +7,7 @@
   <meta name="description" content="">
   <meta name="viewport" content="width=device-width">
   <link rel="stylesheet" type="text/css" href="/application.min.css" />
+  <script type="text/javascript" src="/application.min.js"></script>
   <link type="application/atom+xml" rel="alternate" href="rss.xml"/>
   <link type="application/rss+xml" rel="alternate" href="atom.xml"/>
 <script type="text/javascript">

_includes/header.html

@@ -1,11 +1,3 @@
-<header>
+<header id="main-header">
   <a href="/"><h1>Brennan Moore</h1></a>
-  <div class="links">
-    <a href="/posts">blog</a>
-    <a href="/photos">photos</a>
-    <a href="https://github.com/zamiang">github</a>
-    <a href="http://twitter.com/zamiang">twitter</a>
-    <a href="http://instagram.com/zamiang">instagram</a>
-    <a href="http://github.com/zamiang/zamiang-dot-com" class="source">source</a>
-  </div>
 </header>

application.css

@@ -535,7 +535,7 @@ table {
 #about {
   width: 100%;
   overflow: hidden;
-  padding: 150px 0px 70px;
+  padding: 125px 0px 70px;
   background: white;
   font-size: 20px;
   text-align: center; }
@@ -612,7 +612,6 @@ table {
       #posts article h1:before {
         border-bottom: 0px solid; }
     #posts article h2 {
-      border-bottom: 2px solid;
       display: inline-block;
       margin-top: 10px; }
     #posts article p {
@@ -853,28 +852,17 @@ header {
   border-bottom: 1px solid #e2e2e2;
   padding-top: 20px;
   color: #cccccc;
-  text-align: center; }
+  text-align: center;
+  transition: all 0.2s ease-in-out;
+  height: 50px; }
+  header.small {
+    padding-top: 10px;
+    height: 38px; }
   header h1 {
     font-size: 13px;
-    display: inline-block;
-    margin-bottom: 25px; }
+    display: inline-block; }
     header h1:before {
       border-bottom: 1px solid #333333; }
-  header .links {
-    position: absolute;
-    top: 58px;
-    left: -105px;
-    width: 81px;
-    text-align: right;
-    display: none; }
-    header .links a {
-      padding: 5px;
-      display: block;
-      filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=70);
-      opacity: 0.7;
-      text-align: right; }
-      header .links a:hover {
-        text-decoration: underline; }
 
 small {
   font-size: 11px; }
@@ -1067,6 +1055,10 @@ section {
 
   #about {
     padding: 70px 0px; }
+    #about .subheading {
+      width: 100%; }
+    #about .portrait {
+      margin-top: 30px; }
 
   #photos img {
     width: auto; }
@@ -1076,9 +1068,5 @@ section {
 
   .project h2, .project h2 a {
     text-align: left; }
-
-  .project p {
-    margin-left: 0px; }
-
-  .project .description {
+  .project p, .project .description {
     margin-left: 0px; } }

application.js

@@ -0,0 +1,19 @@
+var scrolled = false;
+
+window.onscroll = function() {
+    scrolled = true;
+}
+
+setInterval(function(){
+    if (scrolled) {
+        scrolled = false;
+        var header = document.querySelectorAll("#main-header")[0];
+        if (window.scrollY > 100) {
+            if (!header.classList.contains("small")) {
+              header.classList.add("small")
+            }
+        } else {
+            header.classList.remove("small")
+        }
+    }
+}, 300);

posts/_posts/2014-05-22-learnings.md

@@ -18,7 +18,7 @@ These quotes are all pretty useless. This blog post is about some
 little platitudes that have taken on some real meaning for me through
 experience and now provide a framework for future projects.
 
-## Build something you can make time for
+## Build something you can devote time to
 
 Once, I started fundraising for a project. Due to many factors, we
 launched a project before we were ready and fundraising failed. We had