1
0
Fork 0

Update to version 0.7

This commit is contained in:
Moritz »mo.« Sauer 2014-09-15 21:03:49 +02:00
parent 897f0ff9a1
commit bd603dfa0e
17 changed files with 688 additions and 149 deletions

View file

@ -0,0 +1,24 @@
---
layout: page
title: "Page Template"
meta_description: "This is an example of a beautiful aligned page in the middle. There is no sidebar to distract the reader. The difference to the Post-Template is, that you find no meta-information at the bottom of the post."
date: 2014-09-15 00:00:00
categories:
- layout
- design
permalink: "/design/page/"
image:
header: "no"
---
<p class="teaser">
This is an example of a beautiful aligned page in the middle. There is no sidebar to distract the reader. The difference to the <a href='{{ site.url }}/design/post/'>Post-Template</a> is, that you find <mark>no meta-information</mark> at the bottom of the post.</p>
## Look!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
### Lorem
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View file

@ -1,8 +1,7 @@
---
layout: post
title: "Normal Post"
description: "This is an example of a beautiful aligned post in the middle. No sidebar needed to enjoy good articles."
date: 2014-03-28 00:00:00
title: "Normal Post Template"
meta_description: "This is an example of a beautiful aligned post in the middle. There is no sidebar to distract the reader. The difference to the Page-Template is, that you find meta-information at the bottom of the post."
categories:
- layout
- design
@ -10,11 +9,14 @@ permalink: "/design/post/"
image:
header: "no"
---
<p class="teaser">
This is an example of a beautiful aligned post in the middle. There is no sidebar to distract the reader. The difference to the <a href='{{ site.url }}/design/page/'>Page-Template</a> is, that you find meta-information at the bottom of the post.</p>
## Look!
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
### Lorem
### Lorem Ipsum
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

View file

@ -9,7 +9,7 @@ categories:
- design
image:
thumb: "unsplash_7_thumb.jpg"
permalink: "/design/page-full-width/"
permalink: "/design/page-fullwidth/"
---
*Feeling Responsive* is built on Foundation. And of course, we make use of the wonderful grid system and so can you. Find out more about [constructing beautiful layouts][1] in the foundation documentation.

View file

@ -0,0 +1,42 @@
---
layout: page
title: "A beautiful gallery"
subtitle: "Foundation Clearing Lightbox"
description: "Wanna create a responsive gallery to showcase your portfolio, recent photos or images? It's quite easy thanks to Foundation and <a href='http://foundation.zurb.com/docs/components/clearing.html'>Clearing Lightbox</a>."
categories:
- layout
- design
image:
thumb: "unsplash_7_thumb.jpg"
header: "no"
permalink: "/design/gallery/"
---
You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4]-template and than use some foundation magic.
<ul class="clearing-thumbs small-block-grid-3" data-clearing>
<li><a href="{{ site.url }}/assets/img/unsplash_1.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_1_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_2.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_2_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_3.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_3_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_4.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_4_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_5.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_5_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_6.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_6_thumb.jpg"></a></li>
</ul>
## Clearing Lightbox Code
[Clearing Lightbox][1] is so flexible especially when using the [block grid][2]. For extensive documentation visit the [foundation docs][1].
{% highlight html %}
<ul class="clearing-thumbs small-block-grid-3" data-clearing>
<li><a href="path/to/your/img"><img data-caption="caption 1" src="path/to/your/thumbnail"></a></li>
<li><a href="path/to/your/img"><img data-caption="caption 2" src="path/to/your/thumbnail"></a></li>
<li><a href="path/to/your/img"><img data-caption="caption 3" src="path/to/your/thumbnail"></a></li>
</ul>
{% endhighlight %}
[1]: http://foundation.zurb.com/docs/components/clearing.html
[2]: http://foundation.zurb.com/docs/components/block_grid.html
[3]: {{ site.url }}/design/page/
[4]: {{ site.url }}/design/page-fullwidth/