Skip to content

Commit

Permalink
support big images; fixes daattali#37
Browse files Browse the repository at this point in the history
  • Loading branch information
@daattali
daattali committed Mar 18, 2016
1 parent 5212d98 commit 60c623b
Show file tree
Hide file tree
Showing 8 changed files with 329 additions and 113 deletions.
76 changes: 76 additions & 0 deletions _includes/header.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
<!-- TODO this file has become a mess, refactor it -->

{% if page.bigimg or page.title %}

{% if page.bigimg %}
<div id="header-big-imgs" data-num-img={% if page.bigimg.first %}{{ page.bigimg.size }}{% else %}1{% endif %}
{% for bigimg in page.bigimg %}
{% assign imgnum = forloop.index %}
{% for imginfo in bigimg %}
{% if imginfo[0] %}
data-img-src-{{ imgnum }}="{{ imginfo[0] | prepend: site.baseurl | replace: '//', '/' }}"
data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
{% else %}
data-img-src-{{ imgnum }}="{{ imginfo | prepend: site.baseurl | replace: '//', '/' }}"
{% endif %}
{% endfor %}
{% endfor %}
></div>
{% endif %}

<header class="header-section {% if page.bigimg %}has-img{% endif %}">
{% if page.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="{{ include.type }}-heading">
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
{% if page.subtitle %}
{% if include.type == "page" %}
<hr class="small">
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
{% else %}
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
{% endif %}
{% endif %}

{% if include.type == "post" %}
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
{% endif %}
</div>
</div>
</div>
</div>
<span class='img-desc'></span>
</div>
{% endif %}
<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="{{ include.type }}-heading">
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
{% if page.subtitle %}
{% if include.type == "page" %}
<hr class="small">
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
{% else %}
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
{% endif %}
{% endif %}

{% if include.type == "post" %}
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</header>


{% else %}
<div class="intro-header"></div>
{% endif %}
4 changes: 1 addition & 3 deletions _layouts/default.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,7 @@

{% include nav.html %}

<div role="main" class="container main-content">
{{ content }}
</div>
{{ content }}

{% include footer.html %}

Expand Down
32 changes: 10 additions & 22 deletions _layouts/page.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,29 +2,17 @@
layout: default
---

{% if page.title %}
<header class="header-page">
{% include header.html type="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">
<h1>{{ page.title }}</h1>
{% if page.subtitle %}
<hr class="small">
<span class="page-subheading">{{ page.subtitle }}</span>
{% endif %}
</div>
</div>
</div>
</header>
{% endif %}

<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{{ content }}
{% if page.comments %}
<div class="disqus-comments">
{% include disqus.html %}
{{ content }}
{% if page.comments %}
<div class="disqus-comments">
{% include disqus.html %}
</div>
{% endif %}
</div>
{% endif %}
</div>
</div>
</div>
66 changes: 25 additions & 41 deletions _layouts/post.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,49 +2,33 @@
layout: default
---

<header class="header-post">
<div class="row">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
<div class="post-heading">
<h1>{{ page.title }}</h1>
{% if page.subtitle %}
<h2 class="post-subheading">{{ page.subtitle }}</h2>
{% endif %}
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
</div>
</div>
</div>
</header>
{% include header.html type="post" %}

<article>
<div class="container">
<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 page.previous.url %}
<li class="previous">
<a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
</li>
{% endif %}
{% if page.next.url %}
<li class="next">
<a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
</li>
<article role="main" class="blog-post">
{{ content }}
</article>

<ul class="pager blog-pager">
{% if page.previous.url %}
<li class="previous">
<a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
</li>
{% endif %}
{% if page.next.url %}
<li class="next">
<a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
</li>
{% endif %}
</ul>

{% if page.comments %}
<div class="disqus-comments">
{% include disqus.html %}
</div>
{% endif %}
</ul>
</div>
</div>

{% if page.comments %}
<div class="row disqus-comments">
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
{% include disqus.html %}
</div>
</div>
</div>
{% endif %}
</div>
1 change: 1 addition & 0 deletions _posts/2015-02-26-flake-it-till-you-make-it.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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?
Expand Down
134 changes: 112 additions & 22 deletions css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
.intro-header .post-heading h1 {
margin-top: 0;
font-size: 35px;
}

header.header-post .post-heading .post-subheading,
header.header-page .page-heading .page-subheading {
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;
}

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;
}
}

Expand Down
Binary file added img/path.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading

0 comments on commit 60c623b

Please sign in to comment.