diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 014ca0a7a7f7f32e20db86d9a4725da7beb5d011..5ec4768a9824dc9c83a6488d5b9ee702e980e110 100644 --- a/src/assets/stylesheets/index.scss +++ b/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; diff --git a/src/assets/translations.data.json b/src/assets/translations.data.json index c6ef31c5c944ea85568fb6fe1cded6c47e0341b7..e11dbb45958b04bacd934874b3fe22e9bb9e4bfe 100644 --- a/src/assets/translations.data.json +++ b/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?", diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js index df85b425646d1b9a0eae4f216ba3c00cae6dfdc8..7fe336f398acb8706e5fd8d6b90e3bb993a13370 100644 --- a/src/react-components/home-root.js +++ b/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{" "}