Simplified Theme
This commit is contained in:
Moritz »mo.« Sauer
parent
5f5bf5659e
commit
74c2f9a235
42 changed files with 424 additions and 426 deletions
26
_config.yml
26
_config.yml
|
|
@ -49,6 +49,7 @@ paginate_path: "blog/page:num"
|
|||
markdown: kramdown
|
||||
permalink: /:categories/:title/
|
||||
highlight: pygments
|
||||
excerpt_separator: "\n\n"
|
||||
exclude: []
|
||||
include: ['.htaccess']
|
||||
|
||||
|
|
@ -57,6 +58,31 @@ include: ['.htaccess']
|
|||
language: "en"
|
||||
|
||||
|
||||
#
|
||||
# ____ ____ ____
|
||||
# / __ \___ / __/___ ___ __/ / /_
|
||||
# / / / / _ \/ /_/ __ `/ / / / / __/
|
||||
# / /_/ / __/ __/ /_/ / /_/ / / /_
|
||||
# /_____/\___/_/ \__,_/\__,_/_/\__/
|
||||
#
|
||||
# Default Settings
|
||||
|
||||
defaults:
|
||||
-
|
||||
scope:
|
||||
path: "" # an empty string here means all files in the project
|
||||
type: "pages"
|
||||
values:
|
||||
show_metadata: true # Show metadata beneath all pages
|
||||
sidebar: "" # Possible values › left, right › by default there will be no sidebar
|
||||
-
|
||||
scope:
|
||||
path: ""
|
||||
type: "posts"
|
||||
values:
|
||||
show_metadata: true # Show metadata beneath all posts
|
||||
sidebar: "" # Possible values › left, right › by default there will be no sidebar
|
||||
|
||||
|
||||
|
||||
# _ __ _ __ _
|
||||
|
|
|
|||
|
|
@ -12,4 +12,4 @@ next_posts: "Next Posts"
|
|||
previous: "Previous"
|
||||
previous_posts: "Previous Posts"
|
||||
read: "Read"
|
||||
read_more: "Read More ›"
|
||||
read_more: "Read More ›"
|
||||
|
|
|
|||
|
|
@ -14,18 +14,16 @@
|
|||
url: "/design/grid/"
|
||||
- title: "Typography"
|
||||
url: "/design/typography/"
|
||||
- title: "Blog-Page"
|
||||
url: "/blog/"
|
||||
- title: "Post"
|
||||
url: "/design/post/"
|
||||
- title: "Page/Post"
|
||||
url: "/design/page/"
|
||||
- title: "Post-Left-Sidebar"
|
||||
url: "/design/post-left-sidebar/"
|
||||
- title: "Post-Right-Sidebar"
|
||||
url: "/design/post-right-sidebar/"
|
||||
- title: "Page"
|
||||
url: "/design/page/"
|
||||
- title: "Page Full-Width"
|
||||
url: "/design/page-fullwidth/"
|
||||
- title: "Blog-Page"
|
||||
url: "/blog/"
|
||||
- title: "Video"
|
||||
url: "/design/video/"
|
||||
- title: "Gallery"
|
||||
|
|
@ -45,6 +43,8 @@
|
|||
url: "/design/header-image-color/"
|
||||
- title: "Header Only With Logo"
|
||||
url: "/design/header-logo-only/"
|
||||
- title: "Header With Text"
|
||||
url: "/design/header-with-text/"
|
||||
- title: "No Header"
|
||||
url: "/design/no-header/"
|
||||
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@
|
|||
{% if page.header.image_fullwidth %}
|
||||
<script>
|
||||
$("#masthead").backstretch("{{ site.url }}/images/{{ page.header.image_fullwidth }}", {fade: 700});
|
||||
$("#masthead-with-text").backstretch("{{ site.url }}/images/{{ page.header.image_fullwidth }}", {fade: 700});
|
||||
</script>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -29,7 +29,7 @@
|
|||
|
||||
{% if site.google_site_verification %}<meta name="google-site-verification" content="{{ site.google_site_verification}}" />{% endif %}
|
||||
{% if site.bing_webmastertools_id %}<meta name="msvalidate.01" content="{{ site.bing_webmastertools_id }}" />{% endif %}
|
||||
{% if page.meta_description %}<meta name="description" content="{{ page.meta_description | strip_html | escape }}"/>{% elsif page.description %}<meta name="description" content="{{ page.description | strip_html | escape }}"/>{% elsif site.description %}<meta name="description" content="{{ site.description | strip_html | escape }}"/>{% endif %}
|
||||
{% if page.meta_description %}<meta name="description" content="{{ page.meta_description | strip_html | escape }}"/>{% elsif page.teaser %}<meta name="description" content="{{ page.teaser | strip_html | escape }}"/>{% elsif site.description %}<meta name="description" content="{{ site.description | strip_html | escape }}"/>{% endif %}
|
||||
|
||||
{% if site.google_author %}<link rel="author" href="{{ site.google_author }}"/>{% endif %}
|
||||
{% if site.favicon %}<link rel="shortcut icon" href="{{ site.url }}{{ site.favicon }}" type="image/png" />{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,51 +1,67 @@
|
|||
{% if page.header == NULL and page.header.image_fullwidth == NULL and page.header.pattern == NULL and page.header.background-color == NULL %}
|
||||
{% if page.header == NULL and page.header.image_fullwidth == NULL and page.header.pattern == NULL and page.header.background-color == NULL and page.header.title == NULL %}
|
||||
|
||||
<div id="masthead-no-image-header">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
|
||||
<img src="{{ site.url }}/images/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
|
||||
</a>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
|
||||
|
||||
{% elsif page.header.title %}
|
||||
|
||||
<div id="masthead-with-text" style="{% if page.header.background-color %}background: {{ page.header.background-color }};{% endif %} {% if page.header.image_fullwidth %}{% elsif page.header.pattern %}background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.4)), url('{{ site.url }}/images/{{ page.header.pattern }}'){% endif %}">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<div class="masthead-title">{{ page.header.title }}</div>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
|
||||
<div id="masthead-no-image-header">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
|
||||
<img src="{{ site.url }}/images/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
|
||||
</a>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
{% elsif page.header.image_fullwidth %}
|
||||
|
||||
<div id="masthead">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
|
||||
<img src="{{ site.url }}/images/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
|
||||
</a>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
<div id="masthead">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<a id="logo" href="{{ site.url }}" title="{{ site.title }} – {{ site.slogan }}">
|
||||
<img src="{{ site.url }}/images/{{ site.logo }}" alt="{{ site.title }} – {{ site.slogan }}">
|
||||
</a>
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
|
||||
|
||||
{% elsif page.header.pattern %}
|
||||
|
||||
<div id="masthead-with-pattern" style="background: url('{{ site.url }}/images/{{ page.header.pattern }}')">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
<div id="masthead-with-pattern" style="background: url('{{ site.url }}/images/{{ page.header.pattern }}')">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
|
||||
|
||||
{% elsif page.header.background-color %}
|
||||
|
||||
<div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
<div id="masthead-with-background-color" style="background: {{ page.header.background-color }};">
|
||||
<div class="row">
|
||||
<div class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.header.image }}" alt="{{ site.title }}">
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
</div><!-- /#masthead -->
|
||||
|
||||
{% elsif page.header == no %}
|
||||
|
||||
test
|
||||
|
||||
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -1,4 +1,3 @@
|
|||
|
||||
<div id="page-meta" class="t30">
|
||||
<p>
|
||||
<span class="icon-calendar pr20"> {{ page.date | date: "%d.%m.%Y" }}</span>
|
||||
|
|
@ -6,7 +5,6 @@
|
|||
<span class="pr20">{% for tag in page.tags %}<span class="icon-price-tag pr10"> {{tag}}</span> {% endfor %}</span>
|
||||
</p>
|
||||
|
||||
|
||||
<div id="post-nav" class="row">
|
||||
|
||||
{% if page.previous.url %}
|
||||
|
|
|
|||
|
|
@ -7,12 +7,12 @@ Total paginate-pages: {{ paginator.total_pages }}
|
|||
{% for post in paginator.posts %}
|
||||
<div class="row">
|
||||
<div class="small-12 columns b60">
|
||||
<p class="subheadline">{% if post.subheadline %}{{ post.subheadline }}{% endif %}<span class="subheader"><small> {% if post.categories %}{{ post.categories | join: ' · ' }}{% endif %}</small></span></p>
|
||||
<p class="subheadline"><span class="subheader">{% if post.categories %}{{ post.categories | join: ' · ' }}{% endif %}</span> – {% if post.subheadline %}{{ post.subheadline }}{% endif %}</p>
|
||||
<h2><a href="{{ site.url }}{{ post.url }}">{{ post.title }}</a></h2>
|
||||
<p>
|
||||
{% if post.image.thumb %}<a href="{{ site.url }}{{ post.url }}" title="{{ post.title escape_once }}"><img src="{{ site.url }}/images/{{ post.image.thumb }}" class="alignleft" width="150" height="150" alt="{{ page.title escape_once }}"></a>{% endif %}
|
||||
|
||||
{% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.description %}{{ post.description | strip_html | escape }}{% endif %}
|
||||
{% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %}
|
||||
|
||||
<a href="{{ site.url }}{{ post.url }}" title="{{ site.data.language.read }} {{ post.title escape_once }}"><strong>{{ site.data.language.read_more }}</strong></a>
|
||||
</p>
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</p>
|
||||
</div>
|
||||
|
||||
<img class="b30" src="http://dummyimage.com/303x16:9/df4949/e27b3f.png&text=Ugly+Ad+Space" alt="">
|
||||
<img class="b30" src="http://dummyimage.com/303x16:9/df4949/e27b3f.png&text=Ugly+Ad+Space" alt="">
|
||||
|
||||
|
||||
<div class="border-dotted radius b30">
|
||||
|
|
|
|||
|
|
@ -25,9 +25,9 @@ format: page-fullwidth
|
|||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
|
||||
{% if page.description %}
|
||||
{% if page.teaser %}
|
||||
<p class="teaser">
|
||||
{{ page.description }}
|
||||
{{ page.teaser }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,40 +1,48 @@
|
|||
---
|
||||
layout: default
|
||||
format: page
|
||||
format: post
|
||||
---
|
||||
{% if page.image.title %}
|
||||
<div class="row t30">
|
||||
<div class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">
|
||||
{% if page.image.url && page.image.credit %}
|
||||
<p class="text-right caption">
|
||||
<a href="{{ page.image.url }}">{{ page.image.credit }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
{% endif %}
|
||||
{% if page.sidebar == "left" %}
|
||||
<div class="medium-4 columns">
|
||||
{% include sidebar.html %}
|
||||
</div><!-- /.medium-4.columns -->
|
||||
{% endif %}
|
||||
|
||||
|
||||
<div class="row t30">
|
||||
<div class="medium-offset-2 medium-8 end columns">
|
||||
|
||||
<div class="medium-8 columns{% if page.sidebar == "" %} medium-offset-2 end{% endif %}">
|
||||
<article>
|
||||
<header>
|
||||
{% if page.image.title %}<img src="{{ site.url }}/images/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">{% endif %}
|
||||
{% if page.image.url && page.image.credit %}
|
||||
<p class="text-right caption">
|
||||
<a href="{{ page.image.url }}">{{ page.image.credit }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if page.subheadline %}<p class="subheadline">{{ page.subheadline }}</p>{% endif %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
|
||||
{% if page.description %}
|
||||
|
||||
{% if page.teaser %}
|
||||
<p class="teaser">
|
||||
{{ page.description }}
|
||||
{{ page.teaser }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% if page.show_metadata == true %}
|
||||
{% include meta_information.html %}
|
||||
{% endif %}
|
||||
</article>
|
||||
|
||||
</div><!-- /.medium-8.columns -->
|
||||
|
||||
|
||||
{% if page.sidebar == "right" %}
|
||||
<div class="medium-4 columns">
|
||||
{% include sidebar.html %}
|
||||
</div><!-- /.medium-4.columns -->
|
||||
{% endif %}
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
format: post-left-sidebar
|
||||
---
|
||||
<div class="row t60">
|
||||
<div class="medium-4 columns">
|
||||
{% include sidebar.html %}
|
||||
</div><!-- /.medium-4.columns -->
|
||||
|
||||
|
||||
<div class="medium-8 columns">
|
||||
<article>
|
||||
<header>
|
||||
{% if page.image.title %}<img src="{{ site.url }}/images/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">{% endif %}
|
||||
{% if page.image.url && page.image.credit %}
|
||||
<p class="text-right caption">
|
||||
<a href="{{ page.image.url }}">{{ page.image.credit }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if page.subheadline %}<p class="subheadline">{{ page.subheadline }}</p>{% endif %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
{% if page.description %}
|
||||
<p class="teaser">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include meta_information.html %}
|
||||
</article>
|
||||
</div><!-- /.medium-8.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
|
@ -1,35 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
format: post-right-sidebar
|
||||
---
|
||||
<div class="row t60">
|
||||
<div class="medium-8 columns">
|
||||
<article>
|
||||
<header>
|
||||
{% if page.image.title %}<img src="{{ site.url }}/images/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">{% endif %}
|
||||
{% if page.image.url && page.image.credit %}
|
||||
<p class="text-right caption">
|
||||
<a href="{{ page.image.url }}">{{ page.image.credit }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{% if page.subheadline %}<p class="subheadline">{{ page.subheadline }}</p>{% endif %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
{% if page.description %}
|
||||
<p class="teaser">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include meta_information.html %}
|
||||
</article>
|
||||
</div><!-- /.medium-8.columns -->
|
||||
|
||||
|
||||
<div class="medium-4 columns">
|
||||
{% include sidebar.html %}
|
||||
</div><!-- /.medium-4.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
|
@ -1,40 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
format: post
|
||||
---
|
||||
{% if page.image.title %}
|
||||
<div class="row t30">
|
||||
<div class="small-12 columns">
|
||||
<img src="{{ site.url }}/images/{{ page.image.title }}" width="970" alt="{{ page.title escape_once }}">
|
||||
{% if page.image.url && page.image.credit %}
|
||||
<p class="text-right caption">
|
||||
<a href="{{ page.image.url }}">{{ page.image.credit }}</a>
|
||||
</p>
|
||||
{% endif %}
|
||||
</div><!-- /.small-12.columns -->
|
||||
</div><!-- /.row -->
|
||||
{% endif %}
|
||||
|
||||
<div class="row t30">
|
||||
<div class="medium-offset-2 medium-8 end columns">
|
||||
|
||||
<article>
|
||||
<header>
|
||||
{% if page.subheadline %}<p class="subheadline">{{ page.subheadline }}</p>{% endif %}
|
||||
<h1>{{ page.title }}</h1>
|
||||
</header>
|
||||
|
||||
{% if page.description %}
|
||||
<p class="teaser">
|
||||
{{ page.description }}
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
|
||||
{% include meta_information.html %}
|
||||
</article>
|
||||
|
||||
</div><!-- /.medium-8.columns -->
|
||||
</div><!-- /.row -->
|
||||
|
||||
|
|
@ -22,6 +22,9 @@ format: video
|
|||
{% endif %}
|
||||
|
||||
{{ content }}
|
||||
{% if page.show_metadata == true %}
|
||||
{% include meta_information.html %}
|
||||
{% endif %}
|
||||
</div><!-- /.medium-8.columns -->
|
||||
</div><!-- /.row -->
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -6908,42 +6908,47 @@ p.button a {
|
|||
/* Headlines
|
||||
------------------------------------------------------------------- */
|
||||
/* line 34, ../scss/_4_typography_theme-fr.scss */
|
||||
h1 {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* line 38, ../scss/_4_typography_theme-fr.scss */
|
||||
h2 {
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
/* line 37, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 41, ../scss/_4_typography_theme-fr.scss */
|
||||
.blog-index h2 {
|
||||
margin-top: 10px;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
/* line 40, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 44, ../scss/_4_typography_theme-fr.scss */
|
||||
h3 {
|
||||
margin-top: 1.375rem;
|
||||
}
|
||||
|
||||
/* Images
|
||||
------------------------------------------------------------------- */
|
||||
/* line 49, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 53, ../scss/_4_typography_theme-fr.scss */
|
||||
img {
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* line 50, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 54, ../scss/_4_typography_theme-fr.scss */
|
||||
img.alignleft,
|
||||
img.left {
|
||||
float: left;
|
||||
margin: 5px 15px 5px 0;
|
||||
}
|
||||
|
||||
/* line 52, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 56, ../scss/_4_typography_theme-fr.scss */
|
||||
img.alignright,
|
||||
img.right {
|
||||
float: right;
|
||||
margin: 5px 0 5px 15px;
|
||||
}
|
||||
|
||||
/* line 54, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 58, ../scss/_4_typography_theme-fr.scss */
|
||||
img.aligncenter,
|
||||
img.center {
|
||||
display: block;
|
||||
|
|
@ -6952,12 +6957,12 @@ img.center {
|
|||
|
||||
/* Lists
|
||||
------------------------------------------------------------------- */
|
||||
/* line 62, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 66, ../scss/_4_typography_theme-fr.scss */
|
||||
article dl dt {
|
||||
line-height: 1.3;
|
||||
}
|
||||
|
||||
/* line 63, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 67, ../scss/_4_typography_theme-fr.scss */
|
||||
article dl dd {
|
||||
line-height: 1.6;
|
||||
margin-bottom: 0.75rem;
|
||||
|
|
@ -6966,14 +6971,14 @@ article dl dd {
|
|||
|
||||
/* Tables
|
||||
------------------------------------------------------------------- */
|
||||
/* line 70, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 74, ../scss/_4_typography_theme-fr.scss */
|
||||
td {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* Code
|
||||
------------------------------------------------------------------- */
|
||||
/* line 79, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 83, ../scss/_4_typography_theme-fr.scss */
|
||||
pre {
|
||||
overflow: auto;
|
||||
margin-bottom: 1.25rem;
|
||||
|
|
@ -6982,13 +6987,13 @@ pre {
|
|||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* line 86, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 90, ../scss/_4_typography_theme-fr.scss */
|
||||
pre code {
|
||||
padding: 0.125rem 0.3125rem 0.0625rem 0;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* line 91, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 95, ../scss/_4_typography_theme-fr.scss */
|
||||
code {
|
||||
font-size: 0.875rem;
|
||||
line-height: 1.5;
|
||||
|
|
@ -6996,7 +7001,7 @@ code {
|
|||
|
||||
/* Quotes
|
||||
------------------------------------------------------------------- */
|
||||
/* line 101, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 105, ../scss/_4_typography_theme-fr.scss */
|
||||
blockquote {
|
||||
font-style: italic;
|
||||
position: relative;
|
||||
|
|
@ -7005,13 +7010,13 @@ blockquote {
|
|||
color: #4b4b4d;
|
||||
}
|
||||
|
||||
/* line 109, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 113, ../scss/_4_typography_theme-fr.scss */
|
||||
blockquote p {
|
||||
font-style: italic;
|
||||
color: #575757;
|
||||
}
|
||||
|
||||
/* line 111, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 115, ../scss/_4_typography_theme-fr.scss */
|
||||
blockquote:before {
|
||||
display: block;
|
||||
content: "\00BB";
|
||||
|
|
@ -7022,7 +7027,7 @@ blockquote:before {
|
|||
color: #4b4b4d;
|
||||
}
|
||||
|
||||
/* line 119, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 123, ../scss/_4_typography_theme-fr.scss */
|
||||
blockquote:after {
|
||||
display: block;
|
||||
content: "\00AB";
|
||||
|
|
@ -7033,52 +7038,52 @@ blockquote:after {
|
|||
color: #4b4b4d;
|
||||
}
|
||||
|
||||
/* line 128, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 132, ../scss/_4_typography_theme-fr.scss */
|
||||
blockquote cite:before {
|
||||
content: "\2014 \0020";
|
||||
}
|
||||
|
||||
/* line 131, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 135, ../scss/_4_typography_theme-fr.scss */
|
||||
blockquote cite a, blockquote cite a:visited {
|
||||
color: #555555;
|
||||
}
|
||||
|
||||
/* line 134, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 138, ../scss/_4_typography_theme-fr.scss */
|
||||
cite {
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
/* line 138, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 142, ../scss/_4_typography_theme-fr.scss */
|
||||
button, .button {
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* line 142, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 146, ../scss/_4_typography_theme-fr.scss */
|
||||
mark {
|
||||
background-color: #f3cab2;
|
||||
}
|
||||
|
||||
/* Typography for Articles
|
||||
------------------------------------------------------------------- */
|
||||
/* line 152, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 156, ../scss/_4_typography_theme-fr.scss */
|
||||
.subheadline {
|
||||
font-size: 1rem;
|
||||
margin: 0;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* line 157, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 161, ../scss/_4_typography_theme-fr.scss */
|
||||
.teaser {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
/* line 160, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 164, ../scss/_4_typography_theme-fr.scss */
|
||||
.big-teaser {
|
||||
font-style: italic;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* line 163, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 167, ../scss/_4_typography_theme-fr.scss */
|
||||
.big-teaser a {
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
|
|
@ -7086,55 +7091,55 @@ mark {
|
|||
|
||||
/* Smaller Font Size for Bigteaser on small devices */
|
||||
@media only screen {
|
||||
/* line 169, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 173, ../scss/_4_typography_theme-fr.scss */
|
||||
.big-teaser {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
}
|
||||
@media only screen and (min-width: 40.063em) {
|
||||
/* line 174, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 178, ../scss/_4_typography_theme-fr.scss */
|
||||
.big-teaser {
|
||||
font-size: 1.8125rem;
|
||||
}
|
||||
}
|
||||
/* Additional typographical elements
|
||||
------------------------------------------------------------------- */
|
||||
/* line 184, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 188, ../scss/_4_typography_theme-fr.scss */
|
||||
.sans {
|
||||
font-family: "Lato", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
|
||||
}
|
||||
|
||||
/* line 185, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 189, ../scss/_4_typography_theme-fr.scss */
|
||||
.serif {
|
||||
font-family: "Volkhov", Georgia, Times, serif;
|
||||
}
|
||||
|
||||
/* line 187, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 191, ../scss/_4_typography_theme-fr.scss */
|
||||
.font-size-h1 {
|
||||
font-size: 3.375rem;
|
||||
}
|
||||
|
||||
/* line 188, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 192, ../scss/_4_typography_theme-fr.scss */
|
||||
.font-size-h2 {
|
||||
font-size: 2.25rem;
|
||||
}
|
||||
|
||||
/* line 189, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 193, ../scss/_4_typography_theme-fr.scss */
|
||||
.font-size-h3 {
|
||||
font-size: 1.8125rem;
|
||||
}
|
||||
|
||||
/* line 190, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 194, ../scss/_4_typography_theme-fr.scss */
|
||||
.font-size-h4 {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
/* line 191, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 195, ../scss/_4_typography_theme-fr.scss */
|
||||
.font-size-h5 {
|
||||
font-size: 1.1875rem;
|
||||
}
|
||||
|
||||
/* line 192, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 196, ../scss/_4_typography_theme-fr.scss */
|
||||
.font-size-p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
|
@ -7149,22 +7154,22 @@ mark {
|
|||
src: url("../fonts/iconfont.eot?#iefix") format("embedded-opentype"), url("../fonts/iconfont.woff") format("woff"), url("../fonts/iconfont.ttf") format("truetype"), url("../fonts/iconfont.svg#svgFontName") format("svg");
|
||||
/* Legacy iOS */
|
||||
}
|
||||
/* line 209, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 213, ../scss/_4_typography_theme-fr.scss */
|
||||
.iconfont {
|
||||
font-family: iconfont;
|
||||
}
|
||||
|
||||
/* line 210, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 214, ../scss/_4_typography_theme-fr.scss */
|
||||
.iconfont-48 {
|
||||
font-size: 48px;
|
||||
}
|
||||
|
||||
/* line 212, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 216, ../scss/_4_typography_theme-fr.scss */
|
||||
[data-icon]:before {
|
||||
content: attr(data-icon);
|
||||
}
|
||||
|
||||
/* line 214, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 218, ../scss/_4_typography_theme-fr.scss */
|
||||
[data-icon]:before,
|
||||
.icon-archive:before,
|
||||
.icon-browser:before,
|
||||
|
|
@ -7232,262 +7237,262 @@ mark {
|
|||
font-smoothing: antialiased;
|
||||
}
|
||||
|
||||
/* line 281, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 285, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-archive:before {
|
||||
content: "\f100";
|
||||
}
|
||||
|
||||
/* line 282, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 286, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-browser:before {
|
||||
content: "\f101";
|
||||
}
|
||||
|
||||
/* line 283, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 287, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-calendar:before {
|
||||
content: "\f133";
|
||||
}
|
||||
|
||||
/* line 284, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 288, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-camera:before {
|
||||
content: "\f102";
|
||||
}
|
||||
|
||||
/* line 285, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 289, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-chat:before {
|
||||
content: "\f103";
|
||||
}
|
||||
|
||||
/* line 286, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 290, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-check:before {
|
||||
content: "\f104";
|
||||
}
|
||||
|
||||
/* line 287, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 291, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-chevron-down:before {
|
||||
content: "\f105";
|
||||
}
|
||||
|
||||
/* line 288, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 292, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-chevron-left:before {
|
||||
content: "\f106";
|
||||
}
|
||||
|
||||
/* line 289, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 293, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-chevron-right:before {
|
||||
content: "\f107";
|
||||
}
|
||||
|
||||
/* line 290, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 294, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-chevron-up:before {
|
||||
content: "\f108";
|
||||
}
|
||||
|
||||
/* line 291, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 295, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-circle-with-cross:before {
|
||||
content: "\f109";
|
||||
}
|
||||
|
||||
/* line 292, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 296, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-circle-with-minus:before {
|
||||
content: "\f10a";
|
||||
}
|
||||
|
||||
/* line 293, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 297, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-circle-with-plus:before {
|
||||
content: "\f10b";
|
||||
}
|
||||
|
||||
/* line 294, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 298, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-cloud:before {
|
||||
content: "\f10c";
|
||||
}
|
||||
|
||||
/* line 295, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 299, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-code:before {
|
||||
content: "\f10d";
|
||||
}
|
||||
|
||||
/* line 296, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 300, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-cog:before {
|
||||
content: "\f10e";
|
||||
}
|
||||
|
||||
/* line 297, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 301, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-dropbox:before {
|
||||
content: "\f10f";
|
||||
}
|
||||
|
||||
/* line 298, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 302, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-edit:before {
|
||||
content: "\f110";
|
||||
}
|
||||
|
||||
/* line 299, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 303, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-export:before {
|
||||
content: "\f111";
|
||||
}
|
||||
|
||||
/* line 300, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 304, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-eye:before {
|
||||
content: "\f112";
|
||||
}
|
||||
|
||||
/* line 301, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 305, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-facebook:before {
|
||||
content: "\f113";
|
||||
}
|
||||
|
||||
/* line 302, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 306, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-feather:before {
|
||||
content: "\f114";
|
||||
}
|
||||
|
||||
/* line 303, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 307, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-github:before {
|
||||
content: "\f115";
|
||||
}
|
||||
|
||||
/* line 304, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 308, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-globe:before {
|
||||
content: "\f116";
|
||||
}
|
||||
|
||||
/* line 305, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 309, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-heart:before {
|
||||
content: "\f117";
|
||||
}
|
||||
|
||||
/* line 306, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 310, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-heart-outlined:before {
|
||||
content: "\f118";
|
||||
}
|
||||
|
||||
/* line 307, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 311, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-home:before {
|
||||
content: "\f119";
|
||||
}
|
||||
|
||||
/* line 308, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 312, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-instagram:before {
|
||||
content: "\f11a";
|
||||
}
|
||||
|
||||
/* line 309, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 313, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-lab-flask:before {
|
||||
content: "\f11b";
|
||||
}
|
||||
|
||||
/* line 310, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 314, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-leaf:before {
|
||||
content: "\f11c";
|
||||
}
|
||||
|
||||
/* line 311, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 315, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-linkedin:before {
|
||||
content: "\f11d";
|
||||
}
|
||||
|
||||
/* line 312, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 316, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-mail:before {
|
||||
content: "\f11e";
|
||||
}
|
||||
|
||||
/* line 313, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 317, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-message:before {
|
||||
content: "\f11f";
|
||||
}
|
||||
|
||||
/* line 314, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 318, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-mic:before {
|
||||
content: "\f120";
|
||||
}
|
||||
|
||||
/* line 315, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 319, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-network:before {
|
||||
content: "\f121";
|
||||
}
|
||||
|
||||
/* line 316, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 320, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-paper-plane:before {
|
||||
content: "\f122";
|
||||
}
|
||||
|
||||
/* line 317, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 321, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-pinterest:before {
|
||||
content: "\f123";
|
||||
}
|
||||
|
||||
/* line 318, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 322, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-price-tag:before {
|
||||
content: "\f124";
|
||||
}
|
||||
|
||||
/* line 319, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 323, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-rocket:before {
|
||||
content: "\f125";
|
||||
}
|
||||
|
||||
/* line 320, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 324, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-rss:before {
|
||||
content: "\f126";
|
||||
}
|
||||
|
||||
/* line 321, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 325, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-soundcloud:before {
|
||||
content: "\f127";
|
||||
}
|
||||
|
||||
/* line 322, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 326, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-star:before {
|
||||
content: "\f128";
|
||||
}
|
||||
|
||||
/* line 323, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 327, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-star-outlined:before {
|
||||
content: "\f129";
|
||||
}
|
||||
|
||||
/* line 324, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 328, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-thumbs-down:before {
|
||||
content: "\f12a";
|
||||
}
|
||||
|
||||
/* line 325, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 329, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-thumbs-up:before {
|
||||
content: "\f12b";
|
||||
}
|
||||
|
||||
/* line 326, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 330, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-tumblr:before {
|
||||
content: "\f12c";
|
||||
}
|
||||
|
||||
/* line 327, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 331, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-twitter:before {
|
||||
content: "\f12d";
|
||||
}
|
||||
|
||||
/* line 328, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 332, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-upload-to-cloud:before {
|
||||
content: "\f12e";
|
||||
}
|
||||
|
||||
/* line 329, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 333, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-video:before {
|
||||
content: "\f12f";
|
||||
}
|
||||
|
||||
/* line 330, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 334, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-vimeo:before {
|
||||
content: "\f130";
|
||||
}
|
||||
|
||||
/* line 331, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 335, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-warning:before {
|
||||
content: "\f131";
|
||||
}
|
||||
|
||||
/* line 332, ../scss/_4_typography_theme-fr.scss */
|
||||
/* line 336, ../scss/_4_typography_theme-fr.scss */
|
||||
.icon-youtube:before {
|
||||
content: "\f132";
|
||||
}
|
||||
|
|
@ -7566,67 +7571,86 @@ body.video cite {
|
|||
}
|
||||
|
||||
/* line 58, ../scss/_5_layout_theme-fr.scss */
|
||||
#masthead-with-text {
|
||||
height: 190px;
|
||||
padding: 45px 0;
|
||||
text-align: center;
|
||||
font-size: 2.25rem;
|
||||
font-family: "Volkhov", Georgia, Times, serif;
|
||||
color: #fff;
|
||||
text-transform: uppercase;
|
||||
text-shadow: 0 2px 3px rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
|
||||
/* line 68, ../scss/_5_layout_theme-fr.scss */
|
||||
#masthead-with-pattern {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
/* line 61, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 71, ../scss/_5_layout_theme-fr.scss */
|
||||
#masthead-with-background-color {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
/* line 64, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 74, ../scss/_5_layout_theme-fr.scss */
|
||||
.backstretch {
|
||||
background: #334d5c;
|
||||
}
|
||||
|
||||
/* Masthead for medium-up */
|
||||
@media only screen and (min-width: 40.063em) {
|
||||
/* line 70, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 80, ../scss/_5_layout_theme-fr.scss */
|
||||
#logo img {
|
||||
margin-top: 80px;
|
||||
}
|
||||
|
||||
/* line 73, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 83, ../scss/_5_layout_theme-fr.scss */
|
||||
#masthead {
|
||||
height: 320px;
|
||||
background: #334d5c;
|
||||
}
|
||||
|
||||
/* line 77, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 87, ../scss/_5_layout_theme-fr.scss */
|
||||
#masthead-with-text {
|
||||
padding: 75px 0;
|
||||
font-size: 3.375rem;
|
||||
height: 320px;
|
||||
}
|
||||
|
||||
/* line 92, ../scss/_5_layout_theme-fr.scss */
|
||||
#masthead-no-image-header {
|
||||
height: 175px;
|
||||
background: #334d5c;
|
||||
}
|
||||
|
||||
/* line 81, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 96, ../scss/_5_layout_theme-fr.scss */
|
||||
#masthead-no-image-header #logo img {
|
||||
margin-top: 45px;
|
||||
}
|
||||
}
|
||||
/* line 86, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 101, ../scss/_5_layout_theme-fr.scss */
|
||||
#title-image-small {
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
/* line 89, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 104, ../scss/_5_layout_theme-fr.scss */
|
||||
#title-image-large {
|
||||
height: 520px;
|
||||
}
|
||||
|
||||
/* line 92, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 107, ../scss/_5_layout_theme-fr.scss */
|
||||
#title-image-index-small {
|
||||
height: 120px;
|
||||
}
|
||||
|
||||
/* line 95, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 110, ../scss/_5_layout_theme-fr.scss */
|
||||
#title-image-index-large {
|
||||
height: 260px;
|
||||
}
|
||||
|
||||
/* Breadcrumb
|
||||
------------------------------------------------------------------- */
|
||||
/* line 105, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 120, ../scss/_5_layout_theme-fr.scss */
|
||||
#breadcrumb {
|
||||
background: #f3f3f3;
|
||||
border-top: 1px solid #f0f0f0;
|
||||
|
|
@ -7635,43 +7659,43 @@ body.video cite {
|
|||
|
||||
/* Meta
|
||||
------------------------------------------------------------------- */
|
||||
/* line 116, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 131, ../scss/_5_layout_theme-fr.scss */
|
||||
#page-meta {
|
||||
color: #a4a4a4;
|
||||
}
|
||||
|
||||
/* line 120, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 135, ../scss/_5_layout_theme-fr.scss */
|
||||
#page-meta .button {
|
||||
background: #a4a4a4;
|
||||
}
|
||||
|
||||
/* line 123, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 138, ../scss/_5_layout_theme-fr.scss */
|
||||
#page-meta .button:hover {
|
||||
background: #334d5c;
|
||||
}
|
||||
|
||||
/* Jump to top
|
||||
------------------------------------------------------------------- */
|
||||
/* line 132, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 147, ../scss/_5_layout_theme-fr.scss */
|
||||
#up-to-top {
|
||||
padding: 160px 0 10px 0;
|
||||
}
|
||||
|
||||
/* line 135, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 150, ../scss/_5_layout_theme-fr.scss */
|
||||
#up-to-top a {
|
||||
font-size: 24px;
|
||||
padding: 5px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
/* line 140, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 155, ../scss/_5_layout_theme-fr.scss */
|
||||
#up-to-top a:hover {
|
||||
background: #d7d7d7;
|
||||
}
|
||||
|
||||
/* Footer
|
||||
------------------------------------------------------------------- */
|
||||
/* line 149, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 164, ../scss/_5_layout_theme-fr.scss */
|
||||
#footer {
|
||||
padding-top: 30px;
|
||||
padding-bottom: 20px;
|
||||
|
|
@ -7679,19 +7703,19 @@ body.video cite {
|
|||
color: white;
|
||||
}
|
||||
|
||||
/* line 155, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 170, ../scss/_5_layout_theme-fr.scss */
|
||||
footer p,
|
||||
footer li {
|
||||
font-size: 0.8125rem;
|
||||
font-weight: 300;
|
||||
}
|
||||
|
||||
/* line 161, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 176, ../scss/_5_layout_theme-fr.scss */
|
||||
#footer a {
|
||||
color: #a1d044;
|
||||
}
|
||||
|
||||
/* line 164, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 179, ../scss/_5_layout_theme-fr.scss */
|
||||
#footer h4,
|
||||
#footer h5 {
|
||||
letter-spacing: 1px;
|
||||
|
|
@ -7699,7 +7723,7 @@ footer li {
|
|||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* line 172, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 187, ../scss/_5_layout_theme-fr.scss */
|
||||
#subfooter {
|
||||
background: #313131;
|
||||
color: #7e7e7e;
|
||||
|
|
@ -7707,23 +7731,23 @@ footer li {
|
|||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
/* line 178, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 193, ../scss/_5_layout_theme-fr.scss */
|
||||
#subfooter-left ul.inline-list {
|
||||
float: left;
|
||||
}
|
||||
|
||||
/* line 181, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 196, ../scss/_5_layout_theme-fr.scss */
|
||||
#subfooter li a {
|
||||
color: #7e7e7e;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
/* line 185, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 200, ../scss/_5_layout_theme-fr.scss */
|
||||
#subfooter li a:hover {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* line 188, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 203, ../scss/_5_layout_theme-fr.scss */
|
||||
#subfooter .social-icons li a {
|
||||
font-size: 1.4375rem;
|
||||
display: block;
|
||||
|
|
@ -7734,7 +7758,7 @@ footer li {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
/* line 197, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 212, ../scss/_5_layout_theme-fr.scss */
|
||||
#subfooter .social-icons li a:hover {
|
||||
background: #313131;
|
||||
color: #fff;
|
||||
|
|
@ -7742,72 +7766,72 @@ footer li {
|
|||
|
||||
/* CSS-Classes to add margin at the top or bottom
|
||||
------------------------------------------------------------------- */
|
||||
/* line 207, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 222, ../scss/_5_layout_theme-fr.scss */
|
||||
.t15 {
|
||||
margin-top: 15px !important;
|
||||
}
|
||||
|
||||
/* line 208, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 223, ../scss/_5_layout_theme-fr.scss */
|
||||
.t20 {
|
||||
margin-top: 20px !important;
|
||||
}
|
||||
|
||||
/* line 209, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 224, ../scss/_5_layout_theme-fr.scss */
|
||||
.t30 {
|
||||
margin-top: 30px !important;
|
||||
}
|
||||
|
||||
/* line 210, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 225, ../scss/_5_layout_theme-fr.scss */
|
||||
.t50 {
|
||||
margin-top: 50px !important;
|
||||
}
|
||||
|
||||
/* line 211, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 226, ../scss/_5_layout_theme-fr.scss */
|
||||
.t60 {
|
||||
margin-top: 60px !important;
|
||||
}
|
||||
|
||||
/* line 212, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 227, ../scss/_5_layout_theme-fr.scss */
|
||||
.t90 {
|
||||
margin-top: 90px !important;
|
||||
}
|
||||
|
||||
/* line 214, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 229, ../scss/_5_layout_theme-fr.scss */
|
||||
.b15 {
|
||||
margin-bottom: 15px !important;
|
||||
}
|
||||
|
||||
/* line 215, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 230, ../scss/_5_layout_theme-fr.scss */
|
||||
.b20 {
|
||||
margin-bottom: 20px !important;
|
||||
}
|
||||
|
||||
/* line 216, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 231, ../scss/_5_layout_theme-fr.scss */
|
||||
.b30 {
|
||||
margin-bottom: 30px !important;
|
||||
}
|
||||
|
||||
/* line 217, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 232, ../scss/_5_layout_theme-fr.scss */
|
||||
.b60 {
|
||||
margin-bottom: 60px !important;
|
||||
}
|
||||
|
||||
/* line 219, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 234, ../scss/_5_layout_theme-fr.scss */
|
||||
.pl20 {
|
||||
padding-left: 20px !important;
|
||||
}
|
||||
|
||||
/* line 221, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 236, ../scss/_5_layout_theme-fr.scss */
|
||||
.pr5 {
|
||||
padding-right: 5px !important;
|
||||
}
|
||||
|
||||
/* line 222, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 237, ../scss/_5_layout_theme-fr.scss */
|
||||
.pr10 {
|
||||
padding-right: 10px !important;
|
||||
}
|
||||
|
||||
/* line 223, ../scss/_5_layout_theme-fr.scss */
|
||||
/* line 238, ../scss/_5_layout_theme-fr.scss */
|
||||
.pr20 {
|
||||
padding-right: 20px !important;
|
||||
}
|
||||
|
|
@ -7992,8 +8016,8 @@ dd.accordion-navigation.active span:before {
|
|||
}
|
||||
|
||||
/* Syntax highlighting styles
|
||||
/* Colors see color_settings
|
||||
/* ----------------------------------------------------------*/
|
||||
Colors see color_settings
|
||||
------------------------------------------------------------------- */
|
||||
/* line 6, ../scss/_7_highlight_theme-fr.scss */
|
||||
.highlight {
|
||||
background: white;
|
||||
|
|
|
|||
2
assets/css/styles-responsive.min.css
vendored
2
assets/css/styles-responsive.min.css
vendored
File diff suppressed because one or more lines are too long
|
|
@ -1,7 +1,7 @@
|
|||
---
|
||||
layout: default
|
||||
title: "Blog Archive"
|
||||
description: "Check out all blog posts in my blog archive. Click on a headline to read the teaser."
|
||||
teaser: "Check out all blog posts in my blog archive. Click on a headline to read the teaser."
|
||||
breadcrumb: true
|
||||
image:
|
||||
header: header_unsplash_8.jpg
|
||||
|
|
@ -10,7 +10,7 @@ permalink: "blog/archive/"
|
|||
<div id="blog-index" class="row">
|
||||
<div class="small-12 columns t30">
|
||||
<h1>{{ page.title }}</h1>
|
||||
{% if page.description %}<p class="teaser">{{ page.description }}</p>{% endif %}
|
||||
{% if page.teaser %}<p class="teaser">{{ page.teaser }}</p>{% endif %}
|
||||
|
||||
<dl class="accordion" data-accordion>
|
||||
{% assign counter = 1 %}
|
||||
|
|
@ -18,7 +18,7 @@ permalink: "blog/archive/"
|
|||
<dd class="accordion-navigation">
|
||||
<a href="#panel{{ counter }}"><span class="iconfont"></span> {% if post.subheadline %}{{ post.subheadline }} › {% endif %}<strong>{{ post.title }}</strong></a>
|
||||
<div id="panel{{ counter }}" class="content">
|
||||
{% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.description %}{{ post.description | strip_html | escape }}{% endif %}
|
||||
{% if post.meta_description %}{{ post.meta_description | strip_html | escape }}{% elsif post.teaser %}{{ post.teaser | strip_html | escape }}{% endif %}
|
||||
<a href="{{ site.url }}{{ post.url }}" title="Read {{ post.title escape_once }}"><strong>{{ site.data.language.read_more }}</strong></a><br><br>
|
||||
</div>
|
||||
</dd>
|
||||
|
|
|
|||
2
index.md
2
index.md
|
|
@ -21,6 +21,6 @@ widget-2:
|
|||
widget-3:
|
||||
title: Download Theme
|
||||
url: '/design/portfolio/'
|
||||
text: '<em>Feeling Responsive</em> is totally free and licensed under the MIT License. You can make it your own and do with it what you want. Grab your copy or clone it at GitHub and start your website with it. Then tell me via <a href="http://twitter.com/phlow">Twitter @phlow</a>.'
|
||||
text: '<em>Feeling Responsive</em> is totally free and licensed under the MIT License. Make it your own and do with it what you want. Grab your copy or clone it at GitHub and start your website with it. Then tell me via Twitter <a href="http://twitter.com/phlow">@phlow</a>.'
|
||||
image: github-303x182.jpg
|
||||
---
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@ header:
|
|||
image_fullwidth: "header_unsplash_9.jpg"
|
||||
permalink: "/changelog/"
|
||||
---
|
||||
2015-02-17 // Version 0.97
|
||||
: Simplicity. Reduced templates. Now there is one page/post-template with two switches via front matter to turn on metadata at the end of the page/post via `show_metadata: true/false` and to add a left or right sidebar via `sidebar: left/right`. The defaults are declared in `config.yml`. I also changed the variable `description` to `teaser` because it's more logigally.
|
||||
|
||||
2015-02-12 // Version 0.96
|
||||
: Added `frontpage`-layout with three widgets-areas. The layout simplifies the process to change content on the frontpage.
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: page
|
||||
show_metadata: false
|
||||
title: "Style your content!"
|
||||
subheadline: "Layouts of Feeling Responsive"
|
||||
header:
|
||||
|
|
|
|||
|
|
@ -23,28 +23,18 @@ permalink: "/documentation/"
|
|||
|
||||
*Feeling Responsive* supports you with different templates for your content. These are the actual page/post formats:
|
||||
|
||||
### Post
|
||||
The [post format]({{ site.url }}/design/post/) has no sidebar, its content is centered and beneath the content the visitor gets some metadata like categories, tags, date and author if provided via data in front matter of the post.
|
||||
|
||||
use in front matter via: `layout: post`
|
||||
|
||||
|
||||
### Page
|
||||
The [page template]({{ site.url }}/design/page/) shows the content in the same way as the *post* format without listing the metadata at the end of the page.
|
||||
### Page/Post
|
||||
The [page/post format]({{ site.url }}/design/page/) has no sidebar by default, its content is centered and beneath the content the visitor gets some metadata like categories, tags, date and author if provided via data in front matter of the post.
|
||||
|
||||
use in front matter via: `layout: page`
|
||||
|
||||
|
||||
### Post with left sidebar
|
||||
This template displays a [post left sidebar]({{ site.url }}/design/post-left-sidebar/) besides the content. To customize the content of the sidebar, open `_includes/sidebar.html`.
|
||||
|
||||
use in front matter via: `layout: post-left-sidebar`
|
||||
### Page/Post with a left or right sidebar
|
||||
If you want to show the sidebar, just enter `sidebar: left` or `sidebar: right` in front matter, and *whoops, there it is*! To customize the content of the sidebar, open `_includes/sidebar.html`.
|
||||
|
||||
|
||||
### Post with right sidebar
|
||||
This template displays a [post with right sidebar]({{ site.url }}/design/post-right-sidebar/) besides the content. To customize the content of the sidebar, open `_includes/sidebar.html`.
|
||||
### Page/Post with or without metadata
|
||||
If you want to show metadata like categories, tags and date at the end of the page, just enter `show_metadata: true`. It's on by default. You can change it via `config.yml`. To turn of metadata just enter – *yes, you guessed right* – `show_metadata: false`.
|
||||
|
||||
use in front matter via: `layout: post-right-sidebar`
|
||||
|
||||
|
||||
### Page Full Width
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: page
|
||||
show_metadata: false
|
||||
title: "Getting Started"
|
||||
subheadline: "A Step-by-Step Guide"
|
||||
description: "This step-by-step guide helps you to customize Feeling Responsive to your needs."
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
---
|
||||
layout: page
|
||||
show_metadata: false
|
||||
subheadline: "Header"
|
||||
title: "Style your Header!"
|
||||
description: "These are your options to style the header of each webpage individually. <em>Feeling Responsive</em> uses <a href='http://srobbin.com/jquery-plugins/backstretch/'>Backstretch by Scott Robin</a> to expand them from left to right. The width should be 1600 pixel or higher using a ratio like 16:9 or 21:9 or 2:1."
|
||||
|
|
|
|||
Reference in a new issue