1
0
Fork 0

Release 0.92 2014-12-21

This commit is contained in:
Moritz »mo.« Sauer 2014-12-21 17:21:48 +01:00
parent 3068e7a7aa
commit a56896dda4
114 changed files with 10775 additions and 2079 deletions

View file

@ -12,15 +12,15 @@ image:
<div class="row">
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_1.jpg" alt="">
<img src="{{ site.url }}/images/unsplash_1.jpg" alt="">
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_2.jpg" alt="">
<img src="{{ site.url }}/images/unsplash_2.jpg" alt="">
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_4.jpg" alt="">
<img src="{{ site.url }}/images/unsplash_4.jpg" alt="">
</div><!-- /.medium-4.columns -->
</div><!-- /.row -->
@ -28,12 +28,12 @@ image:
<div class="row">
<div class="medium-8 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_6.jpg" alt="">
<img src="{{ site.url }}/images/unsplash_6.jpg" alt="">
</div><!-- /.medium-8.columns -->
<div class="medium-4 columns t30">
<img src="{{ site.url }}/assets/img/unsplash_5.jpg" alt="">
<img class="t30" src="{{ site.url }}/assets/img/unsplash_7.jpg" alt="">
<img src="{{ site.url }}/images/unsplash_5.jpg" alt="">
<img class="t30" src="{{ site.url }}/images/unsplash_7.jpg" alt="">
</div><!-- /.medium-4.columns -->
</div><!-- /.row -->

View file

@ -11,12 +11,12 @@ categories:
<div class="row">
<div class="medium-6 columns b30">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_nixdorf.jpg" alt="">
<img src="{{ site.url }}/images/webdesign_screenshot_nixdorf.jpg" alt="">
<p> Website: <a href="http://nixdorf-internatsberatung.de">Nixdorf Internatsberatung &amp; Schulberatung</a></p>
</div><!-- /.medium-6.columns -->
<div class="medium-6 columns b30">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_jcorneille.jpg" alt="">
<img src="{{ site.url }}/images/webdesign_screenshot_jcorneille.jpg" alt="">
<p>Website: <a href="http://jcorneille.de">Grafik Design Jeannette Corneille</a></p>
</div><!-- /.medium-6.columns -->
</div><!-- /.row -->
@ -24,17 +24,17 @@ categories:
<div class="row t30">
<div class="medium-4 columns">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_stilwandel.jpg" alt="">
<img src="{{ site.url }}/images/webdesign_screenshot_stilwandel.jpg" alt="">
<p>Website: <a href="http://stilwandel-koeln.de">Stilwande-Koeln.de</a></p>
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_tarnkappe.jpg" alt="">
<img src="{{ site.url }}/images/webdesign_screenshot_tarnkappe.jpg" alt="">
<p>Website: <a href="http://tarnkarppe.info">Tarnkappe.info</a></p>
</div><!-- /.medium-4.columns -->
<div class="medium-4 columns">
<img src="{{ site.url }}/assets/img/webdesign_screenshot_schriefer.jpg" alt="">
<img src="{{ site.url }}/images/webdesign_screenshot_schriefer.jpg" alt="">
<p>Website: <a href="http://www.psychotherapie-schriefer.de/">Praxis für psychologische Psychotherapie Simone Schriefer</a></p>
</div><!-- /.medium-4.columns -->
</div><!-- /.row -->

View file

@ -65,64 +65,48 @@ image:
*Feeling Responsive* uses strong colors in combination with grey colors.
</p>
### Colours
<div class="row">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/E4E4E4/ffffff&amp;text=Grey+E4E4E4">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/D7D7D7/ffffff&amp;text=Grey+D7D7D7">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/CBCBCB/ffffff&amp;text=Grey+CBCBCB">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/BEBEBE/ffffff&amp;text=Grey+BEBEBE">
<div class="large-2 columns b30" style="background: #45B29D; height: 166px;"></div>
<div class="large-2 columns b30" style="background: #334D5C; height: 166px;"></div>
<div class="large-2 columns b30" style="background: #A1D044; height: 166px;"></div>
<div class="large-2 columns b30" style="background: #EFC94C; height: 166px;"></div>
<div class="large-2 columns b30" style="background: #E27A3F; height: 166px;"></div>
<div class="large-2 columns b30" style="background: #DF4949; height: 166px;"></div>
</div>
### Grey Scale
<div class="row">
<div class="large-3 columns b30" style="background: #E4E4E4; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #D7D7D7; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #CBCBCB; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #BEBEBE; height: 220px;"></div>
</div>
<div class="row">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/A4A4A4/ffffff&amp;text=Grey+A4A4A4">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/979797/ffffff&amp;text=Grey+979797">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/8B8B8B/ffffff&amp;text=Grey+8B8B8B">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/7E7E7E/ffffff&amp;text=Grey+7E7E7E">
</div>
<div class="large-3 columns b30" style="background: #A4A4A4; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #979797; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #8B8B8B; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #7E7E7E; height: 220px;"></div>
</div>
<div class="row">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/646464/ffffff&amp;text=Grey+646464">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/575757/ffffff&amp;text=Grey+575757">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/4B4B4B/ffffff&amp;text=Grey+4B4B4B">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/3E3E3E/ffffff&amp;text=Grey+3E3E3E">
</div>
<div class="large-3 columns b30" style="background: #646464; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #575757; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #4B4B4B; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #3E3E3E; height: 220px;"></div>
</div>
<div class="row">
<div class="large-3 columns b30">
<img src="http://placehold.it/220/313131/ffffff&amp;text=Grey+313131">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/242424/ffffff&amp;text=Grey+242424">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/171717/ffffff&amp;text=Grey+171717">
</div>
<div class="large-3 columns b30">
<img src="http://placehold.it/220/0B0B0B/ffffff&amp;text=Grey+0B0B0B">
</div>
<div class="large-3 columns b30" style="background: #313131; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #242424; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #171717; height: 220px;"></div>
<div class="large-3 columns b30" style="background: #0B0B0B; height: 220px;"></div>
</div>

View file

@ -11,12 +11,12 @@ image:
You just need to choose a template like the [`page`][3]- or [`page-fullwidth`][4]-template and than use some foundation magic.
<ul class="clearing-thumbs small-block-grid-3" data-clearing>
<li><a href="{{ site.url }}/assets/img/unsplash_1.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_1_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_2.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_2_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_3.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_3_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_4.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_4_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_5.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_5_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/assets/img/unsplash_6.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/assets/img/unsplash_6_bus_thumb"></a></li>
<li><a href="{{ site.url }}/images/unsplash_1.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_1_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_2.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_2_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_3.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_3_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_4.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_4_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_5.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_5_thumb.jpg"></a></li>
<li><a href="{{ site.url }}/images/unsplash_6.jpg"><img data-caption="All images by Unsplash.com" class="th" src="{{ site.url }}/images/unsplash_6_bus_thumb"></a></li>
</ul>
## Clearing Lightbox Code

View file

@ -0,0 +1,27 @@
---
layout: post
title: "Header Image With Pattern"
subheadline: "Headers With Style"
meta_description:
description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header image in front of a pattern behind it."
categories:
- design
tags:
- design
- pattern
- header
header:
image: "header_unsplash_2-970x.jpg"
pattern: "pattern_concrete.jpg"
color: ""
---
It's so easy to do. Just define in front matter an image and a pattern image. Instead of a pattern you can also use a color. Have a look at the [example with a background color]({{ site.url }}/design/header-color/).
## Header Image With Pattern
~~~
header:
image: "header_unsplash_2-970x.jpg"
pattern: "pattern_concrete.jpg"
~~~

View file

@ -0,0 +1,25 @@
---
layout: post
title: "Header Image With Background Color"
subheadline: "Headers With Style"
description: "Feeling Responsive allows you to use all different kinds of headers. This example shows a header image with a defined background color via front matter."
categories:
- design
tags:
- design
- background color
- header
header:
image: "header_unsplash_2-970x.jpg"
background-color: "#304558"
---
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-pattern/).
## Header Image With Background Color
~~~
header:
image: "header_unsplash_2-970x.jpg"
background-color: "#fabb00"
~~~