uswds-jekyll 3.0.0 → 4.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: f8833f4d71fde3ce27a1a1e93a4668d850fabd94
-  data.tar.gz: 076066966ac5df1f30f5a700947d5934c4fda813
+  metadata.gz: a63ca02d7d8bd697b702cbeb0c70f4653e113b0a
+  data.tar.gz: 2058e94b36962545e0602766ac351efe7e8e3d99
 SHA512:
-  metadata.gz: 587a658fb06380eb70d10527ef86ad9a6a70883e21dbc00af0285dac43bf1d75ef9c7b0f725525a685c4a2cb90a3bb624835cb3e9b7e6934a7da654e3b554dd8
-  data.tar.gz: b4694ce851e925d33a86260fa3b0dac4684e5c1cc2ac739f5f1dec7255d123049f03e9e99429122e535897cade21643bb697b61b3931e71803daa9374516e278
+  metadata.gz: 07e5ccaec467a9efea372f10b9140f30db3e6fea9da0fd073256ddb2131c5d50f56f820aa9ea23e0d377e7115544194b56725eebd0875810693c010f14ea338d
+  data.tar.gz: 11af72c0f14a46be40197b246cf20e3d11eee1e26c0ee7e39717f6599e9fe87ab8f5b6a59dd8ed6602d4ba2f5735de49b465c9524bdfa07c7c33a23aa37ee90e

data/README.md

@@ -11,9 +11,11 @@ This is a [Jekyll theme](https://jekyllrb.com/docs/themes/) for the
     - [Site title](#site-title)
     - [Navigation](#navigation)
     - [Page subnavigation](#page-subnavigation)
+    - [Color and font configuration](#color-and-font-configuration)
     - [Search](#search)
     - [Analytics](#analytics)
     - [Last modified date](#last-modified-date)
+    - [Anchor JS](#anchor-js)
 1. [Assets](#assets)
     - [Stylesheets](#stylesheets)
     - [Scripts](#scripts)
@@ -146,7 +148,7 @@ This theme's navigation system is powerful and flexible. Named
 navigational lists live in your project's `_data/navigation.yml`,
 e.g.
 
-By default all links are assumed to be internal to the site. You can add `external: true` to links that are external.
+By default all links are assumed to be internal to the site. You can add `external: true` to links that are external. You can also add `class: class-name` to add a class to a specific link.
 
 ```yml
 # _data/navigation.yml
@@ -223,6 +225,10 @@ redcarpet:
     - with_toc_data
 ```
 
+### Color and font configuration
+
+The default colors and fonts can be configured in the `_data/theme.yml` file.
+
 ### Search
 
 [Search.gov](https://search.gov/) is used for search and can be configured in `_config.yml`.
@@ -262,6 +268,16 @@ This will add the date right before the footer component and uses the `last-modi
 # last_updated: true
 ```
 
+### Anchor JS
+
+You can show an anchor link next to header tags by uncommenting this section from the `_config.yml` data file.
+This will add an anchor link after the header tag on the page and post layouts making ech header linkable.
+See https://github.com/bryanbraun/anchorjs for more information.
+
+```yml
+# anchor_js_targets: [h1, h2, h3, h4, h5, h6]
+```
+
 ## Assets
 
 The [stylesheet](_includes/styles.html) and [script](_includes/scripts.html)

data/_includes/components/header--basic.html

@@ -40,9 +40,9 @@
               {% endfor %}
             </ul>
             {% else %}
-            <a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
-              <span>{{ _section.text }}</span>
-            </a>
+              <a class="{% if _section.class %}{{ _section.class }}{% else %} usa-nav-link {% endif %} {% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
+                <span>{{ _section.text }}</span>
+              </a>
             {% endif %}
           </li>
           {% endfor %}

data/_includes/components/header--extended.html

@@ -39,9 +39,9 @@
             {% endfor %}
           </ul>
           {% else %}
-          <a class="usa-nav-link{% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
-            <span>{{ _section.text }}</span>
-          </a>
+            <a class="{% if _section.class %}{{ _section.class }}{% else %} usa-nav-link {% endif %} {% if _section.href == page.permalink %} usa-current{% endif %}" href="{% if _section.external %}{{ _section.href }}{% else %}{{ _section.href | relative_url }}{% endif %}">
+              <span>{{ _section.text }}</span>
+            </a>
           {% endif %}
         </li>
         {% endfor %}
@@ -74,9 +74,12 @@
           {% endif %}
           {% assign secondary_links = site.data.navigation[_secondary.links] | default: _secondary.links %}
           {% for _link in secondary_links %}
-          <li>
-            <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}">{{ _link.text }}</a>
-          </li>
+            <li>
+              <a href="{% if _link.external %}{{ _link.href }}{% else %}{{ _link.href | relative_url }}{% endif %}"
+              {% if _link.class %} class="{{ _link.class }}" {% endif %}>
+                {{ _link.text }}
+              </a>
+            </li>
           {% endfor %}
         </ul>
       </div>

data/_includes/sidenav.html

@@ -6,9 +6,10 @@
       {% assign _current = true %}
     {% endif %}
   <li>
-    <a href="{% if link.external == true %}{{ link.href }}{% else %}{{ link.href | relative_url }}{% endif %}" {% if _current %}
-      class="usa-current"{% endif %}>
-      {{ link.text }}
+    <a href="{% if link.external == true %}{{ link.href }}{% else %}{{ link.href | relative_url }}{% endif %}"
+       {% if _current %} class="usa-current" {% endif %}
+       {% if link.class %}class="{{ link.class }}" {% endif %} >
+       {{ link.text }}
     </a>
     {% if _current and page.subnav %}
     <ul class="usa-sidenav-sub_list">

data/_includes/styles.html

@@ -1,15 +1,11 @@
 {% assign _styles = '' | split: '' %}
-{% assign _site_styles = site.styles %}
-{% unless _site_styles -%}
-  {% assign _uswds_css = '/assets/uswds/css/uswds.min.css' %}
-  {% assign _site_styles = '' | split: ''
-    | push: _uswds_css %}
-{% endunless %}
+{% assign _default_styles = '' | split: ''
+  | push: '/assets/css/main.css' %}
 {% assign _styles = _styles
-  | push: _site_styles
+  | push: _default_styles
+  | push: site.styles
   | push: layout.styles
-  | push: page.styles
-  | uniq %}
+  | push: page.styles %}
 {% for _list in _styles %}{% for _style in _list %}
 <link rel="stylesheet"
   href="{{ _style.href | default: _style | relative_url }}"

data/_includes/subnav.html

@@ -1,5 +1,5 @@
 {% for link in include.links %}
   <li>
-    <a href="{% if link.external %}{{ link.href }}{% else %}{{ link.href }}{% endif %}">{{ link.text }}</a>
+    <a href="{% if link.external %}{{ link.href }}{% else %}{{ link.href }}{% endif %}" {% if link.class %} class="{{ link.class }}" {% endif %}>{{ link.text }} {{ link.class }}</a>
   </li>
 {% endfor %}

data/_layouts/default.html

@@ -9,7 +9,7 @@
       {% include analytics.html %}
     {% endif %}
   </head>
-  <body class="{{ layout.class }} {{ page.class }}">
+  <body class="{{ layout.class }} {{ page.class }} {% if site.site_width %}site-{{ site.site_width }}{% endif %}">
 
     {% include skipnav.html %}
     {% include header.html %}

data/_layouts/page.html

@@ -5,11 +5,11 @@ main:
 ---
 {% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
 {% if sidenav %}
-<aside class="usa-width-one-fourth usa-layout-docs-sidenav">
+<aside class="usa-layout-docs-sidenav sidenav">
   {% include sidenav.html links=sidenav %}
 </aside>
 
-<div class="usa-width-three-fourths usa-layout-docs-main_content">
+<div class="usa-layout-docs-main_content">
   {{ content }}
 </div>
 {% else %}

data/_layouts/post.html

@@ -1,19 +1,7 @@
 ---
-layout: default
+layout: page
 main:
   class: usa-grid usa-section usa-content usa-layout-docs
 ---
-{% assign sidenav = site.data.navigation[page.sidenav] | default: page.sidenav %}
-{% if sidenav %}
-<aside class="usa-width-one-fourth usa-layout-docs-sidenav">
-  {% include sidenav.html links=sidenav %}
-</aside>
 
-<div class="usa-width-three-fourths usa-layout-docs-main_content">
-  {{ content }}
-</div>
-{% else %}
-<div class="usa-layout-docs-main_content">
-  {{ content }}
-</div>
-{% endif %}
+{{ content }}

data/_sass/components/_all.scss

@@ -0,0 +1,7 @@
+@import 'alt-color-section';
+@import 'footer';
+@import 'header';
+@import 'hero';
+@import 'side-nav';
+@import 'top-nav';
+@import 'usa-banner';

data/_sass/components/_alt-color-section.scss

@@ -0,0 +1,35 @@
+.usa-section-dark {
+  @if variable-exists(alt-section-bg) {
+    background-color: $alt-section-bg;
+  }
+
+
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @if variable-exists(alt-section-header) {
+      color: $alt-section-header;
+    }
+  }
+
+  p {
+    @if variable-exists(alt-section-text) {
+      color: $alt-section-text;
+    }
+  }
+
+  a {
+    @if variable-exists(alt-section-link) {
+      color: $alt-section-link;
+    }
+
+    &:hover {
+      @if variable-exists(alt-section-link-hover) {
+        color: $alt-section-link-hover;
+      }
+    }
+  }
+}

data/_sass/components/_footer.scss

@@ -0,0 +1,26 @@
+.usa-footer-primary-section {
+  @if variable-exists(primary-footer-bg) {
+    background-color: $primary-footer-bg;
+  }
+
+  .usa-footer-primary-link {
+    @if variable-exists(primary-footer-link) {
+      color: $primary-footer-link;
+    }
+  }
+}
+
+.usa-footer-secondary_section {
+  @if variable-exists(footer-bg) {
+    background-color: $footer-bg;
+  }
+  @if variable-exists(footer-text) {
+    color: $footer-text;
+  }
+
+  a {
+    @if variable-exists(footer-link) {
+      color: $footer-link;
+    }
+  }
+}

data/_sass/components/_header.scss

@@ -0,0 +1,27 @@
+.usa-header {
+  @if variable-exists(header-bg) {
+    background-color: $header-bg;
+  }
+
+  .usa-logo {
+    a {
+      @if variable-exists(header-title) {
+        color: $header-title;
+      }
+    }
+  }
+
+  .usa-nav-secondary-links {
+    a {
+      @if variable-exists(header-link) {
+        color: $header-link;
+      }
+
+      &:hover {
+        @if variable-exists(header-link-hover) {
+          color: $header-link-hover;
+        }
+      }
+    }
+  }
+}

data/_sass/components/_hero.scss

@@ -0,0 +1,45 @@
+.usa-hero {
+  .usa-hero-callout {
+    @if variable-exists(hero-bg) {
+      background-color: $hero-bg;
+    }
+
+    h1,
+    h2,
+    h3,
+    h4,
+    h5,
+    h6 {
+      @if variable-exists(hero-header) {
+        color: $hero-header;
+      }
+    }
+
+    .usa-hero-callout-alt {
+      @if variable-exists(hero-header-alt) {
+        color: $hero-header-alt;
+      }
+    }
+
+    p {
+      @if variable-exists(hero-text) {
+        color: $hero-text;
+      }
+    }
+
+    .usa-hero-link {
+      @if variable-exists(hero-link) {
+        color: $hero-link;
+      }
+    }
+
+    .usa-button {
+      @if variable-exists(hero-button-bg) {
+        background-color: $hero-button-bg;
+      }
+      @if variable-exists(hero-button-text) {
+        color: $hero-button-text;
+      }
+    }
+  }
+}

data/_sass/components/_nav-buttons.scss

@@ -0,0 +1,24 @@
+.usa-header,
+.usa-sidenav-list {
+  @include media($nav-width) {
+    .usa-button {
+      margin: 0;
+      width: auto;
+    }
+  }
+  .usa-button {
+    color: $color-white;
+    padding: 1rem;
+    &:hover {
+      background-color: $color-primary-darker;
+      color: $color-white;
+      text-decoration: none;
+    }
+  }
+}
+.usa-sidenav-list,
+.usa-footer-nav .usa-footer-primary-content {
+  .usa-button {
+    margin: 1rem 0;
+  }
+}

data/_sass/components/_side-nav.scss

@@ -0,0 +1,56 @@
+.usa-sidenav-list {
+  @if variable-exists(side-nav-bg) {
+    background-color: $side-nav-bg;
+  }
+
+  a {
+    @if variable-exists(side-nav-link) {
+      color: $side-nav-link;
+    }
+
+    &:hover {
+      @if variable-exists(side-nav-link-hover-bg) {
+        background-color: $side-nav-link-hover-bg;
+      }
+      @if variable-exists(side-nav-link-hover) {
+        color: $side-nav-link-hover;
+      }
+    }
+
+    &.usa-current {
+      @if variable-exists(side-nav-link-current) {
+        border-color: $side-nav-link-current;
+      }
+      @if variable-exists(side-nav-link-current) {
+        color: $side-nav-link-current;
+      }
+    }
+  }
+}
+// Styles for adjusting the breakpoint for the side nav
+.usa-layout-docs {
+  display: flex;
+}
+@include media ($medium-screen){
+  .sidenav {
+    width: 250px;
+  }
+}
+
+@include media($nav-width) {
+  .usa-layout-docs {
+    display: block;
+
+    .sidenav {
+      display: block;
+      float: left;
+      padding-right: 1rem;
+
+      + .usa-layout-docs-main_content {
+        display: inline-block;
+        padding-left: 3rem;
+        width: calc(100% - 250px);
+      }
+    }
+  }
+}

data/_sass/components/_site-width.scss

@@ -0,0 +1,12 @@
+.site-wide {
+  .usa-grid {
+    max-width: 100%;
+  }
+
+  .usa-header {
+    .usa-navbar,
+    .usa-nav-inner {
+      max-width: 100%;
+    }
+  }
+}

data/_sass/components/_top-nav.scss

@@ -0,0 +1,73 @@
+
+.usa-header {
+  .usa-nav {
+    @if variable-exists(top-nav-bg) {
+      background-color: $top-nav-bg;
+    }
+  }
+
+  .usa-nav-primary {
+    a,
+    button {
+      &:hover {
+        @if variable-exists(top-nav-link-hover-bg) {
+          background-color: $top-nav-link-hover-bg;
+        }
+      }
+    }
+
+    .usa-nav-link {
+      span {
+        @if variable-exists(top-nav-link) {
+          color: $top-nav-link;
+        }
+      }
+
+      &:hover {
+        @if variable-exists(top-nav-link-hover) {
+          color: $top-nav-link-hover;
+        }
+
+        span {
+          @if variable-exists(top-nav-link-current) {
+            border-bottom-color: $top-nav-link-current;
+          }
+          @if variable-exists(top-nav-link-hover) {
+            color: $top-nav-link-hover;
+          }
+        }
+      }
+    }
+
+    .usa-current,
+    button[aria-expanded=true] {
+      span {
+        @if variable-exists(top-nav-link-current) {
+          border-color: $top-nav-link-current;
+        }
+        @if variable-exists(top-nav-link-current) {
+          color: $top-nav-link-current;
+        }
+      }
+    }
+  }
+
+  button[aria-expanded=true],
+  button[aria-expanded=true]:hover,
+  .usa-nav-submenu {
+    @if variable-exists(top-nav-dropdown-bg) {
+      background-color: $top-nav-dropdown-bg;
+    }
+  }
+
+  .usa-nav-submenu {
+    a:hover {
+      @if variable-exists(top-nav-dropdown-link-hover-bg) {
+        background-color: $top-nav-dropdown-link-hover-bg;
+      }
+      @if variable-exists(top-nav-dropdown-link) {
+        color: $top-nav-dropdown-link;
+      }
+    }
+  }
+}