Header: Implement @hero mode for the index route

Author: Turbo87

app/components/header.hbs

@@ -1,11 +1,17 @@
-<header local-class="header">
+<header local-class="header {{if @hero "hero"}}">
   <div local-class="header-inner">
     <LinkTo @route="index" local-class="index-link">
       <img src="/assets/Cargo-Logo-Small.png" role="presentation" alt="" local-class="logo">
       <h1>crates.io</h1>
     </LinkTo>
 
-    <SearchForm local-class="search-form" />
+    <div local-class="search-form">
+      <h1 local-class="hero-title">
+        The Rust community&rsquo;s crate registry
+      </h1>
+
+      <SearchForm @size={{if @hero "big"}} />
+    </div>
 
     <nav local-class='nav'>
       <LinkTo @route="crates" @query={{hash letter=null page=1}} data-test-all-crates-link>

app/components/header.module.css

@@ -32,6 +32,20 @@
             "search search" auto /
             auto 1fr;
     }
+
+    .hero & {
+        grid-template:
+            "logo nav" auto
+            "search search" auto /
+            auto 1fr;
+
+        @media only screen and (max-width: 900px) {
+            grid-template:
+                "logo menu" auto
+                "search search" auto /
+                auto 1fr;
+        }
+    }
 }
 
 .index-link {
@@ -59,6 +73,35 @@
     @media only screen and (max-width: 820px) {
         padding: 10px 0;
     }
+
+    .hero & {
+        justify-self: center;
+        padding: 40px 0 60px;
+
+        @media only screen and (max-width: 450px) {
+            padding: 40px 0 30px;
+        }
+    }
+}
+
+.hero-title {
+    display: none;
+    margin: 0 0 20px;
+    font-size: 45px;
+    color: #dfffdb;
+    text-align: center;
+
+    .hero & {
+        display: block;
+    }
+
+    @media only screen and (max-width: 820px) {
+        font-size: 30px;
+    }
+
+    @media only screen and (max-width: 550px) {
+        font-size: 24px;
+    }
 }
 
 .sep {
@@ -75,7 +118,7 @@
     grid-area: nav;
     display: flex;
     align-items: center;
-    text-align: right;
+    justify-self: end;
 
     @media only screen and (max-width: 900px) {
         display: none;
@@ -84,7 +127,7 @@
 
 .menu {
     grid-area: menu;
-    text-align: right;
+    justify-self: end;
     display: none;
 
     @media only screen and (max-width: 900px) {

app/components/search-form.hbs

@@ -1,5 +1,5 @@
 <form
-  local-class="form"
+  local-class="form {{if (eq @size "big") "size-big"}}"
   action="/search"
   role="search"
   data-test-search-form

app/components/search-form.module.css

@@ -17,6 +17,13 @@
     box-shadow: none;
     transition: box-shadow 150ms;
 
+    .size-big & {
+        font-size: 125%;
+        padding: 5px 5px 5px 35px;
+        background-position: 10px 7px;
+        background-size: 20px 21px;
+    }
+
     &:focus {
         outline: none;
         box-shadow: 0 0 0 4px var(--yellow500);

app/controllers/application.js

@@ -4,4 +4,9 @@ import { inject as service } from '@ember/service';
 export default class ApplicationController extends Controller {
   @service design;
   @service progress;
+  @service router;
+
+  get isIndex() {
+    return this.router.currentRouteName === 'index';
+  }
 }

app/styles/index.module.css

@@ -1,8 +1,13 @@
 .title-header {
     text-align: center;
     border-bottom: 5px solid var(--gray-border);
+    margin-top: 25px;
     padding-bottom: 40px;
 
+    @media only screen and (max-width: 570px) {
+        margin-top: 0;
+    }
+
     h1 {
         font-size: 50px;
         @media only screen and (max-width: 370px) {

app/templates/application.hbs

@@ -5,7 +5,7 @@
 <ProgressBar/>
 <NotificationContainer @position="top-right"/>
 
-<Header/>
+<Header @hero={{this.isIndex}} />
 
 <main local-class="main">
   <div local-class="inner-main">

app/templates/index.hbs

@@ -1,6 +1,4 @@
 <div local-class='title-header'>
-  <h1>The Rust community&rsquo;s crate registry</h1>
-
   <div local-class='links'>
     <a href="https://doc.rust-lang.org/cargo/getting-started/installation.html" local-class="hero-button" data-test-install-cargo-link>
       {{svg-jar "download-arrow" local-class="icon"}}