18F · gemfarmer · Mar 27, 2017 · Mar 14, 2017 · Mar 16, 2017 · Mar 16, 2017
diff --git a/_about/index.md b/_about/index.md
@@ -30,37 +30,39 @@ subnav_items:
 
 We strive to work in a modern way and use best practices on all our projects. Here's what that means to us:
 
-<div class="icon-list">
-  <figure class="icon-list-image">{% include svg/icons/respect-icon.svg %}</figure>
-  <div class="icon-list-text">
-    <p class="paragraph-bold">Respect for government workers</p>
-    <p>Civil servants have tremendous knowledge about what it takes to achieve their agency’s mission. We help clear technical and governmental hurdles to better serve the public.</p>
-  </div>
-</div>
-
-<div class="icon-list">
-  <figure class="icon-list-image">{% include svg/icons/user-centered-icon.svg %}</figure>
-  <div class="icon-list-text">
-    <p class="paragraph-bold">Human-centered design</p>
-    <p>We listen to real users to understand their needs and build things that will be useful to them — without sacrificing technical or regulatory requirements.</p>
-  </div>
-</div>
-
-<div class="icon-list">
-  <figure class="icon-list-image">{% include svg/icons/agile-icon.svg %}</figure>
-  <div class="icon-list-text">
-    <p class="paragraph-bold">Agile methods</p>
-    <p>We help you move faster and adopt new approaches that reduce risk on your projects. We pay careful attention to what succeeds, and use metrics and feedback to inform what we build.</p>
-  </div>
-</div>
-
-<div class="icon-list">
-  <figure class="icon-list-image">{% include svg/icons/open-icon.svg %}</figure>
-  <div class="icon-list-text">
-    <p class="paragraph-bold">Open technology</p>
-    <p>Our projects are designed and built in public. That means open source, open data, and open APIs. Working transparently helps us develop faster, make better decisions, provide code for many others to reuse, and keep costs low.</p>
-  </div>
-</div>
+<ul class="icon-list-wrapper">
+  <li class="icon-list">
+    <figure class="icon-list-image">{% include svg/icons/respect-icon.svg %}</figure>
+    <div class="icon-list-text">
+      <p class="p-bold">Respect for government workers</p>
+      <p>Civil servants have tremendous knowledge about what it takes to achieve their agency’s mission. We help clear technical and governmental hurdles to better serve the public.</p>
+    </div>
+  </li>
+
+  <li class="icon-list">
+    <figure class="icon-list-image">{% include svg/icons/user-centered-icon.svg %}</figure>
+    <div class="icon-list-text">
+      <p class="p-bold">Human-centered design</p>
+      <p>We listen to real users to understand their needs and build things that will be useful to them — without sacrificing technical or regulatory requirements.</p>
+    </div>
+  </li>
+
+  <li class="icon-list">
+    <figure class="icon-list-image">{% include svg/icons/agile-icon.svg %}</figure>
+    <div class="icon-list-text">
+      <p class="p-bold">Agile methods</p>
+      <p>We help you move faster and adopt new approaches that reduce risk on your projects. We pay careful attention to what succeeds, and use metrics and feedback to inform what we build.</p>
+    </div>
+  </li>
+
+  <li class="icon-list">
+    <figure class="icon-list-image">{% include svg/icons/open-icon.svg %}</figure>
+    <div class="icon-list-text">
+      <p class="p-bold">Open technology</p>
+      <p>Our projects are designed and built in public. That means open source, open data, and open APIs. Working transparently helps us develop faster, make better decisions, provide code for many others to reuse, and keep costs low.</p>
+    </div>
+  </li>
+</ul>
 
 To learn more about how we work, explore [18F guides](https://pages.18f.gov/guides/).
 

diff --git a/_config-accesslint.yml b/_config-accesslint.yml
@@ -370,5 +370,6 @@ exclude:
 - _posts/2017-01-06-open-source-collaboration-across-agencies-to-improve-https-deployment.md
 - _posts/2017-01-10-mark-hopson-negotiating-on-americas-behalf.md
 - _posts/2017-01-11-the-best-way-to-build-big-is-to-start-small.md
+- _posts/2017-01-17-life-changing-magic-writing-release-notes.md
 ---
 
diff --git a/_config-blog.yml b/_config-blog.yml
@@ -368,5 +368,6 @@ exclude:
 - _posts/2017-01-06-open-source-collaboration-across-agencies-to-improve-https-deployment.md
 - _posts/2017-01-10-mark-hopson-negotiating-on-americas-behalf.md
 - _posts/2017-01-11-the-best-way-to-build-big-is-to-start-small.md
+- _posts/2017-01-17-life-changing-magic-writing-release-notes.md
 ---
 
diff --git a/_config.yml b/_config.yml
@@ -8,7 +8,6 @@ federalist_url: "https://federalist.18f.gov"
 localhost: "localhost:4000"
 env: "production"
 logo: /assets/img/logos/18F-Logo-Bright-S.png
-feature_image: /assets/img/feature-background.jpg
 tag_dir: tags
 github_repo: https://github.com/18F/18f.gsa.gov/blob/master
 

diff --git a/_includes/breadcrumb.html b/_includes/breadcrumb.html
@@ -0,0 +1,9 @@
+{% assign parent_title = include.parent_title | default: page.parent_title %}
+{% assign parent_permalink = include.parent_permalink | default: page.parent_permalink %}
+{% assign page_title = include.page_title | default: page.title %}
+{% assign background_class = include.background_class %}
+<section {% if background_class %}class="background-gray"{% endif %}>
+  <div class="breadcrumb usa-grid">
+    <a class="link-arrow-right" href="{{ site.baseurl }}/">Home</a> {% include svg/icons/arrow-right.svg %} <a class="link-arrow-right" href="{{ site.baseurl }}{{ parent_permalink }}">{{ parent_title }}</a> {% include svg/icons/arrow-right.svg %} <span class="link-arrow-right">{{ page_title }}</span>
+  </div>
+</section>
diff --git a/_includes/details-code.html b/_includes/details-code.html
@@ -14,26 +14,40 @@
 
 
   <ul class="usa-accordion styleguide-details">
-    {% if include.uswds_ref or include.scss_ref or include.other_ref or include.description or include.image %}
+    {% if include.content %}
+    <li>
+      <button class="usa-accordion-button" aria-controls="{{ include.title | slugify }}">
+        {{ include.text | default: 'Code' }}
+      </button>
+      <div id="{{ include.title | slugify }}" class="usa-accordion-content styleguide-border">
+        {{ code | markdownify }}
+      </div>
+    </li>
+    {% endif %}
+    {% if include.include_ref or include.uswds_ref or include.scss_ref or include.other_ref or include.description or include.image %}
     <li>
       <button class="usa-accordion-button"
         aria-expanded="true" aria-controls="{{ include.title | slugify | append: '-details' }}">
-        Usage details
+        Documentation
       </button>
       <div id="{{ include.title | slugify  | append: '-details' }}" class="usa-accordion-content styleguide-border">
         {% if include.description %}
           <p>{{ include.description | markdownify }}</p>
         {% endif %}
-        {% if include.uswds_ref or include.scss_ref or include.other_ref %}
+        {% if include.include_ref or include.uswds_ref or include.scss_ref or include.other_ref %}
+          <p>Additional resources:</p>
           <ul>
+            {% if include.include_ref %}
+            <li><a href="{{ include.include_ref }}">Include reference</a></li>
+            {% endif %}
             {% if include.uswds_ref %}
             <li><a href="{{ include.uswds_ref }}">USWDS references</a></li>
             {% endif %}
             {% if include.scss_ref %}
             <li><a href="{{ include.scss_ref }}">SCSS references</a></li>
             {% endif %}
             {% if include.other_ref %}
-            <li><a href="{{ include.other_ref }}">Documentation</a></li>
+            <li><a href="{{ include.other_ref }}">Additional documentation</a></li>
             {% endif %}
           </ul>
         {% endif %}
@@ -44,14 +58,4 @@
       </div>
     </li>
     {% endif %}
-    {% if include.content %}
-    <li>
-      <button class="usa-accordion-button" aria-controls="{{ include.title | slugify }}">
-        {{ include.text | default: 'Code' }}
-      </button>
-      <div id="{{ include.title | slugify }}" class="usa-accordion-content styleguide-border">
-        {{ code | markdownify }}
-      </div>
-    </li>
-    {% endif %}
   </ul>
diff --git a/_includes/details.html b/_includes/details.html
diff --git a/_includes/feature-image.html b/_includes/feature-image.html
@@ -3,12 +3,11 @@
 {% assign include_figcaption = include.image_figcaption | default: page.image_figcaption %}
 
 {% if include_image %}
-  {% unless page.hero == false %}
-    <figure class="post-feature_image" role="img" title="{{ include_image_alt }}" style="background-image: url('{{ site.baseurl }}{{ include_image }}')">
-      {% if include_figcaption %}
-        <figcaption>{{ include_figcaption }}</figcaption>
-
-      {% endif %}
-    </figure>
-  {% endunless %}
+{% unless page.hero == false %}
+<figure class="post-feature_image" role="img" title="{{ include_image_alt }}" style="background-image: url('{{ site.baseurl }}{{ include_image }}')">
+  {% if include_figcaption %}
+    <figcaption>{{ include_figcaption }}</figcaption>
+  {% endif %}
+</figure>
+{% endunless %}
 {% endif %}
diff --git a/_includes/navigation/drawer.html b/_includes/navigation/drawer.html
@@ -1,7 +1,7 @@
 {% assign nav_class_suffix = include.nav_class_suffix | default: '' %}
 
 
-<nav class="nav-accordion nav-mobile{{ nav_class_suffix }}" role="navigation">
+<nav class="nav-accordion nav-mobile{{ nav_class_suffix }}{% if include.nav_sticky %} sticky {% endif %}" role="navigation">
   <button class="sliding-panel-close{{ nav_class_suffix }}">
     {% include svg/icons/close.svg %}
   </button>

diff --git a/_includes/svg/icons/bars.svg b/_includes/svg/icons/bars.svg
diff --git a/_includes/svg/icons/close.svg b/_includes/svg/icons/close.svg
diff --git a/_join/index.md b/_join/index.md
@@ -3,6 +3,7 @@ title: Join 18F
 permalink: /join/
 layout: default-intro
 lead: Help transform how the federal government does technology.
+hero: false
 redirect_from:
   - /apply/
 subnav_items:
@@ -155,9 +156,9 @@ There are many guides to building a government-style resume. Here are several re
 
 This guide shows how to format a government-style resume and what information to include:
 
-> **Name**  
-> **City and state of current residence**  
-> **Email address**  
+> **Name**
+> **City and state of current residence**
+> **Email address**
 > **Phone number**
 >
 > **TECHNICAL SKILLS & TOOLS**
@@ -177,10 +178,10 @@ This guide shows how to format a government-style resume and what information to
 >
 > *See below for employment history formatting.*
 >
-> **Role/title, Company name**  
-> **City, State (if within the U.S.) or City, Country**  
-> **Duration of employment (MM/YYYY - MM/YYYY or Present)**  
-> **“Full-time” or “Part-time,” Number of hours per week: __**  
+> **Role/title, Company name**
+> **City, State (if within the U.S.) or City, Country**
+> **Duration of employment (MM/YYYY - MM/YYYY or Present)**
+> **“Full-time” or “Part-time,” Number of hours per week: __**
 >
 > For each listing, include a one-sentence description of the company, including the mission. This will help us understand the scope of your work, the context of your contributions, the scale of the company, and your role.
 >
@@ -195,13 +196,13 @@ This guide shows how to format a government-style resume and what information to
 >
 > If you were unemployed at any point, please indicate this. Unemployment is completely acceptable and understood — we just need a full timeline with no gaps. For instance:
 >
-> **Unemployed**  
-> **Start MM/YYYY - End MM/YYYY**  
+> **Unemployed**
+> **Start MM/YYYY - End MM/YYYY**
 > Brief explanation (Took time to travel, to be with my family, and so on) to the extent you’re comfortable sharing. It's also OK not to include a description.
 >
 > **EDUCATION**
 >
-> **Name of college/university/institution, City, State**  
+> **Name of college/university/institution, City, State**
 > Type of degree, major and minor, MM/YYYY degree received
 > Graduation honors, if applicable
 >

diff --git a/_layouts/default-intro.html b/_layouts/default-intro.html
@@ -23,11 +23,10 @@ <h1 class="usa-sr-only">{{ page.title }}</h1>
 {% endif %}
 
 {% if page.breadcrumb == true %}
-<section class="background-gray">
-  <div class="breadcrumb usa-grid">
-    <a class="link-arrow-right" href="{{ site.baseurl }}/">Home</a> {% include svg/icons/arrow-right.svg %} <a class="link-arrow-right" href="{{ site.baseurl }}{{ page.parent_permalink }}">{{ page.parent_title }}</a> {% include svg/icons/arrow-right.svg %} <span class="link-arrow-right">{{ page.position_title }}</span>
-  </div>
-</section>
+{% include breadcrumb.html
+  page_title=page.position_title
+  background_class='background-gray'
+%}
 {% endif %}
 
 <section class="{% unless page.gridless %}usa-grid usa-section {% endunless %}{% unless page.content_focus == false %} content-focus {% endunless %}{% if page.content_wide %} content-wide{% endif %} {% if page.include_subnav %} content-wide{% endif %}">

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -7,15 +7,15 @@
   <body class="{% if page.type == "tag"%}tag-{% endif %}page-{{ page.title | slugify }}
   {% if page.header_border == true or layout.header_border == true %}header_border{% endif %} {% if page.path contains '_posts' %}single-post{% endif %}">
 
-    {% unless layout.title == '18F Styleguide' %}
+    {% unless layout.title == '18F UI Styleguide' %}
       {% include header.html %}
     {% endunless %}
 
-    <div class="main-content" id="main-content">
+    <div class="main-content {% if layout.title == '18F UI Styleguide' %}styleguide-main-content{% endif %}" id="main-content">
       {{ content }}
     </div>
 
-    {% unless layout.title == '18F Styleguide' %}
+    {% unless layout.title == '18F UI Styleguide' %}
       {% include navigation.html drawer=true %}
 
       <footer role="contentinfo">

diff --git a/_layouts/project-tag-results.html b/_layouts/project-tag-results.html
@@ -5,9 +5,12 @@
 
 {% assign matching_posts = page | match_posts | sort:'date' | reverse %}
 
-<section class="breadcrumb usa-grid">
-  <a class="link-arrow-right" href="{{ site.baseurl }}/">Home</a> {% include svg/icons/arrow-right.svg %} <a class="link-arrow-right" href="{{ site.baseurl }}/what-we-deliver/">What we deliver</a> {% include svg/icons/arrow-right.svg %} <span class="link-arrow-right">{{ page.title }}</span>
-</section>
+
+{% include breadcrumb.html
+  parent_permalink='/what-we-deliver/'
+  parent_title='What we deliver'
+%}
+
 <section class="page-tag-results">
 
   <section class="background-dark">

diff --git a/_layouts/styleguide.html b/_layouts/styleguide.html
@@ -1,23 +1,61 @@
 ---
 layout: default
-title: 18F Styleguide
+title: 18F UI Styleguide
+nav_items:
+  - text: Typography
+    permalink: /styleguide/typography/
+    in_drawer: true
+  - text: Colors
+    permalink: /styleguide/colors/
+    in_drawer: true
+  - text: Buttons
+    permalink: /styleguide/buttons/
+    in_drawer: true
+  - text: Images
+    permalink: /styleguide/images/
+    in_drawer: true
+  - text: Breadcrumb
+    permalink: /styleguide/breadcrumb/
+    in_drawer: true
+  - text: Project cards
+    permalink: /styleguide/project-cards/
+    in_drawer: true
+  - text: Right aligned list
+    permalink: /styleguide/right-aligned-list/
+    in_drawer: true
+  - text: Sticky subnavigation
+    permalink: /styleguide/sticky-subnavigation/
+    in_drawer: true
+  - text: Blog components
+    permalink: /styleguide/blog-components/
+    in_drawer: true
+  - text: Blog images
+    permalink: /styleguide/blog-images/
+    in_drawer: true
+  - text: Using Jekyll
+    permalink: /styleguide/using-jekyll/
+    in_drawer: true
 ---
-<section class="background-gray usa-section">
-  <div class="usa-grid">
-    <h1 id="{{ page.title | slugify }}">{{ page.title }}</h1>
-    <div class="usa-width-three-fourths">
-      <h2 class='h3'><a href="https://18f.gsa.gov">18f.gsa.gov</a> inherits from the U.S. Web Design Standards and 18F brand guidelines to create style that is professional, unique, and informative</h2>
-    </div>
+
+{% assign dead_end_link = page.permalink | prepend: site.baseurl %}
+
+<section class="background-gray usa-section styleguide-header-wrapper">
+  <a href="{{ site.baseurl }}/styleguide/">
+    <img class="styleguide-logo" src="{{ site.baseurl }}/assets/img/logos/18F-Logo-L.png" alt="18F logo" />
+    <h1 class="h2" id="{{ page.title | slugify }}">{{ page.title }}</h1>
+  </a>
+  <div class="menu-btn-styleguide-wrapper">
+    <button class="menu-btn-styleguide">Menu</button>
   </div>
 </section>
-<section class="usa-grid content-focus content-wide usa-section">
+<div class="styleguide-content-wrapper">
 
-  <aside id="styleguide-navbar" class="nav-subnav">
-    <button class="menu-btn-styleguide">{% include svg/icons/bars.svg %}</button>
-    {% include navigation/drawer.html nav_items=page.nav_items nav_class_suffix='-styleguide' %}
+  <aside class="nav-subnav styleguide-subnav">
+    {% include navigation/drawer.html nav_items=layout.nav_items nav_class_suffix='-styleguide' %}
   </aside>
-  <section>
+
+  <section class="styleguide-content">
+    {% if page.subpage %}<h2>{{ page.subpage }}</h2>{% endif %}
     {{ content }}
   </section>
-</section>
-
+</div>