Release 0.5
This release changes the top Navigation into a white tipbar, extends the documentation and uses some subtile changes.
This commit is contained in:
Moritz »mo.« Sauer
parent
c4ca4e61b2
commit
dba5d71522
25 changed files with 381 additions and 255 deletions
|
|
@ -18,6 +18,8 @@
|
||||||
url: "/design/post-left-sidebar/"
|
url: "/design/post-left-sidebar/"
|
||||||
- title: "Post-Right-Sidebar"
|
- title: "Post-Right-Sidebar"
|
||||||
url: "/design/post-right-sidebar/"
|
url: "/design/post-right-sidebar/"
|
||||||
|
- title: "Full-Width Page"
|
||||||
|
url: "/design/page-full-width/"
|
||||||
- title: "Typography"
|
- title: "Typography"
|
||||||
url: "/design/typography/"
|
url: "/design/typography/"
|
||||||
# - title: "Fullwidth Layout"
|
# - title: "Fullwidth Layout"
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<script src="{{ site.url }}/assets/js/app.min.js"></script>
|
<script src="{{ site.url }}/assets/js/app.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
$("#masthead").backstretch("{{ site.url }}/assets/img/{% if page.image_header %}{{ page.image_header }}{% else %}unsplash_3.jpg{% endif %}");
|
$("#masthead").backstretch("{{ site.url }}/assets/img/{% if page.image.header %}{{ page.image.header }}{% else %}unsplash_3.jpg{% endif %}");
|
||||||
</script>
|
</script>
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
<title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
|
||||||
<link rel="stylesheet" href="{{ site.url }}/assets/css/style.min.css">
|
<link rel="stylesheet" href="{{ site.url }}/assets/css/style_feeling_responsive.min.css">
|
||||||
<script src="{{ site.url }}/assets/js/modernizr.min.js"></script>
|
<script src="{{ site.url }}/assets/js/modernizr.min.js"></script>
|
||||||
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700%7cVolkhov:400,700' rel='stylesheet' type='text/css'>
|
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:400italic,400,700%7cVolkhov:400,700' rel='stylesheet' type='text/css'>
|
||||||
{% if site.google_site_verification %}
|
{% if site.google_site_verification %}
|
||||||
|
|
|
||||||
|
|
@ -1,4 +1,4 @@
|
||||||
{% if page.image_header == "no" %}
|
{% if page.image.header == "no" %}
|
||||||
|
|
||||||
<div id="masthead-no-image-header">
|
<div id="masthead-no-image-header">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
{% include header.html %}
|
{% include header.html %}
|
||||||
<body id="top-of-page">
|
<body id="top-of-page">
|
||||||
{% include masthead.html %}
|
|
||||||
|
|
||||||
{% include navigation.html %}
|
{% include navigation.html %}
|
||||||
|
|
||||||
|
{% include masthead.html %}
|
||||||
|
|
||||||
{{ content }}
|
{{ content }}
|
||||||
|
|
||||||
{% include footer.html %}
|
{% include footer.html %}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
{% if page.image_title %}
|
{% if page.image.title %}
|
||||||
<div class="row top-30">
|
<div class="row top-30">
|
||||||
<div class="small-12 columns">
|
<div class="small-12 columns">
|
||||||
<img src="{{ site.url }}/assets/img/{{ page.image_title }}" width="970" alt="{{ page.title escape_once }}">
|
<img src="{{ site.url }}/assets/img/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">
|
||||||
</div><!-- /.small-12.columns -->
|
</div><!-- /.small-12.columns -->
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
{% if page.image_title %}
|
{% if page.image.title %}
|
||||||
<div class="row top-30">
|
<div class="row top-30">
|
||||||
<div class="small-12 columns">
|
<div class="small-12 columns">
|
||||||
<img src="{{ site.url }}/assets/img/{{ page.image_title }}" width="970" alt="{{ page.title escape_once }}">
|
<img src="{{ site.url }}/assets/img/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">
|
||||||
</div><!-- /.small-12.columns -->
|
</div><!-- /.small-12.columns -->
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -11,7 +11,7 @@ layout: default
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
{% if page.subtitle %}<p class="subtitle">{{ page.subtitle }}</p>{% endif %}
|
{% if page.subtitle %}<p class="subtitle">{{ page.subtitle }}</p>{% endif %}
|
||||||
{% if page.image_title %}<img src="{{ site.url }}/assets/img/{{ page.image_title }}" width="970" alt="{{ page.title escape_once }}">{% endif %}
|
{% if page.image.title %}<img src="{{ site.url }}/assets/img/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">{% endif %}
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
{% if page.description %}
|
{% if page.description %}
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,7 @@ layout: default
|
||||||
<article>
|
<article>
|
||||||
<header>
|
<header>
|
||||||
{% if page.subtitle %}<p class="subtitle">{{ page.subtitle }}</p>{% endif %}
|
{% if page.subtitle %}<p class="subtitle">{{ page.subtitle }}</p>{% endif %}
|
||||||
{% if page.image_title %}<img src="{{ site.url }}/assets/img/{{ page.image_title }}" width="970" alt="{{ page.title escape_once }}">{% endif %}
|
{% if page.image.title %}<img src="{{ site.url }}/assets/img/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">{% endif %}
|
||||||
<h1>{{ page.title }}</h1>
|
<h1>{{ page.title }}</h1>
|
||||||
</header>
|
</header>
|
||||||
{% if page.description %}
|
{% if page.description %}
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
---
|
---
|
||||||
{% if page.image_title %}
|
{% if page.image.title %}
|
||||||
<div class="row top-30">
|
<div class="row top-30">
|
||||||
<div class="small-12 columns">
|
<div class="small-12 columns">
|
||||||
<img src="{{ site.url }}/assets/img/{{ page.image_title }}" width="970" alt="{{ page.title escape_once }}">
|
<img src="{{ site.url }}/assets/img/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">
|
||||||
</div><!-- /.small-12.columns -->
|
</div><!-- /.small-12.columns -->
|
||||||
</div><!-- /.row -->
|
</div><!-- /.row -->
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,9 @@ categories:
|
||||||
- elements
|
- elements
|
||||||
- design
|
- design
|
||||||
permalink: "/design/elements/"
|
permalink: "/design/elements/"
|
||||||
image_header: "no"
|
image:
|
||||||
|
header: "no"
|
||||||
|
thumb: "unsplash_5_thumb.jpg"
|
||||||
---
|
---
|
||||||
## Images
|
## Images
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,8 @@ date: 2014-03-28 00:00:00
|
||||||
categories:
|
categories:
|
||||||
- layout
|
- layout
|
||||||
- design
|
- design
|
||||||
image_title: "unsplash_1.jpg"
|
image:
|
||||||
|
title: "unsplash_1.jpg"
|
||||||
permalink: "/design/post-left-sidebar/"
|
permalink: "/design/post-left-sidebar/"
|
||||||
---
|
---
|
||||||
## Have a look at the sidebar
|
## Have a look at the sidebar
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ categories:
|
||||||
- design
|
- design
|
||||||
image:
|
image:
|
||||||
thumb: "unsplash_2_thumb.jpg"
|
thumb: "unsplash_2_thumb.jpg"
|
||||||
image_title: "unsplash_2.jpg"
|
title: "unsplash_2.jpg"
|
||||||
permalink: "/design/post-right-sidebar/"
|
permalink: "/design/post-right-sidebar/"
|
||||||
---
|
---
|
||||||
## Have a look at the sidebar
|
## Have a look at the sidebar
|
||||||
|
|
|
||||||
|
|
@ -7,6 +7,8 @@ categories:
|
||||||
- layout
|
- layout
|
||||||
- design
|
- design
|
||||||
permalink: "/design/post/"
|
permalink: "/design/post/"
|
||||||
|
image:
|
||||||
|
header: "no"
|
||||||
---
|
---
|
||||||
## Look!
|
## Look!
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -8,7 +8,7 @@ categories:
|
||||||
- layout
|
- layout
|
||||||
- design
|
- design
|
||||||
image:
|
image:
|
||||||
thumb: unsplash_7_thumb.jpg
|
thumb: "unsplash_7_thumb.jpg"
|
||||||
permalink: "/design/grid/"
|
permalink: "/design/grid/"
|
||||||
---
|
---
|
||||||
*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.
|
*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.
|
||||||
|
|
|
||||||
59
_posts/design/2014-08-17-page-full-width.md
Normal file
59
_posts/design/2014-08-17-page-full-width.md
Normal file
|
|
@ -0,0 +1,59 @@
|
||||||
|
---
|
||||||
|
layout: page-fullwidth
|
||||||
|
title: "Full-Width Page"
|
||||||
|
subtitle: "Multi-Device Layouts"
|
||||||
|
description: "The full-width page format gives you all the space you need to show your content using the grid."
|
||||||
|
date: 2014-07-05 07:00:00
|
||||||
|
categories:
|
||||||
|
- layout
|
||||||
|
- design
|
||||||
|
image:
|
||||||
|
thumb: "unsplash_7_thumb.jpg"
|
||||||
|
permalink: "/design/page-full-width/"
|
||||||
|
---
|
||||||
|
*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 top-30">
|
||||||
|
<img src="{{ site.url }}/assets/img/unsplash_1.jpg" alt="">
|
||||||
|
</div><!-- /.medium-4.columns -->
|
||||||
|
|
||||||
|
<div class="medium-4 columns top-30">
|
||||||
|
<img src="{{ site.url }}/assets/img/unsplash_2.jpg" alt="">
|
||||||
|
</div><!-- /.medium-4.columns -->
|
||||||
|
|
||||||
|
<div class="medium-4 columns top-30">
|
||||||
|
<img src="{{ site.url }}/assets/img/unsplash_4.jpg" alt="">
|
||||||
|
</div><!-- /.medium-4.columns -->
|
||||||
|
|
||||||
|
</div><!-- /.row -->
|
||||||
|
|
||||||
|
|
||||||
|
<div class="row">
|
||||||
|
<div class="medium-8 columns top-30">
|
||||||
|
<img src="{{ site.url }}/assets/img/unsplash_6.jpg" alt="">
|
||||||
|
</div><!-- /.medium-8.columns -->
|
||||||
|
|
||||||
|
<div class="medium-4 columns top-30">
|
||||||
|
<img src="{{ site.url }}/assets/img/unsplash_5.jpg" alt="">
|
||||||
|
<img class="top-30" src="{{ site.url }}/assets/img/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]: #
|
||||||
1
assets/css/style.min.css
vendored
1
assets/css/style.min.css
vendored
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load diff
1
assets/css/style_feeling_responsive.min.css
vendored
Normal file
1
assets/css/style_feeling_responsive.min.css
vendored
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,7 @@
|
||||||
---
|
---
|
||||||
layout: blog
|
layout: blog
|
||||||
title: "The Feeling Responsive Blog Template"
|
title: "The Feeling Responsive Blog Template"
|
||||||
image_header: "header_unsplash_6.jpg"
|
image:
|
||||||
|
header: header_unsplash_6.jpg
|
||||||
permalink: "/blog/"
|
permalink: "/blog/"
|
||||||
---
|
---
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@ layout: page
|
||||||
title: "Change is good!"
|
title: "Change is good!"
|
||||||
subtitle: "Feeling Responsive Theme Changelog"
|
subtitle: "Feeling Responsive Theme Changelog"
|
||||||
description: "History and changelog of Feeling Responsive Theme by Phlow Media."
|
description: "History and changelog of Feeling Responsive Theme by Phlow Media."
|
||||||
image_header: "header_unsplash_7.jpg"
|
image:
|
||||||
|
header: "header_unsplash_7.jpg"
|
||||||
permalink: "/changelog/"
|
permalink: "/changelog/"
|
||||||
---
|
---
|
||||||
2014-08-22 // Version 0.5
|
2014-08-22 // Version 0.5
|
||||||
|
|
|
||||||
|
|
@ -3,7 +3,8 @@ layout: page-fullwidth
|
||||||
title: "Theme Documentation"
|
title: "Theme Documentation"
|
||||||
subtitle: "How to use Feeling Responsive"
|
subtitle: "How to use Feeling Responsive"
|
||||||
description: "The documentation is a work in progress..."
|
description: "The documentation is a work in progress..."
|
||||||
image_header: "no"
|
image:
|
||||||
|
header: "no"
|
||||||
permalink: "/documentation/"
|
permalink: "/documentation/"
|
||||||
---
|
---
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
@ -42,36 +43,63 @@ permalink: "/documentation/"
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
## Possibilites to style your content {#styling}
|
||||||
|
|
||||||
|
You can style your content in different ways. There are elements like subtitles, feature images, header images, meta data like categories and tags and many more. This article shows the different possibilites.
|
||||||
|
|
||||||
|
## Subtitles
|
||||||
|
If you need a subheadline for an article, just define a subheadline in front matter like this:
|
||||||
|
|
||||||
|
`subtitle: "Subheadline"`
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## How to use images {#images}
|
## How to use images {#images}
|
||||||
|
|
||||||
There are three types of images you can define via frontmatter:
|
There are four types of images you can define via frontmatter: thumbnails, header images, title images and images in your article.
|
||||||
|
|
||||||
|
### Thumbnails
|
||||||
|
|
||||||
|
Thumbnails are used on archive pages like the [blog index][2]. Define them in front matter like this:
|
||||||
|
|
||||||
|
~~~
|
||||||
|
image:
|
||||||
|
thumb: thumbnail_image.jpg
|
||||||
|
~~~
|
||||||
|
|
||||||
|
### Header Images
|
||||||
|
|
||||||
|
~~~
|
||||||
|
image:
|
||||||
|
header: thumbnail_image.jpg
|
||||||
|
~~~
|
||||||
|
|
||||||
|
### Title Images
|
||||||
|
|
||||||
|
~~~
|
||||||
|
image:
|
||||||
|
title: thumbnail_image.jpg
|
||||||
|
~~~
|
||||||
|
|
||||||
|
You can choose to show a special full-width header image or not.
|
||||||
|
|
||||||
|
### Define all three images
|
||||||
|
|
||||||
|
~~~
|
||||||
|
image:
|
||||||
|
header: thumbnail_image.jpg
|
||||||
|
title: thumbnail_image.jpg
|
||||||
|
thumb: thumbnail_image.jpg
|
||||||
|
~~~
|
||||||
|
|
||||||
- thumbnails
|
|
||||||
- header images
|
|
||||||
- title images
|
|
||||||
|
|
||||||
<small markdown="1">[Up to table of contents](#toc)</small>
|
<small markdown="1">[Up to table of contents](#toc)</small>
|
||||||
{: .text-right }
|
{: .text-right }
|
||||||
|
|
||||||
|
|
||||||
|
## Create a Table of Content
|
||||||
## Possibilites to style your Post {#styling}
|
|
||||||
|
|
||||||
You can style your content in different ways. There are elements like subtitles, feature images, header images, meta data like categories and tags and many more. This article shows the different possibilites.
|
|
||||||
|
|
||||||
## Subtitles
|
|
||||||
|
|
||||||
## Feature Images
|
|
||||||
|
|
||||||
## Header Images
|
|
||||||
|
|
||||||
You can choose to show a special full-width header image or not.
|
|
||||||
|
|
||||||
## Meta-Data
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
## Create a Table of Contents via Kramdown
|
|
||||||
|
|
||||||
With the Kramdown parser for Markdown you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1].
|
With the Kramdown parser for Markdown you can render a table of contents for your documents. Just insert the following HTML in your post before the actual content. More information on [»Automatic ›Table of Contents‹ Generation«][1].
|
||||||
|
|
||||||
|
|
@ -91,6 +119,8 @@ With the Kramdown parser for Markdown you can render a table of contents for you
|
||||||
{:toc}
|
{:toc}
|
||||||
</div>
|
</div>
|
||||||
{% endhighlight %}
|
{% endhighlight %}
|
||||||
|
<small markdown="1">[Up to table of contents](#toc)</small>
|
||||||
|
{: .text-right }
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -99,7 +129,7 @@ With the Kramdown parser for Markdown you can render a table of contents for you
|
||||||
<div class="medium-4 columns" markdown="1">
|
<div class="medium-4 columns" markdown="1">
|
||||||
<div class="panel radius" markdown="1">
|
<div class="panel radius" markdown="1">
|
||||||
**Table of Contents**
|
**Table of Contents**
|
||||||
|
{: #toc }
|
||||||
* TOC
|
* TOC
|
||||||
{:toc}
|
{:toc}
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -109,7 +139,7 @@ With the Kramdown parser for Markdown you can render a table of contents for you
|
||||||
|
|
||||||
|
|
||||||
[1]: http://kramdown.gettalong.org/converter/html.html#toc
|
[1]: http://kramdown.gettalong.org/converter/html.html#toc
|
||||||
[2]: #
|
[2]: {{ site.url }}/blog/
|
||||||
[3]: #
|
[3]: #
|
||||||
[4]: #
|
[4]: #
|
||||||
[5]: #
|
[5]: #
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
---
|
---
|
||||||
layout: default
|
layout: default
|
||||||
title: "Feeling Responsive – A theme based on foundation"
|
title: "Feeling Responsive – A theme based on foundation"
|
||||||
image_header: "header_unsplash_4.jpg"
|
image:
|
||||||
|
header: "header_unsplash_4.jpg"
|
||||||
---
|
---
|
||||||
<div id="header-home">
|
<div id="header-home">
|
||||||
<div class="row">
|
<div class="row">
|
||||||
|
|
|
||||||
|
|
@ -2,11 +2,12 @@
|
||||||
layout: page
|
layout: page
|
||||||
title: "Style your content!"
|
title: "Style your content!"
|
||||||
subtitle: "Layouts of Feeling Responsive"
|
subtitle: "Layouts of Feeling Responsive"
|
||||||
image_header: "header_unsplash_5.jpg"
|
image:
|
||||||
|
header: "header_unsplash_5.jpg"
|
||||||
permalink: "/design/style-guide/"
|
permalink: "/design/style-guide/"
|
||||||
---
|
---
|
||||||
<ul>
|
<ul>
|
||||||
{% for post in site.categories.design %}
|
{% for post in site.categories.design %}
|
||||||
<li><a href="{{ site.url }}/{{ post.permalink }}">{{ post.title }}</a></li>
|
<li><a href="{{ site.url }}/{{ post.permalink }}">{{ post.title }}</a></li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
|
@ -3,7 +3,8 @@ layout: page
|
||||||
title: "Wonderful Typography"
|
title: "Wonderful Typography"
|
||||||
subtitle: "Reading Experience"
|
subtitle: "Reading Experience"
|
||||||
description: "<em>Feeling Responsive</em> uses Volkhov for headlines, Source Sans Pro 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 Volkhov for headlines, Source Sans Pro for everything else and if you are in need to show some code, it will be in Lucida Console."
|
||||||
image_header: "no"
|
image:
|
||||||
|
header: "no"
|
||||||
permalink: "/design/typography/"
|
permalink: "/design/typography/"
|
||||||
---
|
---
|
||||||
Noch mehr 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.
|
Noch mehr 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.
|
||||||
|
|
|
||||||
Reference in a new issue