diff --git a/_includes/header.html b/_includes/header.html new file mode 100644 index 0000000..cc21bd3 --- /dev/null +++ b/_includes/header.html @@ -0,0 +1,76 @@ + + +{% if page.bigimg or page.title %} + +{% if page.bigimg %} +
+{% endif %} + +
+{% if page.bigimg %} +
+
+
+
+
+

{% if page.title %}{{ page.title }}{% else %}
{% endif %}

+ {% if page.subtitle %} + {% if include.type == "page" %} +
+ {{ page.subtitle }} + {% else %} +

{{ page.subtitle }}

+ {% endif %} + {% endif %} + + {% if include.type == "post" %} + Posted on {{ page.date | date: "%B %-d, %Y" }} + {% endif %} +
+
+
+
+ +
+{% endif %} +
+
+
+
+
+

{% if page.title %}{{ page.title }}{% else %}
{% endif %}

+ {% if page.subtitle %} + {% if include.type == "page" %} +
+ {{ page.subtitle }} + {% else %} +

{{ page.subtitle }}

+ {% endif %} + {% endif %} + + {% if include.type == "post" %} + Posted on {{ page.date | date: "%B %-d, %Y" }} + {% endif %} +
+
+
+
+
+
+ + +{% else %} +
+{% endif %} \ No newline at end of file diff --git a/_layouts/default.html b/_layouts/default.html index 447999a..9944d52 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -22,9 +22,7 @@ common-js: {% include nav.html %} -
- {{ content }} -
+ {{ content }} {% include footer.html %} diff --git a/_layouts/page.html b/_layouts/page.html index cfb48e9..5357661 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,29 +2,17 @@ layout: default --- -{% if page.title %} -
+{% include header.html type="page" %} + +
-
-

{{ page.title }}

- {% if page.subtitle %} -
- {{ page.subtitle }} - {% endif %} -
+ {{ content }} + {% if page.comments %} +
+ {% include disqus.html %} +
+ {% endif %}
-
-{% endif %} - -
-
- {{ content }} - {% if page.comments %} -
- {% include disqus.html %} -
- {% endif %} -
-
+ \ No newline at end of file diff --git a/_layouts/post.html b/_layouts/post.html index 2d17530..7f8ab67 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,49 +2,33 @@ layout: default --- -
+{% include header.html type="post" %} + +
-
-

{{ page.title }}

- {% if page.subtitle %} -

{{ page.subtitle }}

+
+ {{ content }} +
+ +
    + {% if page.previous.url %} + {% endif %} - Posted on {{ page.date | date: "%B %-d, %Y" }} -
-
-
-
- -
-
-
- {{ content }} -
-
-
- -
-
- + + {% if page.comments %} +
+ {% include disqus.html %} +
{% endif %} - {% if page.next.url %} - - {% endif %} - +
- - -{% if page.comments %} -
-
- {% include disqus.html %} -
-
-{% endif %} + \ No newline at end of file diff --git a/_posts/2015-02-26-flake-it-till-you-make-it.md b/_posts/2015-02-26-flake-it-till-you-make-it.md index a783af9..a460b5e 100644 --- a/_posts/2015-02-26-flake-it-till-you-make-it.md +++ b/_posts/2015-02-26-flake-it-till-you-make-it.md @@ -2,6 +2,7 @@ layout: post title: Flake it till you make it subtitle: Excerpt from Soulshaping by Jeff Brown +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? diff --git a/css/main.css b/css/main.css index dc3d6e1..8fef221 100644 --- a/css/main.css +++ b/css/main.css @@ -326,49 +326,139 @@ footer .theme-by { } } -/* --- Post and page layout --- */ +/* --- Post and page headers --- */ -header.header-page { - margin-bottom: 20px; +.intro-header { + margin: 80px 0 20px; + position: relative; } - -header.header-page .page-heading { +.intro-header.big-img { + 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; } - -header.header-post .post-heading h1 { - font-size: 35px; - margin-top: 0; +.intro-header.big-img .page-heading, +.intro-header.big-img .post-heading { + padding: 100px 0; + color: #FFF; + text-shadow: 1px 1px 3px #000; } - -header.header-page .page-heading h1 { +.intro-header .page-heading h1 { + margin-top: 0; font-size: 50px; - margin-top: 0; } - -header.header-post .post-heading .post-subheading, -header.header-page .page-heading .page-subheading { - font-size: 24px; +.intro-header .post-heading h1 { + margin-top: 0; + font-size: 35px; +} +.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; } - -header.header-post .post-heading .post-subheading { +.intro-header .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.header-page .page-heading h1 { - font-size: 80px; +.header-section.has-img .no-img { + margin-top: 0; + 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; } } diff --git a/img/path.jpg b/img/path.jpg new file mode 100644 index 0000000..5855c09 Binary files /dev/null and b/img/path.jpg differ diff --git a/js/main.js b/js/main.js index c31692d..a960763 100644 --- a/js/main.js +++ b/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 -$(window).scroll(function() { - if ($(".navbar").offset().top > 50) { - $(".navbar").addClass("top-nav-short"); - } else { - $(".navbar").removeClass("top-nav-short"); +var main = { + + bigImgEl : null, + numImgs : null, + + 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 = $("
").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 () { - $(".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"); + }, + + getImgInfo : function() { + var randNum = Math.floor((Math.random() * main.numImgs) + 1); + var src = main.bigImgEl.attr("data-img-src-" + randNum); + var desc = main.bigImgEl.attr("data-img-desc-" + randNum); + + return { + src : src, + desc : desc } - }); -}); + }, + + setImg : function(src, desc) { + $(".intro-header.big-img").css("background-image", 'url(' + src + ')'); + if (typeof desc !== typeof undefined && desc !== false) { + $(".img-desc").text(desc).show(); + } else { + $(".img-desc").hide(); + } + } +}; // 2fc73a3a967e97599c9763d05e564189 + +document.addEventListener('DOMContentLoaded', main.init); \ No newline at end of file