diff --git a/.gitignore b/.gitignore index 10c58cf685c..33c0adbab2d 100644 --- a/.gitignore +++ b/.gitignore @@ -2,6 +2,7 @@ _gh_pages _site .ruby-version +.sass-cache # Numerous always-ignore extensions *.diff diff --git a/404.html b/404.html index 9703ba819b7..4bf3f7d8fca 100644 --- a/404.html +++ b/404.html @@ -6,5 +6,5 @@

404: Page not found

-

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

+

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Head back home to try finding it again.

diff --git a/_config.yml b/_config.yml index 3e2f2432dd5..04a81e0cbaa 100644 --- a/_config.yml +++ b/_config.yml @@ -1,26 +1,31 @@ -# 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: Hyde -tagline: 'A Jekyll theme' -description: 'A brazen two-column Jekyll theme that pairs a prominent sidebar with uncomplicated content. Made by @mdo.' -url: http://hyde.getpoole.com -baseurl: / +title: Hyde +tagline: A Jekyll theme +description: 'A brazen two-column Jekyll theme that pairs a prominent sidebar with uncomplicated content. Made by @mdo.' +url: http://hyde.getpoole.com +paginate: 1 +baseurl: "" -author: - name: 'Mark Otto' - url: https://twitter.com/mdo +# Assets +# +# We specify the directory for Jekyll so we can use @imports. +sass: + sass_dir: _sass + style: :compressed -paginate: 5 +# About/contact +author: + name: Mark Otto + url: https://twitter.com/mdo + email: markdotto@gmail.com # Custom vars -version: 2.1.0 - +version: 3.0.0 github: - repo: https://github.com/poole/hyde + repo: https://github.com/poole/hyde diff --git a/_includes/head.html b/_includes/head.html index e2b070e242a..556bcf79d24 100644 --- a/_includes/head.html +++ b/_includes/head.html @@ -1,10 +1,9 @@ + - - - + {% if page.title == "Home" %} @@ -15,15 +14,13 @@ - - - + - - + + - + diff --git a/_layouts/default.html b/_layouts/default.html index c99f6e636a2..ed3e1ac9178 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -1,5 +1,5 @@ - + {% include head.html %} @@ -7,9 +7,9 @@ {% include sidebar.html %} -
+
{{ content }} -
+ diff --git a/_layouts/page.html b/_layouts/page.html index 4e0d4ebf09e..960f76780ca 100644 --- a/_layouts/page.html +++ b/_layouts/page.html @@ -2,7 +2,7 @@ layout: default --- -
+

{{ page.title }}

{{ content }} -
+ diff --git a/_layouts/post.html b/_layouts/post.html index 2a6c7c1d9d3..ec63afc10d7 100644 --- a/_layouts/post.html +++ b/_layouts/post.html @@ -2,24 +2,26 @@ layout: default --- -
+

{{ page.title }}

- {{ page.date | date_to_string }} + {{ content }} -
+ -
+{% if site.related_posts != empty %} +
+ +{% endif %} diff --git a/_sass/_base.scss b/_sass/_base.scss new file mode 100644 index 00000000000..4b0626a2baa --- /dev/null +++ b/_sass/_base.scss @@ -0,0 +1,78 @@ +// 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; +} diff --git a/_sass/_code.scss b/_sass/_code.scss new file mode 100644 index 00000000000..21a9e5ea36d --- /dev/null +++ b/_sass/_code.scss @@ -0,0 +1,78 @@ +// 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; +// } diff --git a/public/css/hyde.css b/_sass/_hyde.scss similarity index 100% rename from public/css/hyde.css rename to _sass/_hyde.scss diff --git a/_sass/_layout.scss b/_sass/_layout.scss new file mode 100644 index 00000000000..2a272698bd5 --- /dev/null +++ b/_sass/_layout.scss @@ -0,0 +1,15 @@ +// 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; +} diff --git a/_sass/_masthead.scss b/_sass/_masthead.scss new file mode 100644 index 00000000000..34306f5b29c --- /dev/null +++ b/_sass/_masthead.scss @@ -0,0 +1,26 @@ +// 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; + } +} diff --git a/_sass/_message.scss b/_sass/_message.scss new file mode 100644 index 00000000000..42bf2e5b644 --- /dev/null +++ b/_sass/_message.scss @@ -0,0 +1,11 @@ +// Messages +// +// Show alert messages to users. You may add it to single elements like a `

`, +// or to a parent if there are multiple elements to show. + +.message { + margin-bottom: 1rem; + padding: 1rem; + color: #717171; + background-color: #f9f9f9; +} diff --git a/_sass/_pagination.scss b/_sass/_pagination.scss new file mode 100644 index 00000000000..4308134a406 --- /dev/null +++ b/_sass/_pagination.scss @@ -0,0 +1,52 @@ +// 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; + } + } +} diff --git a/_sass/_posts.scss b/_sass/_posts.scss new file mode 100644 index 00000000000..5acf2780424 --- /dev/null +++ b/_sass/_posts.scss @@ -0,0 +1,61 @@ +// 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; + } + } + } +} diff --git a/public/css/syntax.css b/_sass/_syntax.scss similarity index 100% rename from public/css/syntax.css rename to _sass/_syntax.scss diff --git a/_sass/_type.scss b/_sass/_type.scss new file mode 100644 index 00000000000..290d1dbd673 --- /dev/null +++ b/_sass/_type.scss @@ -0,0 +1,117 @@ +// 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; +} diff --git a/about.md b/about.md index 9b2605bb4ce..7f90d43bf60 100644 --- a/about.md +++ b/about.md @@ -7,7 +7,7 @@ title: About Hey there! This page is included as an example. Feel free to customize it for your own use upon downloading. Carry on!

-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). +In the novel, *The Strange Case of Dr. Jekyll 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). There are currently two themes built on Poole: @@ -25,6 +25,6 @@ Some fun facts about the setup of this project include: * Coded with [Sublime Text 2](http://sublimetext.com), an amazing code editor * Designed and developed while listening to music like [Blood Bros Trilogy](https://soundcloud.com/maddecent/sets/blood-bros-series) -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). +Have questions or suggestions? Feel free to [open an issue on GitHub](https://github.com/poole/poole/issues/new) or [ask me on Twitter](https://twitter.com/mdo). Thanks for reading! diff --git a/atom.xml b/atom.xml index 96c9681c00b..bafc806e0a3 100644 --- a/atom.xml +++ b/atom.xml @@ -6,8 +6,8 @@ layout: null {{ site.title }} - - + + {{ site.time | date_to_xmlschema }} {{ site.url }} @@ -18,7 +18,7 @@ layout: null {% for post in site.posts %} {{ post.title }} - + {{ post.date | date_to_xmlschema }} {{ site.url }}{{ post.id }} {{ post.content | xml_escape }} diff --git a/index.html b/index.html index 743a0808990..012502c8262 100644 --- a/index.html +++ b/index.html @@ -5,33 +5,29 @@
{% for post in paginator.posts %} -
+

- + {{ post.title }}

- {{ post.date | date_to_string }} + {{ post.content }} -
+ {% endfor %}
\ No newline at end of file + diff --git a/public/apple-touch-icon-144-precomposed.png b/public/apple-touch-icon-precomposed.png similarity index 100% rename from public/apple-touch-icon-144-precomposed.png rename to public/apple-touch-icon-precomposed.png diff --git a/public/css/poole.css b/public/css/poole.css deleted file mode 100644 index 8ec27e7a844..00000000000 --- a/public/css/poole.css +++ /dev/null @@ -1,430 +0,0 @@ -/* - * ___ - * /\_ \ - * _____ ___ ___\//\ \ __ - * /\ '__`\ / __`\ / __`\\ \ \ /'__`\ - * \ \ \_\ \/\ \_\ \/\ \_\ \\_\ \_/\ __/ - * \ \ ,__/\ \____/\ \____//\____\ \____\ - * \ \ \/ \/___/ \/___/ \/____/\/____/ - * \ \_\ - * \/_/ - * - * 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 `

`, - * 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; - } -} diff --git a/styles.scss b/styles.scss new file mode 100644 index 00000000000..bcb16817c04 --- /dev/null +++ b/styles.scss @@ -0,0 +1,29 @@ +--- +# 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"; +@import "hyde";