Skip to content

Commit e6cb0a4

Browse files
daattalidaattali
committed
support big images; fixes daattali#37 
1 parent 8a9ce8a commit e6cb0a4

8 files changed

Lines changed: 329 additions & 113 deletions

File tree

‎_includes/header.html‎

Lines changed: 76 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,76 @@
1+
<!-- TODO this file has become a mess, refactor it -->
2+
3+
{% if page.bigimg or page.title %}
4+
5+
{% if page.bigimg %}
6+
<div id="header-big-imgs" data-num-img={% if page.bigimg.first %}{{ page.bigimg.size }}{% else %}1{% endif %}
7+
{% for bigimg in page.bigimg %}
8+
{% assign imgnum = forloop.index %}
9+
{% for imginfo in bigimg %}
10+
{% if imginfo[0] %}
11+
data-img-src-{{ imgnum }}="{{ imginfo[0] | prepend: site.baseurl | replace: '//', '/' }}"
12+
data-img-desc-{{ imgnum }}="{{ imginfo[1] }}"
13+
{% else %}
14+
data-img-src-{{ imgnum }}="{{ imginfo | prepend: site.baseurl | replace: '//', '/' }}"
15+
{% endif %}
16+
{% endfor %}
17+
{% endfor %}
18+
></div>
19+
{% endif %}
20+
21+
<header class="header-section {% if page.bigimg %}has-img{% endif %}">
22+
{% if page.bigimg %}
23+
<div class="big-img intro-header">
24+
<div class="container">
25+
<div class="row">
26+
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
27+
<div class="{{ include.type }}-heading">
28+
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
29+
{% if page.subtitle %}
30+
{% if include.type == "page" %}
31+
<hr class="small">
32+
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
33+
{% else %}
34+
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
35+
{% endif %}
36+
{% endif %}
37+
38+
{% if include.type == "post" %}
39+
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
40+
{% endif %}
41+
</div>
42+
</div>
43+
</div>
44+
</div>
45+
<span class='img-desc'></span>
46+
</div>
47+
{% endif %}
48+
<div class="intro-header no-img">
49+
<div class="container">
50+
<div class="row">
51+
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
52+
<div class="{{ include.type }}-heading">
53+
<h1>{% if page.title %}{{ page.title }}{% else %}<br/>{% endif %}</h1>
54+
{% if page.subtitle %}
55+
{% if include.type == "page" %}
56+
<hr class="small">
57+
<span class="{{ include.type }}-subheading">{{ page.subtitle }}</span>
58+
{% else %}
59+
<h2 class="{{ include.type }}-subheading">{{ page.subtitle }}</h2>
60+
{% endif %}
61+
{% endif %}
62+
63+
{% if include.type == "post" %}
64+
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
65+
{% endif %}
66+
</div>
67+
</div>
68+
</div>
69+
</div>
70+
</div>
71+
</header>
72+
73+
74+
{% else %}
75+
<div class="intro-header"></div>
76+
{% endif %}

‎_layouts/default.html‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,9 +22,7 @@
2222

2323
{% include nav.html %}
2424

25-
<div role="main" class="container main-content">
26-
{{ content }}
27-
</div>
25+
{{ content }}
2826

2927
{% include footer.html %}
3028

‎_layouts/page.html‎

Lines changed: 10 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,17 @@
22
layout: default
33
---
44

5-
{% if page.title %}
6-
<header class="header-page">
5+
{% include header.html type="page" %}
6+
7+
<div class="container" role="main">
78
<div class="row">
89
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
9-
<div class="page-heading">
10-
<h1>{{ page.title }}</h1>
11-
{% if page.subtitle %}
12-
<hr class="small">
13-
<span class="page-subheading">{{ page.subtitle }}</span>
14-
{% endif %}
15-
</div>
16-
</div>
17-
</div>
18-
</header>
19-
{% endif %}
20-
21-
<div class="row">
22-
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
23-
{{ content }}
24-
{% if page.comments %}
25-
<div class="disqus-comments">
26-
{% include disqus.html %}
10+
{{ content }}
11+
{% if page.comments %}
12+
<div class="disqus-comments">
13+
{% include disqus.html %}
14+
</div>
15+
{% endif %}
2716
</div>
28-
{% endif %}
2917
</div>
30-
</div>
18+
</div>

‎_layouts/post.html‎

Lines changed: 25 additions & 41 deletions
Original file line numberDiff line numberDiff line change
@@ -2,49 +2,33 @@
22
layout: default
33
---
44

5-
<header class="header-post">
6-
<div class="row">
7-
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
8-
<div class="post-heading">
9-
<h1>{{ page.title }}</h1>
10-
{% if page.subtitle %}
11-
<h2 class="post-subheading">{{ page.subtitle }}</h2>
12-
{% endif %}
13-
<span class="post-meta">Posted on {{ page.date | date: "%B %-d, %Y" }}</span>
14-
</div>
15-
</div>
16-
</div>
17-
</header>
5+
{% include header.html type="post" %}
186

19-
<article>
7+
<div class="container">
208
<div class="row">
219
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
22-
{{ content }}
23-
</div>
24-
</div>
25-
</article>
26-
27-
<div class="row">
28-
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
29-
<ul class="pager blog-pager">
30-
{% if page.previous.url %}
31-
<li class="previous">
32-
<a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
33-
</li>
34-
{% endif %}
35-
{% if page.next.url %}
36-
<li class="next">
37-
<a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
38-
</li>
10+
<article role="main" class="blog-post">
11+
{{ content }}
12+
</article>
13+
14+
<ul class="pager blog-pager">
15+
{% if page.previous.url %}
16+
<li class="previous">
17+
<a href="{{ page.previous.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.previous.title}}">&larr; Previous Post</a>
18+
</li>
19+
{% endif %}
20+
{% if page.next.url %}
21+
<li class="next">
22+
<a href="{{ page.next.url | prepend: site.baseurl | replace: '//', '/' }}" data-toggle="tooltip" data-placement="top" title="{{page.next.title}}">Next Post &rarr;</a>
23+
</li>
24+
{% endif %}
25+
</ul>
26+
27+
{% if page.comments %}
28+
<div class="disqus-comments">
29+
{% include disqus.html %}
30+
</div>
3931
{% endif %}
40-
</ul>
41-
</div>
42-
</div>
43-
44-
{% if page.comments %}
45-
<div class="row disqus-comments">
46-
<div class="col-lg-8 col-lg-offset-2 col-md-10 col-md-offset-1">
47-
{% include disqus.html %}
32+
</div>
4833
</div>
49-
</div>
50-
{% endif %}
34+
</div>

‎_posts/2015-02-26-flake-it-till-you-make-it.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
layout: post
33
title: Flake it till you make it
44
subtitle: Excerpt from Soulshaping by Jeff Brown
5+
bigimg: /img/path.jpg
56
---
67

78
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?

‎css/main.css‎

Lines changed: 112 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -326,49 +326,139 @@ footer .theme-by {
326326
}
327327
}
328328

329-
/* --- Post and page layout --- */
329+
/* --- Post and page headers --- */
330330

331-
header.header-page {
332-
margin-bottom: 20px;
331+
.intro-header {
332+
margin: 80px 0 20px;
333+
position: relative;
333334
}
334-
335-
header.header-page .page-heading {
335+
.intro-header.big-img {
336+
background: no-repeat center center;
337+
-webkit-background-size: cover;
338+
-moz-background-size: cover;
339+
background-size: cover;
340+
-o-background-size: cover;
341+
margin-top: 51px; /* The small navbar is 50px tall + 1px border */
342+
margin-bottom: 35px;
343+
}
344+
.intro-header.big-img .big-img-transition {
345+
position: absolute;
346+
width: 100%;
347+
height: 100%;
348+
opacity: 0;
349+
background: no-repeat center center;
350+
-webkit-background-size: cover;
351+
-moz-background-size: cover;
352+
background-size: cover;
353+
-o-background-size: cover;
354+
-webkit-transition: opacity 1s linear;
355+
-moz-transition: opacity 1s linear;
356+
transition: opacity 1s linear;
357+
}
358+
.intro-header .page-heading {
336359
text-align: center;
337360
}
338-
339-
header.header-post .post-heading h1 {
340-
font-size: 35px;
341-
margin-top: 0;
361+
.intro-header.big-img .page-heading,
362+
.intro-header.big-img .post-heading {
363+
padding: 100px 0;
364+
color: #FFF;
365+
text-shadow: 1px 1px 3px #000;
342366
}
343-
344-
header.header-page .page-heading h1 {
367+
.intro-header .page-heading h1 {
368+
margin-top: 0;
345369
font-size: 50px;
370+
}
371+
.intro-header .post-heading h1 {
346372
margin-top: 0;
373+
font-size: 35px;
347374
}
348-
349-
header.header-post .post-heading .post-subheading,
350-
header.header-page .page-heading .page-subheading {
351-
font-size: 24px;
375+
.intro-header .page-heading .page-subheading,
376+
.intro-header .post-heading .post-subheading {
377+
font-size: 27px;
352378
line-height: 1.1;
353379
display: block;
354380
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
355381
font-weight: 300;
356382
margin: 10px 0 0;
357383
}
358-
359-
header.header-post .post-heading .post-subheading {
384+
.intro-header .post-heading .post-subheading {
360385
margin-bottom: 20px;
361386
}
362-
387+
.intro-header.big-img .page-heading .page-subheading,
388+
.intro-header.big-img .post-heading .post-subheading {
389+
font-weight: 400;
390+
}
391+
.intro-header.big-img .page-heading hr {
392+
box-shadow: 1px 1px 3px #000;
393+
-webkit-box-shadow: 1px 1px 3px #000;
394+
-moz-box-shadow: 1px 1px 3px #000;
395+
}
396+
.intro-header.big-img .post-heading .post-meta {
397+
color: #EEE;
398+
}
399+
.intro-header.big-img .img-desc {
400+
background: rgba(30, 30, 30, 0.6);
401+
position: absolute;
402+
padding: 5px 10px;
403+
font-size: 11px;
404+
color: #EEE;
405+
font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
406+
right: 0;
407+
bottom: 0;
408+
display: none;
409+
}
363410
@media only screen and (min-width: 768px) {
364-
header.header-post .post-heading h1 {
411+
.intro-header {
412+
margin-top: 130px;
413+
}
414+
.intro-header.big-img {
415+
margin-top: 91px; /* Full navbar is small navbar + 20px padding on each side when expanded */
416+
}
417+
.intro-header.big-img .page-heading,
418+
.intro-header.big-img .post-heading {
419+
padding: 150px 0;
420+
}
421+
.intro-header .page-heading h1 {
422+
font-size: 80px;
423+
}
424+
.intro-header .post-heading h1 {
365425
font-size: 50px;
366426
}
427+
.intro-header.big-img .img-desc {
428+
font-size: 14px;
429+
}
367430
}
368431

369-
@media only screen and (min-width: 768px) {
370-
header.header-page .page-heading h1 {
371-
font-size: 80px;
432+
.header-section.has-img .no-img {
433+
margin-top: 0;
434+
background: #FCFCFC;
435+
margin: 0 0 40px;
436+
padding: 20px 0;
437+
box-shadow: 0 0 5px #AAA;
438+
}
439+
/* Many phones are 320 or 360px, so make sure images are a proper aspect ratio in those cases */
440+
.header-section.has-img .intro-header.no-img {
441+
display: none;
442+
}
443+
@media only screen and (max-width: 365px) {
444+
.header-section.has-img .intro-header.no-img {
445+
display: block;
446+
}
447+
.intro-header.big-img {
448+
width: 100%;
449+
height: 220px;
450+
}
451+
.intro-header.big-img .page-heading,
452+
.intro-header.big-img .post-heading {
453+
display: none;
454+
}
455+
.header-section.has-img .big-img {
456+
margin-bottom: 0;
457+
}
458+
}
459+
@media only screen and (max-width: 325px) {
460+
.intro-header.big-img {
461+
height: 200px;
372462
}
373463
}
374464

‎img/path.jpg‎

262 KB
Loading

0 commit comments

Comments
 (0)