diff --git a/.editorconfig b/.editorconfig new file mode 100644 index 00000000000..0b008c95741 --- /dev/null +++ b/.editorconfig @@ -0,0 +1,15 @@ +# editorconfig.org + +root = true + +[*] +indent_style = space +indent_size = 2 +end_of_line = lf +charset = utf-8 +trim_trailing_whitespace = true +insert_final_newline = true + +[*.py] +indent_style = space +indent_size = 4 diff --git a/.gitignore b/.gitignore new file mode 100644 index 00000000000..465cdb4633b --- /dev/null +++ b/.gitignore @@ -0,0 +1,42 @@ +# Ignore docs files +_gh_pages +_site +.ruby-version + +# Numerous always-ignore extensions +*.diff +*.err +*.orig +*.log +*.rej +*.swo +*.swp +*.zip +*.vi +*~ + +# OS or Editor folders +.DS_Store +._* +Thumbs.db +.cache +.project +.settings +.tmproj +*.esproj +nbproject +*.sublime-project +*.sublime-workspace +.idea + +# Komodo +*.komodoproject +.komodotools + +# grunt-html-validation +validation-status.json +validation-report.json + +# Folders to ignore +node_modules +bower_components diff --git a/404.html b/404.html new file mode 100644 index 00000000000..5b9d458935c --- /dev/null +++ b/404.html @@ -0,0 +1,57 @@ + + + + + + + + + Hyde, a Jekyll theme + + + + + + + + + + + + + + + +
+
+

Hyde

+

An elegant open source and mobile first theme for Jekyll. Made by @mdo.

+ +
+ +

© 2013. All rights reserved.

+
+ +
+
+ +
+
+

404: Page not found

+

Sorry, we've misplaced that URL or it's pointing to something that doesn't exist. Visit the home page to see if you can find it manually. Thanks!

+
+

Heads up!

+

This is a basic 404 page for use with GitHub Pages. It's source code is not generated by Jekyll.

+
+
+ + + diff --git a/CNAME b/CNAME new file mode 100644 index 00000000000..8b40d9270d2 --- /dev/null +++ b/CNAME @@ -0,0 +1 @@ +andhyde.com \ No newline at end of file diff --git a/LICENSE.md b/LICENSE.md new file mode 100644 index 00000000000..c344d146f49 --- /dev/null +++ b/LICENSE.md @@ -0,0 +1,9 @@ +# Released under MIT License + +Copyright (c) 2013 Mark Otto. + +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: + +The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. + +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. \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 00000000000..b68668dc38e --- /dev/null +++ b/README.md @@ -0,0 +1,69 @@ +# [Did](https://mdo.github.io/did) + +[Did](http://mdo.github.io/did) is a [Jekyll](http://jekyllrb.com) theme, designed and built by [@mdo](https://twitter.com/mdo). It's based on another theme, [Hyde](http://andhyde.com). Did is designed to showcase your content first and foremost. Navigation and extraneous information remains offscreen until the reader requests it. + +![Hyde screenshot](https://f.cloud.github.com/assets/98681/1330948/de10196c-353f-11e3-86d0-8e967dd95722.png) + +The name originates from a rather well-known, and unsurprisingly relevant, psychiatric condition, [dissociative identity disorder](http://en.wikipedia.org/wiki/Dissociative_identity_disorder). (Protip: It's just like Dr. Jekyll & Mr. Hyde.) + + +## Usage + +### 1. Install Jekyll + +Did is built for use with Jekyll, so naturally you'll need to install that. On Macs, it's rather straightforward: + +```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 places nicely with Jekyll. Read more about this [in the Jekyll docs](http://jekyllrb.com/docs/templates/#code_snippet_highlighting). + +### 2a. Quick start + +To help anyone with any level of familiarity with Jekyll quickly get started, Did includes everything you need for a basic Jekyll site. To that end, just download Did and start up Jekyll. + +### 2b. Roll your own Jekyll site + +Folks wishing to use Jekyll's templates and styles can do so with a little bit of manual labor. Download Did and then copy what you need (likely `_layouts/`, `*.html` files, `atom.xml` for RSS, and `public/` for CSS, JS, etc.). + +### 3. Running locally + +To see your Jekyll site with Did applied, start a Jekyll server. In Terminal, from `/did` (or whatever your Jekyll site's root directory is named): + +```bash +$ jekyll serve +``` + +Open in your browser, and voilà. You're done. + + +## Options + +Did includes a some customizable options, typically applied via classes on the `` element. + +### Reverse layout + +Reverse the page orientation with a single class. + +```html + + ... + +``` + + +## Author + +**Mark Otto** + + + + +## License + +Open sourced under the [MIT license](LICENSE.md). + +<3 diff --git a/_config.yml b/_config.yml new file mode 100644 index 00000000000..0f2637fb367 --- /dev/null +++ b/_config.yml @@ -0,0 +1,12 @@ +title: Did +tagline: 'A Jekyll theme, with personalities' +description: 'Did is a Jekyll theme with multiple personalities: the content, and the chrome. Made by @mdo.' +url: http://andhyde.com +version: 1.0.0 +author: + name: '' + email: '' +markdown: rdiscount +permalink: pretty +pygments: true +paginate: 5 diff --git a/_includes/head.html b/_includes/head.html new file mode 100644 index 00000000000..859874b3d6b --- /dev/null +++ b/_includes/head.html @@ -0,0 +1,25 @@ + + + + + + + {% if page.title %}{{ page.title }} · {% endif %} + {{ site.tagline }} + + + + + {% if page.layout == "focused" %} + + {% endif %} + + + + + + + + + + diff --git a/_layouts/default.html b/_layouts/default.html new file mode 100644 index 00000000000..e526d844ef2 --- /dev/null +++ b/_layouts/default.html @@ -0,0 +1,42 @@ + + + + {% include head.html %} + + + + + +
+ ☰ + ☰ + +
+

+ {{ site.title }} + {{ site.tagline }} +

+
+ +
+ {{ content }} +
+
+ + + diff --git a/_layouts/post.html b/_layouts/post.html new file mode 100644 index 00000000000..1a3e84ae196 --- /dev/null +++ b/_layouts/post.html @@ -0,0 +1,25 @@ +--- +layout: default +--- + +
+

{{ page.title }}

+ {{ page.date | date_to_string }} + {{ content }} +
+ +
+

Related Posts

+ +
diff --git a/_posts/2013-12-31-whats-jekyll.md b/_posts/2013-12-31-whats-jekyll.md new file mode 100644 index 00000000000..a6d28b59212 --- /dev/null +++ b/_posts/2013-12-31-whats-jekyll.md @@ -0,0 +1,12 @@ +--- +layout: post +title: What's Jekyll? +--- + +[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): + + > 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. + +It's an immensely useful tool and one we encourage you to use here with Hyde. + +Find out more by [visiting the project on GitHub](https://github.com/mojombo/jekyll). \ No newline at end of file diff --git a/_posts/2014-01-01-example-content.md b/_posts/2014-01-01-example-content.md new file mode 100644 index 00000000000..08642144d0f --- /dev/null +++ b/_posts/2014-01-01-example-content.md @@ -0,0 +1,55 @@ +--- +layout: post +title: Example content +--- + +This blog post shows a few different types of content that's supported and styled with Hyde. Basic typography, images, and code are all supported. + +----- + +Cum sociis natoque penatibus et magnis dis parturient montes, 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. + +> Curabitur blandit tempus porttitor. Nullam quis risus eget urna mollis ornare vel eu leo. Nullam id dolor id nibh ultricies vehicula ut id elit. + +Etiam porta **sem malesuada magna** mollis euismod. Cras mattis consectetur purus sit amet fermentum. Aenean lacinia bibendum nulla sed consectetur. + +## Heading + +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. + +### Sub-heading + +Cum sociis natoque penatibus et magnis dis `code element` montes, nascetur ridiculus mus. + +{% highlight js %} +// Example can be run directly in your JavaScript console + +// Create a function that takes two arguments and returns the sum of those arguments +var adder = new Function("a", "b", "return a + b"); + +// Call the function +adder(2, 6); +// > 8 +{% endhighlight %} + +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. + +### Sub-heading + +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. + +* Praesent commodo cursus magna, vel scelerisque nisl consectetur et. +* Donec id elit non mi porta gravida at eget metus. +* Nulla vitae elit libero, a pharetra augue. + +Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. + +1. Vestibulum id ligula porta felis euismod semper. +2. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. +3. Maecenas sed diam eget risus varius blandit sit amet non magna. + +Cras mattis consectetur purus sit amet fermentum. Sed posuere consectetur est at lobortis. + +----- + +Want to see something else added? Open an issue. \ No newline at end of file diff --git a/_posts/2014-01-02-hello-world.md b/_posts/2014-01-02-hello-world.md new file mode 100644 index 00000000000..646d8c90cc8 --- /dev/null +++ b/_posts/2014-01-02-hello-world.md @@ -0,0 +1,33 @@ +--- +layout: post +title: Introducing Did +--- + +[Did](http://mdo.github.io/did) is a [Jekyll](http://jekyllrb.com) theme, designed and built by [@mdo](https://twitter.com/mdo). It's based on another theme, [Hyde](http://andhyde.com). The name originates from a rather well-known, and unsurprisingly relevant, psychiatric condition. + +> Dissociative identity disorder (DID), also known as multiple personality disorder (MPD), is an extremely rare mental disorder characterized by at least two distinct and relatively enduring identities or dissociated personality states that alternately control a person's behavior. +> +> Source: http://en.wikipedia.org/wiki/Dissociative_identity_disorder. + +Did is designed to showcase your content first and foremost. Navigation and extraneous information remains offscreen until the reader requests it. Did is built mobile first, meaning it looks and behaves great on devices from phones to desktops. It ships with everything you need to start a new Jekyll project. Feel free to snag whatever you need to shoehorn Did into an existing Jekyll site, too. + +### Features + +* Complete Jekyll setup included (layouts, config, 404, RSS feed, posts, and page) +* Mobile friendly design and development +* Sliding sidebar (built with only CSS) +* Sidebar includes support for textual modules and a basic navigation +* Two orientations for content and sidebar, default (left sidebar) and reverse (right sidebar) +* Support for a wide gamut of HTML elements +* Related posts (time-based, because Jekyll) below each post +* Syntax highlighting, courtesy Pygments (the Python-based code snippet highlighter) + +### Browser support + +Did is by perference 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. + +### Download + +Did is developed on and hosted with GitHub. Head to the GitHub repository for downloads, bug reports, and features requests. + +Thanks! diff --git a/about.html b/about.html new file mode 100644 index 00000000000..9a01c67af3d --- /dev/null +++ b/about.html @@ -0,0 +1,28 @@ +--- +layout: default +title: About +--- + +
+ +

About

+ +

Mark Otto is a designer living and working in San Francisco. Originally from Wisconsin, he freelanced his way through high school and college before moving to California to work at a design firm, ZURB, in 2007. There he designed and developed dozens of projects with clients large and small, including Photobucket, Britney Spears, SafetyWeb, and Zazzle. In early 2010, after a two-and-a-half year stint at ZURB, he left to become a product designer at Twitter.

+

Since joining Twitter, Otto has worked on numerous projects including the Promoted Products suite, Twitter.com, the Twitter Help Center, several internal tools, and most recently the popular open-source front-end toolkit Bootstrap.

+ +
+ +

About the site

+

This URL has been my online home for many years, manifesting at times as a blog or a portfolio until landing on this current single-column blog. Today it is an outlet for my design- and development-related ramblings.

+

Some fun facts about the site include:

+ +

For comments or questions, feel free to ask me on Twitter or shoot me an email at markdotto at gmail dot com.

+ +
diff --git a/atom.xml b/atom.xml new file mode 100644 index 00000000000..8a1a28c9b03 --- /dev/null +++ b/atom.xml @@ -0,0 +1,28 @@ +--- +layout: nil +--- + + + + + {{ site.title }} + + + {{ site.time | date_to_xmlschema }} + {{ site.url }} + + {{ site.author.name }} + {{ site.author.email }} + + + {% for post in site.posts %} + + {{ post.title }} + + {{ post.date | date_to_xmlschema }} + {{ site.url }}{{ post.id }} + {{ post.content | xml_escape }} + + {% endfor %} + + diff --git a/index.html b/index.html new file mode 100644 index 00000000000..510eb1bdba5 --- /dev/null +++ b/index.html @@ -0,0 +1,37 @@ +--- +layout: default +--- + +
+ {% 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-144-precomposed.png new file mode 100644 index 00000000000..b2fdb2d7c61 Binary files /dev/null and b/public/apple-touch-icon-144-precomposed.png differ diff --git a/public/css/did.css b/public/css/did.css new file mode 100644 index 00000000000..5c3706cf42c --- /dev/null +++ b/public/css/did.css @@ -0,0 +1,538 @@ +/* + * __ __ + * /\ \ __ /\ \ + * \_\ \/\_\ \_\ \ + * /'_` \/\ \ /'_` \ + * /\ \_\ \ \ \/\ \_\ \ + * \ \___,_\ \_\ \___,_\ + * \/__,_ /\/_/\/__,_ / + * + * Did is a Jekyll theme featuring a hidden drawer for out of sight navigation. + * It's based on Hyde, another Jekyll theme. It's open source, mobile first, + * and ships with placeholder content to get you up and running in no time. + * + * Designed, built, and released under MIT license by @mdo. + * + * Learn more at https://github.com/mdo/did. + */ + + +/* + * Contents + * + * Body resets + * Custom type + * Container + * Masthead + * Sidebar + * Posts + * Error page + * Pagination + */ + + +/* + * 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; + overflow-x: hidden; /* Prevent scroll on narrow devices */ +} + +body { + font-family: "PT Serif", Georgia, "Times New Roman", serif; + font-size: 16px; + line-height: 1.5; + color: #515151; + background-color: #fff; +} +@media (min-width: 990px) { + body { + font-size: 20px; + } +} + +/* 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 */ +a:hover, +a:focus { + color: #1e71ac; +} + +h1, h2, h3, h4, h5, h6 { + margin: 0 0 10px; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-weight: 600; + line-height: 1.25; + color: #313131; + text-rendering: optimizeLegibility; +} +h1 { + font-size: 40px; +} +h2 { + margin-top: 20px; + font-size: 32px; +} +h3 { + margin-top: 24px; + font-size: 24px; +} +h4, h5, h6 { + margin-top: 16px; + font-size: 16px; +} + +p { + margin: 0 0 15px; +} + +ul, ol { + margin-bottom: 15px; +} + +hr { + position: relative; + margin: 40px 0; + border: 0; + border-top: 1px solid #eee; + border-bottom: 1px solid #fff; +} + +strong { + color: #303030; +} + +abbr { + background-color: #eee; + display: inline-block; + padding: 3px; + font-size: 13px; + font-weight: bold; + color: #555; + text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5); + text-transform: uppercase; + border-radius: 3px; +} + +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: 0 0 14px; + padding: 15px 20px; + font-size: 16px; + 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; +} +.highlight { + margin-bottom: 15px; + border-radius: 4px; +} +.highlight pre { + margin-bottom: 0; +} + +/* Quotes */ +blockquote { + padding: 5px 30px 5px 25px; + margin: 15px 0; + color: #7a7a7a; + border-left: 5px solid #eee; +} +blockquote p:last-child { + margin-bottom: 0; +} + +img { + display: block; + margin: 0 0 15px; + border-radius: 5px; +} + + +/* + * Custom type + * + * Extend paragraphs with `.lead` for larger introductory text. + */ + +.lead { + font-size: 20px; + font-weight: 300; +} +@media (min-width: 990px) { + .lead { + font-size: 24px; + } +} + + +/* + * Containers + * + * The wrapper and container are used to position site content. + */ + +/* Use an outter wrap free of most styles for positioning of sidebar */ +.wrap { + position: relative; + width: 100%; + transition: left 0.3s ease; +} + +/* Center the content */ +.container { + padding-left: 20px; + padding-right: 20px; +} +@media (min-width: 860px) { + .container { + max-width: 720px; + margin-left: auto; + margin-right: auto; + } +} + + +/* + * Masthead + * + * Super small header above the content for site name and short description. + */ + +.masthead { + max-width: 720px; + padding: 20px; + margin-left: auto; + margin-right: auto; + margin-bottom: 20px; + border-bottom: 1px solid #eee; +} +.masthead-title { + margin-top: 0; + margin-bottom: 0; + color: #505050; +} +.masthead-title small { + font-weight: 400; + color: #c0c0c0; +} +@media (min-width: 860px) { + .masthead { + max-width: 680px; + padding-left: 0; + padding-right: 0; + } +} + + +/* + * Sidebar + * + * The sidebar is the drawer, the item we are toggling with our handy hamburger + * button in the corner of the page. + */ + +/* Style and "hide" the sidebar */ +.sidebar { + padding: 20px; + font-family: "PT Sans", Helvetica, Arial, sans-serif; + font-size: 14px; + color: #9a9a9a; + background-color: #202020; +} +@media (min-width: 860px) { + .sidebar { + position: fixed; + top: 0; + bottom: 0; + left: -280px; + overflow-y: auto; + width: 280px; + padding: 30px; + transition: left 0.3s ease; + } +} + +/* Sidebar content */ +.sidebar a { + font-weight: normal; + color: #fff; +} + +/* Sidebar nav */ +.sidebar-nav { + margin: 20px -20px; + border-bottom: 1px solid #303030; +} +.sidebar-nav-item { + display: block; + padding: 10px 20px; + border-top: 1px solid #303030; +} +a.sidebar-nav-item:hover, +a.sidebar-nav-item:focus { + text-decoration: none; + background-color: #303030; +} +@media (min-width: 860px) { + .sidebar-nav { + margin: 30px -30px; + } + .sidebar-nav-item { + padding-left: 30px; + padding-right: 30px; + } +} + +/* Sidebar toggles */ +/* Note: the toggles cannot share a base class. */ +.sidebar-show, +.sidebar-hide { + display: none; +} + +@media (min-width: 860px) { + .sidebar-show, + .sidebar-hide { + position: fixed; + top: 15px; + left: 15px; + display: block; + padding: 3px 12px; + font-family: Arial, sans-serif; /* Ensure vertical alignment */ + color: #505050; + background-color: #fff; + border: 1px solid #fff; + border-radius: 4px; + transition: left 0.3s ease; + } + .sidebar-show:hover, + .sidebar-show:focus { + color: #505050; + } + .sidebar-hide { + visibility: hidden; + color: #fff; + background-color: #505050; + } + .sidebar-hide:hover, + .sidebar-hide:focus { + color: #fff; + } + + /* Do the fancy CSS toggle magic */ + #sidebar:target { + left: 0; + } + #sidebar:target + .wrap { + left: 280px; + } + #sidebar:target + .wrap .sidebar-show, + #sidebar:target + .wrap .sidebar-hide { + left: 295px; + } + #sidebar:target + .wrap .sidebar-show { visibility: hidden; } + #sidebar:target + .wrap .sidebar-hide { visibility: visible; } +} + + +/* Footer area of masthead */ +.colophon { + margin-top: 20px; + color: #fff; + color: rgba(255,255,255,.5); +} +.colophon-links { + padding-left: 0; + list-style: none; +} +.colophon-links li { + color: inherit; +} + + +/* + * Posts + * + * Each post is wrapped in `.post`. Used on default and post layouts. + */ + +/* Single post */ +.post { + margin-top: 40px; + margin-bottom: 40px; +} +@media (min-width: 990px) { + /* Increase space between posts */ + .post { + margin: 60px 0; /* Increase top/bottom, remove from sides */ + } +} + +/* Blog post or page title */ +.post-title, +.post-title a { + color: #303030; +} + +/* Meta data line below post title */ +.post-date { + display: block; + margin: -10px 0 10px; + color: #9a9a9a; +} + +/* Related posts */ +.related { + padding-top: 40px; + padding-bottom: 40px; + 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: #000; + text-decoration: none; +} +.related-posts li a:hover small { + color: inherit; +} + + +/* + * Error page + * + * For now, just the 404 (supported by Jekyll with the custom 404.html view). + */ + +.fourohfour { + margin-top: 40px; + margin-bottom: 40px; +} + + +/* + * 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-top: 40px; + font-weight: bold; + color: #ccc; + text-align: center; +} + +/* Pagination items can be `span`s or `a`s */ +.pagination-item { + float: left; + width: 50%; + padding: 20px; + border: 1px solid #eee; +} +.pagination-item:last-child { + margin-left: -1px; +} + +/* Only provide a hover state for linked pagination items */ +a.pagination-item:hover { + text-decoration: none; + background-color: #f5f5f5; +} + +/* Pagination should float when space is plentiful */ +@media (min-width: 990px) { + .pagination { + margin-bottom: 60px; + } +} + + + + +/* + * Reverse layout + * + * Flip the orientation of the page by placing the `.sidebar` and sidebar toggle + * on the right side. + */ + +@media (min-width: 860px) { + .layout-reverse .sidebar { + left: auto; + right: -280px; + transition-property: right; + } + .layout-reverse .sidebar-show, + .layout-reverse .sidebar-hide { + position: fixed; + top: 15px; + left: auto; + right: 15px; + transition-property: right; + } + .layout-reverse .wrap { + transition-property: right; + } + .layout-reverse #sidebar:target { + left: auto; + right: 0; + } + .layout-reverse #sidebar:target + .wrap { + left: auto; + right: 280px; + } + .layout-reverse #sidebar:target + .wrap .sidebar-show, + .layout-reverse #sidebar:target + .wrap .sidebar-hide { + left: auto; + right: 295px; + } +} diff --git a/public/css/syntax.css b/public/css/syntax.css new file mode 100644 index 00000000000..1264b87f14e --- /dev/null +++ b/public/css/syntax.css @@ -0,0 +1,66 @@ +.hll { background-color: #ffffcc } + /*{ background: #f0f3f3; }*/ +.c { color: #999; } /* Comment */ +.err { color: #AA0000; background-color: #FFAAAA } /* Error */ +.k { color: #006699; } /* Keyword */ +.o { color: #555555 } /* Operator */ +.cm { color: #0099FF; font-style: italic } /* Comment.Multiline */ +.cp { color: #009999 } /* Comment.Preproc */ +.c1 { color: #999; } /* Comment.Single */ +.cs { color: #999; } /* Comment.Special */ +.gd { background-color: #FFCCCC; border: 1px solid #CC0000 } /* Generic.Deleted */ +.ge { font-style: italic } /* Generic.Emph */ +.gr { color: #FF0000 } /* Generic.Error */ +.gh { color: #003300; } /* Generic.Heading */ +.gi { background-color: #CCFFCC; border: 1px solid #00CC00 } /* Generic.Inserted */ +.go { color: #AAAAAA } /* Generic.Output */ +.gp { color: #000099; } /* Generic.Prompt */ +.gs { } /* Generic.Strong */ +.gu { color: #003300; } /* Generic.Subheading */ +.gt { color: #99CC66 } /* Generic.Traceback */ +.kc { color: #006699; } /* Keyword.Constant */ +.kd { color: #006699; } /* Keyword.Declaration */ +.kn { color: #006699; } /* Keyword.Namespace */ +.kp { color: #006699 } /* Keyword.Pseudo */ +.kr { color: #006699; } /* Keyword.Reserved */ +.kt { color: #007788; } /* Keyword.Type */ +.m { color: #FF6600 } /* Literal.Number */ +.s { color: #d44950 } /* Literal.String */ +.na { color: #4f9fcf } /* Name.Attribute */ +.nb { color: #336666 } /* Name.Builtin */ +.nc { color: #00AA88; } /* Name.Class */ +.no { color: #336600 } /* Name.Constant */ +.nd { color: #9999FF } /* Name.Decorator */ +.ni { color: #999999; } /* Name.Entity */ +.ne { color: #CC0000; } /* Name.Exception */ +.nf { color: #CC00FF } /* Name.Function */ +.nl { color: #9999FF } /* Name.Label */ +.nn { color: #00CCFF; } /* Name.Namespace */ +.nt { color: #2f6f9f; } /* Name.Tag */ +.nv { color: #003333 } /* Name.Variable */ +.ow { color: #000000; } /* Operator.Word */ +.w { color: #bbbbbb } /* Text.Whitespace */ +.mf { color: #FF6600 } /* Literal.Number.Float */ +.mh { color: #FF6600 } /* Literal.Number.Hex */ +.mi { color: #FF6600 } /* Literal.Number.Integer */ +.mo { color: #FF6600 } /* Literal.Number.Oct */ +.sb { color: #CC3300 } /* Literal.String.Backtick */ +.sc { color: #CC3300 } /* Literal.String.Char */ +.sd { color: #CC3300; font-style: italic } /* Literal.String.Doc */ +.s2 { color: #CC3300 } /* Literal.String.Double */ +.se { color: #CC3300; } /* Literal.String.Escape */ +.sh { color: #CC3300 } /* Literal.String.Heredoc */ +.si { color: #AA0000 } /* Literal.String.Interpol */ +.sx { color: #CC3300 } /* Literal.String.Other */ +.sr { color: #33AAAA } /* Literal.String.Regex */ +.s1 { color: #CC3300 } /* Literal.String.Single */ +.ss { color: #FFCC33 } /* Literal.String.Symbol */ +.bp { color: #336666 } /* Name.Builtin.Pseudo */ +.vc { color: #003333 } /* Name.Variable.Class */ +.vg { color: #003333 } /* Name.Variable.Global */ +.vi { color: #003333 } /* Name.Variable.Instance */ +.il { color: #FF6600 } /* Literal.Number.Integer.Long */ + +.css .o, +.css .o + .nt, +.css .nt + .nt { color: #999; } diff --git a/public/favicon.ico b/public/favicon.ico new file mode 100644 index 00000000000..ef1916fd41c Binary files /dev/null and b/public/favicon.ico differ