Show link for link code on homepage

src/assets/stylesheets/index.scss

@@ -57,16 +57,20 @@ body {
   min-height: 90px;
   height: 90px;
   display: flex;
-  border-bottom: 2px solid #242424;
+  border-bottom: 1px solid #242424;
 
   &__title {
-    flex: 10;
     display: flex;
+    flex: 10;
 
     @media (max-width: 768px) {
       justify-content: center;
     }
 
+    @media (max-width: 1024px) {
+      flex: 1 1 350px;
+    }
+
     &__name {
       width: 200px;
     }
@@ -77,12 +81,33 @@ body {
     }
   }
 
+  &__entry-code {
+    @media (max-width: 1024px) {
+      display: none;
+    }
+
+    flex: 10;
+    padding: 1.5em 2.5em 1.5em 2.5em;
+    background-color: rgba(0, 0, 0, 0.85);
+    text-align: center;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+
+    &__link {
+      color: white;
+      text-decoration-color: $light-grey;
+    }
+  }
+
   &__experiment {
     text-align: right;
     flex: 1 1 350px;
     color: $grey-text;
     font-size: 1.0em;
     font-weight: lighter;
+    white-space: nowrap;
 
     @media (max-width: 768px) {
       display: none;
@@ -117,6 +142,28 @@ body {
   }
 }
 
+.header-subtitle {
+  @media (min-width: 1024px) {
+    display: none;
+  }
+
+  padding: 1.5em 2.5em 1.5em 2.5em;
+  background-color: rgba(0, 0, 0, 0.85);
+  text-align: center;
+  min-height: 15px;
+  height: 15px;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  border-bottom: 2px solid #242424;
+
+  &__link {
+    color: white;
+    text-decoration-color: $light-grey;
+  }
+}
+
 .hero-content {
   flex: 10;
   min-height: 740px;

src/assets/translations.data.json

@@ -59,10 +59,11 @@
     "home.made_with_love": "made with 🦆 by ",
     "home.environment_author_by": " by ",
     "home.dialog.close": "CLOSE",
+    "home.have_entry_code": "Have a link code?",
     "mailing_list.privacy_label": "I'm okay with Mozilla handling my info as explained in",
     "mailing_list.privacy_link": "this Privacy Notice",
     "link.in_your_browser": "In your device's browser, go to:",
-    "link.enter_code": "Then, enter this code:",
+    "link.enter_code": "Then, enter this link code:",
     "link.do_not_close": "Keep this dialog open to use this code.",
     "link.link_page_header": "Enter your code:",
     "link.dont_have_a_code": "Don't have a code?",

src/react-components/home-root.js

@@ -99,6 +99,13 @@ class HomeRoot extends Component {
                 <img className="header-content__title__name" src="../assets/images/logo.svg" />
                 <div className="header-content__title__preview">preview</div>
               </div>
+              <div className="header-content__entry-code">
+                <div>
+                  <a className="header-content__entry-code__link" href="/link">
+                    <FormattedMessage id="home.have_entry_code" />
+                  </a>
+                </div>
+              </div>
               <div className="header-content__experiment">
                 <div className="header-content__experiment__container">
                   <img src="../assets/images/webvr_cube.svg" className="header-content__experiment__icon" />
@@ -132,6 +139,13 @@ class HomeRoot extends Component {
                 </div>
               </div>
             </div>
+            <div className="header-subtitle">
+              <div>
+                <a className="header-subtitle__link" href="/link">
+                  <FormattedMessage id="home.have_entry_code" />
+                </a>
+              </div>
+            </div>
             <div className="hero-content">
               <div className="hero-content__attribution">
                 Medieval Fantasy Book by{" "}