├── CNAME
├── public
    ├── favicon.ico
    ├── apple-touch-icon-precomposed.png
    └── css
    │   ├── syntax.css
    │   ├── poole.css
    │   └── lanyon.css
├── _layouts
    ├── page.html
    ├── post.html
    └── default.html
├── .editorconfig
├── 404.html
├── .gitignore
├── _config.yml
├── _posts
    ├── 2013-12-31-whats-jekyll.md
    ├── 2014-01-02-introducing-lanyon.md
    └── 2014-01-01-example-content.md
├── atom.xml
├── LICENSE.md
├── index.html
├── sponsor.md
├── _includes
    ├── head.html
    └── sidebar.html
├── about.md
└── README.md


/CNAME:
--------------------------------------------------------------------------------
1 | jonschlinkert.dev
2 | 


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonschlinkert/blog/HEAD/public/favicon.ico


--------------------------------------------------------------------------------
/public/apple-touch-icon-precomposed.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/jonschlinkert/blog/HEAD/public/apple-touch-icon-precomposed.png


--------------------------------------------------------------------------------
/_layouts/page.html:
--------------------------------------------------------------------------------
1 | ---
2 | layout: default
3 | ---
4 | 
5 | <div class="page">
6 |   <h1 class="page-title">{{ page.title }}</h1>
7 |   {{ content }}
8 | </div>
9 | 


--------------------------------------------------------------------------------
/.editorconfig:
--------------------------------------------------------------------------------
 1 | root = true
 2 | 
 3 | [*]
 4 | charset = utf-8
 5 | end_of_line = lf
 6 | indent_size = 2
 7 | indent_style = space
 8 | insert_final_newline = true
 9 | trim_trailing_whitespace = true
10 | 
11 | [*.py]
12 | indent_style = space
13 | indent_size = 4
14 | 
15 | [CNAME]
16 | insert_final_newline = false
17 | 


--------------------------------------------------------------------------------
/404.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: "404: Page not found"
 4 | permalink: 404.html
 5 | ---
 6 | 
 7 | <div class="page">
 8 |   <h1 class="page-title">404: Page not found</h1>
 9 |   <p class="lead">Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. <a href="{{ site.baseurl }}/">Head back home</a> to try finding it again.</p>
10 | </div>
11 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # Ignore docs files
 2 | _gh_pages
 3 | _site
 4 | .ruby-version
 5 | 
 6 | # Numerous always-ignore extensions
 7 | *.diff
 8 | *.err
 9 | *.orig
10 | *.log
11 | *.rej
12 | *.swo
13 | *.swp
14 | *.zip
15 | *.vi
16 | *~
17 | 
18 | # OS or Editor folders
19 | .DS_Store
20 | ._*
21 | Thumbs.db
22 | .cache
23 | .project
24 | .settings
25 | .tmproj
26 | *.esproj
27 | nbproject
28 | *.sublime-project
29 | *.sublime-workspace
30 | .idea
31 | 
32 | # Komodo
33 | *.komodoproject
34 | .komodotools
35 | 
36 | # grunt-html-validation
37 | validation-status.json
38 | validation-report.json
39 | 
40 | # Folders to ignore
41 | node_modules
42 | bower_components
43 | 


--------------------------------------------------------------------------------
/_layouts/post.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | ---
 4 | 
 5 | <div class="post">
 6 |   <h1 class="post-title">{{ page.title }}</h1>
 7 |   <span class="post-date">{{ page.date | date_to_string }}</span>
 8 |   {{ content }}
 9 | </div>
10 | 
11 | <div class="related">
12 |   <h2>Related Posts</h2>
13 |   <ul class="related-posts">
14 |     {% for post in site.related_posts limit:3 %}
15 |       <li>
16 |         <h3>
17 |           <a href="{{ site.baseurl }}{{ post.url }}">
18 |             {{ post.title }}
19 |             <small>{{ post.date | date_to_string }}</small>
20 |           </a>
21 |         </h3>
22 |       </li>
23 |     {% endfor %}
24 |   </ul>
25 | </div>
26 | 


--------------------------------------------------------------------------------
/_config.yml:
--------------------------------------------------------------------------------
 1 | # Permalinks
 2 | #
 3 | # Use of `relative_permalinks` ensures post links from the index work properly.
 4 | permalink:           pretty
 5 | 
 6 | # Setup
 7 | title:               Blog
 8 | tagline:             Jon Schlinkert's Blog
 9 | description:         'Blog. Made by <a href="https://github.com/jonschlinkert" target="_blank">@jonschlinkert</a>.'
10 | url:                 https://jonschlinkert.dev
11 | baseurl:             /
12 | paginate:            5
13 | 
14 | # About/contact
15 | author:
16 |   name:              Jon Schlinkert
17 |   url:               https://github.com/jonschlinkert
18 |   email:             jon.schlinkert@sellside.com
19 | 
20 | # Custom vars
21 | version:             0.1.0
22 | 


--------------------------------------------------------------------------------
/_posts/2013-12-31-whats-jekyll.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post
 3 | title: What's Jekyll?
 4 | ---
 5 | 
 6 | [Jekyll](http://jekyllrb.com) is a static site generator, an open-source tool for creating simple yet powerful websites of all shapes and sizes. From [the project's readme](https://github.com/mojombo/jekyll/blob/master/README.markdown):
 7 | 
 8 |   > Jekyll is a simple, blog aware, static site generator. It takes a template directory [...] and spits out a complete, static website suitable for serving with Apache or your favorite web server. This is also the engine behind GitHub Pages, which you can use to host your project’s page or blog right here from GitHub.
 9 | 
10 | It's an immensely useful tool and one we encourage you to use here with Lanyon.
11 | 
12 | Find out more by [visiting the project on GitHub](https://github.com/mojombo/jekyll).
13 | 


--------------------------------------------------------------------------------
/atom.xml:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: null
 3 | ---
 4 | 
 5 | <?xml version="1.0" encoding="utf-8"?>
 6 | <feed xmlns="http://www.w3.org/2005/Atom">
 7 | 
 8 |  <title>{{ site.title }}</title>
 9 |  <link href="{{ site.url }}{{ site.baseurl }}/atom.xml" rel="self"/>
10 |  <link href="{{ site.url }}{{ site.baseurl }}/"/>
11 |  <updated>{{ site.time | date_to_xmlschema }}</updated>
12 |  <id>{{ site.url }}</id>
13 |  <author>
14 |    <name>{{ site.author.name }}</name>
15 |    <email>{{ site.author.email }}</email>
16 |  </author>
17 | 
18 |  {% for post in site.posts %}
19 |  <entry>
20 |    <title>{{ post.title }}</title>
21 |    <link href="{{ site.url }}{{ post.url }}"/>
22 |    <updated>{{ post.date | date_to_xmlschema }}</updated>
23 |    <id>{{ site.url }}{{ site.baseurl }}{{ post.id }}</id>
24 |    <content type="html">{{ post.content | xml_escape }}</content>
25 |  </entry>
26 |  {% endfor %}
27 | 
28 | </feed>
29 | 


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


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: default
 3 | title: Home
 4 | ---
 5 | 
 6 | <div class="posts">
 7 |   {% for post in paginator.posts %}
 8 |   <div class="post">
 9 |     <h1 class="post-title">
10 |       <a href="{{ site.baseurl }}/{{ post.url }}">
11 |         {{ post.title }}
12 |       </a>
13 |     </h1>
14 | 
15 |     <span class="post-date">{{ post.date | date_to_string }}</span>
16 | 
17 |     {{ post.content }}
18 |   </div>
19 |   {% endfor %}
20 | </div>
21 | 
22 | <div class="pagination">
23 |   {% if paginator.next_page %}
24 |     <a class="pagination-item older" href="{{ site.baseurl }}/page{{paginator.next_page}}">Older</a>
25 |   {% else %}
26 |     <span class="pagination-item older">Older</span>
27 |   {% endif %}
28 |   {% if paginator.previous_page %}
29 |     {% if paginator.page == 2 %}
30 |       <a class="pagination-item newer" href="{{ site.baseurl }}/">Newer</a>
31 |     {% else %}
32 |       <a class="pagination-item newer" href="{{ site.baseurl }}/page{{paginator.previous_page}}">Newer</a>
33 |     {% endif %}
34 |   {% else %}
35 |     <span class="pagination-item newer">Newer</span>
36 |   {% endif %}
37 | </div>
38 | 


--------------------------------------------------------------------------------
/sponsor.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: page
 3 | title: Sponsor
 4 | ---
 5 | 
 6 | **Hi, I'm Jon! I'm a full-time open source software developer and single dad.**
 7 | 
 8 | Several years ago I switched careers from sales, marketing and consulting to learn how to program, with the goal of making the world a better place through code. Whether that means giving people access to information, the tools and technology to level the playing field with big corporations, or empowering people in impoverished regions to participate in the world economy.
 9 | 
10 | To date, I've created more than 1,000 open source projects in an effort to reach my goal. Open source software takes a lot of time to create and maintain. You can help me to achieve my goals of changing the world through code, help me create better developer experiences, or just say thank you by [sponsoring](https://github.com/sponsors/jonschlinkert) me on GitHub, or via my [paypal.me page](https://paypal.me/jonathanschlinkert?locale.x=en_US).
11 | 
12 | Any and all contributions are greatly appreciated!
13 | 
14 | <hr>
15 | 
16 | You can find me here:
17 | 
18 | [GitHub](https://github.com/jonschlinkert) • [LinkedIn](https://linkedin.com/in/jonshlinkert) • [Twitter](https://twitter.com/jonschlinkert)
19 | 


--------------------------------------------------------------------------------
/_includes/head.html:
--------------------------------------------------------------------------------
 1 | <head>
 2 |   <link href="http://gmpg.org/xfn/11" rel="profile">
 3 |   <meta http-equiv="X-UA-Compatible" content="IE=edge">
 4 |   <meta http-equiv="content-type" content="text/html; charset=utf-8">
 5 | 
 6 |   <!-- Enable responsiveness on mobile devices-->
 7 |   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
 8 | 
 9 |   <title>
10 |     {% if page.title == "Home" %}
11 |       {{ site.title }} &middot; {{ site.tagline }}
12 |     {% else %}
13 |       {{ page.title }} &middot; {{ site.title }}
14 |     {% endif %}
15 |   </title>
16 | 
17 |   <!-- CSS -->
18 |   <link rel="stylesheet" href="{{ site.baseurl }}/public/css/poole.css">
19 |   <link rel="stylesheet" href="{{ site.baseurl }}/public/css/syntax.css">
20 |   <link rel="stylesheet" href="{{ site.baseurl }}/public/css/lanyon.css">
21 |   <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=PT+Serif:400,400italic,700%7CPT+Sans:400">
22 | 
23 |   <!-- Icons -->
24 |   <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/public/apple-touch-icon-precomposed.png">
25 |   <link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">
26 | 
27 |   <!-- RSS -->
28 |   <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">
29 | </head>
30 | 


--------------------------------------------------------------------------------
/about.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: page
 3 | title: About
 4 | ---
 5 | 
 6 | <p class="message">
 7 |   Hey there! This page is included as an example. Feel free to customize it for your own use upon downloading. Carry on!
 8 | </p>
 9 | 
10 | In the novel, *The Strange Case of Dr. Jeykll and Mr. Hyde*, Mr. Poole is Dr. Jekyll's virtuous and loyal butler. Similarly, Poole is an upstanding and effective butler that helps you build Jekyll themes. It's made by [@mdo](https://twitter.com/mdo).
11 | 
12 | There are currently two themes built on Poole:
13 | 
14 | * [Hyde](http://hyde.getpoole.com)
15 | * [Lanyon](http://lanyon.getpoole.com)
16 | 
17 | Learn more and contribute on [GitHub](https://github.com/poole).
18 | 
19 | ## Setup
20 | 
21 | Some fun facts about the setup of this project include:
22 | 
23 | * Built for [Jekyll](http://jekyllrb.com)
24 | * Developed on GitHub and hosted for free on [GitHub Pages](https://pages.github.com)
25 | * Coded with [Sublime Text 2](http://sublimetext.com), an amazing code editor
26 | * Designed and developed while listening to music like [Blood Bros Trilogy](https://soundcloud.com/maddecent/sets/blood-bros-series)
27 | 
28 | Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/poole/issues/new) or [ask me on Twitter](https://twitter.com/mdo).
29 | 
30 | Thanks for reading!
31 | 


--------------------------------------------------------------------------------
/_layouts/default.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en-us">
 3 | 
 4 |   {% include head.html %}
 5 | 
 6 |   <body>
 7 | 
 8 |     {% include sidebar.html %}
 9 | 
10 |     <!-- Wrap is the content to shift when toggling the sidebar. We wrap the
11 |          content to avoid any CSS collisions with our real content. -->
12 |     <div class="wrap">
13 |       <div class="masthead">
14 |         <div class="container">
15 |           <h3 class="masthead-title">
16 |             <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
17 |             <small>{{ site.tagline }}</small>
18 |           </h3>
19 |         </div>
20 |       </div>
21 | 
22 |       <div class="container content">
23 |         {{ content }}
24 |       </div>
25 |     </div>
26 | 
27 |     <label for="sidebar-checkbox" class="sidebar-toggle"></label>
28 | 
29 |     <script>
30 |       (function(document) {
31 |         var toggle = document.querySelector('.sidebar-toggle');
32 |         var sidebar = document.querySelector('#sidebar');
33 |         var checkbox = document.querySelector('#sidebar-checkbox');
34 | 
35 |         document.addEventListener('click', function(e) {
36 |           var target = e.target;
37 | 
38 |           if(!checkbox.checked ||
39 |              sidebar.contains(target) ||
40 |              (target === checkbox || target === toggle)) return;
41 | 
42 |           checkbox.checked = false;
43 |         }, false);
44 |       })(document);
45 |     </script>
46 |   </body>
47 | </html>
48 | 


--------------------------------------------------------------------------------
/_includes/sidebar.html:
--------------------------------------------------------------------------------
 1 | <!-- Target for toggling the sidebar `.sidebar-checkbox` is for regular
 2 |      styles, `#sidebar-checkbox` for behavior. -->
 3 | <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox">
 4 | 
 5 | <!-- Toggleable sidebar -->
 6 | <div class="sidebar" id="sidebar">
 7 |   <div class="sidebar-item">
 8 |     <p>{{ site.description }}</p>
 9 |   </div>
10 | 
11 |   <nav class="sidebar-nav">
12 |     <a class="sidebar-nav-item{% if page.url == site.baseurl %} active{% endif %}" href="{{ site.baseurl }}/">Home</a>
13 | 
14 |     {% comment %}
15 |       The code below dynamically generates a sidebar nav of pages with
16 |       `layout: page` in the front-matter. See readme for usage.
17 |     {% endcomment %}
18 | 
19 |     {% assign pages_list = site.pages | sort:"url" %}
20 |     {% for node in pages_list %}
21 |       {% if node.title != null %}
22 |         {% if node.layout == "page" %}
23 |           <a class="sidebar-nav-item{% if page.url == node.url %} active{% endif %}" href="{{ node.url }}">{{ node.title }}</a>
24 |         {% endif %}
25 |       {% endif %}
26 |     {% endfor %}
27 | 
28 |     <a class="sidebar-nav-item" href="{{ site.github.repo }}/archive/v{{ site.version }}.zip">Download</a>
29 |     <a class="sidebar-nav-item" href="{{ site.github.repo }}">GitHub project</a>
30 |     <span class="sidebar-nav-item">Currently v{{ site.version }}</span>
31 |   </nav>
32 | 
33 |   <div class="sidebar-item">
34 |     <p>
35 |       &copy; {{ site.time | date: '%Y' }}. All rights reserved.
36 |     </p>
37 |   </div>
38 | </div>
39 | 


--------------------------------------------------------------------------------
/_posts/2014-01-02-introducing-lanyon.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | layout: post
 3 | title: Introducing Lanyon
 4 | ---
 5 | 
 6 | Lanyon is an unassuming [Jekyll](http://jekyllrb.com) theme that places content first by tucking away navigation in a hidden drawer. It's based on [Poole](http://getpoole.com), the Jekyll butler.
 7 | 
 8 | ### Built on Poole
 9 | 
10 | Poole is the Jekyll Butler, serving as an upstanding and effective foundation for Jekyll themes by [@mdo](https://twitter.com/mdo). Poole, and every theme built on it (like Lanyon here) includes the following:
11 | 
12 | * Complete Jekyll setup included (layouts, config, [404](/404), [RSS feed](/atom.xml), posts, and [example page](/about))
13 | * Mobile friendly design and development
14 | * Easily scalable text and component sizing with `rem` units in the CSS
15 | * Support for a wide gamut of HTML elements
16 | * Related posts (time-based, because Jekyll) below each post
17 | * Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter)
18 | 
19 | ### Lanyon features
20 | 
21 | In addition to the features of Poole, Lanyon adds the following:
22 | 
23 | * Toggleable sliding sidebar (built with only CSS) via **☰** link in top corner
24 | * Sidebar includes support for textual modules and a dynamically generated navigation with active link support
25 | * Two orientations for content and sidebar, default (left sidebar) and [reverse](https://github.com/poole/lanyon#reverse-layout) (right sidebar), available via `<body>` classes
26 | * [Eight optional color schemes](https://github.com/poole/lanyon#themes), available via `<body>` classes
27 | 
28 | [Head to the readme](https://github.com/poole/lanyon#readme) to learn more.
29 | 
30 | ### Browser support
31 | 
32 | Lanyon is by preference a forward-thinking project. In addition to the latest versions of Chrome, Safari (mobile and desktop), and Firefox, it is only compatible with Internet Explorer 9 and above.
33 | 
34 | ### Download
35 | 
36 | Lanyon is developed on and hosted with GitHub. Head to the <a href="https://github.com/poole/lanyon">GitHub repository</a> for downloads, bug reports, and features requests.
37 | 
38 | Thanks!
39 | 


--------------------------------------------------------------------------------
/public/css/syntax.css:
--------------------------------------------------------------------------------
 1 | .highlight .hll { background-color: #ffc; }
 2 | .highlight .c { color: #999; } /* Comment */
 3 | .highlight .err { color: #a00; background-color: #faa } /* Error */
 4 | .highlight .k { color: #069; } /* Keyword */
 5 | .highlight .o { color: #555 } /* Operator */
 6 | .highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
 7 | .highlight .cp { color: #099 } /* Comment.Preproc */
 8 | .highlight .c1 { color: #999; } /* Comment.Single */
 9 | .highlight .cs { color: #999; } /* Comment.Special */
10 | .highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
11 | .highlight .ge { font-style: italic } /* Generic.Emph */
12 | .highlight .gr { color: #f00 } /* Generic.Error */
13 | .highlight .gh { color: #030; } /* Generic.Heading */
14 | .highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
15 | .highlight .go { color: #aaa } /* Generic.Output */
16 | .highlight .gp { color: #009; } /* Generic.Prompt */
17 | .highlight .gs { } /* Generic.Strong */
18 | .highlight .gu { color: #030; } /* Generic.Subheading */
19 | .highlight .gt { color: #9c6 } /* Generic.Traceback */
20 | .highlight .kc { color: #069; } /* Keyword.Constant */
21 | .highlight .kd { color: #069; } /* Keyword.Declaration */
22 | .highlight .kn { color: #069; } /* Keyword.Namespace */
23 | .highlight .kp { color: #069 } /* Keyword.Pseudo */
24 | .highlight .kr { color: #069; } /* Keyword.Reserved */
25 | .highlight .kt { color: #078; } /* Keyword.Type */
26 | .highlight .m { color: #f60 } /* Literal.Number */
27 | .highlight .s { color: #d44950 } /* Literal.String */
28 | .highlight .na { color: #4f9fcf } /* Name.Attribute */
29 | .highlight .nb { color: #366 } /* Name.Builtin */
30 | .highlight .nc { color: #0a8; } /* Name.Class */
31 | .highlight .no { color: #360 } /* Name.Constant */
32 | .highlight .nd { color: #99f } /* Name.Decorator */
33 | .highlight .ni { color: #999; } /* Name.Entity */
34 | .highlight .ne { color: #c00; } /* Name.Exception */
35 | .highlight .nf { color: #c0f } /* Name.Function */
36 | .highlight .nl { color: #99f } /* Name.Label */
37 | .highlight .nn { color: #0cf; } /* Name.Namespace */
38 | .highlight .nt { color: #2f6f9f; } /* Name.Tag */
39 | .highlight .nv { color: #033 } /* Name.Variable */
40 | .highlight .ow { color: #000; } /* Operator.Word */
41 | .highlight .w { color: #bbb } /* Text.Whitespace */
42 | .highlight .mf { color: #f60 } /* Literal.Number.Float */
43 | .highlight .mh { color: #f60 } /* Literal.Number.Hex */
44 | .highlight .mi { color: #f60 } /* Literal.Number.Integer */
45 | .highlight .mo { color: #f60 } /* Literal.Number.Oct */
46 | .highlight .sb { color: #c30 } /* Literal.String.Backtick */
47 | .highlight .sc { color: #c30 } /* Literal.String.Char */
48 | .highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
49 | .highlight .s2 { color: #c30 } /* Literal.String.Double */
50 | .highlight .se { color: #c30; } /* Literal.String.Escape */
51 | .highlight .sh { color: #c30 } /* Literal.String.Heredoc */
52 | .highlight .si { color: #a00 } /* Literal.String.Interpol */
53 | .highlight .sx { color: #c30 } /* Literal.String.Other */
54 | .highlight .sr { color: #3aa } /* Literal.String.Regex */
55 | .highlight .s1 { color: #c30 } /* Literal.String.Single */
56 | .highlight .ss { color: #fc3 } /* Literal.String.Symbol */
57 | .highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
58 | .highlight .vc { color: #033 } /* Name.Variable.Class */
59 | .highlight .vg { color: #033 } /* Name.Variable.Global */
60 | .highlight .vi { color: #033 } /* Name.Variable.Instance */
61 | .highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
62 | 
63 | .css .o,
64 | .css .o + .nt,
65 | .css .nt + .nt { color: #999; }
66 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Lanyon
  2 | 
  3 | Lanyon is an unassuming [Jekyll](http://jekyllrb.com) theme that places content first by tucking away navigation in a hidden drawer. It's based on [Poole](http://getpoole.com), the Jekyll butler.
  4 | 
  5 | ![Lanyon](https://f.cloud.github.com/assets/98681/1825266/be03f014-71b0-11e3-9539-876e61530e24.png)
  6 | ![Lanyon with open sidebar](https://f.cloud.github.com/assets/98681/1825267/be04a914-71b0-11e3-966f-8afe9894c729.png)
  7 | 
  8 | 
  9 | ## Contents
 10 | 
 11 | - [Usage](#usage)
 12 | - [Options](#options)
 13 |   - [Sidebar menu](#sidebar-menu)
 14 |   - [Themes](#themes)
 15 |   - [Reverse layout](#reverse-layout)
 16 | - [Development](#development)
 17 | - [Author](#author)
 18 | - [License](#license)
 19 | 
 20 | 
 21 | ## Usage
 22 | 
 23 | Lanyon is a theme built on top of [Poole](https://github.com/poole/poole), which provides a fully furnished Jekyll setup—just download and start the Jekyll server. See [the Poole usage guidelines](https://github.com/poole/poole#usage) for how to install and use Jekyll.
 24 | 
 25 | 
 26 | ## Options
 27 | 
 28 | Lanyon includes some customizable options, typically applied via classes on the `<body>` element.
 29 | 
 30 | 
 31 | ### Sidebar menu
 32 | 
 33 | Create a list of nav links in the sidebar by assigning each Jekyll page the correct layout in the page's [front-matter](http://jekyllrb.com/docs/frontmatter/).
 34 | 
 35 | ```
 36 | ---
 37 | layout: page
 38 | title: About
 39 | ---
 40 | ```
 41 | 
 42 | **Why require a specific layout?** Jekyll will return *all* pages, including the `atom.xml`, and with an alphabetical sort order. To ensure the first link is *Home*, we exclude the `index.html` page from this list by specifying the `page` layout.
 43 | 
 44 | 
 45 | ### Themes
 46 | 
 47 | Lanyon ships with eight optional themes based on the [base16 color scheme](https://github.com/chriskempson/base16). Apply a theme to change the color scheme (mostly applies to sidebar and links).
 48 | 
 49 | ![Lanyon with red theme](https://f.cloud.github.com/assets/98681/1825270/be065110-71b0-11e3-9ed8-9b8de753a4af.png)
 50 | ![Lanyon with red theme and open sidebar](https://f.cloud.github.com/assets/98681/1825269/be05ec20-71b0-11e3-91ea-a9138ef07186.png)
 51 | 
 52 | There are eight themes available at this time.
 53 | 
 54 | ![Available theme classes](https://f.cloud.github.com/assets/98681/1817044/e5b0ec06-6f68-11e3-83d7-acd1942797a1.png)
 55 | 
 56 | To use a theme, add any one of the available theme classes to the `<body>` element in the `default.html` layout, like so:
 57 | 
 58 | ```html
 59 | <body class="theme-base-08">
 60 |   ...
 61 | </body>
 62 | ```
 63 | 
 64 | To create your own theme, look to the Themes section of [included CSS file](https://github.com/poole/lanyon/blob/master/public/css/lanyon.css). Copy any existing theme (they're only a few lines of CSS), rename it, and change the provided colors.
 65 | 
 66 | 
 67 | ### Reverse layout
 68 | 
 69 | ![Lanyon with reverse layout](https://f.cloud.github.com/assets/98681/1825265/be03f2e4-71b0-11e3-89f1-360705524495.png)
 70 | ![Lanyon with reverse layout and open sidebar](https://f.cloud.github.com/assets/98681/1825268/be056174-71b0-11e3-88c8-5055bca4307f.png)
 71 | 
 72 | Reverse the page orientation with a single class.
 73 | 
 74 | ```html
 75 | <body class="layout-reverse">
 76 |   ...
 77 | </body>
 78 | ```
 79 | 
 80 | 
 81 | ### Sidebar overlay instead of push
 82 | 
 83 | Make the sidebar overlap the viewport content with a single class:
 84 | 
 85 | ```html
 86 | <body class="sidebar-overlay">
 87 |   ...
 88 | </body>
 89 | ```
 90 | 
 91 | This will keep the content stationary and slide in the sidebar over the side content. It also adds a `box-shadow` based outline to the toggle for contrast against backgrounds, as well as a `box-shadow` on the sidebar for depth.
 92 | 
 93 | It's also available for a reversed layout when you add both classes:
 94 | 
 95 | ```html
 96 | <body class="layout-reverse sidebar-overlay">
 97 |   ...
 98 | </body>
 99 | ```
100 | 
101 | ### Sidebar open on page load
102 | 
103 | Show an open sidebar on page load by modifying the `<input>` tag within the `sidebar.html` layout to add the `checked` boolean attribute:
104 | 
105 | ```html
106 | <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" checked>
107 | ```
108 | 
109 | Using Liquid you can also conditionally show the sidebar open on a per-page basis. For example, here's how you could have it open on the homepage only:
110 | 
111 | ```html
112 | <input type="checkbox" class="sidebar-checkbox" id="sidebar-checkbox" {% if page.title =="Home" %}checked{% endif %}>
113 | ```
114 | 
115 | ## Development
116 | 
117 | Lanyon has two branches, but only one is used for active development.
118 | 
119 | - `master` for development.  **All pull requests should be to submitted against `master`.**
120 | - `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**
121 | 
122 | 
123 | ## Author
124 | 
125 | **Mark Otto**
126 | - <https://github.com/mdo>
127 | - <https://twitter.com/mdo>
128 | 
129 | 
130 | ## License
131 | 
132 | Open sourced under the [MIT license](LICENSE.md).
133 | 
134 | <3
135 | 


--------------------------------------------------------------------------------
/_posts/2014-01-01-example-content.md:
--------------------------------------------------------------------------------
  1 | ---
  2 | layout: post
  3 | title: Example content
  4 | ---
  5 | 
  6 | 
  7 | <div class="message">
  8 |   Howdy! This is an example blog post that shows several types of HTML content supported in this theme.
  9 | </div>
 10 | 
 11 | Cum sociis natoque penatibus et magnis <a href="#">dis parturient montes</a>, nascetur ridiculus mus. *Aenean eu leo quam.* Pellentesque ornare sem lacinia quam venenatis vestibulum. Sed posuere consectetur est at lobortis. Cras mattis consectetur purus sit amet fermentum.
 12 | 
 13 | > Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit.
 14 | 
 15 | Etiam porta **sem malesuada magna** mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur.
 16 | 
 17 | ## Inline HTML elements
 18 | 
 19 | HTML defines a long list of available inline tags, a complete list of which can be found on the [Mozilla Developer Network](https://developer.mozilla.org/en-US/docs/Web/HTML/Element).
 20 | 
 21 | - **To bold text**, use `<strong>`.
 22 | - *To italicize text*, use `<em>`.
 23 | - Abbreviations, like <abbr title="HyperText Markup Langage">HTML</abbr> should use `<abbr>`, with an optional `title` attribute for the full phrase.
 24 | - Citations, like <cite>&mdash; Mark otto</cite>, should use `<cite>`.
 25 | - <del>Deleted</del> text should use `<del>` and <ins>inserted</ins> text should use `<ins>`.
 26 | - Superscript <sup>text</sup> uses `<sup>` and subscript <sub>text</sub> uses `<sub>`.
 27 | 
 28 | Most of these elements are styled by browsers with few modifications on our part.
 29 | 
 30 | ## Heading
 31 | 
 32 | Vivamus sagittis lacus vel augue rutrum faucibus dolor auctor. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.
 33 | 
 34 | ### Code
 35 | 
 36 | Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus.
 37 | 
 38 | {% highlight js %}
 39 | // Example can be run directly in your JavaScript console
 40 | 
 41 | // Create a function that takes two arguments and returns the sum of those arguments
 42 | var adder = new Function("a", "b", "return a + b");
 43 | 
 44 | // Call the function
 45 | adder(2, 6);
 46 | // > 8
 47 | {% endhighlight %}
 48 | 
 49 | Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa.
 50 | 
 51 | ### Lists
 52 | 
 53 | Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aenean lacinia bibendum nulla sed consectetur. Etiam porta sem malesuada magna mollis euismod. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.
 54 | 
 55 | * Praesent commodo cursus magna, vel scelerisque nisl consectetur et.
 56 | * Donec id elit non mi porta gravida at eget metus.
 57 | * Nulla vitae elit libero, a pharetra augue.
 58 | 
 59 | Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue.
 60 | 
 61 | 1. Vestibulum id ligula porta felis euismod semper.
 62 | 2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
 63 | 3. Maecenas sed diam eget risus varius blandit sit amet non magna.
 64 | 
 65 | Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis.
 66 | 
 67 | <dl>
 68 |   <dt>HyperText Markup Language (HTML)</dt>
 69 |   <dd>The language used to describe and define the content of a Web page</dd>
 70 | 
 71 |   <dt>Cascading Style Sheets (CSS)</dt>
 72 |   <dd>Used to describe the appearance of Web content</dd>
 73 | 
 74 |   <dt>JavaScript (JS)</dt>
 75 |   <dd>The programming language used to build advanced Web sites and applications</dd>
 76 | </dl>
 77 | 
 78 | Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo.
 79 | 
 80 | ### Tables
 81 | 
 82 | Aenean lacinia bibendum nulla sed consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
 83 | 
 84 | <table>
 85 |   <thead>
 86 |     <tr>
 87 |       <th>Name</th>
 88 |       <th>Upvotes</th>
 89 |       <th>Downvotes</th>
 90 |     </tr>
 91 |   </thead>
 92 |   <tfoot>
 93 |     <tr>
 94 |       <td>Totals</td>
 95 |       <td>21</td>
 96 |       <td>23</td>
 97 |     </tr>
 98 |   </tfoot>
 99 |   <tbody>
100 |     <tr>
101 |       <td>Alice</td>
102 |       <td>10</td>
103 |       <td>11</td>
104 |     </tr>
105 |     <tr>
106 |       <td>Bob</td>
107 |       <td>4</td>
108 |       <td>3</td>
109 |     </tr>
110 |     <tr>
111 |       <td>Charlie</td>
112 |       <td>7</td>
113 |       <td>9</td>
114 |     </tr>
115 |   </tbody>
116 | </table>
117 | 
118 | Nullam id dolor id nibh ultricies vehicula ut id elit. Sed posuere consectetur est at lobortis. Nullam quis risus eget urna mollis ornare vel eu leo.
119 | 
120 | -----
121 | 
122 | Want to see something else added? <a href="https://github.com/poole/poole/issues/new">Open an issue.</a>
123 | 


--------------------------------------------------------------------------------
/public/css/poole.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  *                        ___
  3 |  *                       /\_ \
  4 |  *  _____     ___     ___\//\ \      __
  5 |  * /\ '__`\  / __`\  / __`\\ \ \   /'__`\
  6 |  * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\  __/
  7 |  *  \ \ ,__/\ \____/\ \____//\____\ \____\
  8 |  *   \ \ \/  \/___/  \/___/ \/____/\/____/
  9 |  *    \ \_\
 10 |  *     \/_/
 11 |  *
 12 |  * Designed, built, and released under MIT license by @mdo. Learn more at
 13 |  * https://github.com/poole/poole.
 14 |  */
 15 | 
 16 | 
 17 | /*
 18 |  * Contents
 19 |  *
 20 |  * Body resets
 21 |  * Custom type
 22 |  * Messages
 23 |  * Container
 24 |  * Masthead
 25 |  * Posts and pages
 26 |  * Pagination
 27 |  * Reverse layout
 28 |  * Themes
 29 |  */
 30 | 
 31 | 
 32 | /*
 33 |  * Body resets
 34 |  *
 35 |  * Update the foundational and global aspects of the page.
 36 |  */
 37 | 
 38 | * {
 39 |   -webkit-box-sizing: border-box;
 40 |      -moz-box-sizing: border-box;
 41 |           box-sizing: border-box;
 42 | }
 43 | 
 44 | html,
 45 | body {
 46 |   margin: 0;
 47 |   padding: 0;
 48 | }
 49 | 
 50 | html {
 51 |   font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 52 |   font-size: 16px;
 53 |   line-height: 1.5;
 54 | }
 55 | @media (min-width: 38em) {
 56 |   html {
 57 |     font-size: 20px;
 58 |   }
 59 | }
 60 | 
 61 | body {
 62 |   color: #515151;
 63 |   background-color: #fff;
 64 |   -webkit-text-size-adjust: 100%;
 65 |       -ms-text-size-adjust: 100%;
 66 | }
 67 | 
 68 | /* No `:visited` state is required by default (browsers will use `a`) */
 69 | a {
 70 |   color: #268bd2;
 71 |   text-decoration: none;
 72 | }
 73 | a strong {
 74 |   color: inherit;
 75 | }
 76 | /* `:focus` is linked to `:hover` for basic accessibility */
 77 | a:hover,
 78 | a:focus {
 79 |   text-decoration: underline;
 80 | }
 81 | 
 82 | /* Headings */
 83 | h1, h2, h3, h4, h5, h6 {
 84 |   margin-bottom: .5rem;
 85 |   font-weight: bold;
 86 |   line-height: 1.25;
 87 |   color: #313131;
 88 |   text-rendering: optimizeLegibility;
 89 | }
 90 | h1 {
 91 |   font-size: 2rem;
 92 | }
 93 | h2 {
 94 |   margin-top: 1rem;
 95 |   font-size: 1.5rem;
 96 | }
 97 | h3 {
 98 |   margin-top: 1.5rem;
 99 |   font-size: 1.25rem;
100 | }
101 | h4, h5, h6 {
102 |   margin-top: 1rem;
103 |   font-size: 1rem;
104 | }
105 | 
106 | /* Body text */
107 | p {
108 |   margin-top: 0;
109 |   margin-bottom: 1rem;
110 | }
111 | 
112 | strong {
113 |   color: #303030;
114 | }
115 | 
116 | 
117 | /* Lists */
118 | ul, ol, dl {
119 |   margin-top: 0;
120 |   margin-bottom: 1rem;
121 | }
122 | 
123 | dt {
124 |   font-weight: bold;
125 | }
126 | dd {
127 |   margin-bottom: .5rem;
128 | }
129 | 
130 | /* Misc */
131 | hr {
132 |   position: relative;
133 |   margin: 1.5rem 0;
134 |   border: 0;
135 |   border-top: 1px solid #eee;
136 |   border-bottom: 1px solid #fff;
137 | }
138 | 
139 | abbr {
140 |   font-size: 85%;
141 |   font-weight: bold;
142 |   color: #555;
143 |   text-transform: uppercase;
144 | }
145 | abbr[title] {
146 |   cursor: help;
147 |   border-bottom: 1px dotted #e5e5e5;
148 | }
149 | 
150 | /* Code */
151 | code,
152 | pre {
153 |   font-family: Menlo, Monaco, "Courier New", monospace;
154 | }
155 | code {
156 |   padding: .25em .5em;
157 |   font-size: 85%;
158 |   color: #bf616a;
159 |   background-color: #f9f9f9;
160 |   border-radius: 3px;
161 | }
162 | pre {
163 |   display: block;
164 |   margin-top: 0;
165 |   margin-bottom: 1rem;
166 |   padding: 1rem;
167 |   font-size: .8rem;
168 |   line-height: 1.4;
169 |   white-space: pre;
170 |   white-space: pre-wrap;
171 |   word-break: break-all;
172 |   word-wrap: break-word;
173 |   background-color: #f9f9f9;
174 | }
175 | pre code {
176 |   padding: 0;
177 |   font-size: 100%;
178 |   color: inherit;
179 |   background-color: transparent;
180 | }
181 | 
182 | /* Pygments via Jekyll */
183 | .highlight {
184 |   margin-bottom: 1rem;
185 |   border-radius: 4px;
186 | }
187 | .highlight pre {
188 |   margin-bottom: 0;
189 | }
190 | 
191 | /* Gist via GitHub Pages */
192 | .gist .gist-file {
193 |   font-family: Menlo, Monaco, "Courier New", monospace !important;
194 | }
195 | .gist .markdown-body {
196 |   padding: 15px;
197 | }
198 | .gist pre {
199 |   padding: 0;
200 |   background-color: transparent;
201 | }
202 | .gist .gist-file .gist-data {
203 |   font-size: .8rem !important;
204 |   line-height: 1.4;
205 | }
206 | .gist code {
207 |   padding: 0;
208 |   color: inherit;
209 |   background-color: transparent;
210 |   border-radius: 0;
211 | }
212 | 
213 | /* Quotes */
214 | blockquote {
215 |   padding: .5rem 1rem;
216 |   margin: .8rem 0;
217 |   color: #7a7a7a;
218 |   border-left: .25rem solid #e5e5e5;
219 | }
220 | blockquote p:last-child {
221 |   margin-bottom: 0;
222 | }
223 | @media (min-width: 30em) {
224 |   blockquote {
225 |     padding-right: 5rem;
226 |     padding-left: 1.25rem;
227 |   }
228 | }
229 | 
230 | img {
231 |   display: block;
232 |   max-width: 100%;
233 |   margin: 0 0 1rem;
234 |   border-radius: 5px;
235 | }
236 | 
237 | /* Tables */
238 | table {
239 |   margin-bottom: 1rem;
240 |   width: 100%;
241 |   border: 1px solid #e5e5e5;
242 |   border-collapse: collapse;
243 | }
244 | td,
245 | th {
246 |   padding: .25rem .5rem;
247 |   border: 1px solid #e5e5e5;
248 | }
249 | tbody tr:nth-child(odd) td,
250 | tbody tr:nth-child(odd) th {
251 |   background-color: #f9f9f9;
252 | }
253 | 
254 | 
255 | /*
256 |  * Custom type
257 |  *
258 |  * Extend paragraphs with `.lead` for larger introductory text.
259 |  */
260 | 
261 | .lead {
262 |   font-size: 1.25rem;
263 |   font-weight: 300;
264 | }
265 | 
266 | 
267 | /*
268 |  * Messages
269 |  *
270 |  * Show alert messages to users. You may add it to single elements like a `<p>`,
271 |  * or to a parent if there are multiple elements to show.
272 |  */
273 | 
274 | .message {
275 |   margin-bottom: 1rem;
276 |   padding: 1rem;
277 |   color: #717171;
278 |   background-color: #f9f9f9;
279 | }
280 | 
281 | 
282 | /*
283 |  * Container
284 |  *
285 |  * Center the page content.
286 |  */
287 | 
288 | .container {
289 |   max-width: 38rem;
290 |   padding-left:  1rem;
291 |   padding-right: 1rem;
292 |   margin-left:  auto;
293 |   margin-right: auto;
294 | }
295 | 
296 | 
297 | /*
298 |  * Masthead
299 |  *
300 |  * Super small header above the content for site name and short description.
301 |  */
302 | 
303 | .masthead {
304 |   padding-top:    1rem;
305 |   padding-bottom: 1rem;
306 |   margin-bottom: 3rem;
307 | }
308 | .masthead-title {
309 |   margin-top: 0;
310 |   margin-bottom: 0;
311 |   color: #505050;
312 | }
313 | .masthead-title a {
314 |   color: #505050;
315 | }
316 | .masthead-title small {
317 |   font-size: 75%;
318 |   font-weight: 400;
319 |   color: #c0c0c0;
320 |   letter-spacing: 0;
321 | }
322 | 
323 | 
324 | /*
325 |  * Posts and pages
326 |  *
327 |  * Each post is wrapped in `.post` and is used on default and post layouts. Each
328 |  * page is wrapped in `.page` and is only used on the page layout.
329 |  */
330 | 
331 | .page,
332 | .post {
333 |   margin-bottom: 4em;
334 | }
335 | 
336 | /* Blog post or page title */
337 | .page-title,
338 | .post-title,
339 | .post-title a {
340 |   color: #303030;
341 | }
342 | .page-title,
343 | .post-title {
344 |   margin-top: 0;
345 | }
346 | 
347 | /* Meta data line below post title */
348 | .post-date {
349 |   display: block;
350 |   margin-top: -.5rem;
351 |   margin-bottom: 1rem;
352 |   color: #9a9a9a;
353 | }
354 | 
355 | /* Related posts */
356 | .related {
357 |   padding-top: 2rem;
358 |   padding-bottom: 2rem;
359 |   border-top: 1px solid #eee;
360 | }
361 | .related-posts {
362 |   padding-left: 0;
363 |   list-style: none;
364 | }
365 | .related-posts h3 {
366 |   margin-top: 0;
367 | }
368 | .related-posts li small {
369 |   font-size: 75%;
370 |   color: #999;
371 | }
372 | .related-posts li a:hover {
373 |   color: #268bd2;
374 |   text-decoration: none;
375 | }
376 | .related-posts li a:hover small {
377 |   color: inherit;
378 | }
379 | 
380 | 
381 | /*
382 |  * Pagination
383 |  *
384 |  * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
385 |  * there are no more previous or next posts to show.
386 |  */
387 | 
388 | .pagination {
389 |   overflow: hidden; /* clearfix */
390 |   margin-left: -1rem;
391 |   margin-right: -1rem;
392 |   font-family: "PT Sans", Helvetica, Arial, sans-serif;
393 |   color: #ccc;
394 |   text-align: center;
395 | }
396 | 
397 | /* Pagination items can be `span`s or `a`s */
398 | .pagination-item {
399 |   display: block;
400 |   padding: 1rem;
401 |   border: 1px solid #eee;
402 | }
403 | .pagination-item:first-child {
404 |   margin-bottom: -1px;
405 | }
406 | 
407 | /* Only provide a hover state for linked pagination items */
408 | a.pagination-item:hover {
409 |   background-color: #f5f5f5;
410 | }
411 | 
412 | @media (min-width: 30em) {
413 |   .pagination {
414 |     margin: 3rem 0;
415 |   }
416 |   .pagination-item {
417 |     float: left;
418 |     width: 50%;
419 |   }
420 |   .pagination-item:first-child {
421 |     margin-bottom: 0;
422 |     border-top-left-radius:    4px;
423 |     border-bottom-left-radius: 4px;
424 |   }
425 |   .pagination-item:last-child {
426 |     margin-left: -1px;
427 |     border-top-right-radius:    4px;
428 |     border-bottom-right-radius: 4px;
429 |   }
430 | }
431 | 


--------------------------------------------------------------------------------
/public/css/lanyon.css:
--------------------------------------------------------------------------------
  1 | /*
  2 |  *  ___
  3 |  * /\_ \
  4 |  * \//\ \      __      ___   __  __    ___     ___
  5 |  *   \ \ \   /'__`\  /' _ `\/\ \/\ \  / __`\ /' _ `\
  6 |  *    \_\ \_/\ \_\.\_/\ \/\ \ \ \_\ \/\ \_\ \/\ \/\ \
  7 |  *    /\____\ \__/.\_\ \_\ \_\/`____ \ \____/\ \_\ \_\
  8 |  *    \/____/\/__/\/_/\/_/\/_/`/___/> \/___/  \/_/\/_/
  9 |  *                               /\___/
 10 |  *                               \/__/
 11 |  *
 12 |  * Designed, built, and released under MIT license by @mdo. Learn more at
 13 |  * https://github.com/poole/lanyon.
 14 |  */
 15 | 
 16 | 
 17 | /*
 18 |  * Contents
 19 |  *
 20 |  * Global resets
 21 |  * Masthead
 22 |  * Sidebar
 23 |  * Slide effect
 24 |  * Posts and pages
 25 |  * Pagination
 26 |  * Reverse layout
 27 |  * Themes
 28 |  */
 29 | 
 30 | 
 31 | /*
 32 |  * Global resets
 33 |  *
 34 |  * Update the foundational and global aspects of the page.
 35 |  */
 36 | 
 37 | /* Prevent scroll on narrow devices */
 38 | html,
 39 | body {
 40 |   overflow-x: hidden;
 41 | }
 42 | 
 43 | html {
 44 |   font-family: "PT Serif", Georgia, "Times New Roman", serif;
 45 | }
 46 | 
 47 | h1, h2, h3, h4, h5, h6 {
 48 |   font-family: "PT Sans", Helvetica, Arial, sans-serif;
 49 |   font-weight: 400;
 50 |   color: #313131;
 51 |   letter-spacing: -.025rem;
 52 | }
 53 | 
 54 | 
 55 | /*
 56 |  * Wrapper
 57 |  *
 58 |  * The wrapper is used to position site content when the sidebar is toggled. We
 59 |  * use an outter wrap to position the sidebar without interferring with the
 60 |  * regular page content.
 61 |  */
 62 | 
 63 | .wrap {
 64 |   position: relative;
 65 |   width: 100%;
 66 | }
 67 | 
 68 | 
 69 | /*
 70 |  * Container
 71 |  *
 72 |  * Center the page content.
 73 |  */
 74 | 
 75 | .container {
 76 |   max-width: 28rem;
 77 | }
 78 | @media (min-width: 38em) {
 79 |   .container {
 80 |     max-width: 32rem;
 81 |   }
 82 | }
 83 | @media (min-width: 56em) {
 84 |   .container {
 85 |     max-width: 38rem;
 86 |   }
 87 | }
 88 | 
 89 | 
 90 | /*
 91 |  * Masthead
 92 |  *
 93 |  * Super small header above the content for site name and short description.
 94 |  */
 95 | 
 96 | .masthead {
 97 |   padding-top:    1rem;
 98 |   padding-bottom: 1rem;
 99 |   margin-bottom: 3rem;
100 |   border-bottom: 1px solid #eee;
101 | }
102 | .masthead-title {
103 |   margin-top: 0;
104 |   margin-bottom: 0;
105 |   color: #505050;
106 | }
107 | .masthead-title a {
108 |   color: #505050;
109 | }
110 | .masthead-title small {
111 |   font-size: 75%;
112 |   font-weight: 400;
113 |   color: #c0c0c0;
114 |   letter-spacing: 0;
115 | }
116 | 
117 | @media (max-width: 48em) {
118 |   .masthead-title {
119 |     text-align: center;
120 |   }
121 |   .masthead-title small {
122 |     display: none;
123 |   }
124 | }
125 | 
126 | 
127 | /*
128 |  * Sidebar
129 |  *
130 |  * The sidebar is the drawer, the item we are toggling with our handy hamburger
131 |  * button in the corner of the page.
132 |  *
133 |  * This particular sidebar implementation was inspired by Chris Coyier's
134 |  * "Offcanvas Menu with CSS Target" article, and the checkbox variation from the
135 |  * comments by a reader. It modifies both implementations to continue using the
136 |  * checkbox (no change in URL means no polluted browser history), but this uses
137 |  * `position` for the menu to avoid some potential content reflow issues.
138 |  *
139 |  * Source: http://css-tricks.com/off-canvas-menu-with-css-target/#comment-207504
140 |  */
141 | 
142 | /* Style and "hide" the sidebar */
143 | .sidebar {
144 |   position: fixed;
145 |   top: 0;
146 |   bottom: 0;
147 |   left: -14rem;
148 |   width: 14rem;
149 |   visibility: hidden;
150 |   overflow-y: auto;
151 |   font-family: "PT Sans", Helvetica, Arial, sans-serif;
152 |   font-size: .875rem; /* 15px */
153 |   color: rgba(255,255,255,.6);
154 |   background-color: #202020;
155 |   -webkit-transition: all .3s ease-in-out;
156 |           transition: all .3s ease-in-out;
157 | }
158 | @media (min-width: 30em) {
159 |   .sidebar {
160 |     font-size: .75rem; /* 14px */
161 |   }
162 | }
163 | 
164 | /* Sidebar content */
165 | .sidebar a {
166 |   font-weight: normal;
167 |   color: #fff;
168 | }
169 | .sidebar-item {
170 |   padding: 1rem;
171 | }
172 | .sidebar-item p:last-child {
173 |   margin-bottom: 0;
174 | }
175 | 
176 | /* Sidebar nav */
177 | .sidebar-nav {
178 |   border-bottom: 1px solid rgba(255,255,255,.1);
179 | }
180 | .sidebar-nav-item {
181 |   display: block;
182 |   padding: .5rem 1rem;
183 |   border-top: 1px solid rgba(255,255,255,.1);
184 | }
185 | .sidebar-nav-item.active,
186 | a.sidebar-nav-item:hover,
187 | a.sidebar-nav-item:focus {
188 |   text-decoration: none;
189 |   background-color: rgba(255,255,255,.1);
190 |   border-color: transparent;
191 | }
192 | 
193 | @media (min-width: 48em) {
194 |   .sidebar-item {
195 |     padding: 1.5rem;
196 |   }
197 |   .sidebar-nav-item {
198 |     padding-left:  1.5rem;
199 |     padding-right: 1.5rem;
200 |   }
201 | }
202 | 
203 | /* Hide the sidebar checkbox that we toggle with `.sidebar-toggle` */
204 | .sidebar-checkbox {
205 |   position: absolute;
206 |   opacity: 0;
207 |   -webkit-user-select: none;
208 |      -moz-user-select: none;
209 |           user-select: none;
210 | }
211 | 
212 | /* Style the `label` that we use to target the `.sidebar-checkbox` */
213 | .sidebar-toggle {
214 |   position: absolute;
215 |   top:  .8rem;
216 |   left: 1rem;
217 |   display: block;
218 |   padding: .25rem .75rem;
219 |   color: #505050;
220 |   background-color: #fff;
221 |   border-radius: .25rem;
222 |   cursor: pointer;
223 | }
224 | 
225 | .sidebar-toggle:before {
226 |   display: inline-block;
227 |   width: 1rem;
228 |   height: .75rem;
229 |   content: "";
230 |   background-image: -webkit-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
231 |   background-image:    -moz-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
232 |   background-image:     -ms-linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
233 |   background-image:         linear-gradient(to bottom, #555, #555 20%, #fff 20%, #fff 40%, #555 40%, #555 60%, #fff 60%, #fff 80%, #555 80%, #555 100%);
234 | }
235 | 
236 | .sidebar-toggle:active,
237 | #sidebar-checkbox:focus ~ .sidebar-toggle,
238 | #sidebar-checkbox:checked ~ .sidebar-toggle {
239 |   color: #fff;
240 |   background-color: #555;
241 | }
242 | 
243 | .sidebar-toggle:active:before,
244 | #sidebar-checkbox:focus ~ .sidebar-toggle:before,
245 | #sidebar-checkbox:checked ~ .sidebar-toggle:before {
246 |   background-image: -webkit-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
247 |   background-image:    -moz-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
248 |   background-image:     -ms-linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
249 |   background-image:         linear-gradient(to bottom, #fff, #fff 20%, #555 20%, #555 40%, #fff 40%, #fff 60%, #555 60%, #555 80%, #fff 80%, #fff 100%);
250 | }
251 | 
252 | @media (min-width: 30.1em) {
253 |   .sidebar-toggle {
254 |     position: fixed;
255 |   }
256 | }
257 | 
258 | @media print {
259 |   .sidebar-toggle {
260 |     display: none;
261 |   }
262 | }
263 | 
264 | /* Slide effect
265 |  *
266 |  * Handle the sliding effects of the sidebar and content in one spot, seperate
267 |  * from the default styles.
268 |  *
269 |  * As an a heads up, we don't use `transform: translate3d()` here because when
270 |  * mixed with `position: fixed;` for the sidebar toggle, it creates a new
271 |  * containing block. Put simply, the fixed sidebar toggle behaves like
272 |  * `position: absolute;` when transformed.
273 |  *
274 |  * Read more about it at http://meyerweb.com/eric/thoughts/2011/09/12/.
275 |  */
276 | 
277 | .wrap,
278 | .sidebar,
279 | .sidebar-toggle {
280 |   -webkit-backface-visibility: hidden;
281 |       -ms-backface-visibility: hidden;
282 |           backface-visibility: hidden;
283 | }
284 | .wrap,
285 | .sidebar-toggle {
286 |   -webkit-transition: -webkit-transform .3s ease-in-out;
287 |           transition: transform .3s ease-in-out;
288 | }
289 | 
290 | #sidebar-checkbox:checked + .sidebar {
291 |   z-index: 10;
292 |   visibility: visible;
293 | }
294 | #sidebar-checkbox:checked ~ .sidebar,
295 | #sidebar-checkbox:checked ~ .wrap,
296 | #sidebar-checkbox:checked ~ .sidebar-toggle {
297 |   -webkit-transform: translateX(14rem);
298 |       -ms-transform: translateX(14rem);
299 |           transform: translateX(14rem);
300 | }
301 | 
302 | 
303 | /*
304 |  * Posts and pages
305 |  *
306 |  * Each post is wrapped in `.post` and is used on default and post layouts. Each
307 |  * page is wrapped in `.page` and is only used on the page layout.
308 |  */
309 | 
310 | .page,
311 | .post {
312 |   margin-bottom: 4em;
313 | }
314 | 
315 | /* Blog post or page title */
316 | .page-title,
317 | .post-title,
318 | .post-title a {
319 |   color: #303030;
320 | }
321 | .page-title,
322 | .post-title {
323 |   margin-top: 0;
324 | }
325 | 
326 | /* Meta data line below post title */
327 | .post-date {
328 |   display: block;
329 |   margin-top: -.5rem;
330 |   margin-bottom: 1rem;
331 |   color: #9a9a9a;
332 | }
333 | 
334 | /* Related posts */
335 | .related {
336 |   padding-top: 2rem;
337 |   padding-bottom: 2rem;
338 |   border-top: 1px solid #eee;
339 | }
340 | .related-posts {
341 |   padding-left: 0;
342 |   list-style: none;
343 | }
344 | .related-posts h3 {
345 |   margin-top: 0;
346 | }
347 | .related-posts li small {
348 |   font-size: 75%;
349 |   color: #999;
350 | }
351 | .related-posts li a:hover {
352 |   color: #268bd2;
353 |   text-decoration: none;
354 | }
355 | .related-posts li a:hover small {
356 |   color: inherit;
357 | }
358 | 
359 | 
360 | /*
361 |  * Pagination
362 |  *
363 |  * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
364 |  * there are no more previous or next posts to show.
365 |  */
366 | 
367 | .pagination {
368 |   overflow: hidden; /* clearfix */
369 |   margin-left: -1rem;
370 |   margin-right: -1rem;
371 |   font-family: "PT Sans", Helvetica, Arial, sans-serif;
372 |   color: #ccc;
373 |   text-align: center;
374 | }
375 | 
376 | /* Pagination items can be `span`s or `a`s */
377 | .pagination-item {
378 |   display: block;
379 |   padding: 1rem;
380 |   border: 1px solid #eee;
381 | }
382 | .pagination-item:first-child {
383 |   margin-bottom: -1px;
384 | }
385 | 
386 | /* Only provide a hover state for linked pagination items */
387 | a.pagination-item:hover {
388 |   background-color: #f5f5f5;
389 | }
390 | 
391 | @media (min-width: 30em) {
392 |   .pagination {
393 |     margin: 3rem 0;
394 |   }
395 |   .pagination-item {
396 |     float: left;
397 |     width: 50%;
398 |   }
399 |   .pagination-item:first-child {
400 |     margin-bottom: 0;
401 |     border-top-left-radius:    4px;
402 |     border-bottom-left-radius: 4px;
403 |   }
404 |   .pagination-item:last-child {
405 |     margin-left: -1px;
406 |     border-top-right-radius:    4px;
407 |     border-bottom-right-radius: 4px;
408 |   }
409 | }
410 | 
411 | 
412 | /*
413 |  * Reverse layout
414 |  *
415 |  * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle
416 |  * on the right side.
417 |  */
418 | 
419 | .layout-reverse .sidebar {
420 |   left: auto;
421 |   right: -14rem;
422 | }
423 | .layout-reverse .sidebar-toggle {
424 |   left: auto;
425 |   right: 1rem;
426 | }
427 | 
428 | .layout-reverse #sidebar-checkbox:checked ~ .sidebar,
429 | .layout-reverse #sidebar-checkbox:checked ~ .wrap,
430 | .layout-reverse #sidebar-checkbox:checked ~ .sidebar-toggle {
431 |   -webkit-transform: translateX(-14rem);
432 |       -ms-transform: translateX(-14rem);
433 |           transform: translateX(-14rem);
434 | }
435 | 
436 | 
437 | /*
438 |  * Themes
439 |  *
440 |  * Apply custom color schemes by adding the appropriate class to the `body`.
441 |  * Based on colors from Base16: http://chriskempson.github.io/base16/#default.
442 |  */
443 | 
444 | /* Red */
445 | .theme-base-08 .sidebar,
446 | .theme-base-08 .sidebar-toggle:active,
447 | .theme-base-08 #sidebar-checkbox:checked ~ .sidebar-toggle {
448 |   background-color: #ac4142;
449 | }
450 | .theme-base-08 .container a,
451 | .theme-base-08 .sidebar-toggle,
452 | .theme-base-08 .related-posts li a:hover {
453 |   color: #ac4142;
454 | }
455 | 
456 | /* Orange */
457 | .theme-base-09 .sidebar,
458 | .theme-base-09 .sidebar-toggle:active,
459 | .theme-base-09 #sidebar-checkbox:checked ~ .sidebar-toggle {
460 |   background-color: #d28445;
461 | }
462 | .theme-base-09 .container a,
463 | .theme-base-09 .sidebar-toggle,
464 | .theme-base-09 .related-posts li a:hover {
465 |   color: #d28445;
466 | }
467 | 
468 | /* Yellow */
469 | .theme-base-0a .sidebar,
470 | .theme-base-0a .sidebar-toggle:active,
471 | .theme-base-0a #sidebar-checkbox:checked ~ .sidebar-toggle {
472 |   background-color: #f4bf75;
473 | }
474 | .theme-base-0a .container a,
475 | .theme-base-0a .sidebar-toggle,
476 | .theme-base-0a .related-posts li a:hover {
477 |   color: #f4bf75;
478 | }
479 | 
480 | /* Green */
481 | .theme-base-0b .sidebar,
482 | .theme-base-0b .sidebar-toggle:active,
483 | .theme-base-0b #sidebar-checkbox:checked ~ .sidebar-toggle {
484 |   background-color: #90a959;
485 | }
486 | .theme-base-0b .container a,
487 | .theme-base-0b .sidebar-toggle,
488 | .theme-base-0b .related-posts li a:hover {
489 |   color: #90a959;
490 | }
491 | 
492 | /* Cyan */
493 | .theme-base-0c .sidebar,
494 | .theme-base-0c .sidebar-toggle:active,
495 | .theme-base-0c #sidebar-checkbox:checked ~ .sidebar-toggle {
496 |   background-color: #75b5aa;
497 | }
498 | .theme-base-0c .container a,
499 | .theme-base-0c .sidebar-toggle,
500 | .theme-base-0c .related-posts li a:hover {
501 |   color: #75b5aa;
502 | }
503 | 
504 | /* Blue */
505 | .theme-base-0d .sidebar,
506 | .theme-base-0d .sidebar-toggle:active,
507 | .theme-base-0d #sidebar-checkbox:checked ~ .sidebar-toggle {
508 |   background-color: #6a9fb5;
509 | }
510 | .theme-base-0d .container a,
511 | .theme-base-0d .sidebar-toggle,
512 | .theme-base-0d .related-posts li a:hover {
513 |   color: #6a9fb5;
514 | }
515 | 
516 | /* Magenta */
517 | .theme-base-0e .sidebar,
518 | .theme-base-0e .sidebar-toggle:active,
519 | .theme-base-0e #sidebar-checkbox:checked ~ .sidebar-toggle {
520 |   background-color: #aa759f;
521 | }
522 | .theme-base-0e .container a,
523 | .theme-base-0e .sidebar-toggle,
524 | .theme-base-0e .related-posts li a:hover {
525 |   color: #aa759f;
526 | }
527 | 
528 | /* Brown */
529 | .theme-base-0f .sidebar,
530 | .theme-base-0f .sidebar-toggle:active,
531 | .theme-base-0f #sidebar-checkbox:checked ~ .sidebar-toggle {
532 |   background-color: #8f5536;
533 | }
534 | .theme-base-0f .container a,
535 | .theme-base-0f .sidebar-toggle,
536 | .theme-base-0f .related-posts li a:hover {
537 |   color: #8f5536;
538 | }
539 | 
540 | 
541 | /*
542 |  * Overlay sidebar
543 |  *
544 |  * Make the sidebar content overlay the viewport content instead of pushing it
545 |  * aside when toggled.
546 |  */
547 | 
548 | .sidebar-overlay #sidebar-checkbox:checked ~ .wrap {
549 |   -webkit-transform: translateX(0);
550 |       -ms-transform: translateX(0);
551 |           transform: translateX(0);
552 | }
553 | .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar-toggle {
554 |   box-shadow: 0 0 0 .25rem #fff;
555 | }
556 | .sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
557 |   box-shadow: .25rem 0 .5rem rgba(0,0,0,.1);
558 | }
559 | 
560 | /* Only one tweak for a reverse layout */
561 | .layout-reverse.sidebar-overlay #sidebar-checkbox:checked ~ .sidebar {
562 |   box-shadow: -.25rem 0 .5rem rgba(0,0,0,.1);
563 | }
564 | 


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