Add basic hero component

_includes/hero.html

@@ -0,0 +1,23 @@
+{% assign hero = page.hero %}
+<section class="hero theme-{{ hero.theme | default: "white" }}">
+    <div class="hero__container container container-offset">
+
+        {% assign hero = page.hero %}
+        <header class="hero__header">
+
+            {% if hero.label %}
+                <h1 class="hero__section-heading">{{ hero.label }}</h1>
+            {% endif %}
+
+            {% if hero.title %}
+                <h2 class="hero__title">{{ hero.title }}</h2>
+            {% endif %}
+
+            {% if hero.title %}
+                <p class="hero__body m-0">{{ hero.body }}</p>
+            {% endif %}
+        </header>
+
+    </div>
+    {% include logo-texture.html %}
+</section>

_includes/logo-texture.html

@@ -0,0 +1 @@
+<svg class="logo-texture" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1800 500" aria-hidden="true" preserveAspectRatio="xMidYMin slice"><path fill="none" stroke="#000" stroke-width="2" d="M1799.827-962.497l56.146 319.467c70.96 2.313 137.884 34.876 183.516 89.942 50.973 60.248 78.258 145.376 78.558 252.984v19.484c0 250.737-182.584 432.178-452.593 461.145l-.007-.014a258.945 258.945 0 0 1-62.73 85.702 300.651 300.651 0 0 1-40.556 36.266 972.911 972.911 0 0 1 354.746 82.623l70.974 30.313-112.45 308.575-158.081-52.65 59.554-165.045a811.83 811.83 0 0 0-477.751-10.112 567.576 567.576 0 0 0-214.666 105.754 536.156 536.156 0 0 0-55.022 57.861c-10.683 13.087-20.079 26.191-28.186 39.313a249.28 249.28 0 0 1-18.614 35.15c-21.128 47.824-25.22 95.881-12.28 144.171 11.692 43.64 35.609 60.618 71.748 50.934a265.08 265.08 0 0 0 46.288-22.269 326.85 326.85 0 0 1 58.927-24.194 215.664 215.664 0 0 1 155.747 20.753 211.775 211.775 0 0 1 108.828 142.949 247.07 247.07 0 0 1-22.511 188.737 252.372 252.372 0 0 1-166.628 121.384c-86.848 26.538-181.093 11.3-255.152-41.255-76.322-52.997-133.292-141.51-166.428-263.813l-4.842-18.07-1.096-4.09c-15.172-56.623-21.328-112.332-19.115-166.159l.01.004a289.76 289.76 0 0 0 109.065-40.588 249.713 249.713 0 0 0 97.44-88.495c5.177-11.731 11.383-23.447 18.613-35.15a249.33 249.33 0 0 0 12.126-35.051 244.485 244.485 0 0 0-26.821-186.165 209.883 209.883 0 0 0-3.232-6.047c73.907-58.51 165.753-104.279 272.573-132.901.848-.242 1.696-.483 2.545-.722-62.993-23.849-125.712-66.011-186.743-126.703l-10.63-10.631-6.009-6.008C970.75 110.544 919.783 11.195 901.561-93.858a803.248 803.248 0 0 1 166.025-35.237l6.572-9.376c-7.258-34.446-7.443-72.85-.553-115.21a550.116 550.116 0 0 1 7.87-39.117 962.532 962.532 0 0 1 218.365 9.082l75.602 10.797-99.758 78.794 7.013 4.627-85.154 122.296a689.742 689.742 0 0 0 41.56 25.27 271.683 271.683 0 0 1-16.021 21.208c-27.144 27.144-57.099 24.333-89.864-8.432-28.369-28.369-47.4-61.96-57.095-100.776a802.95 802.95 0 0 1 120.938-2.089l78.623-62.104-111.123-73.307-90.403 128.96a236.27 236.27 0 0 0 1.965 8.54c-2.847.262-5.693.542-8.537.837l-63.14 90.069 51.573 40.465c150.513 121.405 338.84 186.212 532.213 183.144 26.44 0 52.206-1.375 77.222-4.058l-.007-.014a258.876 258.876 0 0 0 23.075-107.614 253.435 253.435 0 0 0-2.82-35.286 482.21 482.21 0 0 0 101.023-31.076 455.48 455.48 0 0 0 57.87-35.37c64.365-46.36 96.547-101.813 96.547-166.358 0-38.368-15.891-57.551-47.674-57.551a225.241 225.241 0 0 0-42.877 8.093 277.733 277.733 0 0 1-53.671 6.894 183.23 183.23 0 0 1-123.234-51.256 179.819 179.819 0 0 1-57.869-141.18 209.787 209.787 0 0 1 59.968-149.872 214.413 214.413 0 0 1 19.284-17.192l163.071-33.44-2.167-12.333a249.247 249.247 0 0 0-16.776.018 214.436 214.436 0 0 0-144.128 45.755l-4.377.899-31.714-177.165a833.152 833.152 0 0 0-429.657 236.136 582.511 582.511 0 0 0-136.5 204.078 550.155 550.155 0 0 0-11.346 40.511A962.793 962.793 0 0 0 899.75-261.98c-8.292 56.718-7.716 113.2 1.81 168.124A803.1 803.1 0 0 0 737.827-19.33a561.638 561.638 0 0 0-178.097 156.06 530.547 530.547 0 0 0-37.772 69.397c-37.922 84.271-38.081 158.973-.476 224.106 22.353 38.717 49.56 48.82 81.623 30.308a262.308 262.308 0 0 0 38.54-33.14 323.431 323.431 0 0 1 50.127-38.216 213.407 213.407 0 0 1 154.181-20.053 209.56 209.56 0 0 1 137.4 102.714C856.489 572.252 782.445 710.18 776.15 863.339l.01.004a289.823 289.823 0 0 1-145.38-14.673c-86.524-31.11-163.645-101.12-226.641-209.534l-9.256-16.031-2.096-3.63c-77.694-134.57-91.866-279.442-49.666-413.649l3.153-1.861c132.515-76.508 211.57-188.894 227.26-308.12l-.026-.01c25.744-19.237 53.336-37.414 82.729-54.383A962.784 962.784 0 0 1 899.75-261.981c19.823-135.728 90.414-272.775 210.54-392.9 162.528-167.769 378.712-273.264 610.935-298.128l78.602-9.488zm-537.33 1299.594l-4.026 1.135c32.123 12.165 64.317 19.57 96.395 22.244 74.5 6.978 148.228-14.115 207.295-57.997a972.809 972.809 0 0 0-299.663 34.618zM189.63-467.325a198.314 198.314 0 0 1 174.061-17.728c59.189 21.281 111.946 69.174 155.04 143.338l6.332 10.967 1.434 2.483c41.952 72.663 56.83 149.718 47.04 224.11l-.027-.01C457.842-17.736 379.517 90.078 343.122 205.825l.016.005A658.738 658.738 0 0 1-94 289.59l-51.718-7.385 19.465-221.465 112.587 6.729-10.025 118.35a549.546 549.546 0 0 0 314.153-77.09A384.205 384.205 0 0 0 412.295 1.97a362.936 362.936 0 0 0 25.839-47.473c25.942-57.648 26.05-108.75.326-153.307-15.291-26.485-33.904-33.396-55.837-20.733a179.44 179.44 0 0 0-26.364 22.67 221.253 221.253 0 0 1-34.291 26.144 145.988 145.988 0 0 1-105.473 13.717 143.355 143.355 0 0 1-96.203-74.4 167.248 167.248 0 0 1-18.347-127.352 170.837 170.837 0 0 1 87.684-108.561zm1252.128 289.873a217.166 217.166 0 0 1 169.99 71.144 253.35 253.35 0 0 1 73.955 143.92 482.25 482.25 0 0 1-98.37 8.49 689.803 689.803 0 0 1-348.23-88.035 271.695 271.695 0 0 0 13.687-22.32 335.461 335.461 0 0 1 39.95-51.725 221.31 221.31 0 0 1 149.018-61.474z"/></svg>

_layouts/page.html

@@ -1,14 +1,11 @@
 ---
 layout: default
 ---
+
+{% if page.hero %}
+    {% include hero.html %}
+{% endif %}
+
 <article>
-
-    <header>
-        <h1>{{ page.title | escape }}</h1>
-    </header>
-
-    <div>
-        {{ content }}
-    </div>
-
+    {{ content }}
 </article>

assets/_sass/base/_colors.scss

@@ -41,3 +41,55 @@ $slate-300: #CCD4E8;
 $slate-200: #E9EDF8;
 $slate-100: #F8F9FD;
 $white: #fff;
+
+////////////////////
+// Color Themes
+////////////////////
+
+.theme-white {
+    --theme-primary-color: #{$white};
+    --theme-secondary-color: var(--theme-primary-color);
+    --theme-border-color: #{$slate-200};
+    --theme-accent-color: #{$teal};
+    --theme-text-color: #{$slate-800};
+}
+
+.theme-teal {
+    --theme-primary-color: #{$teal};
+    --theme-secondary-color: #{$teal-dark};
+    --theme-border-color: #{$teal};
+    --theme-accent-color: #{$white};
+    --theme-text-color: var(--theme-accent-color);
+}
+
+.theme-yellow {
+    --theme-primary-color: #{$yellow-light};
+    --theme-secondary-color: #{$yellow-dark};
+    --theme-border-color: #{$yellow-light};
+    --theme-accent-color: #{$slate-800};
+    --theme-text-color: var(--theme-accent-color);
+}
+
+.theme-cabernet {
+    --theme-primary-color: #{$cabernet-light};
+    --theme-secondary-color: #{$cabernet-dark};
+    --theme-border-color: #{$cabernet-light};
+    --theme-accent-color: #{$white};
+    --theme-text-color: var(--theme-accent-color);
+}
+
+.theme-midnight {
+    --theme-primary-color: #{$midnight-light};
+    --theme-secondary-color: #{$midnight-dark};
+    --theme-border-color: #{$midnight-light};
+    --theme-accent-color: #{$white};
+    --theme-text-color: var(--theme-accent-color);
+}
+
+.theme-slate {
+    --theme-primary-color: #{$slate-700};
+    --theme-secondary-color: #{$slate-800};
+    --theme-border-color: #{$slate-700};
+    --theme-accent-color: #{$white};
+    --theme-text-color: var(--theme-accent-color);
+}

assets/_sass/base/_layout.scss

@@ -27,13 +27,23 @@ $bp-xl: $max-width;
     padding-left: $cp-sm;
     padding-right: $cp-sm;
 
-    @media screen and (min-width: $bp-md) {
+    @media (min-width: $bp-md) {
         padding-left: $cp-md;
         padding-right: $cp-md;
     }
 
-    @media screen and (min-width: $bp-xl) {
+    @media (min-width: $bp-xl) {
         padding-left: $cp-lg;
         padding-right: $cp-lg;
     }
 }
+
+////////////////////
+// Container
+////////////////////
+
+.container-offset {
+    @media (min-width: $bp-lg) {
+        padding-left: ($cp-md + 7%);
+    }
+}

assets/_sass/base/_typography.scss

@@ -34,9 +34,41 @@ body {
     @extend .sans-serif;
     font-size: 100%;
     font-weight: 400;
+    line-height: 1.5;
     color: $slate-800;
 }
 
+// body text reset
+p,
+address,
+ul {
+    margin: 0 0 1.5em 0;
+    font-style: normal;
+}
+
+.body-lg {
+    font-size: 1rem;
+
+    @media (min-width: $bp-md) {
+        font-size: 18px;
+    }
+}
+
+////////////////////
+// Headings
+////////////////////
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+    font-weight: 700;
+    line-height: 1.25em;
+    margin: 0 0 0.6em 0;
+}
+
 ////////////////////
 // Links
 ////////////////////

assets/_sass/component/_hero.scss

@@ -0,0 +1,69 @@
+////////////////////
+// Hero
+////////////////////
+
+.hero {
+    position: relative;
+    margin-bottom: rem-calc(40px);
+    padding-top: rem-calc(40px);
+    padding-bottom: rem-calc(40px);
+    background-color: var(--theme-primary-color);
+    background-image: linear-gradient(180deg, var(--theme-primary-color) 0%, var(--theme-secondary-color) 100%);
+    border-bottom: 1px solid $slate-300;
+    overflow: hidden;
+    z-index: 2;
+
+    @media (min-width: $bp-md) {
+        margin-bottom: rem-calc(60px);
+        padding-top: rem-calc(60px);
+        padding-bottom: rem-calc(60px);
+    }
+
+    @media (min-width: $bp-lg) {
+        margin-bottom: rem-calc(80px);
+        padding-top: rem-calc(80px);
+        padding-bottom: rem-calc(80px);
+    }
+}
+
+.logo-texture {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: .5;
+    z-index: -1;
+
+    path {
+        stroke: var(--theme-border-color);
+    }
+}
+
+.hero__header {
+    color: var(--theme-text-color);
+}
+
+.hero__section-heading {
+    @extend .section-heading;
+    color: var(--theme-accent-color);
+}
+
+.hero__title {
+    max-width: 36ch;
+    font-size: rem-calc(24px);
+
+    @media (min-width: $bp-md) {
+        font-size: rem-calc(28px);
+    }
+
+    @media (min-width: $bp-lg) {
+        font-size: rem-calc(34px);
+    }
+}
+
+.hero__body {
+    max-width: 60ch;
+    @extend .body-lg;
+}

assets/_sass/component/_section-heading.scss

@@ -0,0 +1,28 @@
+////////////////////
+// Variables
+////////////////////
+
+$border-width: 2px;
+
+////////////////////
+// Section Heading
+////////////////////
+
+.section-heading {
+    display: inline-block;
+    margin: 0 0 1em 0;
+    @extend .monospace;
+    font-size: rem-calc(14px);
+    line-height: 1;
+
+    &:before {
+        content: '';
+        display: inline-block;
+        margin-right: .5em;
+        width: $border-width;
+        height: 1em;
+        background-color: currentColor;
+        border-radius: $border-width;
+        vertical-align: top;
+    }
+}

assets/css/main.scss

@@ -10,11 +10,13 @@
 @import "base/colors";
 @import "base/normalize";
 @import "base/additional-defaults";
-@import "base/typography";
 @import "base/layout";
+@import "base/typography";
 @import "base/helpers";
 
 @import "component/buttons";
 @import "component/navigation";
 @import "component/hamburger-button";
 @import "component/footer";
+@import "component/hero";
+@import "component/section-heading";

careers.html

@@ -2,6 +2,11 @@
 layout: page
 title: Careers
 permalink: /careers/
+
+hero:
+  theme: midnight
+  label: Careers
+  title: Join the team!
 ---
 
 This is an empty careers page.

projects.html

@@ -2,18 +2,27 @@
 layout: page
 title: Projects
 permalink: /projects/
+
+hero:
+  label: Our Projects
+  title: We work openly.
+  body: "We believe a rising tide lifts all boats. If we build something others can benefit from, we open source it. Knowledge isn't meant to be contained; it's meant to be shared."
 ---
 
-<ul>
-    {% assign public_repositories = site.github.public_repositories | where:'archived', false | where:'fork', false | sort: 'stargazers_count' | reverse %}
-    {% for repository in public_repositories %}
-    <li>
-        <h2>
-            <a href='{{ repository.html_url }}'>{{ repository.name }}</a>
-        </h2>
-        <p>{{ repository.description }}</p>
-        <p>{{ repository.language }}</p>
-        <p>{{ repository.license.spdx_id }}</p>
-    </li>
-    {% endfor %}
-</ul>
+<div class="container">
+    <h2>Open Source Projects</h2>
+
+    <ul>
+        {% assign public_repositories = site.github.public_repositories | where:'archived', false | where:'fork', false | sort: 'stargazers_count' | reverse %}
+        {% for repository in public_repositories %}
+        <li>
+            <h2>
+                <a href='{{ repository.html_url }}'>{{ repository.name }}</a>
+            </h2>
+            <p>{{ repository.description }}</p>
+            <p>{{ repository.language }}</p>
+            <p>{{ repository.license.spdx_id }}</p>
+        </li>
+        {% endfor %}
+    </ul>
+</div>