Skip to content

Commit 79424c5

Browse files
kylegordykylegordy
committed
Add basic hero component
1 parent a564086 commit 79424c5

File tree

11 files changed

+252
-24
lines changed

11 files changed

+252
-24
lines changed

‎_includes/hero.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{% assign hero = page.hero %}
2+
<section class="hero theme-{{ hero.theme | default: "white" }}">
3+
<div class="hero__container container container-offset">
4+
5+
{% assign hero = page.hero %}
6+
<header class="hero__header">
7+
8+
{% if hero.label %}
9+
<h1 class="hero__section-heading">{{ hero.label }}</h1>
10+
{% endif %}
11+
12+
{% if hero.title %}
13+
<h2 class="hero__title">{{ hero.title }}</h2>
14+
{% endif %}
15+
16+
{% if hero.title %}
17+
<p class="hero__body m-0">{{ hero.body }}</p>
18+
{% endif %}
19+
</header>
20+
21+
</div>
22+
{% include logo-texture.html %}
23+
</section>

‎_includes/logo-texture.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
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‎

Lines changed: 5 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,14 +1,11 @@
11
---
22
layout: default
33
---
4-
<article>
5-
6-
<header>
7-
<h1>{{ page.title | escape }}</h1>
8-
</header>
94

10-
<div>
11-
{{ content }}
12-
</div>
5+
{% if page.hero %}
6+
{% include hero.html %}
7+
{% endif %}
138

9+
<article>
10+
{{ content }}
1411
</article>

‎assets/_sass/base/_colors.scss‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,3 +41,55 @@ $slate-300: #CCD4E8;
4141
$slate-200: #E9EDF8;
4242
$slate-100: #F8F9FD;
4343
$white: #fff;
44+
45+
////////////////////
46+
// Color Themes
47+
////////////////////
48+
49+
.theme-white {
50+
--theme-primary-color: #{$white};
51+
--theme-secondary-color: var(--theme-primary-color);
52+
--theme-border-color: #{$slate-200};
53+
--theme-accent-color: #{$teal};
54+
--theme-text-color: #{$slate-800};
55+
}
56+
57+
.theme-teal {
58+
--theme-primary-color: #{$teal};
59+
--theme-secondary-color: #{$teal-dark};
60+
--theme-border-color: #{$teal};
61+
--theme-accent-color: #{$white};
62+
--theme-text-color: var(--theme-accent-color);
63+
}
64+
65+
.theme-yellow {
66+
--theme-primary-color: #{$yellow-light};
67+
--theme-secondary-color: #{$yellow-dark};
68+
--theme-border-color: #{$yellow-light};
69+
--theme-accent-color: #{$slate-800};
70+
--theme-text-color: var(--theme-accent-color);
71+
}
72+
73+
.theme-cabernet {
74+
--theme-primary-color: #{$cabernet-light};
75+
--theme-secondary-color: #{$cabernet-dark};
76+
--theme-border-color: #{$cabernet-light};
77+
--theme-accent-color: #{$white};
78+
--theme-text-color: var(--theme-accent-color);
79+
}
80+
81+
.theme-midnight {
82+
--theme-primary-color: #{$midnight-light};
83+
--theme-secondary-color: #{$midnight-dark};
84+
--theme-border-color: #{$midnight-light};
85+
--theme-accent-color: #{$white};
86+
--theme-text-color: var(--theme-accent-color);
87+
}
88+
89+
.theme-slate {
90+
--theme-primary-color: #{$slate-700};
91+
--theme-secondary-color: #{$slate-800};
92+
--theme-border-color: #{$slate-700};
93+
--theme-accent-color: #{$white};
94+
--theme-text-color: var(--theme-accent-color);
95+
}

‎assets/_sass/base/_layout.scss‎

Lines changed: 12 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -27,13 +27,23 @@ $bp-xl: $max-width;
2727
padding-left: $cp-sm;
2828
padding-right: $cp-sm;
2929

30-
@media screen and (min-width: $bp-md) {
30+
@media (min-width: $bp-md) {
3131
padding-left: $cp-md;
3232
padding-right: $cp-md;
3333
}
3434

35-
@media screen and (min-width: $bp-xl) {
35+
@media (min-width: $bp-xl) {
3636
padding-left: $cp-lg;
3737
padding-right: $cp-lg;
3838
}
3939
}
40+
41+
////////////////////
42+
// Container
43+
////////////////////
44+
45+
.container-offset {
46+
@media (min-width: $bp-lg) {
47+
padding-left: ($cp-md + 7%);
48+
}
49+
}

‎assets/_sass/base/_typography.scss‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,9 +34,41 @@ body {
3434
@extend .sans-serif;
3535
font-size: 100%;
3636
font-weight: 400;
37+
line-height: 1.5;
3738
color: $slate-800;
3839
}
3940

41+
// body text reset
42+
p,
43+
address,
44+
ul {
45+
margin: 0 0 1.5em 0;
46+
font-style: normal;
47+
}
48+
49+
.body-lg {
50+
font-size: 1rem;
51+
52+
@media (min-width: $bp-md) {
53+
font-size: 18px;
54+
}
55+
}
56+
57+
////////////////////
58+
// Headings
59+
////////////////////
60+
61+
h1,
62+
h2,
63+
h3,
64+
h4,
65+
h5,
66+
h6 {
67+
font-weight: 700;
68+
line-height: 1.25em;
69+
margin: 0 0 0.6em 0;
70+
}
71+
4072
////////////////////
4173
// Links
4274
////////////////////

‎assets/_sass/component/_hero.scss‎

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
////////////////////
2+
// Hero
3+
////////////////////
4+
5+
.hero {
6+
position: relative;
7+
margin-bottom: rem-calc(40px);
8+
padding-top: rem-calc(40px);
9+
padding-bottom: rem-calc(40px);
10+
background-color: var(--theme-primary-color);
11+
background-image: linear-gradient(180deg, var(--theme-primary-color) 0%, var(--theme-secondary-color) 100%);
12+
border-bottom: 1px solid $slate-300;
13+
overflow: hidden;
14+
z-index: 2;
15+
16+
@media (min-width: $bp-md) {
17+
margin-bottom: rem-calc(60px);
18+
padding-top: rem-calc(60px);
19+
padding-bottom: rem-calc(60px);
20+
}
21+
22+
@media (min-width: $bp-lg) {
23+
margin-bottom: rem-calc(80px);
24+
padding-top: rem-calc(80px);
25+
padding-bottom: rem-calc(80px);
26+
}
27+
}
28+
29+
.logo-texture {
30+
position: absolute;
31+
top: 0;
32+
left: 0;
33+
width: 100%;
34+
height: 100%;
35+
object-fit: cover;
36+
opacity: .5;
37+
z-index: -1;
38+
39+
path {
40+
stroke: var(--theme-border-color);
41+
}
42+
}
43+
44+
.hero__header {
45+
color: var(--theme-text-color);
46+
}
47+
48+
.hero__section-heading {
49+
@extend .section-heading;
50+
color: var(--theme-accent-color);
51+
}
52+
53+
.hero__title {
54+
max-width: 36ch;
55+
font-size: rem-calc(24px);
56+
57+
@media (min-width: $bp-md) {
58+
font-size: rem-calc(28px);
59+
}
60+
61+
@media (min-width: $bp-lg) {
62+
font-size: rem-calc(34px);
63+
}
64+
}
65+
66+
.hero__body {
67+
max-width: 60ch;
68+
@extend .body-lg;
69+
}

‎assets/_sass/component/_section-heading.scss‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
////////////////////
2+
// Variables
3+
////////////////////
4+
5+
$border-width: 2px;
6+
7+
////////////////////
8+
// Section Heading
9+
////////////////////
10+
11+
.section-heading {
12+
display: inline-block;
13+
margin: 0 0 1em 0;
14+
@extend .monospace;
15+
font-size: rem-calc(14px);
16+
line-height: 1;
17+
18+
&:before {
19+
content: '';
20+
display: inline-block;
21+
margin-right: .5em;
22+
width: $border-width;
23+
height: 1em;
24+
background-color: currentColor;
25+
border-radius: $border-width;
26+
vertical-align: top;
27+
}
28+
}

‎assets/css/main.scss‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,11 +10,13 @@
1010
@import "base/colors";
1111
@import "base/normalize";
1212
@import "base/additional-defaults";
13-
@import "base/typography";
1413
@import "base/layout";
14+
@import "base/typography";
1515
@import "base/helpers";
1616

1717
@import "component/buttons";
1818
@import "component/navigation";
1919
@import "component/hamburger-button";
2020
@import "component/footer";
21+
@import "component/hero";
22+
@import "component/section-heading";

‎careers.html‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,11 @@
22
layout: page
33
title: Careers
44
permalink: /careers/
5+
6+
hero:
7+
theme: midnight
8+
label: Careers
9+
title: Join the team!
510
---
611

712
This is an empty careers page.

0 commit comments

Comments
 (0)