federalist-basic-report-theme 0.1.0

data/_includes/components/hero.html

@@ -0,0 +1,32 @@
+{% if hero %}
+<section class="usa-hero"{% if hero.image %}
+  style="background-image: url('{{ hero.image | relative_url }}')"{% endif %}>
+  <div class="usa-grid">
+    <div class="usa-hero-callout usa-section-dark">
+      {% if hero.callout %}
+      <h2>
+        {% if hero.callout.alt %}
+        <span class="usa-hero-callout-alt">{{ hero.callout.alt }}</span>
+        {% endif %}
+        {{ hero.callout.text | default: hero.callout }}
+      </h2>
+      {% endif %}
+
+      {% if hero.link %}
+      <a class="usa-hero-link" href="{{ hero.link.href | relative_url }}">
+        {{ hero.link.text }}
+      </a>
+      {% endif %}
+
+      {{ hero.content | markdownify }}
+
+      {% if hero.button %}
+      <a class="usa-button"
+        href="{{ hero.button.href | relative_url }}">
+        {{ hero.button.text }}
+      </a>
+      {% endif %}
+    </div>
+  </div>
+</section>
+{% endif %}

data/_includes/components/sidenav--default.html

@@ -0,0 +1,26 @@
+<ul class="usa-sidenav-list">
+  {% for p in site.pages %}
+    {% unless p.title %}
+      {% comment%}
+        Only show pages that have a title.
+      {% endcomment %}
+      {% continue %}
+    {% endunless %}
+    {% assign _current = false %}
+    {% if p.url == page.url %}
+      {% assign _current = true %}
+    {% endif %}
+    <li>
+      <a href="{{ p.url | relative_url }}"
+        {% if _current %} class="usa-current" {% endif %}
+      >
+         {{ p.title }}
+      </a>
+      {% if _current and page.subnav %}
+      <ul class="usa-sidenav-sub_list">
+        {% include subnav.html links=page.subnav %}
+      </ul>
+      {% endif %}
+    </li>
+  {% endfor %}
+</ul>

data/_includes/favicon.html

@@ -0,0 +1,24 @@
+<link rel="shortcut icon" type="image/ico"
+  href="/assets/uswds/img/favicons/favicon.ico">
+
+<link rel="icon" type="image/png"
+  href="/assets/uswds/img/favicons/favicon.png">
+
+<link rel="icon" type="image/png"
+  sizes="192x192"
+  href="/assets/uswds/img/favicons/favicon-192.png">
+
+<link rel="apple-touch-icon-precomposed" type=""
+  href="/assets/uswds/img/favicons/favicon-57.png">
+
+<link rel="apple-touch-icon-precomposed" type=""
+  sizes="72x72"
+  href="/assets/uswds/img/favicons/favicon-72.png">
+
+<link rel="apple-touch-icon-precomposed" type=""
+  sizes="114x114"
+  href="/assets/uswds/img/favicons/favicon-114.png">
+
+<link rel="apple-touch-icon-precomposed" type=""
+  sizes="144x144"
+  href="/assets/uswds/img/favicons/favicon-144.png">

data/_includes/footer.html

@@ -0,0 +1,3 @@
+{% assign footer = site.data.footer %}
+
+{% include components/footer--medium.html %}

data/_includes/graphic-list.html

@@ -0,0 +1,2 @@
+{% assign graphics = include.graphics %}
+{% include components/graphic-list.html %}

data/_includes/header.html

@@ -0,0 +1,9 @@
+{% assign header = site.data.header %}
+
+{% include components/banner.html %}
+
+{% if header.type == 'basic' %}
+  {% include components/header--basic.html %}
+{% else %}
+  {% include components/header--extended.html %}
+{% endif %}

data/_includes/meta.html

@@ -0,0 +1,6 @@
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta charset="utf-8">
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+
+<title>{% if page.title %}{{ page.title }} | {% endif %}{{ site.title }}</title>
+{% include favicon.html %}

data/_includes/scripts.html

@@ -0,0 +1,39 @@
+{% assign _scripts = '' | split: '' %}
+{% assign _async_marker = 'uswds_async=true' %}
+{% assign _site_scripts = site.scripts %}
+{% unless _site_scripts -%}
+  {% assign _uswds_js = '/assets/uswds/js/uswds.min.js' | append: '?' | append: _async_marker %}
+  {% assign _site_scripts = '' | split: ''
+    | push: _uswds_js %}
+    {% if site.anchor_js_targets %}
+      {% assign _anchor_js = '/assets/js/vendor/anchor.min.js' %}
+      {% assign _main_js = '/assets/js/main.js' %}
+      {% assign _site_scripts = _site_scripts
+        | push: _anchor_js
+        | push: _main_js %}
+    {% endif %}
+{% endunless %}
+{% assign _scripts = _scripts
+  | push: _site_scripts
+  | push: layout.scripts
+  | push: page.scripts
+  | uniq %}
+{% for _list in _scripts %}{% for _script in _list %}
+  {% assign _src = _script.src | default: _script %}
+<script src="{{ _src | replace: _async_marker, '' | relative_url }}"{% if _script.async or _src contains _async_marker %} async{% endif %}></script>
+{% endfor %}{% endfor %}
+
+
+{% if site.search %}
+<script type="text/javascript">
+//<![CDATA[
+      var usasearch_config = { siteHandle:"{{ site.search.site_handle }}" };
+
+      var script = document.createElement("script");
+      script.type = "text/javascript";
+      script.src = "//search.usa.gov/javascripts/remote.loader.js";
+      document.getElementsByTagName("head")[0].appendChild(script);
+
+//]]>
+</script>
+{% endif %}

data/_includes/sidenav.html

@@ -0,0 +1,27 @@
+{% if include.links %}
+
+<ul class="usa-sidenav-list">
+  {% for link in include.links %}
+    {% assign _href = link.href %}
+    {% assign _current = false %}
+    {% if link.href == page.url or link.href == page.permalink %}
+      {% 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 %}
+       {% if link.class %}class="{{ link.class }}" {% endif %} >
+       {{ link.text }}
+    </a>
+    {% if _current and page.subnav %}
+    <ul class="usa-sidenav-sub_list">
+      {% include subnav.html links=page.subnav %}
+    </ul>
+    {% endif %}
+  </li>
+  {% endfor %}
+</ul>
+
+{% else %}
+  {% include components/sidenav--default.html %}
+{% endif %}

data/_includes/skipnav.html

@@ -0,0 +1 @@
+<a class="usa-skipnav" href="#main-content">Skip to main content</a>

data/_includes/styles.html

@@ -0,0 +1,14 @@
+{% assign _styles = '' | split: '' %}
+{% assign _default_styles = '' | split: ''
+  | push: '/assets/css/federalist.css'
+  | push: '/assets/css/theme.css' %}
+{% assign _styles = _styles
+  | push: _default_styles
+  | push: site.styles
+  | push: layout.styles
+  | push: page.styles %}
+{% for _list in _styles %}{% for _style in _list %}
+<link rel="stylesheet"
+  href="{{ _style.href | default: _style | relative_url }}"
+  media="{{ _style.media | default: 'screen' }}">
+{% endfor %}{% endfor %}

data/_includes/subnav.html

@@ -0,0 +1,5 @@
+{% for link in include.links %}
+  <li>
+    <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

@@ -0,0 +1,24 @@
+---
+---
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en-US' }}">
+  <head>
+    {% include meta.html %}
+    {% include styles.html %}
+    {% if site.google_analytics_ua or site.dap_agency %}
+      {% include analytics.html %}
+    {% endif %}
+  </head>
+  <body class="{{ layout.class }} {{ page.class }} site-wide">
+
+    {% include skipnav.html %}
+    {% include header.html %}
+
+    <main id="main-content"{% for _attr in layout.main %} {{ _attr[0] }}="{{ _attr[1] }}"{% endfor %}>
+    {{ content }}
+    </main>
+
+    {% include footer.html %}
+    {% include scripts.html %}
+  </body>
+</html>

data/_layouts/home.html

@@ -0,0 +1,43 @@
+---
+layout: page
+---
+
+{% assign hero = page.hero %}
+{% include components/hero.html %}
+
+<section class="usa-grid usa-section">
+  <h1>Welcome to your Federalist site!</h1>
+  <p>
+    This is the Basic Report template that features a single report.
+  </p>
+  <p>
+    Place your site content under the `pages/` directory.
+  </p>
+  <p>
+    Look at the <a href="https://github.com/adborden/federalist-basic-report-theme">theme documentation</a> for more information on how to configure your site.
+  </p>
+</section>
+
+{% if page.tagline and page.intro %}
+<section class="usa-grid usa-section">
+  <div class="usa-width-one-third">
+    <h2>{{ page.tagline }}</h2>
+  </div>
+  <div class="usa-width-two-thirds">
+    {{ page.intro | markdownify }}
+  </div>
+</section>
+{% endif %}
+
+{% capture _graphics %}
+  {% include graphic-list.html graphics=page.graphics %}
+{% endcapture %}
+{% if page.graphics_position != 'after' %}{{ _graphics }}{% endif %}
+
+<section class="usa-section">
+  <div class="usa-grid">
+    {{ content }}
+  </div>
+</section>
+
+{% if page.graphics_position == 'after' %}{{ _graphics }}{% endif %}

data/_layouts/page.html

@@ -0,0 +1,13 @@
+---
+layout: default
+main:
+  class: usa-grid usa-section usa-content usa-layout-docs
+---
+{% assign sidenav = page.sidenav | default: site.sidenav %}
+<aside class="usa-layout-docs-sidenav sidenav">
+  {% include sidenav.html links=sidenav %}
+</aside>
+
+<div class="usa-layout-docs-main_content">
+  {{ content }}
+</div>

data/_layouts/post.html

@@ -0,0 +1,7 @@
+---
+layout: page
+main:
+  class: usa-grid usa-section usa-content usa-layout-docs
+---
+
+{{ 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;
+      }
+    }
+  }
+}