_gh_pages
_site
.ruby-version
+.sass-cache
# Numerous always-ignore extensions
*.diff
<div class="page">
<h1 class="page-title">404: Page not found</h1>
- <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>
+ <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>
</div>
## Usage
-### 1. Install Jekyll
+### 1. Install dependencies
-Poole is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward:
+Poole is built on Jekyll and uses its built-in SCSS compiler to generate our CSS. Before getting started, you'll need to install the Jekyll gem:
```bash
$ gem install jekyll
**Windows users:** Windows users have a bit more work to do, but luckily [@juthilo](https://github.com/juthilo) has your back with his [Run Jekyll on Windows](https://github.com/juthilo/run-jekyll-on-windows) guide.
-You may also need to install Pygments, the Python syntax highlighter for code snippets that plays nicely with Jekyll. Read more about this [in the Jekyll docs](http://jekyllrb.com/docs/templates/#code_snippet_highlighting).
+**Need syntax highlighting?** Poole includes support for Pygments or Rouge, so install your gem of choice to make use of the built-in styling. Read more about this [in the Jekyll docs](http://jekyllrb.com/docs/templates/#code_snippet_highlighting).
### 2a. Quick start
### 3. Running locally
-To see your Jekyll site with Poole applied, start a Jekyll server. In Terminal, from `/Poole` (or whatever your Jekyll site's root directory is named):
+To see your Jekyll site with Poole applied, start a Jekyll server. In Terminal, from `/poole` (or whatever your Jekyll site's root directory is named):
```bash
$ jekyll serve
If you host your code on GitHub, you can use [GitHub Pages](https://pages.github.com) to host your project.
1. Fork this repo and switch to the `gh-pages` branch.
-2a. If you're [using a custom domain name](https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages), modify the `CNAME` file to point to your new domain.
-2b. If you're not using a custom domain name, **modify the `baseurl` in `_config.yml`** to point to your GitHub Pages URL. Example: for a repo at `github.com/username/poole`, use `http://username.github.io/poole/`. **Be sure to include the trailing slash.**
+ 1. If you're [using a custom domain name](https://help.github.com/articles/setting-up-a-custom-domain-with-github-pages), modify the `CNAME` file to point to your new domain.
+ 2. If you're not using a custom domain name, **modify the `baseurl` in `_config.yml`** to point to your GitHub Pages URL. Example: for a repo at `github.com/username/poole`, use `http://username.github.io/poole/`. **Be sure to include the trailing slash.**
3. Done! Head to your GitHub Pages URL or custom domain.
No matter your production or hosting setup, be sure to verify the `baseurl` option file and `CNAME` settings. Not applying this correctly can mean broken styles on your site.
-
## Options
Poole includes some customizable options, typically applied via classes on the `<body>` element.
- `master` for development. **All pull requests should be to submitted against `master`.**
- `gh-pages` for our hosted site, which includes our analytics tracking code. **Please avoid using this branch.**
+CSS is handled via Jeykll's built-in Sass compiler. Source Sass files are located in `_sass/`, included into `styles.scss`, and compile to `styles.css`.
## Author
-# Dependencies
-markdown: redcarpet
-highlighter: pygments
-
# Permalinks
-permalink: pretty
+#
+# Use of `relative_permalinks` ensures post links from the index work properly.
+permalink: pretty
relative_permalinks: true
# Setup
-title: Poole
-tagline: The Jekyll Butler
-url: http://getpoole.com
-paginate: 1
-baseurl: /
+title: Poole
+tagline: The Jekyll Butler
+url: http://getpoole.com
+paginate: 1
+baseurl: ""
+
+# Assets
+#
+# We specify the directory for Jekyll so we can use @imports.
+sass:
+ sass_dir: _sass
+ style: :compressed
+
+# About/contact
author:
- name: Mark Otto
- url: https://twitter.com/mdo
- email: markdotto@gmail.com
+ name: Mark Otto
+ url: https://twitter.com/mdo
+ email: markdotto@gmail.com
# Custom vars
-version: 1.0.0
+version: 1.0.0
github:
- repo: https://github.com/poole/poole
+ repo: https://github.com/poole/poole
<link href="http://gmpg.org/xfn/11" rel="profile">
<!-- Enable responsiveness on mobile devices-->
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
{% if page.title == "Home" %}
</title>
<!-- CSS -->
- <link rel="stylesheet" href="{{ site.baseurl }}public/css/poole.css">
- <link rel="stylesheet" href="{{ site.baseurl }}public/css/syntax.css">
+ <link rel="stylesheet" href="{{ site.baseurl }}/styles.css">
<!-- Icons -->
- <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}public/apple-touch-icon-precomposed.png">
- <link rel="shortcut icon" href="{{ site.baseurl }}public/favicon.ico">
+ <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ site.baseurl }}/public/apple-touch-icon-precomposed.png">
+ <link rel="shortcut icon" href="{{ site.baseurl }}/public/favicon.ico">
<!-- RSS -->
- <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}atom.xml">
+ <link rel="alternate" type="application/atom+xml" title="{{ site.title }}" href="{{ site.baseurl }}/atom.xml">
<!-- Google Analytics -->
<script>
<body>
<div class="container content">
- <div class="masthead">
+ <header class="masthead">
<h3 class="masthead-title">
- <a href="{{ site.baseurl }}" title="Home">{{ site.title }}</a>
+ <a href="{{ site.baseurl }}/" title="Home">{{ site.title }}</a>
<small>{{ site.tagline }}</small>
</h3>
- </div>
+ </header>
- {{ content }}
+ <main>
+ {{ content }}
+ </main>
- <div class="footer">
- <p>
- © {{ site.time | date: '%Y' }}. All rights reserved.
- </p>
- </div>
+ <footer class="footer">
+ <small>
+ © <time datetime="{{ site.time | date_to_xmlschema }}">{{ site.time | date: '%Y' }}</time>. All rights reserved.
+ </small>
+ </footer>
</div>
</body>
layout: default
---
-<div class="page">
+<article class="page">
<h1 class="page-title">{{ page.title }}</h1>
{{ content }}
-</div>
+</article>
layout: default
---
-<div class="post">
+<article class="post">
<h1 class="post-title">{{ page.title }}</h1>
- <span class="post-date">{{ page.date | date_to_string }}</span>
+ <time datetime="{{ page.date | date_to_xmlschema }}" class="post-date">{{ page.date | date_to_string }}</time>
{{ content }}
-</div>
+</article>
-<div class="related">
+{% if site.related_posts != empty %}
+<aside class="related">
<h2>Related Posts</h2>
<ul class="related-posts">
{% for post in site.related_posts limit:3 %}
<h3>
<a href="{{ site.baseurl }}{{ post.url }}">
{{ post.title }}
- <small>{{ post.date | date_to_string }}</small>
+ <small><time datetime="{{ post.date | date_to_xmlschema }}">{{ post.date | date_to_string }}</time></small>
</a>
</h3>
</li>
{% endfor %}
</ul>
-</div>
+</aside>
+{% endif %}
\r
Most of these elements are styled by browsers with few modifications on our part.\r
\r
+## Footnotes\r
+\r
+Footnotes are supported as part of the Markdown syntax. Here's one in action. Clicking this number[^fn-sample_footnote] will lead you to a footnote. The syntax looks like:\r
+\r
+{% highlight text %}\r
+Clicking this number[^fn-sample_footnote]\r
+{% endhighlight %}\r
+\r
+Each footnote needs the `^fn-` prefix and a unique ID to be referenced for the footnoted content. The syntax for that list looks something like this:\r
+\r
+{% highlight text %}\r
+[^fn-sample_footnote]: Handy! Now click the return link to go back.\r
+{% endhighlight %}\r
+\r
+You can place the footnoted content wherever you like. Markdown parsers should properly place it at the bottom of the post.\r
+\r
## Heading\r
\r
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.\r
\r
### Code\r
\r
-Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus.\r
+Inline code is available with the `<code>` element. Snippets of multiple lines of code are supported through Pygments. Longer lines will automatically scroll horizontally when needed.\r
\r
{% highlight js %}\r
// Example can be run directly in your JavaScript console\r
// > 8\r
{% endhighlight %}\r
\r
+You may also optionally show code snippets with line numbers. Add `linenos` to the Pygments tags.\r
+\r
+{% highlight js linenos %}\r
+// Example can be run directly in your JavaScript console\r
+\r
+// Create a function that takes two arguments and returns the sum of those arguments\r
+var adder = new Function("a", "b", "return a + b");\r
+\r
+// Call the function\r
+adder(2, 6);\r
+// > 8\r
+{% endhighlight %}\r
+\r
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.\r
\r
### Gists via GitHub Pages\r
\r
Vestibulum id ligula porta felis euismod semper. Nullam quis risus eget urna mollis ornare vel eu leo. Donec sed odio dui.\r
\r
-{% gist 5555251 gist.md %}\r
+{% gist 13f94b734a4ddb132735 gist.md %}\r
\r
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam quis risus eget urna mollis ornare vel eu leo. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec sed odio dui. Vestibulum id ligula porta felis euismod semper.\r
\r
-----\r
\r
Want to see something else added? <a href="https://github.com/poole/poole/issues/new">Open an issue.</a>\r
+\r
+[^fn-sample_footnote]: Handy! Now click the return link to go back.\r
\r
Poole is a streamlined Jekyll site designed and built as a foundation for building more meaningful themes. Poole, and every theme built on it, includes the following:\r
\r
-* Complete Jekyll setup included (layouts, config, [404](/404.html), [RSS feed](/atom.xml), posts, and [example page](/about))\r
+* Complete Jekyll setup included (layouts, config, [404]({{ site.baseurl }}/404.html), [RSS feed]({{ site.baseurl }}/atom.xml), posts, and [example page]({{ site.baseurl }}/about))\r
* Mobile friendly design and development\r
* Easily scalable text and component sizing with `rem` units in the CSS\r
* Support for a wide gamut of HTML elements\r
\r
### Browser support\r
\r
-Poole and it's themes are 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.\r
+Poole and its themes are 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.\r
\r
### Download\r
\r
--- /dev/null
+// Body resets
+//
+// Update the foundational and global aspects of the page.
+
+* {
+ -webkit-box-sizing: border-box;
+ -moz-box-sizing: border-box;
+ box-sizing: border-box;
+}
+
+html,
+body {
+ margin: 0;
+ padding: 0;
+}
+
+html {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 16px;
+ line-height: 1.5;
+
+ @media (min-width: 38em) {
+ font-size: 18px;
+ }
+}
+
+body {
+ color: #515151;
+ background-color: #fff;
+ -webkit-text-size-adjust: 100%;
+ -ms-text-size-adjust: 100%;
+}
+
+// No `:visited` state is required by default (browsers will use `a`)
+a {
+ color: #268bd2;
+ text-decoration: none;
+
+ // `:focus` is linked to `:hover` for basic accessibility
+ &:hover,
+ &:focus {
+ text-decoration: underline;
+ }
+
+ strong {
+ color: inherit;
+ }
+}
+
+img {
+ display: block;
+ max-width: 100%;
+ margin: 0 0 1rem;
+ border-radius: 5px;
+}
+
+table {
+ margin-bottom: 1rem;
+ width: 100%;
+ font-size: 85%;
+ border: 1px solid #e5e5e5;
+ border-collapse: collapse;
+}
+
+td,
+th {
+ padding: .25rem .5rem;
+ border: 1px solid #e5e5e5;
+}
+
+th {
+ text-align: left;
+}
+
+tbody tr:nth-child(odd) td,
+tbody tr:nth-child(odd) th {
+ background-color: #f9f9f9;
+}
--- /dev/null
+// Code
+//
+// Inline and block-level code snippets. Includes tweaks to syntax highlighted
+// snippets from Pygments/Rouge and Gist embeds.
+
+code,
+pre {
+ font-family: Menlo, Monaco, "Courier New", monospace;
+}
+
+code {
+ padding: .25em .5em;
+ font-size: 85%;
+ color: #bf616a;
+ background-color: #f9f9f9;
+ border-radius: 3px;
+}
+
+pre {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+pre code {
+ padding: 0;
+ font-size: 100%;
+ color: inherit;
+ background-color: transparent;
+}
+
+// Pygments via Jekyll
+.highlight {
+ padding: 1rem;
+ margin-bottom: 1rem;
+ font-size: .8rem;
+ line-height: 1.4;
+ background-color: #f9f9f9;
+ border-radius: .25rem;
+
+ pre {
+ margin-bottom: 0;
+ overflow-x: auto;
+ }
+
+ .lineno {
+ display: inline-block; // Ensures the null space also isn't selectable
+ padding-right: .75rem;
+ padding-left: .25rem;
+ color: #999;
+ // Make sure numbers aren't selectable
+ -webkit-user-select: none;
+ -moz-user-select: none;
+ user-select: none;
+ }
+}
+
+
+// Gist via GitHub Pages
+// .gist .gist-file {
+// font-family: Menlo, Monaco, "Courier New", monospace !important;
+// }
+// .gist .markdown-body {
+// padding: 15px;
+// }
+// .gist pre {
+// padding: 0;
+// background-color: transparent;
+// }
+// .gist .gist-file .gist-data {
+// font-size: .8rem !important;
+// line-height: 1.4;
+// }
+// .gist code {
+// padding: 0;
+// color: inherit;
+// background-color: transparent;
+// border-radius: 0;
+// }
--- /dev/null
+// Layout
+//
+// Styles for managing the structural hierarchy of the site.
+
+.container {
+ max-width: 38rem;
+ padding-left: 1.5rem;
+ padding-right: 1.5rem;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+footer {
+ margin-bottom: 2rem;
+}
--- /dev/null
+// Masthead
+//
+// Super small header above the content for site name and short description.
+
+.masthead {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ margin-bottom: 3rem;
+}
+
+.masthead-title {
+ margin-top: 0;
+ margin-bottom: 0;
+ color: #505050;
+
+ a {
+ color: #505050;
+ }
+
+ small {
+ font-size: 75%;
+ font-weight: 400;
+ color: #c0c0c0;
+ letter-spacing: 0;
+ }
+}
--- /dev/null
+// Messages
+//
+// Show alert messages to users. You may add it to single elements like a `<p>`,
+// or to a parent if there are multiple elements to show.
+
+.message {
+ margin-bottom: 1rem;
+ padding: 1rem;
+ color: #717171;
+ background-color: #f9f9f9;
+}
--- /dev/null
+// Pagination
+//
+// Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
+// there are no more previous or next posts to show.
+
+.pagination {
+ overflow: hidden; // clearfix
+ margin: 0 -1.5rem 1rem;
+ font-family: "PT Sans", Helvetica, Arial, sans-serif;
+ color: #ccc;
+ text-align: center;
+}
+
+// Pagination items can be `span`s or `a`s
+.pagination-item {
+ display: block;
+ padding: 1rem;
+ border: solid #eee;
+ border-width: 1px 0;
+
+ &:first-child {
+ margin-bottom: -1px;
+ }
+}
+
+// Only provide a hover state for linked pagination items
+a.pagination-item:hover {
+ background-color: #f5f5f5;
+}
+
+@media (min-width: 30em) {
+ .pagination {
+ margin: 3rem 0;
+ }
+
+ .pagination-item {
+ float: left;
+ width: 50%;
+ border-width: 1px;
+
+ &:first-child {
+ margin-bottom: 0;
+ border-top-left-radius: 4px;
+ border-bottom-left-radius: 4px;
+ }
+ &:last-child {
+ margin-left: -1px;
+ border-top-right-radius: 4px;
+ border-bottom-right-radius: 4px;
+ }
+ }
+}
--- /dev/null
+// Posts and pages
+//
+// Each post is wrapped in `.post` and is used on default and post layouts. Each
+// page is wrapped in `.page` and is only used on the page layout.
+
+.page,
+.post {
+ margin-bottom: 4em;
+}
+
+// Blog post or page title
+.page-title,
+.post-title,
+.post-title a {
+ color: #303030;
+}
+.page-title,
+.post-title {
+ margin-top: 0;
+}
+
+// Meta data line below post title
+.post-date {
+ display: block;
+ margin-top: -.5rem;
+ margin-bottom: 1rem;
+ color: #9a9a9a;
+}
+
+
+// Related posts
+.related {
+ padding-top: 2rem;
+ padding-bottom: 2rem;
+ border-top: 1px solid #eee;
+}
+
+.related-posts {
+ padding-left: 0;
+ list-style: none;
+
+ h3 {
+ margin-top: 0;
+ }
+
+ li {
+ small {
+ font-size: 75%;
+ color: #999;
+ }
+
+ a:hover {
+ color: #268bd2;
+ text-decoration: none;
+
+ small {
+ color: inherit;
+ }
+ }
+ }
+}
--- /dev/null
+.highlight .hll { background-color: #ffc; }
+.highlight .c { color: #999; } /* Comment */
+.highlight .err { color: #a00; background-color: #faa } /* Error */
+.highlight .k { color: #069; } /* Keyword */
+.highlight .o { color: #555 } /* Operator */
+.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
+.highlight .cp { color: #099 } /* Comment.Preproc */
+.highlight .c1 { color: #999; } /* Comment.Single */
+.highlight .cs { color: #999; } /* Comment.Special */
+.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
+.highlight .ge { font-style: italic } /* Generic.Emph */
+.highlight .gr { color: #f00 } /* Generic.Error */
+.highlight .gh { color: #030; } /* Generic.Heading */
+.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
+.highlight .go { color: #aaa } /* Generic.Output */
+.highlight .gp { color: #009; } /* Generic.Prompt */
+.highlight .gs { } /* Generic.Strong */
+.highlight .gu { color: #030; } /* Generic.Subheading */
+.highlight .gt { color: #9c6 } /* Generic.Traceback */
+.highlight .kc { color: #069; } /* Keyword.Constant */
+.highlight .kd { color: #069; } /* Keyword.Declaration */
+.highlight .kn { color: #069; } /* Keyword.Namespace */
+.highlight .kp { color: #069 } /* Keyword.Pseudo */
+.highlight .kr { color: #069; } /* Keyword.Reserved */
+.highlight .kt { color: #078; } /* Keyword.Type */
+.highlight .m { color: #f60 } /* Literal.Number */
+.highlight .s { color: #d44950 } /* Literal.String */
+.highlight .na { color: #4f9fcf } /* Name.Attribute */
+.highlight .nb { color: #366 } /* Name.Builtin */
+.highlight .nc { color: #0a8; } /* Name.Class */
+.highlight .no { color: #360 } /* Name.Constant */
+.highlight .nd { color: #99f } /* Name.Decorator */
+.highlight .ni { color: #999; } /* Name.Entity */
+.highlight .ne { color: #c00; } /* Name.Exception */
+.highlight .nf { color: #c0f } /* Name.Function */
+.highlight .nl { color: #99f } /* Name.Label */
+.highlight .nn { color: #0cf; } /* Name.Namespace */
+.highlight .nt { color: #2f6f9f; } /* Name.Tag */
+.highlight .nv { color: #033 } /* Name.Variable */
+.highlight .ow { color: #000; } /* Operator.Word */
+.highlight .w { color: #bbb } /* Text.Whitespace */
+.highlight .mf { color: #f60 } /* Literal.Number.Float */
+.highlight .mh { color: #f60 } /* Literal.Number.Hex */
+.highlight .mi { color: #f60 } /* Literal.Number.Integer */
+.highlight .mo { color: #f60 } /* Literal.Number.Oct */
+.highlight .sb { color: #c30 } /* Literal.String.Backtick */
+.highlight .sc { color: #c30 } /* Literal.String.Char */
+.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
+.highlight .s2 { color: #c30 } /* Literal.String.Double */
+.highlight .se { color: #c30; } /* Literal.String.Escape */
+.highlight .sh { color: #c30 } /* Literal.String.Heredoc */
+.highlight .si { color: #a00 } /* Literal.String.Interpol */
+.highlight .sx { color: #c30 } /* Literal.String.Other */
+.highlight .sr { color: #3aa } /* Literal.String.Regex */
+.highlight .s1 { color: #c30 } /* Literal.String.Single */
+.highlight .ss { color: #fc3 } /* Literal.String.Symbol */
+.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
+.highlight .vc { color: #033 } /* Name.Variable.Class */
+.highlight .vg { color: #033 } /* Name.Variable.Global */
+.highlight .vi { color: #033 } /* Name.Variable.Instance */
+.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
+
+.css .o,
+.css .o + .nt,
+.css .nt + .nt { color: #999; }
--- /dev/null
+// Typography
+//
+// Headings, body text, lists, and other misc typographic elements.
+
+h1, h2, h3, h4, h5, h6 {
+ margin-bottom: .5rem;
+ font-weight: bold;
+ line-height: 1.25;
+ color: #313131;
+ text-rendering: optimizeLegibility;
+}
+
+h1 {
+ font-size: 2rem;
+}
+
+h2 {
+ margin-top: 1rem;
+ font-size: 1.5rem;
+}
+
+h3 {
+ margin-top: 1.5rem;
+ font-size: 1.25rem;
+}
+
+h4, h5, h6 {
+ margin-top: 1rem;
+ font-size: 1rem;
+}
+
+p {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+strong {
+ color: #303030;
+}
+
+ul, ol, dl {
+ margin-top: 0;
+ margin-bottom: 1rem;
+}
+
+dt {
+ font-weight: bold;
+}
+
+dd {
+ margin-bottom: .5rem;
+}
+
+hr {
+ position: relative;
+ margin: 1.5rem 0;
+ border: 0;
+ border-top: 1px solid #eee;
+ border-bottom: 1px solid #fff;
+}
+
+abbr {
+ font-size: 85%;
+ font-weight: bold;
+ color: #555;
+ text-transform: uppercase;
+
+ &[title] {
+ cursor: help;
+ border-bottom: 1px dotted #e5e5e5;
+ }
+}
+
+blockquote {
+ padding: .5rem 1rem;
+ margin: .8rem 0;
+ color: #7a7a7a;
+ border-left: .25rem solid #e5e5e5;
+
+ p:last-child {
+ margin-bottom: 0;
+ }
+
+ @media (min-width: 30em) {
+ padding-right: 5rem;
+ padding-left: 1.25rem;
+ }
+}
+
+
+// Markdown footnotes
+//
+// See the example content post for an example.
+
+// Footnote number within body text
+a[href^="#fn:"],
+// Back to footnote link
+a[href^="#fnref:"] {
+ display: inline-block;
+ margin-left: .1rem;
+ font-weight: bold;
+}
+
+// List of footnotes
+.footnotes {
+ margin-top: 2rem;
+ font-size: 85%;
+}
+
+// Custom type
+//
+// Extend paragraphs with `.lead` for larger introductory text.
+
+.lead {
+ font-size: 1.25rem;
+ font-weight: 300;
+}
<feed xmlns="http://www.w3.org/2005/Atom">
<title>{{ site.title }}</title>
- <link href="{{ site.url }}{{ site.baseurl }}atom.xml" rel="self"/>
- <link href="{{ site.url }}{{ site.baseurl }}"/>
+ <link href="{{ site.url }}{{ site.baseurl }}/atom.xml" rel="self"/>
+ <link href="{{ site.url }}{{ site.baseurl }}/"/>
<updated>{{ site.time | date_to_xmlschema }}</updated>
<id>{{ site.url }}</id>
<author>
<div class="posts">
{% for post in paginator.posts %}
- <div class="post">
+ <article class="post">
<h1 class="post-title">
- <a href="{{ post.url }}">
+ <a href="{{ site.baseurl }}{{ post.url }}">
{{ post.title }}
</a>
</h1>
- <span class="post-date">{{ post.date | date_to_string }}</span>
+ <time datetime="{{ post.date | date_to_xmlschema }}" class="post-date">{{ post.date | date_to_string }}</time>
{{ post.content }}
- </div>
+ </article>
{% endfor %}
</div>
<div class="pagination">
{% if paginator.next_page %}
- <a class="pagination-item older" href="{{ site.baseurl }}page{{paginator.next_page}}">Older</a>
+ <a class="pagination-item older" href="{{ paginator.next_page_path | prepend: site.baseurl }}">Older</a>
{% else %}
<span class="pagination-item older">Older</span>
{% endif %}
{% if paginator.previous_page %}
- {% if paginator.page == 2 %}
- <a class="pagination-item newer" href="{{ site.baseurl }}">Newer</a>
- {% else %}
- <a class="pagination-item newer" href="{{ site.baseurl }}page{{paginator.previous_page}}">Newer</a>
- {% endif %}
+ <a class="pagination-item newer" href="{{ paginator.previous_page_path | prepend: site.baseurl }}">Newer</a>
{% else %}
<span class="pagination-item newer">Newer</span>
{% endif %}
+++ /dev/null
-/*
- * ___
- * /\_ \
- * _____ ___ ___\//\ \ __
- * /\ '__`\ / __`\ / __`\\ \ \ /'__`\
- * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
- * \ \ ,__/\ \____/\ \____//\____\ \____\
- * \ \ \/ \/___/ \/___/ \/____/\/____/
- * \ \_\
- * \/_/
- *
- * Designed, built, and released under MIT license by @mdo. Learn more at
- * https://github.com/poole/poole.
- */
-
-
-/*
- * Contents
- *
- * Body resets
- * Custom type
- * Messages
- * Container
- * Masthead
- * Posts and pages
- * Pagination
- * Reverse layout
- * Themes
- */
-
-
-/*
- * Body resets
- *
- * Update the foundational and global aspects of the page.
- */
-
-* {
- -webkit-box-sizing: border-box;
- -moz-box-sizing: border-box;
- box-sizing: border-box;
-}
-
-html,
-body {
- margin: 0;
- padding: 0;
-}
-
-html {
- font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
- font-size: 16px;
- line-height: 1.5;
-}
-@media (min-width: 38em) {
- html {
- font-size: 20px;
- }
-}
-
-body {
- color: #515151;
- background-color: #fff;
- -webkit-text-size-adjust: 100%;
- -ms-text-size-adjust: 100%;
-}
-
-/* No `:visited` state is required by default (browsers will use `a`) */
-a {
- color: #268bd2;
- text-decoration: none;
-}
-a strong {
- color: inherit;
-}
-/* `:focus` is linked to `:hover` for basic accessibility */
-a:hover,
-a:focus {
- text-decoration: underline;
-}
-
-/* Headings */
-h1, h2, h3, h4, h5, h6 {
- margin-bottom: .5rem;
- font-weight: bold;
- line-height: 1.25;
- color: #313131;
- text-rendering: optimizeLegibility;
-}
-h1 {
- font-size: 2rem;
-}
-h2 {
- margin-top: 1rem;
- font-size: 1.5rem;
-}
-h3 {
- margin-top: 1.5rem;
- font-size: 1.25rem;
-}
-h4, h5, h6 {
- margin-top: 1rem;
- font-size: 1rem;
-}
-
-/* Body text */
-p {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-strong {
- color: #303030;
-}
-
-
-/* Lists */
-ul, ol, dl {
- margin-top: 0;
- margin-bottom: 1rem;
-}
-
-dt {
- font-weight: bold;
-}
-dd {
- margin-bottom: .5rem;
-}
-
-/* Misc */
-hr {
- position: relative;
- margin: 1.5rem 0;
- border: 0;
- border-top: 1px solid #eee;
- border-bottom: 1px solid #fff;
-}
-
-abbr {
- font-size: 85%;
- font-weight: bold;
- color: #555;
- text-transform: uppercase;
-}
-abbr[title] {
- cursor: help;
- border-bottom: 1px dotted #e5e5e5;
-}
-
-/* Code */
-code,
-pre {
- font-family: Menlo, Monaco, "Courier New", monospace;
-}
-code {
- padding: .25em .5em;
- font-size: 85%;
- color: #bf616a;
- background-color: #f9f9f9;
- border-radius: 3px;
-}
-pre {
- display: block;
- margin-top: 0;
- margin-bottom: 1rem;
- padding: 1rem;
- font-size: .8rem;
- line-height: 1.4;
- white-space: pre;
- white-space: pre-wrap;
- word-break: break-all;
- word-wrap: break-word;
- background-color: #f9f9f9;
-}
-pre code {
- padding: 0;
- font-size: 100%;
- color: inherit;
- background-color: transparent;
-}
-
-/* Pygments via Jekyll */
-.highlight {
- margin-bottom: 1rem;
- border-radius: 4px;
-}
-.highlight pre {
- margin-bottom: 0;
-}
-
-/* Gist via GitHub Pages */
-.gist .gist-file {
- font-family: Menlo, Monaco, "Courier New", monospace !important;
-}
-.gist .markdown-body {
- padding: 15px;
-}
-.gist pre {
- padding: 0;
- background-color: transparent;
-}
-.gist .gist-file .gist-data {
- font-size: .8rem !important;
- line-height: 1.4;
-}
-.gist code {
- padding: 0;
- color: inherit;
- background-color: transparent;
- border-radius: 0;
-}
-
-/* Quotes */
-blockquote {
- padding: .5rem 1rem;
- margin: .8rem 0;
- color: #7a7a7a;
- border-left: .25rem solid #e5e5e5;
-}
-blockquote p:last-child {
- margin-bottom: 0;
-}
-@media (min-width: 30em) {
- blockquote {
- padding-right: 5rem;
- padding-left: 1.25rem;
- }
-}
-
-img {
- display: block;
- max-width: 100%;
- margin: 0 0 1rem;
- border-radius: 5px;
-}
-
-/* Tables */
-table {
- margin-bottom: 1rem;
- width: 100%;
- border: 1px solid #e5e5e5;
- border-collapse: collapse;
-}
-td,
-th {
- padding: .25rem .5rem;
- border: 1px solid #e5e5e5;
-}
-tbody tr:nth-child(odd) td,
-tbody tr:nth-child(odd) th {
- background-color: #f9f9f9;
-}
-
-
-/*
- * Custom type
- *
- * Extend paragraphs with `.lead` for larger introductory text.
- */
-
-.lead {
- font-size: 1.25rem;
- font-weight: 300;
-}
-
-
-/*
- * Messages
- *
- * Show alert messages to users. You may add it to single elements like a `<p>`,
- * or to a parent if there are multiple elements to show.
- */
-
-.message {
- margin-bottom: 1rem;
- padding: 1rem;
- color: #717171;
- background-color: #f9f9f9;
-}
-
-
-/*
- * Container
- *
- * Center the page content.
- */
-
-.container {
- max-width: 38rem;
- padding-left: 1rem;
- padding-right: 1rem;
- margin-left: auto;
- margin-right: auto;
-}
-
-
-/*
- * Masthead
- *
- * Super small header above the content for site name and short description.
- */
-
-.masthead {
- padding-top: 1rem;
- padding-bottom: 1rem;
- margin-bottom: 3rem;
-}
-.masthead-title {
- margin-top: 0;
- margin-bottom: 0;
- color: #505050;
-}
-.masthead-title a {
- color: #505050;
-}
-.masthead-title small {
- font-size: 75%;
- font-weight: 400;
- color: #c0c0c0;
- letter-spacing: 0;
-}
-
-
-/*
- * Posts and pages
- *
- * Each post is wrapped in `.post` and is used on default and post layouts. Each
- * page is wrapped in `.page` and is only used on the page layout.
- */
-
-.page,
-.post {
- margin-bottom: 4em;
-}
-
-/* Blog post or page title */
-.page-title,
-.post-title,
-.post-title a {
- color: #303030;
-}
-.page-title,
-.post-title {
- margin-top: 0;
-}
-
-/* Meta data line below post title */
-.post-date {
- display: block;
- margin-top: -.5rem;
- margin-bottom: 1rem;
- color: #9a9a9a;
-}
-
-/* Related posts */
-.related {
- padding-top: 2rem;
- padding-bottom: 2rem;
- border-top: 1px solid #eee;
-}
-.related-posts {
- padding-left: 0;
- list-style: none;
-}
-.related-posts h3 {
- margin-top: 0;
-}
-.related-posts li small {
- font-size: 75%;
- color: #999;
-}
-.related-posts li a:hover {
- color: #268bd2;
- text-decoration: none;
-}
-.related-posts li a:hover small {
- color: inherit;
-}
-
-
-/*
- * Pagination
- *
- * Super lightweight (HTML-wise) blog pagination. `span`s are provide for when
- * there are no more previous or next posts to show.
- */
-
-.pagination {
- overflow: hidden; /* clearfix */
- margin-left: -1rem;
- margin-right: -1rem;
- font-family: "PT Sans", Helvetica, Arial, sans-serif;
- color: #ccc;
- text-align: center;
-}
-
-/* Pagination items can be `span`s or `a`s */
-.pagination-item {
- display: block;
- padding: 1rem;
- border: 1px solid #eee;
-}
-.pagination-item:first-child {
- margin-bottom: -1px;
-}
-
-/* Only provide a hover state for linked pagination items */
-a.pagination-item:hover {
- background-color: #f5f5f5;
-}
-
-@media (min-width: 30em) {
- .pagination {
- margin: 3rem 0;
- }
- .pagination-item {
- float: left;
- width: 50%;
- }
- .pagination-item:first-child {
- margin-bottom: 0;
- border-top-left-radius: 4px;
- border-bottom-left-radius: 4px;
- }
- .pagination-item:last-child {
- margin-left: -1px;
- border-top-right-radius: 4px;
- border-bottom-right-radius: 4px;
- }
-}
+++ /dev/null
-.highlight .hll { background-color: #ffc; }
-.highlight .c { color: #999; } /* Comment */
-.highlight .err { color: #a00; background-color: #faa } /* Error */
-.highlight .k { color: #069; } /* Keyword */
-.highlight .o { color: #555 } /* Operator */
-.highlight .cm { color: #09f; font-style: italic } /* Comment.Multiline */
-.highlight .cp { color: #099 } /* Comment.Preproc */
-.highlight .c1 { color: #999; } /* Comment.Single */
-.highlight .cs { color: #999; } /* Comment.Special */
-.highlight .gd { background-color: #fcc; border: 1px solid #c00 } /* Generic.Deleted */
-.highlight .ge { font-style: italic } /* Generic.Emph */
-.highlight .gr { color: #f00 } /* Generic.Error */
-.highlight .gh { color: #030; } /* Generic.Heading */
-.highlight .gi { background-color: #cfc; border: 1px solid #0c0 } /* Generic.Inserted */
-.highlight .go { color: #aaa } /* Generic.Output */
-.highlight .gp { color: #009; } /* Generic.Prompt */
-.highlight .gs { } /* Generic.Strong */
-.highlight .gu { color: #030; } /* Generic.Subheading */
-.highlight .gt { color: #9c6 } /* Generic.Traceback */
-.highlight .kc { color: #069; } /* Keyword.Constant */
-.highlight .kd { color: #069; } /* Keyword.Declaration */
-.highlight .kn { color: #069; } /* Keyword.Namespace */
-.highlight .kp { color: #069 } /* Keyword.Pseudo */
-.highlight .kr { color: #069; } /* Keyword.Reserved */
-.highlight .kt { color: #078; } /* Keyword.Type */
-.highlight .m { color: #f60 } /* Literal.Number */
-.highlight .s { color: #d44950 } /* Literal.String */
-.highlight .na { color: #4f9fcf } /* Name.Attribute */
-.highlight .nb { color: #366 } /* Name.Builtin */
-.highlight .nc { color: #0a8; } /* Name.Class */
-.highlight .no { color: #360 } /* Name.Constant */
-.highlight .nd { color: #99f } /* Name.Decorator */
-.highlight .ni { color: #999; } /* Name.Entity */
-.highlight .ne { color: #c00; } /* Name.Exception */
-.highlight .nf { color: #c0f } /* Name.Function */
-.highlight .nl { color: #99f } /* Name.Label */
-.highlight .nn { color: #0cf; } /* Name.Namespace */
-.highlight .nt { color: #2f6f9f; } /* Name.Tag */
-.highlight .nv { color: #033 } /* Name.Variable */
-.highlight .ow { color: #000; } /* Operator.Word */
-.highlight .w { color: #bbb } /* Text.Whitespace */
-.highlight .mf { color: #f60 } /* Literal.Number.Float */
-.highlight .mh { color: #f60 } /* Literal.Number.Hex */
-.highlight .mi { color: #f60 } /* Literal.Number.Integer */
-.highlight .mo { color: #f60 } /* Literal.Number.Oct */
-.highlight .sb { color: #c30 } /* Literal.String.Backtick */
-.highlight .sc { color: #c30 } /* Literal.String.Char */
-.highlight .sd { color: #c30; font-style: italic } /* Literal.String.Doc */
-.highlight .s2 { color: #c30 } /* Literal.String.Double */
-.highlight .se { color: #c30; } /* Literal.String.Escape */
-.highlight .sh { color: #c30 } /* Literal.String.Heredoc */
-.highlight .si { color: #a00 } /* Literal.String.Interpol */
-.highlight .sx { color: #c30 } /* Literal.String.Other */
-.highlight .sr { color: #3aa } /* Literal.String.Regex */
-.highlight .s1 { color: #c30 } /* Literal.String.Single */
-.highlight .ss { color: #fc3 } /* Literal.String.Symbol */
-.highlight .bp { color: #366 } /* Name.Builtin.Pseudo */
-.highlight .vc { color: #033 } /* Name.Variable.Class */
-.highlight .vg { color: #033 } /* Name.Variable.Global */
-.highlight .vi { color: #033 } /* Name.Variable.Instance */
-.highlight .il { color: #f60 } /* Literal.Number.Integer.Long */
-
-.css .o,
-.css .o + .nt,
-.css .nt + .nt { color: #999; }
--- /dev/null
+---
+# Use a comment to ensure Jekyll reads the file to be transformed into CSS later
+# only main files contain this front matter, not partials.
+---
+
+//
+// ___
+// /\_ \
+// _____ ___ ___\//\ \ __
+// /\ '__`\ / __`\ / __`\\ \ \ /'__`\
+// \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/
+// \ \ ,__/\ \____/\ \____//\____\ \____\
+// \ \ \/ \/___/ \/___/ \/____/\/____/
+// \ \_\
+// \/_/
+//
+// Designed, built, and released under MIT license by @mdo. Learn more at
+// https://github.com/poole/poole.
+
+@import "base";
+@import "type";
+@import "syntax";
+@import "code";
+@import "layout";
+@import "masthead";
+@import "posts";
+@import "pagination";
+@import "message";
projects / blog / commitdiff