jekyll-theme-guides-mbland 0.2.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA1:
+  metadata.gz: e79364366d4d3392bdd47efda04901a09eee31d0
+  data.tar.gz: 29ded9e8074cf019a88525324611745c003ead7b
+SHA512:
+  metadata.gz: 8b113bba5ff0a0a6f73d8179a38cdcc1bb3d9150c22b0703b780a3c600fd61c98ec72d7fe2dc53d68d6d524fb64fef3eaae6bb716fb1ae9170d9c09471577099
+  data.tar.gz: be60c0b9ed4436e02545e1cbce6dea5204c63e75d191abc1b98a522542db7e31f266dc13c6dda702422bb6faa868800462266254ef0f962b594ac5eaa8a53b0f

data/LICENSE.md

@@ -0,0 +1,13 @@
+Copyright (c) 2017 Mike Bland <mbland@acm.org>
+
+Permission to use, copy, modify, and/or distribute this software for any purpose
+with or without fee is hereby granted, provided that the above copyright notice
+and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND
+FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS
+OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER
+TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF
+THIS SOFTWARE.

data/README.md

@@ -0,0 +1,160 @@
+## [`jekyll-theme-guides-mbland`](https://rubygems.org/gems/jekyll-theme-guides-mbland): Jekyll theme gem for styling guides
+
+[![Build Status](https://travis-ci.org/mbland/jekyll-theme-guides-mbland.svg?branch=master)](https://travis-ci.org/mbland/jekyll-theme-guides-mbland)
+
+Provides consistent style elements for guides generated using [Jekyll][] via its
+[themes mechanism][themes]. Originally based on [DOCter][] from [CFPB][].
+
+[Jekyll]: https://jekyllrb.com/
+[themes]: https://jekyllrb.com/docs/themes/
+[DOCter]: https://github.com/cfpb/docter/
+[CFPB]:   https://cfpb.github.io/
+
+### Usage
+
+In your [`Gemfile`][gemfile], include the following:
+
+[gemfile]: http://bundler.io/gemfile.html
+
+```ruby
+group :jekyll_plugins do
+  gem 'jekyll-theme-guides-mbland'
+end
+```
+
+Add an `assets/css/styles.scss` file that contains at least the following:
+
+```scss
+---
+---
+
+@import "{{ site.theme }}";
+```
+
+Then in your [`_config.yml` file](https://jekyllrb.com/docs/configuration/),
+add the following (you may need to remove any `layout:`
+[front matter](https://jekyllrb.com/docs/frontmatter/) from existing pages for
+this to take effect):
+
+```yaml
+theme: jekyll-theme-guides-mbland
+
+defaults:
+  -
+    scope:
+      path: ""
+    values:
+      layout: "default"
+```
+
+Build the site per usual, and observe the results.
+
+### Additional features
+
+Here are some other features that can be enabled via `_config.yml`:
+
+```yaml
+# This adds the "back to" breadcrumb link under the page title:
+back_link:
+  url: "https://guides.example.com/"
+  text: Read more Guides
+
+# If you use Analytics, add your code here:
+google_analytics_ua: UA-????????-??
+
+# If you want all of the navigation bar entries expanded by default, add this
+# property and it to true:
+expand_nav: true
+```
+
+### Additional scripts and styles
+
+If you'd like to add additional scripts or styles to every page on the site,
+you can add `styles:` and `scripts:` lists to `_config.yml`. To add them to a
+particular page, add these lists to the page's front matter.
+
+### Alternate navigation bar titles
+
+If you want a page to have a different title in the navigation bar than that
+of the page itself, add a `navtitle:` property to the page's front matter:
+
+```md
+---
+title: Since brevity is the soul of wit, I'll be brief.
+navtitle: Polonius's advice
+---
+```
+
+### Selectively expanding navigation bar items
+
+If you wish to expand or contract specific navigation bar items, add the
+`expand_nav:` property to those items in the `navigation:` list in
+`_config.yml`. For example, the `Update the config file` entry will expand
+since the default `expand_nav` property is `true`, but `Add a new page` will
+remain collapsed:
+
+```yaml
+expand_nav: true
+
+navigation:
+- text: Introduction
+  internal: true
+- text: Add a new page
+  url: add-a-new-page/
+  internal: true
+  expand_nav: false
+  children:
+  - text: Make a child page
+    url: make-a-child-page/
+    internal: true
+- text: Update the config file
+  url: update-the-config-file/
+  internal: true
+  children:
+  - text: Understanding the `baseurl:` property
+    url: understanding-baseurl/
+    internal: true
+```
+
+### Development
+
+First, choose a Jekyll site you'd like to use to view the impact of your
+updates and clone its repository; then clone this repository into the same
+parent directory. For example, to use the Guides Template:
+
+```shell
+$ git clone git@github.com:mbland/guides-template-mbland.git
+$ git clone git@github.com:mbland/jekyll-theme-guides-mbland.git
+```
+
+In the `Gemfile` of the Jekyll site's repository, include the following:
+
+```ruby
+group :jekyll_plugins do
+  gem 'jekyll-theme-guides-mbland', :path => '../jekyll-theme-guides-mbland'
+end
+```
+
+You can find the different style assets and templates within the `assets`,
+`_layouts`, `_includes`, and `_sass` directories of this repository. Edit those,
+then rebuild the Jekyll site as usual to see the results.
+
+Alternatively, you can [copy files from these directories into your site and
+edit them to taste][edit].
+
+[edit]: https://jekyllrb.com/docs/themes/#overriding-theme-defaults
+
+### Open Source License
+
+This software is made available as [Open Source software][oss-def] under the
+[ISC License][].  For the text of the license, see the [LICENSE](LICENSE.md)
+file.
+
+[oss-def]:     https://opensource.org/osd-annotated
+[isc license]: https://www.isc.org/downloads/software-support-policy/isc-license/
+
+### Prior work
+
+This was adapted from my previous [18F/guides-style][style-old] implementation.
+
+[style-old]: https://github.com/18F/guides-style

data/_includes/analytics.html

@@ -0,0 +1,16 @@
+{% if site.google_analytics_ua %}<!-- Google Analytics -->
+<script>
+  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+  ga('create', '{{ site.google_analytics_ua }}', 'auto');
+
+  // anonymize user IPs (chops off the last IP triplet)
+  ga('set', 'anonymizeIp', true);
+  ga('set', 'forceSSL', true);
+  ga('send', 'pageview');
+</script>
+
+<!-- Digital Analytics Program roll-up, see https://analytics.usa.gov for data -->
+<script id="_fed_an_ua_tag" src="https://dap.digitalgov.gov/Universal-Federated-Analytics-Min.js?agency=GSA"></script>{% endif %}

data/_includes/breadcrumbs.html

@@ -0,0 +1,6 @@
+<div class="breadcrumbs">
+<ol>
+{% for breadcrumb in page.breadcrumbs %}{% if forloop.last %}<li>{{ breadcrumb.text }}{% else %}<li class="parent"><a href="{{ site.baseurl}}{{ breadcrumb.url }}">{{ breadcrumb.text }}</a>{% endif %}</li>
+{% endfor %}
+</ol>
+</div>

data/_includes/footer.html

@@ -0,0 +1,5 @@
+<footer role="contentinfo">
+  <div class="wrap">{% assign repo_url = site.repos[0].url %}
+    <p>This project is maintained by <a href="{{ site.author.url }}">{{ site.author.name }}</a>. The source is available at <a href="{{ repo_url }}">{{ repo_url }}</a>.</p>
+  </div>
+</footer>

data/_includes/header.html

@@ -0,0 +1,28 @@
+<head>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta charset="utf-8">
+  <meta name="viewport" content="width=device-width">
+
+  {% if page.title %}
+    <title>{{ page.title }} - {{ site.name }}</title>
+  {% elsif site.title %}
+    <title>{{ site.title }} - {{ site.name }}</title>
+  {% endif %}
+
+  {% if page.description %}
+    <meta name="description" content="{{ page.description | xml_escape }}">
+  {% elsif site.description %}
+    <meta name="description" content="{{ site.description | xml_escape }}">
+  {% endif %}
+
+  <link rel="shortcut icon" type="image/ico" href="{{ site.baseurl }}/assets/favicons/favicon.ico" />
+  <link rel="icon" type="image/png" sizes="16x16" href="{{ site.baseurl }}/assets/favicons/favicon16.png" />
+  <link rel="icon" type="image/png" sizes="32x32" href="{{ site.baseurl }}/assets/favicons/favicon32.png" />
+  <link rel="apple-touch-icon" sizes="76x76" href="{{ site.baseurl }}/assets/favicons/touch-icon-76.png" />
+  <link rel="apple-touch-icon" sizes="120x120" href="{{ site.baseurl }}/assets/favicons/touch-icon-120.png" />
+  <link rel="apple-touch-icon" sizes="152x152" href="{{ site.baseurl }}/assets/favicons/touch-icon-152.png"/>
+  <link href='{{ site.baseurl }}/assets/css/google-fonts.css' rel='stylesheet' type='text/css' />
+  <link rel="stylesheet" href="{{ site.baseurl }}/assets/css/styles.css" type='text/css' />{% for style in site.styles %}
+  <link rel="stylesheet" href="{{ site.baseurl }}/{{ style }}" type='text/css' />{% endfor %}{% for style in page.styles %}
+  <link rel="stylesheet" href="{{ site.baseurl }}/{{ style }}" type='text/css' />{% endfor %}
+</head>

data/_includes/scripts.html

@@ -0,0 +1,6 @@
+<script src="{{ site.baseurl }}/assets/js/vendor/jquery-1.11.2.min.js"></script>
+<script src="{{ site.baseurl }}/assets/js/accordion.js"></script>
+<script src="{{ site.baseurl }}/assets/js/guide.js"></script>{% for script in site.scripts %}
+<script src="{{ site.baseurl }}/{{ script }}"></script>{% endfor %}{% for script in page.scripts %}
+<script src="{{ site.baseurl }}/{{ script }}"></script>{% endfor %}
+{% jekyll_pages_api_search_load %}

data/_includes/sidebar-children.html

@@ -0,0 +1,17 @@
+{% if parent.children %}
+{% capture expand_nav %}{% jekyll_theme_guides_mbland_should_expand_nav parent, parent_url %}{% endcapture %}
+<button class="expand-subnav"
+        aria-expanded="{{ expand_nav }}"
+        aria-controls="nav-collapsible-{{ forloop.index }}">+</button>
+<ul class="nav-children" id="nav-collapsible-{{ forloop.index }}"
+    aria-hidden="{% if expand_nav == 'true' %}false{% else %}true{% endif %}">
+  {% for child in parent.children %}
+  {% capture child_url %}{{ parent_url }}{{ child.url }}{% endcapture %}
+    <li class="{% if page.url == child_url %}sidebar-nav-active{% endif %}">
+      <a href="{% if child.internal == true %}{{ site.baseurl }}{{ child_url }}{% else %}{{ child.url }}{% endif %}"
+        title="{% if page.url == child_url %}Current Page{% else %}{{ child.text }}{% endif %}">{{ child.text }}</a>
+      {% assign parent = child %}{% assign parent_url = child_url %}
+      {% include sidebar-children.html %}
+      {% capture parent_url %}{% jekyll_theme_guides_mbland_pop_last_url_component parent_url %}{% endcapture %}
+    </li>{% endfor %}
+</ul>{% endif %}

data/_includes/sidebar.html

@@ -0,0 +1,14 @@
+<aside>
+  <p class="intro">{{ site.subtitle }}</p>
+  <nav class="sidebar-nav" role="navigation">
+    <ul>{% for link in site.navigation %}{% capture parent_url %}/{{ link.url }}{% endcapture %}
+        <li class="group {% if page.url == parent_url %}sidebar-nav-active{% endif %}">
+          <a href="{% if link.internal == true %}{{ site.baseurl }}/{% endif %}{{ link.url }}"  
+            title="{% if page.url == parent_url %}Current Page
+                  {% else %}{{ link.text }}{% endif %}">{{ link.text }}</a>
+          {% assign parent = link %}
+          {% include sidebar-children.html %}
+        </li>{% endfor %}
+    </ul>
+  </nav>
+</aside>

data/_layouts/default.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang='en'>
+
+  {% include header.html %}
+
+  <body>
+
+    <div class="container">
+      <a class="skip-link visuallyhidden focusable" href="#main">Skip to Main Content</a>
+
+      <header role="banner">
+
+        <div class="wrap">
+
+
+          <h1 class="site-title"><a class="title-link" href="{{ site.baseurl }}/">{{ site.name }}</a></h1>
+
+          {% jekyll_pages_api_search_interface %}{% if site.back_link %}
+
+          <div class="back-link"><a href="{{ site.back_link.url }}">&laquo; {{ site.back_link.text }}</a></div>{% endif %}
+        </div>
+        {% include breadcrumbs.html %}
+      </header>
+
+      <div class="wrap content">
+
+        <section id="main" class="main-content" role="main">
+          <h2>{{ page.title }}</h2>
+          {{ content }}
+        </section>
+
+        {% include sidebar.html %}
+
+      </div><!-- /.wrap content -->
+
+      {% include footer.html %}
+
+    </div> <!-- /.container -->
+
+  </body>
+{% include analytics.html %}
+{% include scripts.html %}
+</html>

data/_layouts/generated/home-redirect.html

@@ -0,0 +1,6 @@
+<!DOCTYPE html>
+<html>
+<head><meta http-equiv="refresh" content="0;URL='{{ site.baseurl }}/#{{ page.title | slugify }}'">
+</head>
+<body></body>
+</html>

data/_layouts/search-results.html

@@ -0,0 +1,4 @@
+---
+layout: default
+---
+{% jekyll_pages_api_search_results %}

data/_sass/_jekyll-theme-guides-mbland-custom.scss

@@ -0,0 +1,50 @@
+/*
+This is where custom styles for your guide should live.
+*/
+
+div.skip-nav a {
+  position: absolute;
+  left: -10000;
+  top: 0;
+  width: 1px;
+  height: auto;
+  overflow: hidden;
+}
+div.skip-nav a:focus {
+	position: absolute;
+	top: 5px;
+	left: 5px;
+	width: auto; 
+	height: auto;
+	z-index: 999999;
+	background-color: white;
+	padding-left: 2px;
+	padding-right: 2px;
+	overflow: visible;
+ }
+
+ .mainContent:focus {
+ 	outline: none;
+ }
+
+ table, th, td {
+   border: 1px solid black;
+   padding: 5px;
+   margin:5px;
+}
+th {
+	background: #767576;
+	color:white;
+}
+li.active > a{
+	background-color: #317ab9;
+}
+
+div.back-link {
+	display: block;
+  padding-top: .5em;
+}
+
+header {
+  padding-bottom: 1.5em;
+}

data/_sass/_jekyll-theme-guides-mbland-main.scss

@@ -0,0 +1,663 @@
+@import "jekyll_pages_api_search";
+
+/*
+Main.css
+==================================
+Begin with generic 'mobile first' styles
+*/
+
+/*
+Normalize the box model
+==================================
+*/
+
+*,
+*:before,
+*:after {
+    -webkit-box-sizing: border-box;
+       -moz-box-sizing: border-box;
+            box-sizing: border-box;
+ }
+
+/*
+global styles
+==================================
+*/
+
+html, body {
+    height: 100%;
+}
+
+/*
+Typography
+==================================
+*/
+
+body {
+    font-family: "Open Sans", Arial, sans-serif;
+    font-weight: 400;
+    font-style: normal;
+    line-height: 1.466666667;
+    margin: 0;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5 {
+    font-family: "Raleway", Arial, sans-serif;
+    font-weight: 600;
+}
+
+.site-title {
+    font-size: 1.9em;
+    color: #919395;
+    margin: 0;
+    line-height: 1.2941176470588236;
+    display: inline-block;
+}
+
+h2 {
+    font-size: 1.375em;
+    margin: 1.4em 0 0 0;
+}
+
+h3 {
+    margin-top: 30px;
+    a {
+       border-bottom: 1px dotted #0072ce;
+    }
+}
+
+h4 {
+    font-size: 1em;
+    text-transform: uppercase;
+}
+
+.page-title {
+    margin-top: .727272727em; /* 16/22 */
+}
+
+/*
+Lists
+--------------------------------
+*/
+
+.main-content ul {
+    padding-left: 1.1em;
+}
+
+.main-content li {
+    margin-bottom: 1em;
+}
+
+li h3,
+li h4 {
+    margin: 0;
+}
+
+li p {
+    margin-top: 0;
+}
+
+/*
+Links
+==================================
+*/
+
+a {
+    -webkit-transition: .2s;
+       -moz-transition: .2s;
+            transition: .2s;
+}
+
+a,
+a:link,
+a:visited {
+    color: #006FC9;
+    text-decoration: none;
+}
+
+a:hover {
+    color: #7eb8dd;
+    text-decoration: none;
+}
+
+a:active {
+    color: #002d72;
+    text-decoration: none;
+}
+
+a:focus {
+    color: #006FC9;
+    outline: thin dotted;
+    text-decoration: none;
+}
+
+a.title-link {
+    color: #75787B;
+}
+
+a.title-link:hover,
+a.title-link:active,
+a.title-link:focus {
+    color: #7eb8dd;
+}
+
+a.skip-link {
+    color: #fff;
+    padding: .25em;
+}
+
+a.skip-link:hover,
+a.skip-link:active,
+a.skip-link:focus {
+    background-color: #006FC9;
+    color: #fff;
+}
+
+p {
+    a,
+    a:link,
+    a:visited {
+        border-bottom: 1px dotted #0072ce;
+
+    }
+}
+
+/*
+Navigation
+==================================
+*/
+
+.breadcrumbs ol {
+  list-style: none;
+  padding-left: 20px;
+  margin: 0px;
+  display: inline-block;
+  font-size: 14px;
+}
+
+.breadcrumbs ol li {
+  display: inline;
+}
+
+.breadcrumbs ol li:only-child {
+  display: none;
+}
+
+.breadcrumbs .parent::after {
+  content: " >";
+}
+
+.sidebar-nav a {
+  display: block;
+  padding: 10px;
+  -webkit-transition: .4s;
+  transition: .4s;
+  width: 80%;
+  float: left;
+}
+
+.sidebar-nav a,
+.sidebar-nav a:link,
+.sidebar-nav a:visited {
+  border-bottom: none;
+  color: #74767B;
+}
+
+.sidebar-nav a:hover,
+.sidebar-nav a:focus,
+.sidebar-nav a:active,
+.sidebar-nav .sidebar-nav-active > a {
+  color: #74767B;
+  border-left: 4px solid #7401DF;
+  background-color: transparent;
+}
+
+.sidebar-nav ul {
+  margin: 0;
+  padding: 0;
+}
+
+.sidebar-nav li {
+  list-style: none;
+  border-bottom: 1px solid #babbbd;
+  font-size: 1.125em;
+  overflow: hidden;
+}
+
+.sidebar-nav li:last-child {
+  border-bottom: none;
+}
+
+.nav-children[aria-hidden=true] {
+    max-height: 0;
+}
+
+.nav-children {
+    clear: both;
+    display: block;
+    font-size: 14px;
+    max-height: initial;
+    max-height: 4000px;
+    overflow: auto;
+    opacity: 1;
+    position: relative;
+    -webkit-transition: max-height .2s, opacity .2s;
+    -moz-transition: max-height .2s, opacity .2s;
+    -o-transition: max-height .2s, opacity .2s;
+    transition: max-height .2s, opacity .2s;
+}
+
+.nav-children li {
+    border-bottom: none;
+    padding-left: 0;
+}
+
+.nav-children a {
+    padding: 5px 5px 5px 20px;
+}
+
+.nav-children li:last-child a {
+    padding-bottom: 10px;
+}
+
+.expand-subnav {
+    background: none;
+    border: none;
+    border-radius: 30px;
+    color: #0072ce;
+    cursor: pointer;
+    display: block;
+    float: right;
+    font-size: 20px;
+    height: 30px;
+    line-height: 1;
+    margin: 8px;
+    padding-bottom: 5px;
+    position: relative;
+    width: 30px;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    -o-appearance: none;
+    appearance: none;
+    -webkit-transition: -webkit-transform .2s;
+    -moz-transition: -moz-transform .2s;
+    -o-transition: -o-transform .2s;
+    transition: transform .2s;
+}
+
+.expand-subnav:hover,
+.expand-subnav:focus {
+    background-color: #0072ce;
+    color: #fff;
+    outline: none;
+}
+
+.expand-subnav[aria-expanded=true] {
+    -webkit-transform: rotate(45deg);
+    -moz-transform: rotate(45deg);
+    -o-transform: rotate(45deg);
+    transform: rotate(45deg);
+}
+
+/*
+Layout
+==================================
+*/
+
+.logo {
+    display: block;
+}
+
+.content {
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+/* offset the fixed position header for jump links */
+section:before {
+    display: block;
+    content: "";
+    height: 60px;
+    margin: -60px 0 0;
+}
+
+.wrap {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding-left: 20px;
+    padding-right: 20px;
+}
+
+header {
+    border-bottom: 4px solid #7401DF;
+    background-color: #fff;
+    padding: 2em 0;
+}
+
+header div.wrap{
+    position: relative;
+    padding-top: 2.4em;
+}
+
+header div.wrap::after{
+    content: "";
+    display: table;
+    clear: both;
+}
+
+header h1.site-title{
+    margin-bottom: 0.4em;
+}
+
+header div.wrap div.back-link{
+    position: absolute;
+    left: 20px;
+    top: -1em;
+    font-size: 14px;
+    color: #555;
+}
+
+header div.wrap div.back-link a{
+    color: inherit;
+    text-decoration: underline;
+}
+
+header div.wrap div.back-link a:hover{ text-decoration: none; }
+
+@media screen and (min-width: 45em){
+    header h1.site-title{
+        float: left;
+        width: 67%;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+    }
+}
+
+.main-content img {
+  max-width: 100%;
+}
+
+/*
+Footer
+==================================
+*/
+
+/* for sticky footer */
+.container {
+    display: table;
+    height: 100%;
+    width: 100%;
+}
+
+footer {
+    display: table-row; /* for sticky footer */
+    height: 1px; /* for sticky footer */
+    border-top: 2px solid #babbbd;
+    background: #f1f2f2;
+    width: 100%;
+    font-size: 0.875em;
+}
+
+footer .wrap {
+  padding-top: 2em;
+  padding-bottom: 2em;
+}
+
+
+/*
+Helpers
+==================================
+*/
+
+/* Hide from both screenreaders and browsers: h5bp.com/u */
+.hidden {
+    display: none !important;
+    visibility: hidden;
+}
+
+/* Hide only visually, but have it available for screenreaders: h5bp.com/v */
+.visuallyhidden {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+}
+
+/* Extends the .visuallyhidden class to allow the element to be focusable
+ * when navigated to via the keyboard: h5bp.com/p */
+.visuallyhidden.focusable:active,
+.visuallyhidden.focusable:focus {
+    clip: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    position: static;
+    width: auto;
+}
+
+/* Hide visually and from screenreaders, but maintain layout */
+.invisible {
+    visibility: hidden;
+}
+
+
+/*
+Style
+==================================
+*/
+
+.intro {
+    color: #75787B;
+}
+
+li h4 {
+    margin: 0;
+}
+
+.license {
+    font-family: "Avenir Next Demi", Arial, sans-serif;
+    font-weight: normal;
+    font-style: normal;
+}
+
+pre {
+    max-width: 100%;
+    font-size: 0.875em;
+    overflow-y: scroll;
+    background-color: #f1f2f2;
+    padding: 10px;
+}
+
+/*
+Post list
+----------------------------------
+*/
+
+ul.posts {
+    padding: 0;
+}
+
+.posts li {
+    list-style: none;
+}
+
+.post-date {
+    color: #75787B;
+}
+
+/*
+Repo list
+----------------------------------
+*/
+
+ul.repo-list {
+    margin: .5em 0 1em 0;
+    padding: 0;
+}
+
+.repo-list li {
+    list-style: none;
+}
+
+.repo-list p {
+    margin: 0;
+    font-size: 0.875em;
+}
+
+.repo-list h4 {
+    text-transform: none;
+}
+
+/*
+Helper Classes
+==================================
+*/
+
+/*
+Clearfix list
+----------------------------------
+*/
+
+.group:before,
+.group:after {
+    content: " ";
+    display: table;
+}
+
+.group:after {
+    clear: both;
+}
+
+.group {
+    *zoom: 1;
+}
+
+/*
+Desktop Styles
+==================================
+*/
+
+@media screen and (min-width: 45em) {
+
+    /*
+    Typography
+    ==============================
+    */
+
+    /*
+    Layout
+    ==============================
+    */
+
+    .logo {
+        max-width: 30%;
+        padding-right: 20px;
+        margin-top: -12px;
+        float: right;
+    }
+
+    aside {
+        width: 30%;
+        float: left;
+    }
+
+    .main-content {
+        width: 67%;
+        float: right;
+        margin-bottom: 120px;
+    }
+
+    .main-content img {
+        max-width: 100%;
+    }
+
+    /*
+    Navigation
+    ==============================
+    */
+
+    .anchorjs-link {
+        border: none;
+    }
+
+    /*
+    Style
+    ==============================
+    */
+
+    /*
+    Repo list
+    ------------------------------
+    */
+
+    .repo-list li {
+        list-style: none;
+        display: block;
+        float: left;
+        height: 4.0625em;
+        max-height: 4.0625em;
+        background-color: #E7E7E6;
+        border-left: 1px solid #BABBBD;
+        width: 30%;
+    }
+
+    .repo-list a:link,
+    .repo-list a:visited {
+        display: block;
+        max-height: 4.0625em;
+        background-color: #E7E7E6;
+        border-bottom: none;
+        padding: .625em 1em 1em 1em;
+    }
+
+    .repo-list a:hover {
+        color: #4D5F87;
+        background-color: #CDE3F1;
+    }
+
+    .repo-list li:first-child {
+        text-align: center;
+        border-left: none;
+        line-height: 60px;
+        padding: .625em 1em;
+        width: 10%;
+    }
+
+}
+
+@media screen and (max-width: 54.375em) {
+
+    /* keep the repo list containers the same height, but account for the need for more height */
+
+    .repo-list li {
+        height: 6em;
+        max-height: 6em;
+    }
+
+    .repo-list a:link,
+    .repo-list a:visited {
+        max-height: 6em;
+    }
+}
+
+/*
+Mobile Styles
+==================================
+*/
+
+@media screen and (max-width: 40.5em) {
+
+    .main-content {
+        margin-top: 1.5em;
+    }
+
+}