Support for big title images and bugfixes

Add support for big title images
(e6cb0a4f54).
Several bugfixes including pygment_highlights.css dependency, Index page
alignment/containers, and Index page site title. Also renamed
description to subtitle, in line with the original theme.

archetypes/default.md

@@ -1,5 +1,6 @@
 +++
 title = ""
-description = ""
+subtitle = ""
 date = "2014-07-11T10:54:24+02:00"
+bigimg = ""
 +++

exampleSite/config.toml

@@ -8,6 +8,7 @@ pygmentsUseClasses = true
 
 [Params]
   logo = "img/avatar-icon.png"
+  subtitle = "Build a beautiful and simple website in minutes"
 
 [Author]
   name = "Some Person"

exampleSite/content/post/2015-01-19-soccer.md

@@ -1,6 +1,6 @@
 ---
 title: Soccer
-description: Best sport ever!
+subtitle: Best sport ever!
 date: 2015-01-19
 ---
 

exampleSite/content/post/2015-02-13-hamlet-monologue.md

@@ -1,6 +1,6 @@
 ---
 title: To be
-description: ... or not to be?
+subtitle: ... or not to be?
 date: 2015-02-13
 ---
 

exampleSite/content/post/2015-02-20-test-markdown.md

@@ -1,6 +1,6 @@
 ---
 title: Test markdown
-description: Each post also has a subtitle
+subtitle: Each post also has a subtitle
 date: 2015-02-20
 ---
 

exampleSite/content/post/2015-02-26-flake-it-till-you-make-it.md

@@ -1,7 +1,8 @@
 ---
 title: Flake it till you make it
-description: Excerpt from Soulshaping by Jeff Brown
+subtitle: Excerpt from Soulshaping by Jeff Brown
 date: 2015-02-26
+bigimg: /img/path.jpg
 ---
 
 Under what circumstances should we step off a path? When is it essential that we finish what we start? If I bought a bag of peanuts and had an allergic reaction, no one would fault me if I threw it out. If I ended a relationship with a woman who hit me, no one would say that I had a commitment problem. But if I walk away from a seemingly secure route because my soul has other ideas, I am a flake?  

exampleSite/content/post/2016-03-08-code-sample.md

@@ -1,6 +1,6 @@
 ---
 title: Code Sample
-description: Using Pygments
+subtitle: Using Pygments
 date: 2016-03-08
 ---
 

layouts/index.html

@@ -7,50 +7,71 @@
 
     {{ partial "nav.html" . }}
 
-    <div role="main" class="container main-content">
+    <header class="header-section ">
-
+      <div class="intro-header no-img">
-      <div class="posts-list">
+        <div class="container">
-        {{ $pag := .Paginate (where .Data.Pages "Type" "post") }}
+          <div class="row">
-        {{ range $pag.Pages }}
+            <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-        <article class="post-preview">
+              <div class="page-heading">
-          <a href="{{ .Permalink }}">
+                <h1>{{.Site.Title}}</h1>
-      	  <h2 class="post-title">{{ .Title }}</h2>
+                {{if .Site.Params.subtitle}}
-      	
+                  <hr class="small">
-      	  {{ if .Description }}
+                  <span class="page-subheading">{{.Site.Params.subtitle}}</span>
-      	  <h3 class="post-subtitle">
+                {{end}}
-      	    {{ .Description }}
+              </div>
-      	  </h3>
+            </div>
-      	  {{ end }}  
-          </a>
-
-          <p class="post-meta">
-            Posted on {{ .Date.Format "January 2, 2006" }}
-          </p>
-        
-          <div class="post-entry">
-            {{ .Summary }}
-      	  <a href="{{ .Permalink }}" class="post-read-more">[Read&nbsp;More]</a>
           </div>
-        
+        </div>
-         </article>
-        {{ end }}
       </div>
+    </header>
 
-      {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
-      <ul class="pager main-pager">
-        {{ if .Paginator.HasPrev }}
-        <li class="previous">
-          <a href="{{ .URL }}page/{{ .Paginator.Prev.PageNumber }}">&larr; Newer Posts</a>
-        </li>
-        {{ end }}
-        {{ if .Paginator.HasNext }}
-        <li class="next">
-          <a href="{{ .URL }}page/{{ .Paginator.Next.PageNumber }}">Older Posts &rarr;</a>
-        </li>
-        {{ end }}
-      </ul>
-      {{ end }}
 
+    <div role="main" class="container">
+      <div class="row">
+        <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+          <div class="posts-list">
+            {{ $pag := .Paginate (where .Data.Pages "Type" "post") }}
+            {{ range $pag.Pages }}
+            <article class="post-preview">
+              <a href="{{ .Permalink }}">
+          	  <h2 class="post-title">{{ .Title }}</h2>
+          	
+          	  {{ if .Params.subtitle }}
+          	  <h3 class="post-subtitle">
+          	    {{ .Params.subtitle }}
+          	  </h3>
+          	  {{ end }}  
+              </a>
+
+              <p class="post-meta">
+                Posted on {{ .Date.Format "January 2, 2006" }}
+              </p>
+            
+              <div class="post-entry">
+                {{ .Summary }}
+          	  <a href="{{ .Permalink }}" class="post-read-more">[Read&nbsp;More]</a>
+              </div>
+            
+             </article>
+            {{ end }}
+          </div>
+
+          {{ if or (.Paginator.HasPrev) (.Paginator.HasNext) }}
+          <ul class="pager main-pager">
+            {{ if .Paginator.HasPrev }}
+            <li class="previous">
+              <a href="{{ .URL }}page/{{ .Paginator.Prev.PageNumber }}">&larr; Newer Posts</a>
+            </li>
+            {{ end }}
+            {{ if .Paginator.HasNext }}
+            <li class="next">
+              <a href="{{ .URL }}page/{{ .Paginator.Next.PageNumber }}">Older Posts &rarr;</a>
+            </li>
+            {{ end }}
+          </ul>
+          {{ end }}
+        </div>
+      </div>
     </div>
 
     {{ partial "footer.html" . }}

layouts/partials/head.html

@@ -20,7 +20,7 @@
   <link rel="stylesheet" href="{{ .Site.BaseURL }}css/main.css" />
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic" />
   <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800" />
-  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/rouge.css" />
+  <link rel="stylesheet" href="{{ .Site.BaseURL }}css/pygment_highlights.css" />
   
   <!-- Facebook OpenGraph tags -->
   <meta property="og:title" content="{{ .Title }}" />

layouts/partials/header.html

@@ -0,0 +1,64 @@
+<!-- TODO this file has become a mess, refactor it -->
+
+{{ if or .Params.bigimg .Title }}
+
+{{ if .Params.bigimg }}
+  <div id="header-big-imgs" data-num-img=1 data-img-src-1="{{.Params.bigimg}}"></div>
+{{ end }}
+
+<header class="header-section {{ if .Params.bigimg }}has-img{{ end }}">
+{{ if .Params.bigimg }}
+<div class="big-img intro-header">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+        <div class="{{ .Type }}-heading">
+          <h1>{{ if .Title }}{{ .Title }}{{ else }}<br/>{{ end }}</h1>
+      {{ if .Params.subtitle }}
+        {{ if eq .Type "page" }}
+            <hr class="small">
+            <span class="{{ .Type }}-subheading">{{ .Params.subtitle }}</span>
+      {{ else }}
+      <h2 class="{{ .Type }}-subheading">{{ .Params.subtitle }}</h2>
+      {{ end }}
+      {{ end }}
+      
+      {{ if eq .Type "post" }}
+      <span class="post-meta">Posted on {{ .Date.Format "January 2, 2006" }}</span>
+      {{ end }}
+        </div>
+      </div>
+    </div>
+  </div>
+  <span class='img-desc'></span>
+</div>
+{{ end }}
+<div class="intro-header no-img">
+  <div class="container">
+    <div class="row">
+      <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
+        <div class="{{ .Type }}-heading">
+          <h1>{{ if .Title }}{{ .Title }}{{ else }}<br/>{{ end }}</h1>
+      {{ if .Params.subtitle }}
+        {{ if eq .Type "page" }}
+            <hr class="small">
+            <span class="{{ .Type }}-subheading">{{ .Params.subtitle }}</span>
+      {{ else }}
+      <h2 class="{{ .Type }}-subheading">{{ .Params.subtitle }}</h2>
+      {{ end }}
+      {{ end }}
+      
+      {{ if eq .Type "post" }}
+      <span class="post-meta">Posted on {{ .Date.Format "January 2, 2006" }}</span>
+      {{ end }}
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+</header>
+
+
+{{ else }}
+<div class="intro-header"></div>
+{{ end }}

layouts/partials/page.html

@@ -1,26 +1,14 @@
-{{ if .Title }}
+{{ partial "header.html" . }}
-<header class="header-page">
+
+<div class="container" role="main">
   <div class="row">
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-	  <div class="page-heading">
+      {{ .Content }}
-	    <h1>{{ .Title }}</h1>
+      {{ if .Site.DisqusShortname }}
-	    {{ if .Description }}
+        <div class="disqus-comments">
-	    <hr class="small">
+        {{ template "_internal/disqus.html" . }}
-	    <span class="page-subheading">{{ .Description }}</span>
+        </div>
-	    {{ end }}
+      {{ end }}
-	  </div>
     </div>
   </div>
-</header>
-{{ end }}
-
-<div class="row">
-  <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-    {{ .Content }}
-	{{ if .Site.DisqusShortname }}
-    <div class="disqus-comments">
-	  {{ template "_internal/disqus.html" . }}
-    </div>
-	{{ end }}
-  </div>
 </div>

layouts/partials/post.html

@@ -1,46 +1,31 @@
-<header class="header-post">
+{{ partial "header.html" . }}
+
+<div class="container">
   <div class="row">
     <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-      <div class="post-heading">
+      <article role="main" class="blog-post">
-        <h1>{{ .Title }}</h1>
+          {{ .Content }}
-        {{ if .Description }}
+      </article>
-        <h2 class="post-subheading">{{ .Description }}</h2>
+
+      <ul class="pager blog-pager">
+        {{ if .PrevInSection }}
+        <li class="previous">
+          <a href="{{ .PrevInSection.Permalink }}" data-toggle="tooltip" data-placement="top" title="{{ .PrevInSection.Title }}">&larr; Previous Post</a>
+        </li>
         {{ end }}
-        <span class="post-meta">Posted on {{ .Date.Format "January 2, 2006" }}</span>
+        {{ if .NextInSection }}
+        <li class="next">
+          <a href="{{ .NextInSection.Permalink }}" data-toggle="tooltip" data-placement="top" title="{{ .NextInSection.Title }}">Next Post &rarr;</a>
+        </li>
+        {{ end }}
+      </ul>
+
+      {{ if .Site.DisqusShortname }}
+      <div class="disqus-comments">
+        {{ template "_internal/disqus.html" . }}
       </div>
-     </div>
-  </div>
-</header>
-
-<article>
-  <div class="row">
-    <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-	  {{ .Content }}
-	</div>
-  </div>
-</article>
-
-<div class="row">
-  <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-    <ul class="pager blog-pager">
-      {{ if .PrevInSection }}
-      <li class="previous">
-        <a href="{{ .PrevInSection.Permalink }}" data-toggle="tooltip" data-placement="top" title="{{ .PrevInSection.Title }}">&larr; Previous Post</a>
-      </li>
       {{ end }}
-      {{ if .NextInSection }}
+
-      <li class="next">
+    </div>
-        <a href="{{ .NextInSection.Permalink }}" data-toggle="tooltip" data-placement="top" title="{{ .NextInSection.Title }}">Next Post &rarr;</a>
-      </li>
-      {{ end }}
-    </ul>
   </div>
 </div>
-
-{{ if .Site.DisqusShortname }}
-<div class="row disqus-comments">
-  <div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
-    {{ template "_internal/disqus.html" . }}
-  </div>
-</div>
-{{ end }}

static/css/main.css

@@ -326,49 +326,139 @@ footer .theme-by {
   }
 }
 
-/* --- Post and page layout --- */
+/* --- Post and page headers --- */
 
-header.header-page {
+.intro-header {
-  margin-bottom: 20px;
+  margin: 80px 0 20px;
+  position: relative;
 }
-
+.intro-header.big-img {
-header.header-page .page-heading {
+  background: no-repeat center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  margin-top: 51px; /* The small navbar is 50px tall + 1px border */
+  margin-bottom: 35px;
+}
+.intro-header.big-img  .big-img-transition {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  opacity: 0;
+  background: no-repeat center center;
+  -webkit-background-size: cover;
+  -moz-background-size: cover;
+  background-size: cover;
+  -o-background-size: cover;
+  -webkit-transition: opacity 1s linear;
+  -moz-transition: opacity 1s linear;
+  transition: opacity 1s linear;
+}
+.intro-header .page-heading {
   text-align: center;
 }
-
+.intro-header.big-img .page-heading,
-header.header-post .post-heading h1 {
+.intro-header.big-img .post-heading {
-  font-size: 35px;
+  padding: 100px 0;
-  margin-top: 0;
+  color: #FFF;
+  text-shadow: 1px 1px 3px #000;
 }
-
+.intro-header .page-heading h1 {
-header.header-page .page-heading h1 {
+  margin-top: 0;
   font-size: 50px;
-  margin-top: 0;
 }
-
+.intro-header .post-heading h1 {
-header.header-post .post-heading .post-subheading,
+  margin-top: 0;
-header.header-page .page-heading .page-subheading {
+  font-size: 35px;
-  font-size: 24px;
+}
+.intro-header .page-heading .page-subheading,
+.intro-header .post-heading .post-subheading {
+  font-size: 27px;
   line-height: 1.1;
   display: block;
   font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-weight: 300;
   margin: 10px 0 0;
 }
-
+.intro-header .post-heading .post-subheading {
-header.header-post .post-heading .post-subheading {
   margin-bottom: 20px;
 }
-
+.intro-header.big-img .page-heading .page-subheading,
+.intro-header.big-img .post-heading .post-subheading {
+  font-weight: 400;
+}
+.intro-header.big-img .page-heading hr {
+  box-shadow: 1px 1px 3px #000;
+  -webkit-box-shadow: 1px 1px 3px #000;
+  -moz-box-shadow: 1px 1px 3px #000;
+}
+.intro-header.big-img .post-heading .post-meta {
+  color: #EEE;
+}
+.intro-header.big-img .img-desc {
+  background: rgba(30, 30, 30, 0.6);
+  position: absolute;
+  padding: 5px 10px;
+  font-size: 11px;
+  color: #EEE;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+  right: 0;
+  bottom: 0;
+  display: none;
+}
 @media only screen and (min-width: 768px) {
-  header.header-post .post-heading h1 {
+  .intro-header {
+    margin-top: 130px;
+  }
+  .intro-header.big-img {
+    margin-top: 91px;  /* Full navbar is small navbar + 20px padding on each side when expanded */
+  } 
+  .intro-header.big-img .page-heading,
+  .intro-header.big-img .post-heading  {
+    padding: 150px 0;
+  }  
+  .intro-header .page-heading h1 {
+    font-size: 80px;
+  }
+  .intro-header .post-heading h1 {
     font-size: 50px;
   }
+  .intro-header.big-img .img-desc {
+    font-size: 14px;
+  }
 }
 
-@media only screen and (min-width: 768px) {
+.header-section.has-img .no-img {
-  header.header-page .page-heading h1 {
+  margin-top: 0;
-    font-size: 80px;
+  background: #FCFCFC;
+  margin: 0 0 40px;
+  padding: 20px 0;
+  box-shadow: 0 0 5px #AAA;
+}
+/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
+.header-section.has-img .intro-header.no-img {
+  display: none;
+}
+@media only screen and (max-width: 365px) {
+  .header-section.has-img .intro-header.no-img {
+    display: block;
+  }
+  .intro-header.big-img {
+    width: 100%;
+    height: 220px;
+  }
+  .intro-header.big-img .page-heading,
+  .intro-header.big-img .post-heading {
+    display: none;
+  }
+  .header-section.has-img .big-img {
+    margin-bottom: 0;
+  }  
+} 
+@media only screen and (max-width: 325px) { 
+  .intro-header.big-img {
+    height: 200px;
   }
 }
 
@@ -456,4 +546,4 @@ table tr td :first-child {
 table tr th :last-child,
 table tr td :last-child {
   margin-bottom: 0;
-}
+}

static/js/main.js

@@ -1,32 +1,111 @@
-// Dean Attali / Beautiful Jekyll 2015
+// Dean Attali / Beautiful Jekyll 2016
 
-// Shorten the navbar after scrolling a little bit down
+var main = {
-$(window).scroll(function() {
+
-    if ($(".navbar").offset().top > 50) {
+  bigImgEl : null,
-        $(".navbar").addClass("top-nav-short");
+  numImgs : null,
-    } else {
+
-        $(".navbar").removeClass("top-nav-short");
+  init : function() {
+    // Shorten the navbar after scrolling a little bit down
+    $(window).scroll(function() {
+        if ($(".navbar").offset().top > 50) {
+            $(".navbar").addClass("top-nav-short");
+        } else {
+            $(".navbar").removeClass("top-nav-short");
+        }
+    });
+    
+    // On mobile, hide the avatar when expanding the navbar menu
+    $('#main-navbar').on('show.bs.collapse', function () {
+      $(".navbar").addClass("top-nav-expanded");
+    });
+    $('#main-navbar').on('hidden.bs.collapse', function () {
+      $(".navbar").removeClass("top-nav-expanded");
+    });
+  
+    // On mobile, when clicking on a multi-level navbar menu, show the child links
+    $('#main-navbar').on("click", ".navlinks-parent", function(e) {
+      var target = e.target;
+      $.each($(".navlinks-parent"), function(key, value) {
+        if (value == target) {
+          $(value).parent().toggleClass("show-children");
+        } else {
+          $(value).parent().removeClass("show-children");
+        }
+      });
+    });
+    
+    // show the big header image  
+    main.initImgs();
+  },
+  
+  initImgs : function() {
+    // If the page was large images to randomly select from, choose an image
+    if ($("#header-big-imgs").length > 0) {
+      main.bigImgEl = $("#header-big-imgs");
+      main.numImgs = main.bigImgEl.attr("data-num-img");
+
+          // 2fc73a3a967e97599c9763d05e564189
+    // set an initial image
+    var imgInfo = main.getImgInfo();
+    var src = imgInfo.src;
+    var desc = imgInfo.desc;
+      main.setImg(src, desc);
+    
+    // For better UX, prefetch the next image so that it will already be loaded when we want to show it
+      var getNextImg = function() {
+      var imgInfo = main.getImgInfo();
+      var src = imgInfo.src;
+      var desc = imgInfo.desc;      
+      
+    var prefetchImg = new Image();
+      prefetchImg.src = src;
+    // if I want to do something once the image is ready: `prefetchImg.onload = function(){}`
+    
+      setTimeout(function(){
+                  var img = $("<div></div>").addClass("big-img-transition").css("background-image", 'url(' + src + ')');
+        $(".intro-header.big-img").prepend(img);
+        setTimeout(function(){ img.css("opacity", "1"); }, 50);
+      
+      // after the animation of fading in the new image is done, prefetch the next one
+        //img.one("transitioned webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
+      setTimeout(function() {
+        main.setImg(src, desc);
+      img.remove();
+        getNextImg();
+      }, 1000); 
+        //});   
+      }, 6000);
+      };
+    
+    // If there are multiple images, cycle through them
+    if (main.numImgs > 1) {
+        getNextImg();
     }
-});
+    }
-
+  },
-// On mobile, hide the avatar when expanding the navbar menu
+  
-$('#main-navbar').on('show.bs.collapse', function () {
+  getImgInfo : function() {
-  $(".navbar").addClass("top-nav-expanded");
+    var randNum = Math.floor((Math.random() * main.numImgs) + 1);
-});
+    var src = main.bigImgEl.attr("data-img-src-" + randNum);
-$('#main-navbar').on('hidden.bs.collapse', function () {
+  var desc = main.bigImgEl.attr("data-img-desc-" + randNum);
-  $(".navbar").removeClass("top-nav-expanded");
+  
-});
+  return {
-
+    src : src,
-// On mobile, when clicking on a multi-level navbar menu, show the child links
+    desc : desc
-$('#main-navbar').on("click", ".navlinks-parent", function(e) {
+  }
-  var target = e.target;
+  },
-  $.each($(".navlinks-parent"), function(key, value) {
+  
-	if (value == target) {
+  setImg : function(src, desc) {
-	  $(value).parent().toggleClass("show-children");
+  $(".intro-header.big-img").css("background-image", 'url(' + src + ')');
-	} else {
+  if (typeof desc !== typeof undefined && desc !== false) {
-	  $(value).parent().removeClass("show-children");
+    $(".img-desc").text(desc).show();
-	}
+  } else {
-  });
+    $(".img-desc").hide();  
-});
+  }
+  }
+};
 
 // 2fc73a3a967e97599c9763d05e564189
+
+document.addEventListener('DOMContentLoaded', main.init);