diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss index 89a838ea843f21a46f2bc48fda321f8000a53db2..84e67fb075f83ea1d303cfbce7e4ba7b0d4ea8b9 100644 --- a/src/assets/stylesheets/index.scss +++ b/src/assets/stylesheets/index.scss @@ -2,6 +2,8 @@ @import 'hub-create'; @import 'info-dialog'; +$title-width: 350px; + * { box-sizing: border-box; } @@ -53,15 +55,15 @@ body { .header-content { padding: 1.5em 2.5em 1.5em 2.5em; - background-color: rgba(0, 0, 0, 0.85); + background-color: $darkest-transparent; min-height: 90px; height: 90px; display: flex; - border-bottom: 1px solid #242424; + border-bottom: 1px solid $darkest-grey; &__title { display: flex; - width: 350px; + width: $title-width; @media (max-width: 768px) { justify-content: center; @@ -146,14 +148,14 @@ body { display: none; } - padding: 0.5em; - background-color: rgba(0, 0, 0, 0.85); + padding: 8px; + background-color: $darkest-transparent; text-align: center; display: flex; flex-direction: row; justify-content: center; align-items: center; - border-bottom: 2px solid #242424; + border-bottom: 2px solid $darkest-grey; &__link { color: white; @@ -252,7 +254,7 @@ body { .footer-content { padding: 1em 2.25em 1em 2.25em; - background-color: rgba(0, 0, 0, 0.85); + background-color: $darkest-transparent; min-height: 80px; display: flex; border-top: 2px solid #242424; diff --git a/src/assets/stylesheets/shared.scss b/src/assets/stylesheets/shared.scss index 18944a4080dd096f4f6d917e61d3834cb05ab04a..e54447f58f853687b1f3f3d2be6d136d95df01c1 100644 --- a/src/assets/stylesheets/shared.scss +++ b/src/assets/stylesheets/shared.scss @@ -1,11 +1,12 @@ $dark-transparent: rgba(0, 0, 0, 0.4); $darker-transparent: rgba(0, 0, 0, 0.6); -$darkest-transparent: rgba(0, 0, 0, 0.95); +$darkest-transparent: rgba(0, 0, 0, 0.9); $grey-text: rgba(192, 192, 192, 1.0); $light-text: rgba(240, 240, 240, 1.0); $light-grey: lightgrey; $dark-grey: rgba(128, 128, 128, 1.0); $darker-grey: rgba(64, 64, 64, 1.0); +$darkest-grey: rgba(32, 32, 32, 1.0); %default-font { font-family: 'Zilla Slab', sans-serif; diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js index 7fe336f398acb8706e5fd8d6b90e3bb993a13370..7c9a502446fd8587bf063d68977cfc644cec91e4 100644 --- a/src/react-components/home-root.js +++ b/src/react-components/home-root.js @@ -100,11 +100,9 @@ class HomeRoot extends Component { <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> + <a className="header-content__entry-code__link" href="/link" rel="nofollow"> + <FormattedMessage id="home.have_entry_code" /> + </a> </div> <div className="header-content__experiment"> <div className="header-content__experiment__container"> @@ -141,7 +139,7 @@ class HomeRoot extends Component { </div> <div className="header-subtitle"> <div> - <a className="header-subtitle__link" href="/link"> + <a className="header-subtitle__link" href="/link" rel="nofollow"> <FormattedMessage id="home.have_entry_code" /> </a> </div> diff --git a/src/react-components/link-root.js b/src/react-components/link-root.js index 115cd174f88b5beb5c6da803a6968f5e36b003bb..66ab987b6493a0cb99ab0742eb966d074ffe5ad5 100644 --- a/src/react-components/link-root.js +++ b/src/react-components/link-root.js @@ -89,6 +89,8 @@ class LinkRoot extends Component { }; render() { + // Note we use type "tel" for the input due to https://bugzilla.mozilla.org/show_bug.cgi?id=1005603 + return ( <IntlProvider locale={lang} messages={messages}> <div className={styles.link}>