├── _sass
    ├── modules
    │   ├── pagination
    │   │   ├── _variables.scss
    │   │   └── _rules.scss
    │   ├── post
    │   │   ├── _variables.scss
    │   │   └── _rules.scss
    │   └── about
    │   │   ├── _variables.scss
    │   │   └── _rules.scss
    ├── _utils.scss
    ├── _modules.scss
    ├── _base.scss
    ├── _variables.scss
    ├── _layout.scss
    └── vendor
    │   └── _normalize.scss
├── .gitignore
├── img
    ├── avatar.jpg
    ├── banner.jpg
    ├── watch-1.png
    ├── watch-2.png
    ├── banner@2x.jpg
    ├── banner@3x.jpg
    ├── watch-1@2x.png
    ├── watch-1@3x.png
    ├── watch-2@2x.png
    ├── watch-2@3x.png
    ├── icon-twitter.png
    ├── icon-instagram.png
    ├── icon-location.png
    ├── icon-twitter@2x.png
    ├── icon-twitter@3x.png
    ├── icon-instagram@2x.png
    ├── icon-instagram@3x.png
    ├── icon-location@2x.png
    └── icon-location@3x.png
├── _layouts
    ├── post.html
    ├── page.html
    └── default.html
├── _includes
    ├── header.html
    ├── head.html
    ├── post.html
    └── footer.html
├── about.md
├── _config.yml
├── js
    └── travelog.js
├── LICENSE
├── feed.xml
├── css
    └── screen.scss
├── README.md
├── _posts
    └── 2014-08-12-the-travelog-theme.markdown
└── index.html


/_sass/modules/pagination/_variables.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # Jekyll
2 | _site
3 | 
4 | # Sass
5 | .sass-cache
6 | 


--------------------------------------------------------------------------------
/img/avatar.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/avatar.jpg


--------------------------------------------------------------------------------
/img/banner.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/banner.jpg


--------------------------------------------------------------------------------
/img/watch-1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/watch-1.png


--------------------------------------------------------------------------------
/img/watch-2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/watch-2.png


--------------------------------------------------------------------------------
/img/banner@2x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/banner@2x.jpg


--------------------------------------------------------------------------------
/img/banner@3x.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/banner@3x.jpg


--------------------------------------------------------------------------------
/img/watch-1@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/watch-1@2x.png


--------------------------------------------------------------------------------
/img/watch-1@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/watch-1@3x.png


--------------------------------------------------------------------------------
/img/watch-2@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/watch-2@2x.png


--------------------------------------------------------------------------------
/img/watch-2@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/watch-2@3x.png


--------------------------------------------------------------------------------
/img/icon-twitter.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-twitter.png


--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 | 
5 | {% include post.html post=page content=content %}


--------------------------------------------------------------------------------
/img/icon-instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-instagram.png


--------------------------------------------------------------------------------
/img/icon-location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-location.png


--------------------------------------------------------------------------------
/img/icon-twitter@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-twitter@2x.png


--------------------------------------------------------------------------------
/img/icon-twitter@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-twitter@3x.png


--------------------------------------------------------------------------------
/img/icon-instagram@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-instagram@2x.png


--------------------------------------------------------------------------------
/img/icon-instagram@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-instagram@3x.png


--------------------------------------------------------------------------------
/img/icon-location@2x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-location@2x.png


--------------------------------------------------------------------------------
/img/icon-location@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/rowanoulton/travelog-theme/HEAD/img/icon-location@3x.png


--------------------------------------------------------------------------------
/_sass/_utils.scss:
--------------------------------------------------------------------------------
1 | @mixin clearfix {
2 |     &:after {
3 |       content: "";
4 |       display: table;
5 |       clear: both;
6 |     }
7 | }


--------------------------------------------------------------------------------
/_includes/header.html:
--------------------------------------------------------------------------------
1 | <header>
2 |     <a href="{{ site.baseurl }}/"><h1>{{ site.title }}</h1></a>
3 |     <h2>{{ site.subtitle }}</h2>
4 | </header>


--------------------------------------------------------------------------------
/_sass/_modules.scss:
--------------------------------------------------------------------------------
1 | @import "modules/post/rules";
2 | @import "modules/about/rules";
3 | @import "modules/pagination/rules";
4 | @include travelog-post;
5 | @include travelog-about;
6 | @include travelog-pagination;


--------------------------------------------------------------------------------
/_sass/modules/post/_variables.scss:
--------------------------------------------------------------------------------
1 | // .post-header
2 | $post-header-height: 42px !default;
3 | 
4 | // .post-footer-location
5 | $post-footer-location-height: 21px !default;
6 | $post-footer-location-line-height: $post-footer-location-height !default;


--------------------------------------------------------------------------------
/_layouts/page.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | <div class="post">
 5 | 
 6 |   <header class="post-header">
 7 |     <h1>{{ page.title }}</h1>
 8 |   </header>
 9 | 
10 |   <article class="post-content">
11 |   {{ content }}
12 |   </article>
13 | 
14 | </div>


--------------------------------------------------------------------------------
/_sass/modules/about/_variables.scss:
--------------------------------------------------------------------------------
 1 | // .about
 2 | $about-width: 450px !default;
 3 | 
 4 | // .about-body
 5 | $about-body-width: 295px !default;
 6 | 
 7 | // .about-body-description
 8 | $about-body-description-line-height: $caption-text-size + 4px !default;
 9 | 
10 | // .about-avatar
11 | $about-avatar-shrunk-width: 70px !default;
12 | $about-avatar-shrunk-height: $about-avatar-shrunk-width !default;


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   {% include head.html %}
 4 |     <body>
 5 |       <div id="ribbon"></div>
 6 |       <div id="wrap">
 7 |         {% include header.html %}
 8 |         {{ content }}
 9 |       </div>
10 |       {% include footer.html %}
11 |       <script type="text/javascript" src="{{ site.baseurl }}/js/travelog.js"></script>
12 |     </body>
13 | </html>
14 | 


--------------------------------------------------------------------------------
/about.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: page
 3 | title: About
 4 | permalink: /about/
 5 | ---
 6 | 
 7 | This is the base Jekyll theme. You can find out more info about customizing your Jekyll theme, as well as basic Jekyll usage documentation at [jekyllrb.com](http://jekyllrb.com/)
 8 | 
 9 | You can find the source code for the Jekyll new theme at: [github.com/jglovier/jekyll-new](https://github.com/jglovier/jekyll-new)
10 | 
11 | You can find the source code for Jekyll at [github.com/jekyll/jekyll](https://github.com/jekyll/jekyll)
12 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # Site settings
 2 | title: Travelog
 3 | subtitle: "Journal of [name]"
 4 | email: your-email@domain.com
 5 | description: "Make the footer happy by entering a short description about yourself here"
 6 | baseurl: ""
 7 | url: "http://yourdomain.com"
 8 | twitter_username: "rowanoulton"
 9 | github_username:  "rowanoulton"
10 | instagram_username: "rowanoulton"
11 | 
12 | # Build settings
13 | markdown: kramdown
14 | permalink: pretty
15 | 
16 | # Pagination
17 | paginate: 5
18 | 
19 | # Sass
20 | sass:
21 |     style: :compressed


--------------------------------------------------------------------------------
/_sass/_base.scss:
--------------------------------------------------------------------------------
 1 | * { 
 2 |     box-sizing: border-box;
 3 | }
 4 | 
 5 | html,
 6 | body {
 7 |     width: 100%;
 8 |     height: 100%;
 9 | }
10 | 
11 | body {
12 |     font-family: $regular-font;
13 |     font-size: $regular-text-size;
14 |     color: $text-colour;
15 |     text-rendering: optimizeLegibility;
16 |     -webkit-font-smoothing: antialiased;
17 |     font-smoothing: antialiased;
18 | }
19 | 
20 | a {
21 |     color: $link-colour;
22 |     text-decoration: none;
23 | 
24 |     &:hover {
25 |         color: $link-colour-over;
26 |     }
27 | }


--------------------------------------------------------------------------------
/_includes/head.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |     <meta charset="utf-8">
 3 |     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 4 |     <meta name="viewport" content="width=device-width,initial-scale=1">
 5 |     <title>{% if page.title %}{{ page.title }}{% else %}{{ site.title }}{% endif %}</title>
 6 |     <meta name="description" content="{{ site.description }}">
 7 |     <link rel="canonical" href="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}">
 8 | 
 9 |     <!-- Custom CSS -->
10 |     <link rel="stylesheet" href="{{ "/css/screen.css" | prepend: site.baseurl }}">
11 | </head>
12 | 


--------------------------------------------------------------------------------
/js/travelog.js:
--------------------------------------------------------------------------------
 1 | document.addEventListener('DOMContentLoaded', function () {
 2 |     var ordinalNodes = document.getElementsByClassName('ordinal'),
 3 |         forEach      = Array.prototype.forEach,
 4 |         getOrdinalString;
 5 | 
 6 |     getOrdinalString = function (number) {
 7 |         var s = ['th','st','nd','rd'],
 8 |             v = number % 100;
 9 | 
10 |         return (s[(v-20) % 10] || s[v] || s[0]);
11 |     };
12 | 
13 |     forEach.call(ordinalNodes, function (ordinalNode) {
14 |         var number        = parseInt(ordinalNode.innerHTML),
15 |             ordinalString = getOrdinalString(number);
16 | 
17 |         ordinalNode.innerHTML += '<sup>' + ordinalString + '</sup>';
18 |     });
19 | });


--------------------------------------------------------------------------------
/_includes/post.html:
--------------------------------------------------------------------------------
 1 | <section class="post">
 2 |     <div class="post-header post-header--dw">
 3 |         <a href="{{ site.baseurl }}{{ include.post.url }}"><h3 class="post-header-title">{{ include.post.title }}</h3></a>
 4 |         <h4 class="post-header-date"><span class="ordinal">{{ include.post.date | date: "%e" }}</span> {{ include.post.date | date: "%B &#8217;%y" }}</h4>
 5 |     </div>
 6 |     <div class="post-body">
 7 |         {{ include.content }}
 8 |     </div>
 9 |     <div class="post-footer">
10 |         <ul class="post-footer-tags">
11 |             {% for tag in include.post.tags %}
12 |               <li class="post-footer-tag">#{{ tag }}</li>
13 |             {% endfor %}
14 |         </ul>
15 |         <a href="https://www.google.com/maps/search/{{ include.post.location }}" target="_blank" class="post-footer-location">{{ include.post.location }}</a>
16 |     </div>
17 | </section>


--------------------------------------------------------------------------------
/_includes/footer.html:
--------------------------------------------------------------------------------
 1 | <footer>
 2 |     <div class="about-wrap">
 3 |         <section class="about">
 4 |             <img class="about-avatar" src="{{ "/img/avatar.jpg" | prepend: site.baseurl }}" border="0" alt="[name]" />
 5 |             <div class="about-body">
 6 |                 <p class="about-body-title">About</p>
 7 |                 <p class="about-body-description">{{ site.description }}</p>
 8 |                 <ul>
 9 |                     <li><a href="https://twitter.com/{{ site.twitter_username }}" target="_blank" class="about-body-link about-body-link--bird">@{{ site.twitter_username }}</a></li>
10 |                     <li><a href="https://instagram.com/{{ site.instagram_username }}" target="_blank" class="about-body-link about-body-link--gram">{{ site.instagram_username }}</a></li>
11 |                 </ul>
12 |             </div>
13 |         </section>
14 |     </div>
15 | </footer>
16 | 


--------------------------------------------------------------------------------
/_sass/_variables.scss:
--------------------------------------------------------------------------------
 1 | // Typography
 2 | 
 3 |     // Fonts
 4 |     $regular-font: 'Proxima Nova', 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
 5 |     $title-font: 'Helvetica Neue', Helvetica, Arial, sans-serif !default;
 6 |     $subtitle-font: 'American Typewriter', Courier, serif !default;
 7 |     $caption-font: 'Chaparral Pro', 'American Typewriter', Courier, serif !default;
 8 | 
 9 |     // Colours
10 |     $link-colour: #598c7d !default;
11 |     $link-colour-over: darken($link-colour, 15%) !default;
12 |     $text-colour: #222 !default;
13 |     $inverse-text-colour: #eee !default; // For use on dark backgrounds
14 |     $subtitle-colour: #aaaaaa !default;
15 |     $caption-colour: #777 !default;
16 |     $border-colour: #e5e5e5 !default;
17 | 
18 |     // Sizes
19 |     $regular-text-size: 14px !default;
20 |     $title-text-size: 18px !default;
21 |     $caption-text-size: 12px !default;
22 | 
23 | // Layout
24 | 
25 |     // Footer
26 |     $footer-height: 262px !default;


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2014 Rowan Oulton
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/feed.xml:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: null
 3 | ---
 4 | <?xml version="1.0" encoding="UTF-8"?>
 5 | <rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom">
 6 |   <channel>
 7 |     <title>{{ site.title | xml_escape }}</title>
 8 |     <description>{{ site.description | xml_escape }}</description>
 9 |     <link>{{ site.url }}{{ site.baseurl }}/</link>
10 |     <atom:link href="{{ "/feed.xml" | prepend: site.baseurl | prepend: site.url }}" rel="self" type="application/rss+xml" />
11 |     <pubDate>{{ site.time | date_to_rfc822 }}</pubDate>
12 |     <lastBuildDate>{{ site.time | date_to_rfc822 }}</lastBuildDate>
13 |     <generator>Jekyll v{{ jekyll.version }}</generator>
14 |     {% for post in site.posts limit:10 %}
15 |       <item>
16 |         <title>{{ post.title | xml_escape }}</title>
17 |         <description>{{ post.content | xml_escape }}</description>
18 |         <pubDate>{{ post.date | date_to_rfc822 }}</pubDate>
19 |         <link>{{ post.url | prepend: site.baseurl | prepend: site.url }}</link>
20 |         <guid isPermaLink="true">{{ post.url | prepend: site.baseurl | prepend: site.url }}</guid>
21 |         {% for tag in post.tags %}
22 |         <category>{{ tag | xml_escape }}</category>
23 |         {% endfor %}
24 |         {% for cat in post.categories %}
25 |         <category>{{ cat | xml_escape }}</category>
26 |         {% endfor %}
27 |       </item>
28 |     {% endfor %}
29 |   </channel>
30 | </rss>
31 | 


--------------------------------------------------------------------------------
/css/screen.scss:
--------------------------------------------------------------------------------
 1 | ---
 2 | # this ensures Jekyll reads the file to be transformed into CSS later
 3 | # only Main files contain this front matter, not partials.
 4 | ---
 5 | 
 6 | $banner: '{{ site.baseurl }}/img/banner.jpg';
 7 | $banner-2x: '{{ site.baseurl }}/img/banner@2x.jpg';
 8 | $banner-3x: '{{ site.baseurl }}/img/banner@3x.jpg';
 9 | $watch-1: '{{ site.baseurl }}/img/watch-1.png';
10 | $watch-1-2x: '{{ site.baseurl }}/img/watch-1@2x.png';
11 | $watch-1-3x: '{{ site.baseurl }}/img/watch-1@3x.png';
12 | $watch-2: '{{ site.baseurl }}/img/watch-2.png';
13 | $watch-2-2x: '{{ site.baseurl }}/img/watch-2@2x.png';
14 | $watch-2-3x: '{{ site.baseurl }}/img/watch-2@3x.png';
15 | $icon-location: '{{ site.baseurl }}/img/icon-location.png';
16 | $icon-location-2x: '{{ site.baseurl }}/img/icon-location@2x.png';
17 | $icon-location-3x: '{{ site.baseurl }}/img/icon-location@3x.png';
18 | $icon-twitter: '{{ site.baseurl }}/img/icon-twitter.png';
19 | $icon-twitter-2x: '{{ site.baseurl }}/img/icon-twitter@2x.png';
20 | $icon-twitter-3x: '{{ site.baseurl }}/img/icon-twitter@3x.png';
21 | $icon-instagram: '{{ site.baseurl }}/img/icon-instagram.png';
22 | $icon-instagram-2x: '{{ site.baseurl }}/img/icon-instagram@2x.png';
23 | $icon-instagram-3x: '{{ site.baseurl }}/img/icon-instagram@3x.png';
24 | 
25 | @import "vendor/normalize";
26 | @import "utils";
27 | @import "variables";
28 | @import "base";
29 | @import "layout";
30 | @import "modules";
31 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | Travelog Theme
 2 | ---
 3 | 
 4 | Travelog is a theme for [Jekyll](http://jekyllrb.com/) that is both elegant and downright simple.
 5 | 
 6 | ![](http://i.imgur.com/FrNwKav.png)
 7 | 
 8 | In addition to being devilishly handsome, it is responsive down to mobile and has a very light footprint. Travelog lends itself well to photography and travel journaling.
 9 | 
10 | It has been designed to be an easy layout to modify for your own blog. See the installation instructions below to get started.
11 | 
12 | ### Demo
13 | 
14 | See the theme in action [here](http://travelog.io/).
15 | 
16 | ### Installation
17 | 
18 | - Install Jekyll: `gem install jekyll`
19 | - [Fork this repository](https://github.com/rowanoulton/travelog-theme/fork)
20 | - Clone it: `git clone https://github.com/YOUR-USER/travelog-theme`
21 | - Run the jekyll server: `jekyll serve -w`
22 | 
23 | You should have a server up and running locally at <http://localhost:4000>.
24 | 
25 | ### Customization 
26 | 
27 | To customize the theme to your hearts content, check out what's in `_config.yml` as that's where you'll pull your name, Twitter username, things like that.
28 | 
29 | 
30 | ### Deployment
31 | 
32 | Travelog is designed to be deployed to [GitHub Pages](https://pages.github.com/). 
33 | 
34 | 
35 | ### License
36 | 
37 | [MIT](https://github.com/rowanoulton/travelog-theme/blob/master/LICENSE)
38 | 
39 | Attribution is totally not necessary, use it as you please. If you'd like to throw me a shoutout or say thanks, I'm on [@rowanoulton](https://twitter.com/rowanoulton/).


--------------------------------------------------------------------------------
/_posts/2014-08-12-the-travelog-theme.markdown:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post
 3 | title:  "The Travelog Theme"
 4 | date:   2014-08-12 17:39:55
 5 | categories: auckland, new-zealand
 6 | location: Auckland, New Zealand
 7 | tags: auckland new-zealand
 8 | ---
 9 | 
10 | Travelog is a theme for Jekyll that is both elegant and downright simple.
11 | 
12 | In addition to being devilishly handsome, it is responsive down to mobile and has a very light footprint. Travelog lends itself well to photography and travel journaling.
13 | 
14 | Like a backpack with too many straps, a blog can sometimes be frustrating when it has too many bells and whistles. It is with that philosophy that I have put together this theme so that you might drown in its whitespace.
15 | 
16 | <div class="post-image">
17 |     <img src="http://placehold.it/885x500" />
18 |     <p class="post-image-caption">Using a little bit of markup, you can add beautiful captions to your totally beautiful pictures. Amazing.</p>
19 | </div>
20 | 
21 | <div class="post-image post-image--split">
22 |     <a href="#">
23 |         <img src="http://placehold.it/435x500" />
24 |     </a>
25 |     <a href="#">
26 |         <img src="http://placehold.it/435x500" />
27 |     </a>
28 |     <p class="post-image-caption">
29 |     	<span class="post-image-caption-left">
30 |     		Expanding on this, you can show two images side-by-side
31 |     	</span>
32 |     	<span class="post-image-caption-right">
33 |     		And even define separate captions for each.
34 |     	</span>
35 |     </p>
36 | </div>
37 | 
38 | The code can be found on Github [here](https://github.com/rowanoulton/travelog-theme).
39 | 
40 | Any questions, get at me on Twitter: [@rowanoulton](https://twitter.com/rowanoulton/)


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | 
 5 | <!-- This loops through the paginated posts -->
 6 | {% for post in paginator.posts %}
 7 |   {% include post.html post=post content=post.content %}
 8 | {% endfor %}
 9 | 
10 | {% if paginator.total_pages > 1 %}
11 | <ul class="pagination">
12 |   <li class="pagination-item">
13 |     <a class="pagination-link pagination-link--non-numeric" {% if paginator.page == 1 %}disabled="disabled"{% endif %} href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">&larr; First page</a>
14 |   </li>
15 |   <li class="pagination-item">
16 |     <a class="pagination-link pagination-link--non-numeric" {% if paginator.previous_page == nil %}disabled="disabled"{% endif %} href="{{ paginator.previous_page_path | prepend: site.baseurl | replace: '//', '/' }}">&larr; Prev</a>
17 |   </li>
18 | 
19 |   <!-- Numbers -->
20 |   {% for page in (1..paginator.total_pages) %}
21 |     <li class="pagination-item">
22 |       {% if page == paginator.page %}
23 |         <a class="pagination-link pagination-link--selected" href="#">{{ page }}</a>
24 |       {% elsif page == 1 %}
25 |         <a class="pagination-link" href="{{ '/index.html' | prepend: site.baseurl | replace: '//', '/' }}">{{ page }}</a>
26 |       {% else %}
27 |         <a class="pagination-link" href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', page }}">{{ page }}</a>
28 |       {% endif %}
29 |     </li>
30 |   {% endfor %}
31 |   <!-- End of numbers -->
32 | 
33 |   <li class="pagination-item">
34 |     <a class="pagination-link pagination-link--non-numeric" {% if paginator.next_page == nil %}disabled="disabled"{% endif %} href="{{ paginator.next_page_path | prepend: site.baseurl | replace: '//', '/' }}">Next &rarr;</a>
35 |   </li>
36 |   <li class="pagination-item">
37 |     <a class="pagination-link pagination-link--non-numeric" {% if paginator.page == paginator.total_pages %}disabled="disabled"{% endif %} href="{{ site.paginate_path | prepend: site.baseurl | replace: '//', '/' | replace: ':num', paginator.total_pages }}">Last page &rarr;</a>
38 |   </li>
39 | </ul>
40 | {% endif %}
41 | 


--------------------------------------------------------------------------------
/_sass/modules/pagination/_rules.scss:
--------------------------------------------------------------------------------
 1 | @import "modules/pagination/variables";
 2 | @mixin travelog-pagination {
 3 |     .pagination {
 4 |         transition-property: margin;
 5 |         transition-duration: 0.3s;
 6 |         transition-timing-function: ease-in-out;
 7 |         text-align: center;
 8 |         margin: 80px auto;
 9 |         display: flex;
10 |         align-items: center;
11 |         justify-content: center;
12 |     }
13 | 
14 |     .pagination-item {
15 |         // To ensure the top margin begins from the outer bounds of the contained pagination link
16 |         line-height: 38px;
17 |     }
18 | 
19 |     .pagination-link {
20 |         transition-property: padding;
21 |         transition-duration: 0.3s;
22 |         transition-timing-function: ease-in-out;
23 |         padding: 15px;
24 |         min-width: 35px;
25 |         border-top: 1px solid $border-colour;
26 |         text-transform: uppercase;
27 |         color: rgba(0, 0, 0, 0.35);
28 | 
29 |         &:hover { 
30 |             border-color: $link-colour-over;
31 |             color: $link-colour-over; 
32 |         }
33 | 
34 |         &[disabled] {
35 |             pointer-events: none;
36 |             color: #eee;
37 |         }
38 |     }
39 | 
40 |     .pagination-link--selected {
41 |         font-weight: bold;
42 |         border-color: $link-colour-over;
43 |         color: $link-colour-over;
44 |     }
45 | 
46 |     @media only screen and (max-width : 630px) {
47 |         .pagination-link {
48 |             padding: 15px 8px;
49 |         }
50 |     }
51 | 
52 |     @media only screen and (max-width : 495px) {
53 |         .pagination {
54 |             margin: 40px auto;
55 |             display: block;
56 |             @include clearfix;
57 |             border-bottom: 1px solid $border-colour;
58 |         }
59 | 
60 |         .pagination-item {
61 |             line-height: normal;
62 | 
63 |             &:first-of-type {
64 |                 a { border-right: 1px solid $border-colour; }
65 |             }
66 | 
67 |             &:last-of-type {
68 |                 a { border-left: 1px solid $border-colour; }
69 |             }
70 |         }
71 | 
72 |         .pagination-link {
73 |             clear: both;
74 |             display: block;
75 |             padding: 15px 8px;
76 | 
77 |             &:hover {
78 |                 background: #eee;
79 |             }
80 |         }
81 | 
82 |         .pagination-link--selected {
83 |             background: #eee;
84 |         }
85 | 
86 |         .pagination-link--non-numeric {
87 |             clear: none;
88 |             width: 50%;
89 |             float: left;
90 |         }
91 |     }
92 | }


--------------------------------------------------------------------------------
/_sass/_layout.scss:
--------------------------------------------------------------------------------
  1 | #ribbon {
  2 |     background-size: cover;
  3 |     width: 100%;
  4 |     height: 10px;
  5 |     position: absolute;
  6 |     top: 0;
  7 |     left: 0;
  8 |     right: 0;
  9 | 
 10 |     // Non-retina device
 11 |     background-image: url($banner);
 12 | 
 13 |     // Retina @2x device
 14 |     @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
 15 |         background-image: url($banner-2x);
 16 |     }
 17 | 
 18 |     // Retina @3x device
 19 |     @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
 20 |         background-image: url($banner-3x);
 21 |     }
 22 | }
 23 | 
 24 | #wrap {
 25 |     margin: 0 auto;
 26 |     width: 885px;
 27 | 
 28 |     // Sticky footer trick, see http://css-tricks.com/snippets/css/sticky-footer/
 29 |     min-height: 100%;
 30 |     margin-bottom: (-1 * $footer-height);
 31 | 
 32 |     &:after {
 33 |       content: "";
 34 |       display: block;
 35 |       height: $footer-height;
 36 |     }
 37 | }
 38 | 
 39 | @media only screen and (max-width : 900px) {
 40 |     #wrap { width: 90%; }
 41 | }
 42 | 
 43 | header {
 44 |     transition-property: margin padding;
 45 |     transition-duration: 0.3s;
 46 |     transition-timing-function: ease-in-out;
 47 |     margin: 0 0 40px;
 48 |     padding-top: 50px; // 40px margin [has to be padding for sticky footer] + 10px for ribbon [positioned absolutely]
 49 |     padding-bottom: 10px;
 50 |     border-bottom: 1px solid $border-colour;
 51 | 
 52 |     a,
 53 |     a:hover {
 54 |         color: $text-colour;
 55 |     }
 56 | }
 57 | 
 58 | @media only screen and (max-width : 480px) {
 59 |     header {
 60 |         padding-top: 30px;
 61 |         margin: 0 0 20px;
 62 |     }
 63 | }
 64 | 
 65 | h1 {
 66 |     font-family: $title-font;
 67 |     font-size: $regular-text-size;
 68 |     font-weight: bold;
 69 |     margin: 0 0 5px;
 70 |     text-transform: uppercase;
 71 |     letter-spacing: 1px;
 72 | }
 73 | 
 74 | h2 {
 75 |     font-family: $subtitle-font;
 76 |     font-size: $regular-text-size;
 77 |     margin: 0;
 78 |     color: $subtitle-colour;
 79 |     font-weight: normal;
 80 | }
 81 | 
 82 | footer {
 83 |     background-size: cover;
 84 |     height: $footer-height;
 85 |     width: 100%;
 86 |     display: table;
 87 | 
 88 |     // Non-retina device
 89 |     background-image: url($banner);
 90 | 
 91 |     // Retina @2x device
 92 |     @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
 93 |         background-image: url($banner-2x);
 94 |     }
 95 | 
 96 |     // Retina @3x device
 97 |     @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
 98 |         background-image: url($banner-3x);
 99 |     }
100 | }
101 | 


--------------------------------------------------------------------------------
/_sass/modules/about/_rules.scss:
--------------------------------------------------------------------------------
  1 | @import "modules/about/variables";
  2 | @mixin travelog-about {
  3 |     .about {
  4 |         width: $about-width;
  5 |         margin: 0 auto;
  6 |         // For iOS Safari support
  7 |         display: -webkit-flex;
  8 |         display: flex;
  9 |         align-items: center;
 10 |         justify-content: center;
 11 |     }
 12 | 
 13 |     .about-wrap {
 14 |         display: table-cell;
 15 |         vertical-align: middle;
 16 |     }
 17 | 
 18 |     .about-avatar {
 19 |         transition-property: margin;
 20 |         transition-duration: 0.3s;
 21 |         transition-timing-function: ease-in-out;
 22 |         border-radius: 100%;
 23 |         overflow: hidden;
 24 |         margin-right: 30px;
 25 |         border: 3px solid #fff;
 26 |     }
 27 | 
 28 |     .about-body {
 29 |         font-family: $title-font;
 30 |         width: $about-body-width;
 31 |         color: $inverse-text-colour;
 32 |     }
 33 | 
 34 |     .about-body-title {
 35 |         font-weight: bold;
 36 |         text-transform: uppercase;
 37 |         padding-bottom: 5px;
 38 |         border-bottom: 1px solid rgba(229, 229, 229, 0.5);
 39 |         margin: 0 0 10px;
 40 |         letter-spacing: 1px;
 41 |     }
 42 | 
 43 |     .about-body-description {
 44 |         font-size: $caption-text-size;
 45 |         letter-spacing: 1px;
 46 |         line-height: $about-body-description-line-height;
 47 |     }
 48 | 
 49 |     .about-body-link {
 50 |         color: $inverse-text-colour;
 51 |         font-size: $caption-text-size;
 52 |         font-weight: bold;
 53 |         margin-bottom: 7px;
 54 |         display: inline-block;
 55 |         background-repeat: no-repeat;
 56 |         background-position: center left;
 57 |         background-size: 15px;
 58 |         background-color: transparent;
 59 |         padding-left: 25px;
 60 | 
 61 |         &:hover {
 62 |             color: $link-colour-over;
 63 |         }
 64 | 
 65 |         img { 
 66 |             margin-right: 5px; 
 67 |             display: inline-block;
 68 |             vertical-align: middle;
 69 |         }
 70 |     }
 71 | 
 72 |     .about-body-link--gram {
 73 |         // Non-retina device
 74 |         background-image: url($icon-instagram);
 75 | 
 76 |         // Retina @2x device
 77 |         @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
 78 |             background-image: url($icon-instagram-2x);
 79 |         }
 80 | 
 81 |         // Retina @3x device
 82 |         @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
 83 |             background-image: url($icon-instagram-3x);
 84 |         }
 85 |     }
 86 | 
 87 |     .about-body-link--bird {
 88 |         // Non-retina device
 89 |         background-image: url($icon-twitter);
 90 | 
 91 |         // Retina @2x device
 92 |         @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
 93 |             background-image: url($icon-twitter-2x);
 94 |         }
 95 | 
 96 |         // Retina @3x device
 97 |         @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
 98 |             background-image: url($icon-twitter-3x);
 99 |         }
100 |     }
101 | 
102 |     @media only screen and (max-width : 500px) {
103 |         .about-avatar { margin-right: 20px; }
104 |     }
105 | 
106 |     @media only screen and (max-width : ($about-width + 10px)) {
107 |         .about-avatar,
108 |         .about-body {
109 |             float: none;
110 |             text-align: center;
111 |         }
112 | 
113 |         .about-avatar {
114 |             margin: 0;
115 |             width: $about-avatar-shrunk-width;
116 |             height: $about-avatar-shrunk-height;
117 |         }
118 | 
119 |         .about-body {
120 |             width: 80%;
121 |             margin: 10px auto 0;
122 |         }
123 | 
124 |         .about {
125 |             display: block;
126 |             margin: 0;
127 |             text-align: center;
128 |             width: 100%;
129 |         }
130 |     }
131 | }
132 | 


--------------------------------------------------------------------------------
/_sass/modules/post/_rules.scss:
--------------------------------------------------------------------------------
  1 | @import "modules/post/variables";
  2 | @mixin travelog-post {
  3 |     .post {
  4 |         margin-bottom: 40px;
  5 |     }
  6 | 
  7 |     .post-body {
  8 |         p { line-height: 18px; }
  9 |     }
 10 | 
 11 |     .post-header {
 12 |         padding-left: 35px;
 13 |         min-height: $post-header-height;
 14 |         background-repeat: no-repeat;
 15 |         background-position: left center;
 16 |         background-color: transparent;
 17 |         margin-bottom: 15px;
 18 |     }
 19 | 
 20 |     .post-header--dw,
 21 |     .post-header--ar {
 22 |         background-size: 24px;
 23 |     }
 24 | 
 25 |     .post-header--dw {
 26 |         // Non-retina device
 27 |         background-image: url($watch-1);
 28 | 
 29 |         // Retina @2x device
 30 |         @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
 31 |             background-image: url($watch-1-2x);
 32 |             background-size: 25px;
 33 |         }
 34 | 
 35 |         // Retina @3x device
 36 |         @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
 37 |             background-image: url($watch-1-3x);
 38 |             background-size: 25px;
 39 |         }
 40 |     }
 41 | 
 42 |     .post-header--ar {
 43 |          // Non-retina device
 44 |         background-image: url($watch-2);
 45 | 
 46 |         // Retina @2x device
 47 |         @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
 48 |             background-image: url($watch-2-2x);
 49 |         }
 50 | 
 51 |         // Retina @3x device
 52 |         @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
 53 |             background-image: url($watch-2-3x);
 54 |         }
 55 |     }
 56 | 
 57 |     .post-header-title {
 58 |         margin-bottom: 5px;
 59 |         font-family: $title-font;
 60 |         font-size: 18px;
 61 |         font-weight: 500;
 62 |         text-transform: uppercase;
 63 |         letter-spacing: 1px;
 64 | 
 65 |         // Force default text colour [as post-header is wrapped by a link]
 66 |         color: $text-colour;
 67 | 
 68 |         // However let the normal hover colour apply
 69 |         &:hover { color: $link-colour-over; }
 70 |     }
 71 | 
 72 |     .post-header-date {
 73 |         font-family: $caption-font;
 74 |         font-style: italic;
 75 |         font-weight: normal;
 76 |         color: #444;
 77 |         letter-spacing: 1px;
 78 |     }
 79 | 
 80 |     .post-image {
 81 |         font-size: 0;
 82 |         margin-bottom: 15px;
 83 | 
 84 |         img,
 85 |         video{
 86 |             width: 100%;
 87 |             max-width: 100%;
 88 |         }
 89 |     }
 90 | 
 91 |     .post-image--split {
 92 |         margin-right: -15px;
 93 | 
 94 |         img {
 95 |             width: calc(50% - 7.5px);
 96 |             max-width: 435px;
 97 |             margin-right: 15px;
 98 |         }
 99 | 
100 |         .post-image-caption {
101 |             margin-right: 15px;
102 |         }
103 |     }
104 | 
105 |     @media only screen and (max-width : 900px) {
106 |         .post-image--split img {
107 |             width: calc(50% - 15px);
108 |             max-width: none;
109 |         }
110 |     }
111 | 
112 |     @media only screen and (max-width : 500px) {
113 |         .post-image--split {
114 |             margin-right: 0;
115 | 
116 |             img {
117 |                 margin-right: 0;
118 |                 width: 100%;
119 |                 display: block;
120 |                 margin-bottom: 15px;
121 |             }
122 | 
123 |             .post-image-caption {
124 |                 // Offset margin of full-width split images
125 |                 margin-top: -10px;
126 |                 margin-right: 0;
127 |             }
128 |         }
129 |     }
130 | 
131 |     .post-image-caption {
132 |         line-height: 18px;
133 |         vertical-align: middle;
134 |         font-size: 14px;
135 |         font-family: $caption-font;
136 |         font-style: italic;
137 |         color: $caption-colour;
138 |         background: #f6f6f6;
139 |         padding: 15px 20px 13px;
140 |         text-align: center;
141 |         margin-top: 5px;
142 | 
143 |         // Paragraphs within the caption should have no margin
144 |         p { margin: 0; }
145 | 
146 |         // Paragraphs following other paragraphs in the caption should have a top margin
147 |         p + p { margin-top: 15px; }
148 |     }
149 | 
150 |     .post-image-caption-left,
151 |     .post-image-caption-right {
152 |         display: inline-block;
153 |         width: calc(50% - 1.5px);
154 |     }
155 | 
156 |     .post-image-caption-left {
157 |         text-align: left;
158 |         padding-right: 10px;
159 |     }
160 | 
161 |     .post-image-caption-right {
162 |         text-align: right;
163 |         padding-left: 10px;
164 |     }
165 | 
166 |     @media only screen and (max-width : 500px) {
167 |         .post-image-caption-left,
168 |         .post-image-caption-right {
169 |             text-align: left;
170 |             display: block;
171 |             width: 100%;
172 |             padding: 0;
173 |         }
174 | 
175 |         .post-image-caption-left {
176 |             margin-bottom: 15px;
177 | 
178 |             &:before {
179 |                 content: 'Left';
180 |                 text-transform: uppercase;
181 |                 font-weight: bold;
182 |                 font-style: normal;
183 |                 display: block;
184 |             }
185 |         }
186 | 
187 |         .post-image-caption-right:before {
188 |             content: 'Right';
189 |             text-transform: uppercase;
190 |             font-weight: bold;
191 |             font-style: normal;
192 |             display: block;
193 |         }
194 |     }
195 | 
196 |     .post-footer {
197 |         margin-top: 35px;
198 |         padding-bottom: 15px;
199 |         border-bottom: 1px solid $border-colour;
200 | 
201 |         // Both children are floated, so use a clearfix on the parent
202 |         @include clearfix;
203 |     }
204 | 
205 |     .post-footer-tags,
206 |     .post-footer-location {
207 |         max-width: 50%;
208 |     }
209 | 
210 |     .post-footer-tags {
211 |         // In order to play nicely with the location element floated to the right of the footer
212 |         float: left;
213 |     }
214 | 
215 |     .post-footer-tag {
216 |         font-family: $title-font;
217 |         font-weight: bold;
218 |         display: inline;
219 |         text-transform: uppercase;
220 |         font-size: $caption-text-size;
221 |         margin-right: 5px;
222 |         letter-spacing: 1px;
223 |     }
224 | 
225 |     .post-footer-location {
226 |         font-family: $title-font;
227 |         font-weight: bold;
228 |         font-size: $caption-text-size;
229 |         color: $caption-colour;
230 |         float: right;
231 |         min-height: $post-footer-location-height;
232 |         line-height: $post-footer-location-line-height;
233 |         padding-right: 51px;
234 |         letter-spacing: 1px;
235 |         background-repeat: no-repeat;
236 |         background-position: right center;
237 |         background-color: transparent;
238 |         background-size: 44px;
239 | 
240 |         // Non-retina devices
241 |         background-image: url($icon-location);
242 | 
243 |         // Retina @2x device
244 |         @media only screen and (-webkit-min-device-pixel-ratio: 1.2), only screen and (min--moz-device-pixel-ratio: 1.2), only screen and (-o-min-device-pixel-ratio: 5/4), only screen and (min-device-pixel-ratio: 1.2), only screen and (min-resolution: 120dpi), only screen and (min-resolution: 1.2dppx) {
245 |             background-image: url($icon-location-2x);
246 |         }
247 | 
248 |         // Retina @3x device
249 |         @media only screen and (-webkit-min-device-pixel-ratio: 3), only screen and (min--moz-device-pixel-ratio: 3), only screen and (-o-min-device-pixel-ratio: 3/1), only screen and (min-device-pixel-ratio: 3), only screen and (min-resolution: 288dpi), only screen and (min-resolution: 3dppx) {
250 |             background-image: url($icon-location-3x);
251 |         }
252 | 
253 |         &:hover {
254 |             color: $link-colour;
255 |         }
256 |     }
257 | }
258 | 


--------------------------------------------------------------------------------
/_sass/vendor/_normalize.scss:
--------------------------------------------------------------------------------
  1 | /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
  2 | 
  3 | /**
  4 |  * 1. Set default font family to sans-serif.
  5 |  * 2. Prevent iOS text size adjust after orientation change, without disabling
  6 |  *    user zoom.
  7 |  */
  8 | 
  9 | html {
 10 |   font-family: sans-serif; /* 1 */
 11 |   -ms-text-size-adjust: 100%; /* 2 */
 12 |   -webkit-text-size-adjust: 100%; /* 2 */
 13 | }
 14 | 
 15 | /**
 16 |  * Remove default margin.
 17 |  */
 18 | 
 19 | body {
 20 |   margin: 0;
 21 | }
 22 | 
 23 | /* HTML5 display definitions
 24 |    ========================================================================== */
 25 | 
 26 | /**
 27 |  * Correct `block` display not defined for any HTML5 element in IE 8/9.
 28 |  * Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
 29 |  * Correct `block` display not defined for `main` in IE 11.
 30 |  */
 31 | 
 32 | article,
 33 | aside,
 34 | details,
 35 | figcaption,
 36 | figure,
 37 | footer,
 38 | header,
 39 | hgroup,
 40 | main,
 41 | nav,
 42 | section,
 43 | summary {
 44 |   display: block;
 45 | }
 46 | 
 47 | /**
 48 |  * 1. Correct `inline-block` display not defined in IE 8/9.
 49 |  * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 50 |  */
 51 | 
 52 | audio,
 53 | canvas,
 54 | progress,
 55 | video {
 56 |   display: inline-block; /* 1 */
 57 |   vertical-align: baseline; /* 2 */
 58 | }
 59 | 
 60 | /**
 61 |  * Prevent modern browsers from displaying `audio` without controls.
 62 |  * Remove excess height in iOS 5 devices.
 63 |  */
 64 | 
 65 | audio:not([controls]) {
 66 |   display: none;
 67 |   height: 0;
 68 | }
 69 | 
 70 | /**
 71 |  * Address `[hidden]` styling not present in IE 8/9/10.
 72 |  * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 73 |  */
 74 | 
 75 | [hidden],
 76 | template {
 77 |   display: none;
 78 | }
 79 | 
 80 | /* Links
 81 |    ========================================================================== */
 82 | 
 83 | /**
 84 |  * Remove the gray background color from active links in IE 10.
 85 |  */
 86 | 
 87 | a {
 88 |   background: transparent;
 89 | }
 90 | 
 91 | /**
 92 |  * Improve readability when focused and also mouse hovered in all browsers.
 93 |  */
 94 | 
 95 | a:active,
 96 | a:hover {
 97 |   outline: 0;
 98 | }
 99 | 
100 | /* Text-level semantics
101 |    ========================================================================== */
102 | 
103 | /**
104 |  * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105 |  */
106 | 
107 | abbr[title] {
108 |   border-bottom: 1px dotted;
109 | }
110 | 
111 | /**
112 |  * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113 |  */
114 | 
115 | b,
116 | strong {
117 |   font-weight: bold;
118 | }
119 | 
120 | /**
121 |  * Address styling not present in Safari and Chrome.
122 |  */
123 | 
124 | dfn {
125 |   font-style: italic;
126 | }
127 | 
128 | /**
129 |  * Address variable `h1` font-size and margin within `section` and `article`
130 |  * contexts in Firefox 4+, Safari, and Chrome.
131 |  */
132 | 
133 | h1 {
134 |   font-size: 2em;
135 |   margin: 0.67em 0;
136 | }
137 | 
138 | /**
139 |  * Address styling not present in IE 8/9.
140 |  */
141 | 
142 | mark {
143 |   background: #ff0;
144 |   color: #000;
145 | }
146 | 
147 | /**
148 |  * Address inconsistent and variable font size in all browsers.
149 |  */
150 | 
151 | small {
152 |   font-size: 80%;
153 | }
154 | 
155 | /**
156 |  * Prevent `sub` and `sup` affecting `line-height` in all browsers.
157 |  */
158 | 
159 | sub,
160 | sup {
161 |   font-size: 75%;
162 |   line-height: 0;
163 |   position: relative;
164 |   vertical-align: baseline;
165 | }
166 | 
167 | sup {
168 |   top: -0.5em;
169 | }
170 | 
171 | sub {
172 |   bottom: -0.25em;
173 | }
174 | 
175 | /* Embedded content
176 |    ========================================================================== */
177 | 
178 | /**
179 |  * Remove border when inside `a` element in IE 8/9/10.
180 |  */
181 | 
182 | img {
183 |   border: 0;
184 | }
185 | 
186 | /**
187 |  * Correct overflow not hidden in IE 9/10/11.
188 |  */
189 | 
190 | svg:not(:root) {
191 |   overflow: hidden;
192 | }
193 | 
194 | /* Grouping content
195 |    ========================================================================== */
196 | 
197 | /**
198 |  * Address margin not present in IE 8/9 and Safari.
199 |  */
200 | 
201 | figure {
202 |   margin: 1em 40px;
203 | }
204 | 
205 | /**
206 |  * Address differences between Firefox and other browsers.
207 |  */
208 | 
209 | hr {
210 |   -moz-box-sizing: content-box;
211 |   box-sizing: content-box;
212 |   height: 0;
213 | }
214 | 
215 | /**
216 |  * Contain overflow in all browsers.
217 |  */
218 | 
219 | pre {
220 |   overflow: auto;
221 | }
222 | 
223 | /**
224 |  * Address odd `em`-unit font size rendering in all browsers.
225 |  */
226 | 
227 | code,
228 | kbd,
229 | pre,
230 | samp {
231 |   font-family: monospace, monospace;
232 |   font-size: 1em;
233 | }
234 | 
235 | /* Forms
236 |    ========================================================================== */
237 | 
238 | /**
239 |  * Known limitation: by default, Chrome and Safari on OS X allow very limited
240 |  * styling of `select`, unless a `border` property is set.
241 |  */
242 | 
243 | /**
244 |  * 1. Correct color not being inherited.
245 |  *    Known issue: affects color of disabled elements.
246 |  * 2. Correct font properties not being inherited.
247 |  * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248 |  */
249 | 
250 | button,
251 | input,
252 | optgroup,
253 | select,
254 | textarea {
255 |   color: inherit; /* 1 */
256 |   font: inherit; /* 2 */
257 |   margin: 0; /* 3 */
258 | }
259 | 
260 | /**
261 |  * Address `overflow` set to `hidden` in IE 8/9/10/11.
262 |  */
263 | 
264 | button {
265 |   overflow: visible;
266 | }
267 | 
268 | /**
269 |  * Address inconsistent `text-transform` inheritance for `button` and `select`.
270 |  * All other form control elements do not inherit `text-transform` values.
271 |  * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272 |  * Correct `select` style inheritance in Firefox.
273 |  */
274 | 
275 | button,
276 | select {
277 |   text-transform: none;
278 | }
279 | 
280 | /**
281 |  * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282 |  *    and `video` controls.
283 |  * 2. Correct inability to style clickable `input` types in iOS.
284 |  * 3. Improve usability and consistency of cursor style between image-type
285 |  *    `input` and others.
286 |  */
287 | 
288 | button,
289 | html input[type="button"], /* 1 */
290 | input[type="reset"],
291 | input[type="submit"] {
292 |   -webkit-appearance: button; /* 2 */
293 |   cursor: pointer; /* 3 */
294 | }
295 | 
296 | /**
297 |  * Re-set default cursor for disabled elements.
298 |  */
299 | 
300 | button[disabled],
301 | html input[disabled] {
302 |   cursor: default;
303 | }
304 | 
305 | /**
306 |  * Remove inner padding and border in Firefox 4+.
307 |  */
308 | 
309 | button::-moz-focus-inner,
310 | input::-moz-focus-inner {
311 |   border: 0;
312 |   padding: 0;
313 | }
314 | 
315 | /**
316 |  * Address Firefox 4+ setting `line-height` on `input` using `!important` in
317 |  * the UA stylesheet.
318 |  */
319 | 
320 | input {
321 |   line-height: normal;
322 | }
323 | 
324 | /**
325 |  * It's recommended that you don't attempt to style these elements.
326 |  * Firefox's implementation doesn't respect box-sizing, padding, or width.
327 |  *
328 |  * 1. Address box sizing set to `content-box` in IE 8/9/10.
329 |  * 2. Remove excess padding in IE 8/9/10.
330 |  */
331 | 
332 | input[type="checkbox"],
333 | input[type="radio"] {
334 |   box-sizing: border-box; /* 1 */
335 |   padding: 0; /* 2 */
336 | }
337 | 
338 | /**
339 |  * Fix the cursor style for Chrome's increment/decrement buttons. For certain
340 |  * `font-size` values of the `input`, it causes the cursor style of the
341 |  * decrement button to change from `default` to `text`.
342 |  */
343 | 
344 | input[type="number"]::-webkit-inner-spin-button,
345 | input[type="number"]::-webkit-outer-spin-button {
346 |   height: auto;
347 | }
348 | 
349 | /**
350 |  * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351 |  * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352 |  *    (include `-moz` to future-proof).
353 |  */
354 | 
355 | input[type="search"] {
356 |   -webkit-appearance: textfield; /* 1 */
357 |   -moz-box-sizing: content-box;
358 |   -webkit-box-sizing: content-box; /* 2 */
359 |   box-sizing: content-box;
360 | }
361 | 
362 | /**
363 |  * Remove inner padding and search cancel button in Safari and Chrome on OS X.
364 |  * Safari (but not Chrome) clips the cancel button when the search input has
365 |  * padding (and `textfield` appearance).
366 |  */
367 | 
368 | input[type="search"]::-webkit-search-cancel-button,
369 | input[type="search"]::-webkit-search-decoration {
370 |   -webkit-appearance: none;
371 | }
372 | 
373 | /**
374 |  * Define consistent border, margin, and padding.
375 |  */
376 | 
377 | fieldset {
378 |   border: 1px solid #c0c0c0;
379 |   margin: 0 2px;
380 |   padding: 0.35em 0.625em 0.75em;
381 | }
382 | 
383 | /**
384 |  * 1. Correct `color` not being inherited in IE 8/9/10/11.
385 |  * 2. Remove padding so people aren't caught out if they zero out fieldsets.
386 |  */
387 | 
388 | legend {
389 |   border: 0; /* 1 */
390 |   padding: 0; /* 2 */
391 | }
392 | 
393 | /**
394 |  * Remove default vertical scrollbar in IE 8/9/10/11.
395 |  */
396 | 
397 | textarea {
398 |   overflow: auto;
399 | }
400 | 
401 | /**
402 |  * Don't inherit the `font-weight` (applied by a rule above).
403 |  * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404 |  */
405 | 
406 | optgroup {
407 |   font-weight: bold;
408 | }
409 | 
410 | /* Tables
411 |    ========================================================================== */
412 | 
413 | /**
414 |  * Remove most spacing between table cells.
415 |  */
416 | 
417 | table {
418 |   border-collapse: collapse;
419 |   border-spacing: 0;
420 | }
421 | 
422 | td,
423 | th {
424 |   padding: 0;
425 | }
426 | 
427 | 
428 | /* Custom
429 |    ========================================================================== */
430 | 
431 | /**
432 |  * Remove margins from headers and lists
433 |  */
434 | 
435 | h1,
436 | h2,
437 | h3,
438 | h4,
439 | ul {
440 |   margin: 0;
441 | }
442 | 
443 | /**
444 |  * Remove padding and list style from lists
445 |  */
446 | ul {
447 |   padding: 0;
448 |   list-style: none;
449 | }


--------------------------------------------------------------------------------