Simplified Theme
This commit is contained in:
Moritz »mo.« Sauer
parent
5f5bf5659e
commit
74c2f9a235
42 changed files with 424 additions and 426 deletions
|
|
@ -1,9 +1,12 @@
|
|||
---
|
||||
layout: post-left-sidebar
|
||||
title: "Post With Left Sidebar"
|
||||
description: "This is a example of Post with a Sidebar on the left."
|
||||
date: 2014-03-28 00:00:00
|
||||
layout: page
|
||||
sidebar: left
|
||||
subheadline: Templates
|
||||
title: "Page/Post With Left Sidebar"
|
||||
teaser: "This is a example of page/post with a sidebar on the left."
|
||||
breadcrumb: true
|
||||
tags:
|
||||
- post format
|
||||
categories:
|
||||
- design
|
||||
image:
|
||||
|
|
@ -11,11 +14,19 @@ image:
|
|||
credit: Unsplash.com
|
||||
url: http://unsplash.com
|
||||
---
|
||||
## Have a look at the sidebar
|
||||
*Feeling Responsive* shows metadata by default. The default behaviour can be changed via `config.yml`. To show metadata at the end of a page/post just add the following to front matter:
|
||||
|
||||
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.
|
||||
~~~
|
||||
show_metadata: true
|
||||
~~~
|
||||
|
||||
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.
|
||||
If you don't want to show metadata, it's simple again:
|
||||
|
||||
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.
|
||||
~~~
|
||||
show_metadata: false
|
||||
~~~
|
||||
|
||||
|
||||
## Other Post Formats
|
||||
{: .t60 }
|
||||
{% include list-posts.html tag='post format' %}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: post
|
||||
layout: page
|
||||
title: "Breadcrumbs"
|
||||
description: "If you need them, <em>Feeling Responsive</em> offers you a breadcrumb navigation. You can easily turn it on/off via frontmatter."
|
||||
teaser: "If you need them, <em>Feeling Responsive</em> offers you a breadcrumb navigation. You can easily turn it on/off via frontmatter."
|
||||
breadcrumb: true
|
||||
categories:
|
||||
- design
|
||||
|
|
|
|||
36
_posts/design/2014-07-10-page.md
Executable file
36
_posts/design/2014-07-10-page.md
Executable file
|
|
@ -0,0 +1,36 @@
|
|||
---
|
||||
layout: page
|
||||
subheadline: Templates
|
||||
title: "The Post/Page Template"
|
||||
teaser: "The default template for posts and pages aligns the page beautifully in the middle. <strong>But</strong> you can customize posts/pages easily via switches in the front matter to <em>get a sidebar</em> and/or to <em>turn off meta-information</em> at the end of the page like categories, tags and dates."
|
||||
meta_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 Page-Template is, that you find meta-information at the bottom of the post."
|
||||
breadcrumb: true
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- blog
|
||||
- content
|
||||
- post
|
||||
- post format
|
||||
image:
|
||||
title: "unsplash_1.jpg"
|
||||
credit: Unsplash.com
|
||||
url: http://unsplash.com
|
||||
---
|
||||
*Feeling Responsive* shows metadata by default. The default behaviour can be changed via `config.yml`. To show metadata at the end of a page/post just add the following to front matter:
|
||||
|
||||
~~~
|
||||
show_metadata: true
|
||||
~~~
|
||||
|
||||
If you don't want to show metadata, it's simple again:
|
||||
|
||||
~~~
|
||||
show_metadata: false
|
||||
~~~
|
||||
|
||||
|
||||
## Other Post Formats
|
||||
{: .t60 }
|
||||
{% include list-posts.html tag='post format' %}
|
||||
|
||||
|
|
@ -1,9 +1,12 @@
|
|||
---
|
||||
layout: post-right-sidebar
|
||||
title: "Post With Right Sidebar"
|
||||
description: "This is a example of Post with a Sidebar on the right."
|
||||
date: 2014-03-28 00:00:00
|
||||
layout: page
|
||||
sidebar: right
|
||||
subheadline: Templates
|
||||
title: "Page/Post Right Sidebar"
|
||||
teaser: "This is a example of page/post with a sidebar on the right."
|
||||
breadcrumb: true
|
||||
tags:
|
||||
- post format
|
||||
categories:
|
||||
- design
|
||||
image:
|
||||
|
|
@ -12,12 +15,19 @@ image:
|
|||
credit: Unsplash.com
|
||||
url: http://unsplash.com
|
||||
---
|
||||
## Have a look at the sidebar
|
||||
*Feeling Responsive* shows metadata by default. The default behaviour can be changed via `config.yml`. To show metadata at the end of a page/post just add the following to front matter:
|
||||
|
||||
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.
|
||||
~~~
|
||||
show_metadata: true
|
||||
~~~
|
||||
|
||||
### Lorem
|
||||
If you don't want to show metadata, it's simple again:
|
||||
|
||||
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.
|
||||
~~~
|
||||
show_metadata: false
|
||||
~~~
|
||||
|
||||
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.
|
||||
|
||||
## Other Post Formats
|
||||
{: .t60 }
|
||||
{% include list-posts.html tag='post format' %}
|
||||
|
|
|
|||
|
|
@ -1,33 +0,0 @@
|
|||
---
|
||||
layout: post
|
||||
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."
|
||||
breadcrumb: true
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- blog
|
||||
- content
|
||||
- post
|
||||
image:
|
||||
title: "unsplash_1.jpg"
|
||||
credit: Unsplash.com
|
||||
url: http://unsplash.com
|
||||
---
|
||||
<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 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.
|
||||
|
||||
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.
|
||||
|
||||
<h3 class="t90">Related Articles</h3>
|
||||
{% include list-posts.html entries='3' offset='1' category="design" %}
|
||||
|
||||
|
|
@ -1,22 +0,0 @@
|
|||
---
|
||||
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."
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
<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.
|
||||
|
||||
## More Articles
|
||||
{% include list-posts.html entries='3' offset='1' %}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
layout: page-fullwidth
|
||||
title: "The Full-Width Page Template"
|
||||
subheadline: "Multi-Device Layouts"
|
||||
description: "The full-width page format gives you all the space you need to show your content using the grid."
|
||||
teaser: "The full-width page format gives you all the space you need to show your content using the grid."
|
||||
categories:
|
||||
- design
|
||||
header:
|
||||
|
|
|
|||
|
|
@ -2,14 +2,14 @@
|
|||
layout: page-fullwidth
|
||||
title: "Show your beautiful work!"
|
||||
subheadline: "Portfolio"
|
||||
description: "You don't need a special portfolio template with this theme. Just check out the great possibilities of the foundation grid and experiment with it."
|
||||
teaser: "You don't need a special portfolio template with this theme. Just check out the great possibilities of the <a href='http://foundation.zurb.com/docs/components/grid.html'>foundation grid</a> and experiment with it."
|
||||
image:
|
||||
thumb: "unsplash_6_bus_thumb.jpg"
|
||||
categories:
|
||||
- design
|
||||
---
|
||||
|
||||
<div class="row">
|
||||
<div class="row t60">
|
||||
<div class="medium-6 columns b30">
|
||||
<img src="{{ site.url }}/images/webdesign_screenshot_nixdorf.jpg" alt="">
|
||||
<p> Website: Nixdorf Internatsberatung & Schulberatung</p>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: page-fullwidth
|
||||
subheadline: "Multi-Device Layouts in Color"
|
||||
title: "Grid & Colors"
|
||||
description: "Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. To optimize the size of your images, you find the correct dimensions beneath. Further below you find the <a href='#color-scheme-and-colors-codes'>colorscheme and colors</a> used for <em>Feeling Responsive</em> and their color codes."
|
||||
teaser: "Create powerful multi-device layouts quickly and easily with the 12-column, nest-able Foundation grid. To optimize the size of your images, you find the correct dimensions beneath. Further below you find the <a href='#color-scheme-and-colors-codes'>colorscheme and colors</a> used for <em>Feeling Responsive</em> and their color codes."
|
||||
breadcrumb: true
|
||||
categories:
|
||||
- design
|
||||
|
|
|
|||
|
|
@ -1,8 +1,11 @@
|
|||
---
|
||||
layout: video
|
||||
show_metadata: false
|
||||
title: "Video Template"
|
||||
subheadline: "Video Template"
|
||||
description: "If you want to show videos in a large manner, the video template is the right choice."
|
||||
subheadline: "Templates"
|
||||
teaser: "If you want to show videos in a large manner, the video template is the right choice."
|
||||
tags:
|
||||
- post format
|
||||
categories:
|
||||
- design
|
||||
iframe: "<iframe width='970' height='546' src='//www.youtube.com/embed/WoHxoz_0ykI' frameborder='0' allowfullscreen></iframe>"
|
||||
|
|
|
|||
|
|
@ -1,10 +1,12 @@
|
|||
---
|
||||
layout: page
|
||||
subheadline: "Templates"
|
||||
title: "A Beautiful Gallery"
|
||||
subheadline: "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>."
|
||||
teaser: "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:
|
||||
- design
|
||||
tags:
|
||||
- post format
|
||||
image:
|
||||
thumb: "unsplash_7_thumb.jpg"
|
||||
---
|
||||
|
|
@ -33,6 +35,12 @@ You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4
|
|||
|
||||
|
||||
|
||||
## Other Post Formats
|
||||
{: .t60 }
|
||||
{% include list-posts.html tag='post format' %}
|
||||
|
||||
|
||||
|
||||
[1]: http://foundation.zurb.com/docs/components/clearing.html
|
||||
[2]: http://foundation.zurb.com/docs/components/block_grid.html
|
||||
[3]: {{ site.url }}/design/page/
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: page
|
||||
title: "Header Image With Pattern"
|
||||
subheadline: "Headers With Style"
|
||||
description: "Feeling Responsive allows you to use all kinds of headers. This example shows a header image in front of a pattern."
|
||||
teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows a header image in front of a pattern."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: page
|
||||
title: "Header with a Full-Width-Image"
|
||||
subheadline: "Headers With Style"
|
||||
description: "Feeling Responsive allows you to use all kinds of headers. This example shows a header with a <em>full-width-image</em>."
|
||||
teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows a header with a <em>full-width-image</em>."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: page
|
||||
title: "Header Image With Background Color"
|
||||
subheadline: "Headers With Style"
|
||||
description: "Feeling Responsive allows you to use all kinds of headers. This example shows a header image with a defined background color via front matter."
|
||||
teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows a header image with a defined background color via front matter."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
|
|
@ -10,7 +10,7 @@ tags:
|
|||
- background color
|
||||
- header
|
||||
header:
|
||||
image: header_unsplash_2-970x.jpg
|
||||
image: header_unsplash_2-970x.jpg
|
||||
background-color: "#304558"
|
||||
---
|
||||
It's so easy to do. Just define in front matter an image and a background color. Instead of a color you can also use a pattern image. Have a look at the [example with a background pattern]({{ site.url }}/design/header-image-pattern/).
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: page
|
||||
title: "Header With Logo Only"
|
||||
subheadline: "Headers With Style"
|
||||
description: "Feeling Responsive allows you to use all kinds of headers. This is the default mode. It shows a header just with your logo on the standard background."
|
||||
teaser: "Feeling Responsive allows you to use all kinds of headers. This is the default mode. It shows a header just with your logo on the standard background."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
|
|
|
|||
23
_posts/design/2015-02-10-header-with-text.md
Normal file
23
_posts/design/2015-02-10-header-with-text.md
Normal file
|
|
@ -0,0 +1,23 @@
|
|||
---
|
||||
layout: page
|
||||
title: "Header With Text"
|
||||
subheadline: "Headers With Style"
|
||||
teaser: "Feeling Responsive allows you to use all kinds of headers. This header is with text."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
- design
|
||||
- background color
|
||||
- header
|
||||
header:
|
||||
title: header with text
|
||||
background-color: "#EFC94C;"
|
||||
# pattern: pattern_concrete.jpg
|
||||
image_fullwidth: unsplash_brooklyn-bridge_header.jpg
|
||||
---
|
||||
|
||||
|
||||
|
||||
### All Header-Styles
|
||||
|
||||
{% include list-posts.html tag='header' %}
|
||||
|
|
@ -2,7 +2,7 @@
|
|||
layout: page
|
||||
subheadline: "Headers With Style"
|
||||
title: "No Header"
|
||||
description: "Feeling Responsive allows you to use all kinds of headers. This example shows <em>no</em> header at all. Just the navigation."
|
||||
teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows <em>no</em> header at all. Just the navigation."
|
||||
categories:
|
||||
- design
|
||||
tags:
|
||||
|
|
@ -2,8 +2,8 @@
|
|||
layout: page-fullwidth
|
||||
title: "Wonderful Typography"
|
||||
subheadline: "Reading Experience"
|
||||
meta_description: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console."
|
||||
description: "<em>Feeling Responsive</em> uses <a href='https://www.google.com/fonts/specimen/Volkhov'>Volkhov</a> for headlines, <a href='https://www.google.com/fonts/specimen/Lato'>Lato</a> for everything else and if you are in need to show some code, it will be in <a href='http://www.microsoft.com/typography/fonts/family.aspx?FID=18'>Lucida Console</a> or <a href='http://en.wikipedia.org/wiki/Monaco_(typeface)'>Monaco</a>."
|
||||
meta_teaser: "Feeling Responsive uses Volkhov for headlines, Lato for everything else and if you are in need to show some code, it will be in Lucida Console."
|
||||
teaser: "<em>Feeling Responsive</em> uses <a href='https://www.google.com/fonts/specimen/Volkhov'>Volkhov</a> for headlines, <a href='https://www.google.com/fonts/specimen/Lato'>Lato</a> for everything else and if you are in need to show some code, it will be in <a href='http://www.microsoft.com/typography/fonts/family.aspx?FID=18'>Lucida Console</a> or <a href='http://en.wikipedia.org/wiki/Monaco_(typeface)'>Monaco</a>."
|
||||
header: no
|
||||
image:
|
||||
thumb: homepage_typography_thumb.jpg
|
||||
Reference in a new issue