Add homepage header

chromeos · Oct 13, 2023 · 5115d9b · 5115d9b
1 parent 6477159
commit 5115d9b
Show file tree

Hide file tree

Showing 2 changed files with 76 additions and 1 deletion.
diff --git a/site/en/discover/home.njk b/site/en/discover/home.njk
@@ -21,6 +21,17 @@ permalink: '/discover/'
 {% endmacro %}
 
 <div class="_discover-home">
+  <header class="_dheader">
+    <div class="_dheader--inner">
+      <div class="_dheader--text">
+        <h1 class="type--h1">Optimized for your Chromebook</h1>
+        <p>Experience these apps and games on your Chromebook's larger screen—they'll also work well with your keyboard and mouse.</p>
+      </div>
+
+      <img class="_dheader--bkg _dheader--img" src="ix://discover/home/background.svg" aria-hidden="true" alt="" />
+      <img class="_dheader--shapes _dheader--img" src="ix://discover/home/shapes.svg" aria-hidden="true" alt="" />
+    </div>
+  </header>
   <section class="_discover-home--section">
     <h2 class="type--h2 _discover-home--section-title">Apps</h2>
     <ul class="_discover-home--grid">

diff --git a/site/sass/discover.scss b/site/sass/discover.scss
@@ -19,7 +19,7 @@
 // Discover Home
 ._discover-home {
   margin-bottom: 3rem;
-  padding: 1rem 1.5rem;
+  // padding: 1rem 1.5rem;
 
   &--grid {
     display: grid;
@@ -31,6 +31,7 @@
   &--section {
     margin-inline: auto;
     max-width: 1025px;
+    padding-inline: 1rem;
 
     &:not(:first-of-type) {
       margin-top: 3rem;
@@ -42,6 +43,69 @@
   }
 }
 
+._dheader {
+  $mq: 620px;
+  background-color: var(--blue-600);
+  color: var(--white);
+  margin-bottom: 1.5rem;
+
+  // height: 30vh;
+  overflow: hidden;
+  position: relative;
+
+  &--inner {
+    display: grid;
+    height: 100%;
+    margin: 0 auto;
+    max-width: 1025px;
+    min-height: 30vh;
+    padding: 1.5rem;
+    position: relative;
+  }
+
+  &--text {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    position: relative;
+    width: 60%;
+    z-index: 1;
+  }
+
+  h1 {
+    color: var(--white);
+  }
+
+  &--img {
+    object-fit: cover;
+    right: 0;
+    // position: absolute;
+    top: 0;
+    z-index: 0;
+
+    @media (min-width: #{$mq}) {
+      position: absolute;
+    }
+  }
+
+  &--shapes {
+    @media (min-width: #{$mq}) {
+      height: 150%;
+      right: -5%;
+      width: 50%;
+    }
+  }
+
+  &--bkg {
+    @media (min-width: #{$mq}) {
+      height: 125%;
+      right: -10%;
+      width: 60%;
+    }
+  }
+}
+
 .medium {
   font-weight: 500;
   text-shadow: none;