feat(about): add hero styles

* Adjust about markup

Author: sarmstead

about.hbs

@@ -1,16 +1,18 @@
 {{!< default}}
 <header class='page-about__hero'>
-    {{#get 'pages' filter="title:'About::Hero - Body'" limit='1'}}
-        {{#foreach pages}}
-            {{content}}
-        {{/foreach}}
-    {{/get}}
-    <section class='kg-button-card__group'>
-        {{#get 'pages' filter='tag:hash-about-hero-cta' limit='2'}}
+    <div class='page-about__hero__inner'>
+        {{#get 'pages' filter="title:'About::Hero - Body'" limit='1'}}
             {{#foreach pages}}
                 {{content}}
             {{/foreach}}
         {{/get}}
-    </section>
+        <section class='kg-button-card__group'>
+            {{#get 'pages' filter='tag:hash-about-hero-cta' limit='2'}}
+                {{#foreach pages}}
+                    {{content}}
+                {{/foreach}}
+            {{/get}}
+        </section>
+    </div>
 </header>
 {{> 'get-involved' }}

assets/images/about__hero--background.jpg

@@ -24,6 +24,7 @@
 @import './pages/home.css';
 @import './pages/conferences.css';
 @import './pages/open-source.css';
+@import './pages/about.css';
 
 @import './modern.css';
 

src/css/app.css

@@ -0,0 +1,58 @@
+.page-about {
+    main {
+        padding-top: 0;
+    }
+
+    .page-about__hero {
+        align-items: center;
+        background-image: url('/assets/images/about__hero--background.jpg');
+        background-repeat: no-repeat;
+        background-size: cover;
+        color: white;
+        display: flex;
+        justify-content: center;
+    }
+
+    .page-about__hero__inner {
+        max-width: 1135px;
+        padding: 96px 40px;
+
+        h2,
+        p {
+            margin-bottom: 32px;
+        }
+
+        h1 {
+            margin-bottom: 16px;
+            text-transform: uppercase;
+        }
+
+        h2 {
+            font-size: 2rem;
+        }
+    }
+
+    @media (min-width: 834px) {
+        .page-about__hero {
+            min-height: 834px;
+        }
+
+        .page-about__hero__inner {
+            padding: 0 56px;
+
+            h2 {
+                font-size: 2rem;
+            }
+        }
+    }
+
+    @media (min-width: 1440px) {
+        .page-about__hero {
+            min-height: 980px;
+        }
+
+        .page-about__hero__inner {
+            padding: 0;
+        }
+    }
+}