1
0
Fork 0

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 2014-08-22 23:20:26 +02:00
parent c4ca4e61b2
commit dba5d71522
25 changed files with 381 additions and 255 deletions

View file

@ -18,6 +18,8 @@
url: "/design/post-left-sidebar/"
- title: "Post-Right-Sidebar"
url: "/design/post-right-sidebar/"
- title: "Full-Width Page"
url: "/design/page-full-width/"
- title: "Typography"
url: "/design/typography/"
# - title: "Fullwidth Layout"

View file

@ -1,5 +1,5 @@
<script src="{{ site.url }}/assets/js/app.min.js"></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>

View file

@ -4,7 +4,7 @@
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<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>
<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 %}

View file

@ -1,4 +1,4 @@
{% if page.image_header == "no" %}
{% if page.image.header == "no" %}
<div id="masthead-no-image-header">
<div class="row">

View file

@ -1,9 +1,9 @@
{% include header.html %}
<body id="top-of-page">
{% include masthead.html %}
{% include navigation.html %}
{% include masthead.html %}
{{ content }}
{% include footer.html %}

View file

@ -1,10 +1,10 @@
---
layout: default
---
{% if page.image_title %}
{% if page.image.title %}
<div class="row top-30">
<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><!-- /.row -->
{% endif %}

View file

@ -1,10 +1,10 @@
---
layout: default
---
{% if page.image_title %}
{% if page.image.title %}
<div class="row top-30">
<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><!-- /.row -->
{% endif %}

View file

@ -11,7 +11,7 @@ layout: default
<article>
<header>
{% 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>
</header>
{% if page.description %}

View file

@ -6,7 +6,7 @@ layout: default
<article>
<header>
{% 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>
</header>
{% if page.description %}

View file

@ -1,10 +1,10 @@
---
layout: default
---
{% if page.image_title %}
{% if page.image.title %}
<div class="row top-30">
<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><!-- /.row -->
{% endif %}

View file

@ -10,7 +10,9 @@ categories:
- elements
- design
permalink: "/design/elements/"
image_header: "no"
image:
header: "no"
thumb: "unsplash_5_thumb.jpg"
---
## Images

View file

@ -6,7 +6,8 @@ date: 2014-03-28 00:00:00
categories:
- layout
- design
image_title: "unsplash_1.jpg"
image:
title: "unsplash_1.jpg"
permalink: "/design/post-left-sidebar/"
---
## Have a look at the sidebar

View file

@ -8,7 +8,7 @@ categories:
- design
image:
thumb: "unsplash_2_thumb.jpg"
image_title: "unsplash_2.jpg"
title: "unsplash_2.jpg"
permalink: "/design/post-right-sidebar/"
---
## Have a look at the sidebar

View file

@ -7,6 +7,8 @@ categories:
- layout
- design
permalink: "/design/post/"
image:
header: "no"
---
## Look!

View file

@ -8,7 +8,7 @@ categories:
- layout
- design
image:
thumb: unsplash_7_thumb.jpg
thumb: "unsplash_7_thumb.jpg"
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.

View 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]: #

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View file

@ -1,6 +1,7 @@
---
layout: blog
title: "The Feeling Responsive Blog Template"
image_header: "header_unsplash_6.jpg"
image:
header: header_unsplash_6.jpg
permalink: "/blog/"
---

View file

@ -3,7 +3,8 @@ layout: page
title: "Change is good!"
subtitle: "Feeling Responsive Theme Changelog"
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/"
---
2014-08-22 // Version 0.5

View file

@ -3,7 +3,8 @@ layout: page-fullwidth
title: "Theme Documentation"
subtitle: "How to use Feeling Responsive"
description: "The documentation is a work in progress..."
image_header: "no"
image:
header: "no"
permalink: "/documentation/"
---
<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}
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>
{: .text-right }
## 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
## Create a Table of Content
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}
</div>
{% 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="panel radius" markdown="1">
**Table of Contents**
{: #toc }
* TOC
{:toc}
</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
[2]: #
[2]: {{ site.url }}/blog/
[3]: #
[4]: #
[5]: #

View file

@ -1,7 +1,8 @@
---
layout: default
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 class="row">

View file

@ -2,11 +2,12 @@
layout: page
title: "Style your content!"
subtitle: "Layouts of Feeling Responsive"
image_header: "header_unsplash_5.jpg"
image:
header: "header_unsplash_5.jpg"
permalink: "/design/style-guide/"
---
<ul>
{% for post in site.categories.design %}
<li><a href="{{ site.url }}/{{ post.permalink }}">{{ post.title }}</a></li>
{% endfor %}
{% for post in site.categories.design %}
<li><a href="{{ site.url }}/{{ post.permalink }}">{{ post.title }}</a></li>
{% endfor %}
</ul>

View file

@ -3,7 +3,8 @@ layout: page
title: "Wonderful Typography"
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."
image_header: "no"
image:
header: "no"
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.