websites/dennogumi.org-archive
Archived
1
0
Fork 0
Code Releases Activity

Bring the repo up to date

Browse source
This commit is contained in:
Luca Beltrame 2015-04-25 09:52:28 +02:00
parent 2fe49cab15
commit c989f8a8c2
22 changed files with 56 additions and 1125 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

20
_config.yml
View file

@ -8,25 +8,25 @@
# /____/
#
# Title of your website
title: "Feeling Responsive"
title: "dennogumi.org"
# The slogan describes your website and is used on homepage in <title> and other important places
slogan: "A Flexible Theme for Jekyll"
slogan: "On the web since 1999"
# The description is used on homepage and in the footer to quickly describe your website. Use a maximum of 150 characters for SEO-purposes.
description: "»Feeling Responsive« is a responsive theme for Jekyll based on the fabulous foundation framework with beautiful typography and a bright color palette."
description: "None"
# This URL is the main adresse. Don't include a slash at the end.
#
url: "https://phlow.github.io/feeling-responsive"
url: "https://www.dennogumi.org"
baseurl: ""
# This is for the editing function in _/includes/improve_content.html
# Leave it empty if your site is not on GitHub/GitHub Pages
improve_content: https://github.com/Phlow/feeling-responsive/edit/gh-pages
improve_content: ""
# This URL points directly to the images directory making
# things easier to link to images in posts and templates. It needs a slash.
@ -34,7 +34,7 @@ improve_content: https://github.com/Phlow/feeling-responsive/edit/gh-pages
# Example: <img src="{{ site.urlimg }}/{{ post.image.title }}">
# Markdown-Example for posts ![Image Text]({{ site.urlimg }}/image.jpg)
#
urlimg: "http://phlow.github.io/feeling-responsive/images/"
urlimg: "http://www.dennogumi.org/images/"
# Logo size is 600x80 pixels
@ -118,9 +118,9 @@ defaults:
# ___/ / /___/ /_/ /
# /____/_____/\____/ Verify Website to Webmaster Tools
google_author: "https://plus.google.com/u/0/118311555303973066167"
google_site_verification: "Vk0IOJ2jwG_qEoG7fuEXYqv0m2rLa8P778Fi_GrsgEQ"
bing_webmastertools_id: "0FB4C028ABCF07C908C54386ABD2D97F"
google_author: ""
google_site_verification: ""
bing_webmastertools_id: ""
# alexa_verify_id: ""
@ -204,5 +204,5 @@ sass:
#
# used in _includes/footer_scripts.html
google_analytics_tracking_id: UA-60112281-1
google_analytics_tracking_id: ""

4
_data/authors.yml
View file

@ -5,5 +5,5 @@
#
# Ressource › http://blog.sorryapp.com/blogging-with-jekyll/2014/02/06/adding-authors-to-your-jekyll-site.html
your_author_name:
name: "Moritz »mo.« Sauer"
url: http://mo.phlow.de/
name: "Luca Beltrame"
url: https://www.dennogumi.org

88
_data/socialmedia.yml
View file

@ -1,44 +1,44 @@
- name: YouTube
url: http://www.youtube.com/PhlowMedia
class: icon-youtube
title: "Videos, Video-Anleitungen und Filme von Phlow auf YouTube"
- name: Twitter
url: http://twitter.com/phlow
class: icon-twitter
title: "Immer das Neuste von Phlow gibt es auf Twitter"
- name: Facebook
url: http://www.facebook.com/phlow.media
class: icon-facebook
title: "Lass uns Freunde sein!"
- name: Soundcloud
url: http://soundcloud.com/phlow
class: icon-soundcloud
title: "Sounds und Downloads und mehr"
- name: GitHub
url: http://github.com/phlow
class: icon-github
title: Code und mehr...
- name: Instagram
url: http://instagram.com/phlowmedia
class: icon-instagram
title: "Bilder und Impressionen mit und ohne Filter..."
- name: Pinterest
url: http://www.pinterest.com/phlowmedia/
class: icon-pinterest
title: "Bilder, Fotos, Illustrationen, Grafiken sammeln..."
- name: Mixcloud
url: http://www.mixcloud.com/phlow/
class: icon-cloud
title: "Mixe, was sonst?"
# - name: Xing
# url: https://www.xing.com/profile/Moritzmo_Sauer
# class: icon-xing
# title: Xing Profil
# - name: YouTube
# url: http://www.youtube.com/PhlowMedia
# class: icon-youtube
# title: "Videos, Video-Anleitungen und Filme von Phlow auf YouTube"
#
# - name: Twitter
# url: http://twitter.com/phlow
# class: icon-twitter
# title: "Immer das Neuste von Phlow gibt es auf Twitter"
#
# - name: Facebook
# url: http://www.facebook.com/phlow.media
# class: icon-facebook
# title: "Lass uns Freunde sein!"
#
# - name: Soundcloud
# url: http://soundcloud.com/phlow
# class: icon-soundcloud
# title: "Sounds und Downloads und mehr"
#
# - name: GitHub
# url: http://github.com/phlow
# class: icon-github
# title: Code und mehr...
#
# - name: Instagram
# url: http://instagram.com/phlowmedia
# class: icon-instagram
# title: "Bilder und Impressionen mit und ohne Filter..."
#
# - name: Pinterest
# url: http://www.pinterest.com/phlowmedia/
# class: icon-pinterest
# title: "Bilder, Fotos, Illustrationen, Grafiken sammeln..."
#
# - name: Mixcloud
# url: http://www.mixcloud.com/phlow/
# class: icon-cloud
# title: "Mixe, was sonst?"
#
# # - name: Xing
# # url: https://www.xing.com/profile/Moritzmo_Sauer
# # class: icon-xing
# # title: Xing Profil

32
_posts/design/2014-07-09-post-left-sidebar.md
View file

@ -1,32 +0,0 @@
---
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:
title: "unsplash_1.jpg"
caption: Unsplash.com
caption_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_meta: true
~~~
If you don't want to show metadata, it's simple again:
~~~
show_meta: false
~~~
## Other Post Formats
{: .t60 }
{% include list-posts.html tag='post format' %}

18
_posts/design/2014-07-10-breadcrumb.md
View file

@ -1,18 +0,0 @@
---
layout: page
title: "Breadcrumbs"
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
tags:
- blog
- content
- post
---
<div class="alert-box alert radius">WARNING: If you use breadcrumbs be aware, that if you use categories, you need pages for those categories. If not, the link in the breadcrumb won't work.</div>
## Front Matter Code
~~~
breadcrumb: true
~~~

37
_posts/design/2014-07-10-page.md
View file

@ -1,37 +0,0 @@
---
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"
caption: Unsplash.com
caption_url: http://unsplash.com
author: mo
---
*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_meta: true
~~~
If you don't want to show metadata, it's simple again:
~~~
show_meta: false
~~~
## Other Post Formats
{: .t60 }
{% include list-posts.html tag='post format' %}

33
_posts/design/2014-07-10-post-right-sidebar.md
View file

@ -1,33 +0,0 @@
---
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:
thumb: "unsplash_2_thumb.jpg"
title: "unsplash_2.jpg"
caption: Unsplash.com
caption_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_meta: true
~~~
If you don't want to show metadata, it's simple again:
~~~
show_meta: false
~~~
## Other Post Formats
{: .t60 }
{% include list-posts.html tag='post format' %}

55
_posts/design/2014-08-19-page-fullwidth.md
View file

@ -1,55 +0,0 @@
---
layout: page-fullwidth
title: "The Full-Width Page Template"
subheadline: "Multi-Device Layouts"
teaser: "The full-width page format gives you all the space you need to show your content using the grid."
categories:
- design
header:
image_fullwidth: "unsplash_leaf_header.jpg"
---
*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.
<div class="row">
<div class="medium-4 columns t30">
<img src="{{ site.url }}/images/unsplash_1.jpg" alt="">
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns t30">
<img src="{{ site.url }}/images/unsplash_2.jpg" alt="">
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns t30">
<img src="{{ site.url }}/images/unsplash_4.jpg" alt="">
</div><!-- /.medium-4.columns -->
</div><!-- /.row -->
<div class="row">
<div class="medium-8 columns t30">
<img src="{{ site.url }}/images/unsplash_6.jpg" alt="">
</div><!-- /.medium-8.columns -->
<div class="medium-4 columns t30">
<img src="{{ site.url }}/images/unsplash_5.jpg" alt="">
<img class="t30" src="{{ site.url }}/images/unsplash_7.jpg" alt="">
</div><!-- /.medium-4.columns -->
</div><!-- /.row -->
[1]: http://foundation.zurb.com/docs/components/grid.html
[2]: #
[3]: #
[4]: #
[5]: #
[6]: #
[7]: #
[8]: #
[9]: #
[10]: #

41
_posts/design/2014-09-10-portfolio.md
View file

@ -1,41 +0,0 @@
---
layout: page-fullwidth
title: "Show your beautiful work!"
subheadline: "Portfolio"
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 t60">
<div class="medium-6 columns b30">
<img src="{{ site.url }}/images/webdesign_screenshot_nixdorf.jpg" alt="">
<p> Website: Nixdorf Internatsberatung &amp; Schulberatung</p>
</div><!-- /.medium-6.columns -->
<div class="medium-6 columns b30">
<img src="{{ site.url }}/images/webdesign_screenshot_jcorneille.jpg" alt="">
<p>Website: <a href="http://jcorneille.de">Grafik Design Jeannette Corneille</a></p>
</div><!-- /.medium-6.columns -->
</div><!-- /.row -->
<div class="row t30">
<div class="medium-4 columns">
<img src="{{ site.url }}/images/webdesign_screenshot_stilwandel.jpg" alt="">
<p>Website: <a href="http://stilwandel-koeln.de">Stilwandel-Koeln.de</a></p>
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns">
<img src="{{ site.url }}/images/webdesign_screenshot_tarnkappe.jpg" alt="">
<p>Website: <a href="http://tarnkarppe.info">Tarnkappe.info</a></p>
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns">
<img src="{{ site.url }}/images/webdesign_screenshot_schriefer.jpg" alt="">
<p>Website: <a href="http://www.psychotherapie-schriefer.de/">Praxis für psychologische Psychotherapie Simone Schriefer</a></p>
</div><!-- /.medium-4.columns -->
</div><!-- /.row -->

148
_posts/design/2014-09-13-grid.md
View file

@ -1,148 +0,0 @@
---
layout: page-fullwidth
subheadline: "Multi-Device Layouts in Color"
title: "Grid & Colors"
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
permalink: /design/grid/
header:
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
image:
thumb: "unsplash_brooklyn-bridge_thumb.jpg"
---
*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.
<div class="show-for-small">
<div class="row">
<div class="small-12 columns">
<h3>Small Grid</h3>
</div><!-- /.small-12.columns -->
</div>
<div class="row">
<div class="small-6 columns">
<img src="http://placehold.it/470x264/6b6351/e1dcd7&amp;text=2+Columns">
</div>
<div class="small-6 columns">
<img src="http://placehold.it/470x264/e05a10/e1e75e&amp;text=2+Columns">
</div>
</div>
</div>
<div class="show-for-large-up">
<div class="row">
<div class="small-12 columns">
<h2>Large Displays</h2>
<h3>Large Displays Two Columns</h3>
</div><!-- /.small-12.columns -->
</div>
<div class="row">
<div class="large-6 columns">
<img src="http://placehold.it/470x264/6b6351/e1dcd7&amp;text=Width+470+Pixel">
</div>
<div class="large-6 columns">
<img src="http://placehold.it/470x264/e05a10/e1e75e&amp;text=Width+470+Pixel">
</div>
</div>
<div class="row">
<div class="small-12 columns">
<h3>Large Displays Three Columns</h3>
</div><!-- /.small-12.columns -->
</div>
<div class="row">
<div class="large-4 columns">
<img src="http://placehold.it/303x170/6b6351/e1dcd7&amp;text=Width+303+Pixel">
</div>
<div class="large-4 columns">
<img src="http://placehold.it/303x170/e05a10/e1e75e&amp;text=Width+303+Pixel">
</div>
<div class="large-4 columns">
<img src="http://placehold.it/303x170/fabb00/771e1e&amp;text=Width+303+Pixel">
</div>
</div>
<div class="row">
<div class="small-12 columns">
<h3>Large Displays Four Columns</h3>
</div><!-- /.small-12.columns -->
</div>
<div class="row">
<div class="large-3 columns">
<img src="http://placehold.it/220x141/6b6351/e1dcd7&amp;text=Width+220+Pixel">
</div>
<div class="large-3 columns">
<img src="http://placehold.it/220x141/e05a10/e1e75e&amp;text=Width+220+Pixel">
</div>
<div class="large-3 columns">
<img src="http://placehold.it/220x141/fabb00/771e1e&amp;text=Width+220+Pixel">
</div>
<div class="large-3 columns">
<img src="http://placehold.it/220x141/00792c/acca57&amp;text=Width+220+Pixel">
</div>
</div>
</div><!-- /.hide-for-small -->
<div class="row t90">
<div class="small-12 columns">
<h2>Color Scheme and Colors Codes</h2>
<p class="teaser"><em>Feeling Responsive</em> uses strong colors in combination with grey colors.</p>
<h3>Colours</h3>
</div><!-- /.small-12.columns -->
</div>
<div class="row">
<div class="small-2 columns"><div style="background: #45B29D; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #334D5C; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #A1D044; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #EFC94C; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #E27A3F; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #DF4949; height: 137px;"></div></div>
</div>
<h3>Grey Scale</h3>
<div class="row">
<div class="small-2 columns"><div style="background: #E4E4E4; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #D7D7D7; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #CBCBCB; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #BEBEBE; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #A4A4A4; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #979797; height: 137px;"></div></div>
</div>
<div class="row t30">
<div class="small-2 columns"><div style="background: #8B8B8B; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #7E7E7E; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #646464; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #575757; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #4B4B4B; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #3E3E3E; height: 137px;"></div></div>
</div>
<div class="row t30">
<div class="small-2 columns"><div style="background: #313131; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #242424; height: 137px;"></div></div>
<div class="small-2 columns"><div style="background: #171717; height: 137px;"></div></div>
<div class="small-2 columns end"><div style="background: #0B0B0B; height: 137px;"></div></div>
</div>
<div id="bottom" class="row t30">
<div class="small-12 columns">
{% include next-previous-post-in-category.html %}
</div><!-- /.small-12.columns -->
</div>
[1]: http://foundation.zurb.com/docs/components/grid.html

20
_posts/design/2014-09-14-video.md
View file

@ -1,20 +0,0 @@
---
layout: video
show_meta: false
title: "Video Template"
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>"
---
## About the video by Kutiman
> Ophir Kutiel, professionally known as Kutiman, is an Israeli musician, composer, producer and animator. He is best known for creating the online music video project, ThruYOU, and a self-titled album. <cite>[Wikipedia](http://en.wikipedia.org/wiki/Kutiman)</cite>
Source: [Kutiman – Thru You Too – »Give It Up«](https://www.youtube.com/watch?v=WoHxoz_0ykI)

47
_posts/design/2014-09-15-gallery.md
View file

@ -1,47 +0,0 @@
---
layout: page
subheadline: "Templates"
title: "A Beautiful Gallery"
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"
---
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 }}/images/unsplash_1.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_1_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_2.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_2_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_3.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_3_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_4.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_4_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_5.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_5_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_6.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_6_bus_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 %}
## 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/
[4]: {{ site.url }}/design/page-fullwidth/

36
_posts/design/2014-10-08-header-image-pattern.md
View file

@ -1,36 +0,0 @@
---
layout: page
title: "Header Image With Pattern"
subheadline: "Headers With Style"
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:
- design
- pattern
- header
header:
image: header_unsplash_2-970x.jpg
pattern: pattern_concrete.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-image-color/).
## Front Matter Code
~~~
header:
image: "header_unsplash_2-970x.jpg"
pattern: "pattern_concrete.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

35
_posts/design/2014-10-09-header-full-width-image.md
View file

@ -1,35 +0,0 @@
---
layout: page
title: "Header with a Full-Width-Image"
subheadline: "Headers With Style"
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:
- design
- background color
- header
image:
thumb: "unsplash_brooklyn-bridge_thumb.jpg"
header:
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
It's so easy to do. Just define in front matter your image.
## Front Matter Code
~~~
header:
image_fullwidth: "unsplash_brooklyn-bridge_header.jpg"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

37
_posts/design/2014-10-09-header-image-color.md
View file

@ -1,37 +0,0 @@
---
layout: page
title: "Header Image With Background Color"
subheadline: "Headers With Style"
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:
- design
- background color
- header
header:
image: header_unsplash_2-970x.jpg
background-color: "#304558"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
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/).
## Front Matter Code
<div class="alert-box radius alert">WARNING: To make this work the value of <em>background-color</em> must be inbetween quotes.</div>
~~~
header:
image: "header_unsplash_2-970x.jpg"
background-color: "#fabb00"
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

19
_posts/design/2014-10-09-header-logo-only.md
View file

@ -1,19 +0,0 @@
---
layout: page
title: "Header With Logo Only"
subheadline: "Headers With Style"
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:
- design
- background color
- header
---
No front matter code needed.
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

35
_posts/design/2015-02-10-header-with-text.md
View file

@ -1,35 +0,0 @@
---
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
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
## Front Matter Code
~~~
header:
title: header with text
image_fullwidth: unsplash_brooklyn-bridge_header.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

32
_posts/design/2015-03-12-no-header-but-image.md
View file

@ -1,32 +0,0 @@
---
layout: page
subheadline: "Headers With Style"
title: "No Header but Article Image"
teaser: "Feeling Responsive enables you to get the attention of visitors. If you don't want to use a big header, use an image for the article instead."
categories:
- design
tags:
- design
- background color
- header
header: no
image:
title: unsplash_eagle.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
---
First turn of the header with `header: no`. Than add an image to with the following code. The caption is optional.
~~~
header: no
image:
title: unsplash_eagle.jpg
caption: This is a caption for the header image with link
caption_url: https://unsplash.com/
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

24
_posts/design/2015-03-12-no-header.md
View file

@ -1,24 +0,0 @@
---
layout: page
subheadline: "Headers With Style"
title: "No Header but Article Image"
teaser: "Feeling Responsive allows you to use all kinds of headers. This example shows <em>no</em> header but a centered image above the headline."
categories:
- design
tags:
- design
- background color
- header
header: no
---
*Silence is beautiful.* Sometimes you just want no distractions at all. Wether you like the content to speak for itself or enjoy pure typography on a plain background: *Feeling Responsive* got you covered. Just say *no* like this:
~~~
header: no
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

24
_posts/design/2015-10-11-no-header.md
View file

@ -1,24 +0,0 @@
---
layout: page
subheadline: "Headers With Style"
title: "No Header"
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:
- design
- background color
- header
header: no
---
*Silence is beautiful.* Sometimes you just want no distractions at all. Whether you like the content to speak for itself or enjoy pure typography on a plain background: *Feeling Responsive* got you covered. Just say *no* like this:
~~~
header: no
~~~
### All Header-Styles
{: .t60 }
{% include list-posts.html tag='header' %}

20
_posts/design/2015-11-15-comments.md
View file

@ -1,20 +0,0 @@
---
layout: page
subheadline: "Discussion"
title: "Now with Comments!"
teaser: "For a blog you need comments. Like all those other jekyll themes we baked in Disqus. It's easy to set, it works and makes a static jekyll blog more dynamic."
header:
image_fullwidth: "header_typewriter.jpg"
caption: Image by Florian Klauer
caption_url: "http://florianklauer.de/"
image:
thumb: typewriter_thumb.jpg
homepage: homepage_typewriter.jpg
categories:
- design
comments: true
show_meta: false
---
If you want to use Disqus-Comments with *Feeling Responsive*, just open `config.yml` and add your `disqus_shortname`. [More on how to use Disqus ›](https://disqus.com/websites/)
By default comments are turned off. You can customize the default behaviour in `config.yml`. To **turn on comments** just add `comments: true` to front matter using the page layout `layout: page`.

376
_posts/design/2015-11-16-typography.md
View file

@ -1,376 +0,0 @@
---
layout: page-fullwidth
title: "Wonderful Typography"
subheadline: "Reading Experience"
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
homepage: homepage_typography.jpg
caption: Image by Antonio
caption_url: "http://www.aisleone.net/"
categories:
- design
---
<div class="row">
<div class="medium-4 medium-push-8 columns" markdown="1">
<div class="panel radius" markdown="1">
**Table of Contents**
{: #toc }
* TOC
{:toc}
</div>
</div><!-- /.medium-4.columns -->
<div class="medium-8 medium-pull-4 columns" markdown="1">
## Lato – A Sans Serif Typeface Family
[Lato][4] is a sans serif typeface family started in the summer of 2010 by Warsaw-based designer Łukasz Dziedzic. »Lato« means »Summer« in Polish. In December 2010 the Lato family was published under the Open Font License by his foundry tyPoland, with support from Google.
> <span class="teaser">I do not think of type as something that should be readable. It should be beautiful.</span><cite>[Ed Benguiat][3]</cite>
In the last ten or so years, during which Łukasz has been designing type, most of his projects were rooted in a particular design task that he needed to solve. With Lato, it was no different. Originally, the family was conceived as a set of corporate fonts for a large client — who in the end decided to go in different stylistic direction, so the family became available for a public release.
When working on Lato, Łukasz tried to carefully balance some potentially conflicting priorities. He wanted to create a typeface that would seem quite “transparent” when used in body text but would display some original traits when used in larger sizes. He used classical proportions (particularly visible in the uppercase) to give the letterforms familiar harmony and elegance. At the same time, he created a sleek sans serif look, which makes evident the fact that Lato was designed in 2010 — even though it does not follow any current trend.
The semi-rounded details of the letters give Lato a feeling of warmth, while the strong structure provides stability and seriousness. “Male and female, serious but friendly. With the feeling of the Summer,” says Łukasz. Learn more at [www.latofonts.com][6]
## About Volkhov &lt;h2&gt;
Volkhov is a low-contrast seriffed typeface with a robust character, intended for providing a motivating reading experience. Volkhov was designed by Ivan Petrov.
### Feeling Responsive uses Volkhov for... &lt;h3&gt;
* &lt;h1&gt;-headings
* &lt;h2&gt;-headings
* &lt;h3&gt;-headings
* &lt;h4&gt;-headings
* &lt;h5&gt;-headings
* &lt;h6&gt;-headings
#### Heading in Volkhov &lt;h4&gt;
As a four-weight family it is well-suited for complex text environments being economic and legible, contemporary and prominent. Many of its design solutions relate to this purpose: large open counters, rather short descenders, and brutal asymmetric serifs.
#### Heading in Volkhov &lt;h5&gt;
Spacing in Bold is slightly increased compared to the normal weight, because the bold mass is mostly grown inwards. The Italic has a steep angle and a distinctive calligraphically reminiscent character, as a counterpart to the rigorous Regular.
## Modular Scale
*Feeling Responsive* explores the *2:3 perfect fifth* modular scale created with [www.modular-scale.com][7]. This is the modular scale of *Feeling Responsive*.
44px @ 1:1.5 – Ideal text size
16px @ 1:1.5 – Important number
Modular Scale | | |
---------- | ----------- | -----
44.000 | 1 | 2.75 | 338.462
36.000 | 0.818 | 2.25 | 276.923
29.333 | 0.667 | 1.833 | 225.638
24.000 | 0.545 | 1.5 | 184.615
19.555 | 0.444 | 1.222 | 150.423
16.000 | 0.364 | 1 | 123.077
## Typographical Elements
{: .t60 }
Here you'll find the [complete list of HTML5-Tags][1] and this is how they look like.
### &lt;hr&gt; Horizontal Line
<hr>
### &lt;pre&gt; Displaying Code
~~~
<html>
<head>
<title>Code Blocks</title>
</head>
<body></body>
</html>
~~~
### &lt;blockquote&gt; Quotation
<blockquote>Everything happens for a reason. (Britney Spears)</blockquote>
### &lt;blockquote&gt; and &lt;cite&gt; together
> Age is an issue of mind over matter. If you don't mind, it doesn't matter.
<cite>Mark Twain</cite>
### &lt;ol&gt; Ordered Lists
1. Ordered List
2. Second List Item
3. Third List Item
4. Second Level First Item
4. Second Level Second Item
4. Second Level Third Item
5. And a third level First Item
5. And a third level Second Item
5. And a third level Third Item
4. Fourth List Item
5. Fifth List Item
### &lt;ul&gt; Unordered Lists
- Unordered List
- Second List Item
- Third List Item
+ Second Level First Item
+ Second Level Second Item
+ Second Level Third Item
* And a third level First Item
* And a third level Second Item
* And a third level Third Item
- Fourth List Item
- Fifth List Item
### &lt;dl&gt; Definition Lists
Definition List
: Bacon ipsum dolor sit amet spare ribs brisket ribeye, andouille sirloin bresaola frankfurter corned beef capicola bacon. Salami beef ribs sirloin, short loin hamburger shoulder t-bone.
Beef ribs jowl swine porchetta
: Sirloin tenderloin swine frankfurter pork loin pork capicola ham hock strip steak ribeye beef ribs. Hamburger t-bone ribeye ham prosciutto bresaola.
Pancetta flank sirloin pork
: short ribs shankle prosciutto landjaeger. Beef ribs turkey shoulder drumstick. Leberkas pork belly ribeye, bresaola jerky strip steak tenderloin bacon landjaeger short ribs beef ribs. Flank pork chop fatback tail kielbasa filet mignon jowl landjaeger bresaola tongue corned beef biltong.
: Landjaeger spare ribs fatback corned beef tenderloin drumstick, swine chicken beef turkey biltong doner tri-tip filet mignon.
### &lt;a&gt;
[Links][2] make the web exceptional.
### &lt;em&gt;
Let's *emphasize* how important responsive webdesign is.
### &lt;strong&gt;
This looks like **bold** text.
### &lt;small&gt;
<small>This is small text.</small>
### &lt;s&gt;
It's nice getting things done. Just strike through <s>finished tasks</s>.
### &lt;cite&gt;
<cite>Albert Einstein</cite>
### &lt;q&gt;
If you use &lt;q&gt; your text gets <q>automagically quotes around the text passage</q>.
### &lt;dfn&gt;
The &lt;dfn&gt; tag is a phrase tag. It defines a <dfn>definition term</dfn>.
### &lt;abbr&gt;
The <abbr title="World Health Organization">WHO</abbr> was founded in 1948.
### &lt;time&gt;
The concert took place on <time datetime="2001-05-15 19:00">May 15</time>.
### &lt;code&gt;
Some `code: lucida console` displayed.
### &lt;var&gt;
The &lt;var&gt; tag is a phrase tag. It defines a <var>variable</var>.
### &lt;samp&gt;
Text surrounded by &lt;samp&gt; <samp>looks like this in monospace</samp>.
### &lt;kbd&gt;
Copycats enjoy pressing <kbd>CMD</kbd> + <kbd>c</kbd> and <kbd>CMD</kbd> + <kbd>v</kbd>.
### &lt;sub&gt;
This text <sub>lays low</sub> and chills a bit.
### &lt;sup&gt;
This text <sup>gets high</sup> above the clouds.
### &lt;i&gt;
This looks <i>italic</i>.
### &lt;b&gt;
This looks <b>bold</b>, too.
### &lt;u&gt;
<div><p><u>Underlining</u> content for emphasize is not the best choice. You can't read it so well.</p></div>
### &lt;mark&gt;
Let's <mark>mark this hint</mark> to give you a clue.
### &lt;br&gt;
Need a break? I give you three!<br><br><br>
[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list
[2]: http://phlow.de/
[3]: http://en.wikipedia.org/wiki/Ed_Benguiat
[4]: https://www.google.com/fonts/specimen/Lato
[5]: https://www.google.com/fonts/specimen/Volkhov
[6]: http://www.latofonts.com/
[7]: http://modularscale.com/
[8]: #
[9]: #
[10]: #
# &lt;h1&gt;-Heading in Volkhov
## &lt;h2&gt;-Heading in Volkhov
### &lt;h3&gt;-Heading in Volkhov
#### &lt;h4&gt;-Heading in Volkhov
##### &lt;h5&gt;-Heading in Volkhov
##### &lt;h6&gt;-Heading in Volkhov
## Tables
Even tables are responsive thanks to foundation. A table can consist of these elements.
<table>
<caption>&lt;table&gt; defines an HTML table</caption>
<colgroup>
<col span="1" style="width: 15%;"></col>
<col span="1" style="width: 50%;"></col>
<col span="1" style="width: 35%;"></col>
</colgroup>
<thead>
<tr>
<th>HTML Tag</th>
<th>Defintion</th>
<th>Style</th>
</tr>
</thead>
<tbody>
<tr>
<td>&lt;caption&gt;</td>
<td>defines a table caption</td>
<td><code>font-weight: bold;</code></td>
</tr>
<tr>
<td>&lt;colgroup&gt;</td>
<td>specifies a group of one or more columns in a table for
formatting. The &lt;colgroup&gt; tag is useful for applying styles to entire columns, instead of repeating the styles for each cell, for each row.</td>
<td>no styling needed</td>
</tr>
<tr>
<td>&lt;col&gt;</td>
<td>specifies column properties for each column within a `&lt;colgroup&gt;`
element</td>
<td>no styling needed</td>
</tr>
<tr>
<td>&lt;thead&gt;</td>
<td>is used to group header content in an HTML table</td>
<td><code>font-weight: bold;</code></td>
</tr>
<tr>
<td>&lt;tbody&gt;</td>
<td>is used to group the body content in an HTML table</td>
<td>no styling needed</td>
</tr>
<tr>
<td>&lt;tr&gt;</td>
<td>defines a row in an HTML table</td>
<td>no styling needed</td>
</tr>
<tr>
<td>&lt;th&gt;</td>
<td>defines a header cell in an HTML table</td>
<td><code>font-weight: bold;</code></td>
</tr>
<tr>
<td>&lt;td&gt;</td>
<td>defines a standard cell in an HTML table</td>
<td><code>font-weight: normal;</code></td>
</tr>
<tr>
<td>&lt;tfoot&gt;</td>
<td>is used to group footer content in an HTML table</td>
<td>no styling needed</td>
</tr>
</table>
</div><!-- /.medium-8.columns -->
</div><!-- /.row -->