From 887bb0e2646f8b1b94e5866a2e2d3ae89f843286 Mon Sep 17 00:00:00 2001
From: Greg Fodor <gfodor@gmail.com>
Date: Thu, 29 Mar 2018 10:10:30 -0700
Subject: [PATCH] Fix up header and hero responsiveness
---
src/assets/stylesheets/index.scss | 41 +++++++++++++++++++++++++------
src/index.html | 1 +
src/react-components/home-root.js | 28 +++------------------
3 files changed, 38 insertions(+), 32 deletions(-)
diff --git a/src/assets/stylesheets/index.scss b/src/assets/stylesheets/index.scss
index 918861576..3c57c1e49 100644
--- a/src/assets/stylesheets/index.scss
+++ b/src/assets/stylesheets/index.scss
@@ -45,8 +45,16 @@ body {
z-index: 1;
}
+@media (max-width: 768px) {
+ .background-video video {
+ width: 50%;
+ height: 50%;
+ }
+}
+
+
.header-content {
- padding: 1.5em;
+ padding: 1.35em 2.5em 1.35em 2.5em;
background-color: black;
min-height: 75px;
display: flex;
@@ -77,7 +85,7 @@ body {
text-align: right;
flex: 1 1 350px;
color: $grey-text;
- font-size: 1.2em;
+ font-size: 1.0em;
font-weight: lighter;
}
@@ -104,10 +112,16 @@ body {
}
.hero-content {
-// background-color: blue;
+ // background-color: blue;
flex: 10;
text-shadow: 0px 0px 2px rgba(32, 32, 32, 1.0);
- padding: 2.0em 2.5em 2.0em 2.5em;
+ padding: 3vw 3.5vw 3vw 3.5vw;
+}
+
+@media (max-width: 768px) {
+ .hero-content {
+ padding: 1em 1.5em 1em 1.5em;
+ }
}
.hero-content__container {
@@ -127,23 +141,34 @@ body {
}
}
+@media (min-width: 1824px) {
+ .hero-content__container__title {
+ font-size: 4.5em;
+ }
+}
+
.hero-content__container__subtitle {
- font-size: 2vw;
+ font-size: 2.5vw;
font-weight: lighter;
- font-style: italic;
color: $light-text;
margin-top: 0.2em;
}
@media (max-width: 768px) {
.hero-content__container__subtitle {
- font-size: 1.2em;
+ font-size: 1.1em;
text-align: center;
margin-top: 0.5em;
}
}
+@media (min-width: 1824px) {
+ .hero-content__container__subtitle {
+ font-size: 2.8em;
+ }
+}
+
.footer-content {
-// background-color: green;
+ // background-color: green;
}
diff --git a/src/index.html b/src/index.html
index dcf67c9bf..6e0d03c00 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,6 +5,7 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>moz://a duck</title>
+ <link href="https://fonts.googleapis.com/css?family=Zilla+Slab:300,300i,400,400i,700" rel="stylesheet">
</head>
<body>
diff --git a/src/react-components/home-root.js b/src/react-components/home-root.js
index aed064171..f75c03ad5 100644
--- a/src/react-components/home-root.js
+++ b/src/react-components/home-root.js
@@ -58,7 +58,7 @@ class HomeRoot extends Component {
<div className="header-content">
<div className="header-content__title">
<div className="header-content__title__name">
- <span style={{ "font-weight": "900" }}>moz://a</span> duck
+ <span style={{ fontWeight: "bold" }}>moz://a</span> duck
</div>
<div className="header-content__title__preview">preview</div>
</div>
@@ -69,11 +69,11 @@ class HomeRoot extends Component {
<div className="header-content__experiment__info__header">
<span>
<FormattedMessage id="home.webvr_disclaimer_pre" />
- </span>
- <span style={{ "font-weight": "bold" }}>WebVR</span>
+ </span>
+ <span style={{ fontWeight: "bold" }}>WebVR</span>
<span>
<FormattedMessage id="home.webvr_disclaimer_post" />
- </span>
+ </span>
<span>
<a rel="noopener noreferrer" target="_blank" href="https://blog.mozvr.com">
<FormattedMessage id="home.webvr_disclaimer_mr_team" />
@@ -89,26 +89,6 @@ class HomeRoot extends Component {
>
<FormattedMessage id="home.view_source" />
</a>
-
- <a
- className="header-content__experiment__info__link"
- rel="noopener noreferrer"
- target="_blank"
- href="#"
- onClick={this.showSlackInfo}
- >
- <FormattedMessage id="home.join_on_slack" />
- </a>
-
- <a
- className="header-content__experiment__info__link"
- rel="noopener noreferrer"
- target="_blank"
- onClick={this.showReportInfo}
- href="#"
- >
- <FormattedMessage id="home.report_issue" />
- </a>
</div>
</div>
</div>
--
GitLab