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

Release 0.92 2014-12-21

Browse source
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
Download patch file Download diff file Expand all files Collapse all files

50
pages/about.md Normal file
View file

@ -0,0 +1,50 @@
---
layout: page
title: "About"
subheadline: "Why another Jekyll Theme?"
description: "Since years I am programming and designing websites. I love to work with open source tools and learn via code from others. This time I want to try to give something back..."
permalink: "/about/"
---
...and learn at the same time.
*Feeling Responsive* is my first theme which I let into the world. It's built on work and knowledge of others. While I am still programming it, you read about whats behind this theme in the – *hopefully* – near future.
## Features
* Responsive Gallery, Videos, Grid, Typography,...
* 100% GitHub Pages friendly
* Easy editable navigation and social media links
* Lots of possibilities to customize it to your needs
* Various post formats to let your content shine
* Uses Jekyll 2.0
* Multiple possibilities to use images in different ways
* Fine typography
## I got inspired by...
[Michael Rose][1] and his fabulous [themes for jekyll][2].
Authors of [A List Apart][4] and [Smashing Magazine][5] since 2002.
[GitHub][6] and how they built such a habitat for cooperation worldwide.
[Automattic][3] and how they built a fantastic community around WordPress.
And of course many more...
**Since then, fork it!**
Yours sincerelly, [Moritz »mo.« Sauer][7]
[1]: http://mademistakes.com/about/
[2]: http://mademistakes.com/work/jekyll-themes/
[3]: http://automattic.com/
[4]: http://alistapart.com/
[5]: http://www.smashingmagazine.com/
[6]: https://github.com/
[7]: http://sauer.io
[8]: #
[9]: #
[10]: #

59
pages/changelog.md Normal file
View file

@ -0,0 +1,59 @@
---
layout: page
title: "Change is good!"
subheadline: "Feeling Responsive Theme Changelog"
description: "History and changelog of Feeling Responsive Theme by Phlow Media."
image:
header: "header_unsplash_9.jpg"
permalink: "/changelog/"
---
2014-12-21 // Version 0.92
: A new polished version, with a stronger and better color scheme. [Have a look ›]({{ site.url }}/design/grid/#color-scheme-and-colors-codes). Added foundation `.scss-files` to `assets/scss/` for savety.
2014-10-08 // Version 0.91
: Moved images folder from `assets/img/` to `images` to fasten access to folder. Moved all pages to `pages/`-folder for better organization. Added language-functionality. *Feeling Responsive* is now translation ready.
2014-09-21 // Version 0.9
: Optimized code, tweaked CSS, added images, deleted `header: "no"` from front matter (because it not necessary), added drafts to the new `_drafts`-folder to begin posts and pages faster and enhanced the documentation. Huh, 1.0 I am coming.
2014-09-16 // Version 0.8
: Added [video post format][5] for that cinematic flavor. Added URL- and Credit-feature to images and revamped the homepage a little bit to give blog-content more exposure. Optimized some includes, especially the `_include/list-posts.html`-Include which support some nifty parameters.
2014-09-15 // Version 0.7
: Added an [example of a gallery][4] to show how to use Clearing Lightbox. Meta information is used in posts via `/include/meta_information.html`. To optimize pages/posts for search engines you have now have an extra front matter-variable called `meta_description`. Also the theme supports facebook open graph information.
2014-09-12 // Version 0.6
: Finally the [blogpage][1] has pagination and an [archive for all blog-posts][2] using the [foundation accordion][3].
2014-08-22 // Version 0.5
: Better typograpyh, extended [documentation]({{ site.url}}/documentation/) and little subtle css-things to make *Feeling Responsive* a little better.
2014-08-17 // Version 0.4
: First beta release of »Feeling Responsive« with the current jekyll templates.
2014-08-17 // Version 0.3
: First release – only *HTML-Version* – of »Feeling Responsive« on Github-Pages with some hickups.
2014-07-26 // Version 0.2
: Updated Navigation & Social Media-Configuration via custom data in `_data`
2014-07-07 // Version 0.1
: Start of theme coding and development.
2014-06-23
: First Ideas and scribbles at the beach in [Bergen/Netherlands][6].
[1]: {{ site.url }}/blog/
[2]: {{ site.url }}/blog/archive/
[3]: http://foundation.zurb.com/docs/components/accordion.html
[4]: {{ site.url }}/design/gallery/
[5]: {{ site.url }}/design/video/
[6]: https://www.google.de/maps/place/Strandpaviljoen+Joep+B.V./@51.9960733,5.830135,6z/data=!4m2!3m1!1s0x47cf5918df69093b:0x7c11ab31102c1c8a
[7]: #
[8]: #
[9]: #
[10]: #

16
pages/contact.md Normal file
View file

@ -0,0 +1,16 @@
---
layout: page
title: "Contact"
subheadline: "Wufoo-powered contact forms"
description: "Get in touch with me? Use the contact form."
permalink: "/contact/"
---
If you need a fabulous contact form for your website, I suggest you use [Wufoo][1]. You can use three forms for free, you get no spam and if you get more than 100 entries you have to pay.
<div class="panel">
<iframe width="100%" height="650" frameborder="0" scrolling="no" src="https://phlowmedia.wufoo.com/embed/z7x3k1/"></iframe>
</div>
[1]: http://www.wufoo.com/

266
pages/documentation.md Normal file
View file

@ -0,0 +1,266 @@
---
layout: page-fullwidth
title: "Theme Documentation"
subheadline: "How to use Feeling Responsive"
description: "The documentation is a work in progress..."
permalink: "/documentation/"
---
<div class="row">
<div class="medium-4 medium-push-8 columns" markdown="1">
<div class="panel radius" markdown="1">
**Table of Contents**
{: #toc }
* TOC
{:toc}
</div>
</div><!-- /.medium-4.columns -->
<div class="medium-8 medium-pull-4 columns" markdown="1">
## Different Page/Posts Formats {#formats}
*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.
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`
### 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`.
use in front matter via: `layout: post-right-sidebar`
### Page Full Width
If you want full control of styling a page, than use the [page full-width template]({{ site.url }}/design/page-full-width/). To set up a grid, just use the [foundation grid system](http://foundation.zurb.com/docs/components/grid.html).
use in front matter via: `layout: page-full-width`
### Video
If you're a video producer or cineast, you'll like the [video template]({{ site.url }}/design/video/). It darkens the layout to black and lets the video stand out full-width.
use in front matter via: `layout: video`
<small markdown="1">[Up to table of contents](#toc)</small>
{: .text-right }
## Style your content with {#styling}
Feeling Responsive offers lots of possibilities to style your articles. You can style your content in different ways. There are elements like subheadlines, feature images, header images, homepage images, meta data like categories and tags and many more.
### subheadlines
If you need a subheadline for an article, just define a subheadline in front matter like this:
`subheadline: "Subheadline"`
### Quotes
Quotes mix it up a little bit, if you write long articles. So use quotes:
> Age is an issue of mind over matter. If you don't mind, it doesn't matter.
<cite>Mark Twain</cite>
<small markdown="1">[Up to table of contents](#toc)</small>
{: .text-right }
## Responsive Videos
With foundation responsive videos are easy. [More ›](http://foundation.zurb.com/docs/components/flex_video.html)
<div class="flex-video">
<iframe width="1280" height="720" src="//www.youtube.com/embed/WoHxoz_0ykI" frameborder="0" allowfullscreen></iframe>
</div>
### Code to use for flexible videos
{% highlight html %}
<div class="flex-video">
<iframe with video />
</div>
{% endhighlight %}
<img class="t60" src="{{ site.url }}/images/header_homepage_13.jpg">
## Images: Header, Title, Thumbnails, Homepage {#images}
There are four types of images you can define via frontmatter: thumbnails, header images, title images and images in your article.
### Header Images
Header images are displayed right under the top navigation. We use Backstretch to expand them from left to right. The width should be 1600 pixel or higher and in a ratio like 16:9 or 21:9 or 2:1.
~~~
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.
### Thumbnails
Thumbnails are used on archive pages like the [blog index][2]. They have a size of 150x150 pixels. Define them in front matter like this:
~~~
image:
thumb: thumbnail_image.jpg
~~~
### Homepage Image
If you want to feature an article on the homepage with a huge image, than use the homepage image with a width of 970 pixels. If no homepage image is defined *Feeling Responsive* writes over the blog entries *New Blog Articles*. Define the homepage image like this:
~~~
image:
homepage: "header_homepage_13.jpg"
~~~
### Credits with URL
Sometimes you want to give credit to the creator of your images, maybe with a link. Especially when you use Creative Commons-images like I do for this website. Just add the following front matter and *Feeling Responsive* does the rest:
~~~
image:
header: header_image.jpg
credit: Image by Phlow
url: "http://phlow.de/"
~~~
### Define all images for an article
~~~
image:
header: header_image.jpg
title: title_image.jpg
thumb: thumbnail_image.jpg
homepage: header_homepage_13.jpg
credit: Image by Phlow
url: "http://phlow.de/"
~~~
<small markdown="1">[Up to table of contents](#toc)</small>
{: .text-right }
## Create a Table of Content
{: .t60}
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].
### Bare Bones Version
{% highlight html %}
### Table of Contents
* Auto generated table of contents
{:toc}
{% endhighlight %}
### Foundation panel version
{% highlight html %}
<div class="panel radius" markdown="1">
**Table of Contents**
{: #toc }
* TOC
{:toc}
</div>
{% endhighlight %}
<small markdown="1">[Up to table of contents](#toc)</small>
{: .text-right }
## Includes
Includes can be very helpful to spice up your content. You can use includes in your Markdown-files with ease: Just call them with some Liquid code.
### list-posts.html
The `list-posts.html`-include is a loop to list posts. It's a helper to add some additional content fast and easy. You can use it in individual posts for example. Which parameters you use, depends on you.
Possible parameter for the loop:
- entries › define the number of entries to show
- offset › define the offset (number of entries to skip before displaying the first one)
- category › define **only one** category to display according entries
The loop looks when you use all parameters. Single parameters are possible of course.
~~~
{% raw %}
{% include list-posts.html entries='3' offset='1' category='design' %}
{% endraw %}
~~~
<small markdown="1">[Up to table of contents](#toc)</small>
{: .text-right }
## Javascript/Foundation modules
*Feeling Responsive* uses the foundation framework and some of its javascript components. I reduced the modules, to decrease page load and make the theme faster.
I only added one other javascript-module: [`backstretch`][3] by Scott Robbin. These modules are currently used by the theme and included in `javascript.min.js`. There is also a non-minified version, if you want to take a closer look: `javasript.js`.
~~~
/foundation/bower_components/foundation/js/vendor/jquery.js'
/foundation/bower_components/foundation/js/vendor/fastclick.js'
/foundation/bower_components/foundation/js/foundation.accordion.js'
/foundation/bower_components/foundation/js/foundation.clearing.js'
/foundation/bower_components/foundation/js/foundation.dropdown.js'
/foundation/bower_components/foundation/js/foundation.equalizer.js'
/foundation/bower_components/foundation/js/foundation.magellan.js'
/foundation/bower_components/foundation/js/foundation.topbar.js'
/foundation/js/jquery.backstretch.js'
~~~
</div><!-- /.medium-8.columns -->
</div><!-- /.row -->
[1]: http://kramdown.gettalong.org/converter/html.html#toc
[2]: {{ site.url }}/blog/
[3]: http://srobbin.com/jquery-plugins/backstretch/
[4]: #
[5]: #
[6]: #
[7]: #
[8]: #
[9]: #
[10]: #

16
pages/getting-started.md Normal file
View file

@ -0,0 +1,16 @@
---
layout: page
title: "Getting Started"
subheadline: "A Step-by-Step Guide"
description: "This step-by-step guide helps you to customize Feeling Responsive to your needs."
image:
header: header_homepage_13.jpg
permalink: "/getting-started/"
---
1. Open `_config.yml` and work it through, it's well documented
2. Add your own `logo.png` to `/images/`.
3. Open `_data/socialmedia.yml` and add your own social media links
4. Open `_data/navigation.yml` and add your own social media links
5. Make it yours and add your own content.
<a class="radius button small" href="{{ site.url }}/documentation/">Check out the documentation for all the tricks ›</a>

36
pages/roadmap.md Normal file
View file

@ -0,0 +1,36 @@
---
layout: page
title: "Roadmap"
subheadline: "ToDo-List and Ideas"
description: "Here are some ideas and features I want to implement in the future."
image:
header: "header_unsplash_3.jpg"
permalink: "/roadmap/"
---
## ToDo
* Add [simple search box with Google](http://truongtx.me/2012/12/28/jekyll-create-simple-search-box/)
* Convert Foundation Sass to use native Jekyll Sass support
* Create custom 404.html-webpage <https://help.github.com/articles/custom-404-pages/>
* More post-formats for blogging like special post formats for links, audio, tweets,...
* Patterns for header
* Alternative non-landscape header
* [Submit *Feeling Responsive* to jekyllthemes.org](http://jekyllthemes.org/)
* Produce some small tutorials to show features and how to customize *Feeling Responsive*
* Optimize HTML and use Schema.org-Attributes › <http://schema.org/Article>
* Produce an introduction video to showcase *Feeling Responsive*
* Show how to use [Entypo-Icons](http://entypo.com)
## Done
* <s>Clean up color scheme and highlighting colors</s>
* <s>Make theme translation ready</s>
* [<s>Add draft-templates for new pages/posts</s>](https://github.com/Phlow/feeling-responsive/tree/gh-pages/_drafts)
* [<s>Step-by-Step-Guide to customize *Feeling Responsive*</s>]({{ site.url }}/getting-started/)
* [<s>Video-Post-Format to feature videos in a huge way</s>]({{ site.url }}/design/video/)
* <s>Title and Credit for images</s>
* <s>SEO › Add metadescription to header.html and front matter</s>
* [<s>Adding Open Graph for Jekyll</s>](https://gist.github.com/pathawks/1406355)
* [<s>Gallery Post Example</s>]({{ site.url }}/design/gallery/)
* [<s>Adding pagination</s>](http://jekyllrb.com/docs/pagination/)

13
pages/style-guide.html Normal file
View file

@ -0,0 +1,13 @@
---
layout: page
title: "Style your content!"
subheadline: "Layouts of Feeling Responsive"
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 %}
</ul>