Skip to content
Snippets Groups Projects
Commit 1cb20649 authored by Greg Fodor's avatar Greg Fodor
Browse files

Migrate homepage to use local CSS references

parent 52f5de85
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
src/assets/stylesheets/index.scss
+ 42
− 42
View file @ 1cb20649
......@@ -24,26 +24,26 @@ body {
padding: 0;
}
.home {
:local(.home) {
position: absolute;
display: flex;
width: 100%;
height: 100%;
}
.main-content {
:local(.main-content) {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
z-index: 2;
&--noninteractive {
&:local(.noninteractive) {
pointer-events: none;
}
}
.background-video {
:local(.background-video) {
position: fixed;
top: 0;
left: 0;
......@@ -53,7 +53,7 @@ body {
z-index: 1;
}
.header-content {
:local(.header-content) {
padding: 1.5em 2.5em 1.5em 2.5em;
background-color: $darkest-transparent;
min-height: 90px;
......@@ -61,7 +61,7 @@ body {
display: flex;
border-bottom: 1px solid $darkest-grey;
&__title {
:local(.title) {
display: flex;
width: $header-section-width;
......@@ -73,17 +73,17 @@ body {
flex: 1 1 $header-section-width;
}
&__name {
:local(.name) {
width: 200px;
}
&__preview {
:local(.preview) {
color: $grey-text;
margin-left: 10px;
}
}
&__entry-code {
:local(.entry-code) {
@media (max-width: 1024px) {
display: none;
}
......@@ -95,13 +95,13 @@ body {
justify-content: center;
align-items: center;
&__link {
:local(.link) {
color: white;
text-decoration-color: $light-grey;
}
}
&__experiment {
:local(.experiment) {
text-align: right;
flex: 1 1 $header-section-width;
width: $header-section-width;
......@@ -114,36 +114,36 @@ body {
display: none;
}
&__container {
:local(.container) {
display: flex;
justify-content: flex-end;
}
&__icon {
:local(.icon) {
margin-left: 12px;
margin-right: 12px;
}
&__info {
:local(.info) {
display: flex;
flex-direction: column;
justify-content: center;
&__header {
a {
color: $grey-text;
}
:local(.header) {
a {
color: $grey-text;
}
}
&__link {
color: $dark-grey;
font-size: 0.8em;
:local(.link) {
color: $dark-grey;
font-size: 0.8em;
}
}
}
}
.header-subtitle {
:local(.header-subtitle) {
@media (min-width: 1024px) {
display: none;
}
......@@ -157,13 +157,13 @@ body {
align-items: center;
border-bottom: 2px solid $darkest-grey;
&__link {
:local(.link) {
color: white;
text-decoration-color: $light-grey;
}
}
.hero-content {
:local(.hero-content) {
flex: 10;
min-height: 740px;
display: flex;
......@@ -176,7 +176,7 @@ body {
min-height: 490px;
}
&__attribution {
:local(.attribution) {
position: absolute;
right: 12px;
bottom: 12px;
......@@ -189,7 +189,7 @@ body {
}
}
&__container {
:local(.container) {
padding-top: 2vw;
padding-left: 2.1em;
padding-right: 2.1em;
......@@ -204,44 +204,44 @@ body {
padding-bottom: 0px;
}
&__title {
:local(.title) {
font-size: 4vw;
font-weight: bold;
@media (max-width: 768px) , (max-height: 715px) {
font-size: 1.9em;
font-size: 1.9em;
}
@media (max-width: 768px) {
text-align: center;
text-align: center;
}
@media (min-width: 1824px) {
font-size: 4.5em;
font-size: 4.5em;
}
}
&__subtitle {
:local(.subtitle) {
font-size: 2.5vw;
font-weight: lighter;
color: $light-text;
@media (max-width: 768px) , (max-height: 715px) {
font-size: 1.1em;
margin-top: 0.2em;
font-size: 1.1em;
margin-top: 0.2em;
}
@media (max-width: 768px) {
text-align: center;
text-align: center;
}
@media (min-width: 1824px) {
font-size: 2.8em;
font-size: 2.8em;
}
}
}
&__create {
:local(.create) {
padding: 2.1em;
padding-bottom: 3.5vw;
......@@ -252,7 +252,7 @@ body {
}
}
.footer-content {
:local(.footer-content) {
padding: 1em 2.25em 1em 2.25em;
background-color: $darkest-transparent;
min-height: 80px;
......@@ -261,28 +261,28 @@ body {
align-items: center;
justify-content: center;
&__links {
:local(.links) {
text-align: center;
color: $dark-grey;
display: flex;
flex-direction: column;
&__top {
:local(.top) {
display: flex;
justify-content: space-between;
}
&__link {
:local(.link) {
color: $grey-text;
margin-left: 8px;
margin-right: 8px;
}
&__bottom {
:local(.bottom) {
margin-top: 8px;
a {
color: $grey-text;
color: $grey-text;
}
}
}
......
src/react-components/home-root.js
+ 35
− 33
View file @ 1cb20649
......@@ -9,6 +9,8 @@ import homeVideoMp4 from "../assets/video/home.mp4";
import classNames from "classnames";
import { ENVIRONMENT_URLS } from "../assets/environments/environments";
import styles from "../assets/stylesheets/index.scss";
import HubCreatePanel from "./hub-create-panel.js";
import InfoDialog from "./info-dialog.js";
......@@ -77,30 +79,30 @@ class HomeRoot extends Component {
render() {
const mainContentClassNames = classNames({
"main-content": true,
"main-content--noninteractive": !!this.state.dialogType
[styles.mainContent]: true,
[styles.noninteractive]: !!this.state.dialogType
});
const dialogTypes = InfoDialog.dialogTypes;
return (
<IntlProvider locale={lang} messages={messages}>
<div className="home">
<div className={styles.home}>
<div className={mainContentClassNames}>
<div className="header-content">
<div className="header-content__title">
<img className="header-content__title__name" src="../assets/images/logo.svg" />
<div className="header-content__title__preview">preview</div>
<div className={styles.headerContent}>
<div className={styles.title}>
<img className={styles.name} src="../assets/images/logo.svg" />
<div className={styles.preview}>preview</div>
</div>
<div className="header-content__entry-code">
<a className="header-content__entry-code__link" href="/link" rel="nofollow">
<div className={styles.entryCode}>
<a className={styles.link} href="/link" rel="nofollow">
<FormattedMessage id="home.have_entry_code" />
</a>
</div>
<div className="header-content__experiment">
<div className="header-content__experiment__container">
<img src="../assets/images/webvr_cube.svg" className="header-content__experiment__icon" />
<div className="header-content__experiment__info">
<div className="header-content__experiment__info__header">
<div className={styles.experiment}>
<div className={styles.container}>
<img src="../assets/images/webvr_cube.svg" className={styles.icon} />
<div className={styles.info}>
<div className={styles.header}>
<span>
<FormattedMessage id="home.webvr_disclaimer_pre" />
</span>
......@@ -117,7 +119,7 @@ class HomeRoot extends Component {
<div>
<a
className="header-content__experiment__info__link"
className={styles.link}
rel="noopener noreferrer"
target="_blank"
href="https://github.com/mozilla/hubs"
......@@ -129,15 +131,15 @@ class HomeRoot extends Component {
</div>
</div>
</div>
<div className="header-subtitle">
<div className={styles.headerSubtitle}>
<div>
<a className="header-subtitle__link" href="/link" rel="nofollow">
<a className={styles.link} href="/link" rel="nofollow">
<FormattedMessage id="home.have_entry_code" />
</a>
</div>
</div>
<div className="hero-content">
<div className="hero-content__attribution">
<div className={styles.heroContent}>
<div className={styles.attribution}>
Medieval Fantasy Book by{" "}
<a
target="_blank"
......@@ -147,15 +149,15 @@ class HomeRoot extends Component {
Pixel
</a>
</div>
<div className="hero-content__container">
<div className="hero-content__container__title">
<div className={styles.container}>
<div className={styles.title}>
<FormattedMessage id="home.hero_title" />
</div>
<div className="hero-content__container__subtitle">
<div className={styles.subtitle}>
<FormattedMessage id="home.hero_subtitle" />
</div>
</div>
<div className="hero-content__create">
<div className={styles.create}>
{this.state.environments.length > 0 && (
<HubCreatePanel
initialEnvironment={this.props.initialEnvironment}
......@@ -164,11 +166,11 @@ class HomeRoot extends Component {
)}
</div>
</div>
<div className="footer-content">
<div className="footer-content__links">
<div className="footer-content__links__top">
<div className={styles.footerContent}>
<div className={styles.links}>
<div className={styles.top}>
<a
className="footer-content__links__link"
className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.slack)}
......@@ -176,7 +178,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.join_us" />
</a>
<a
className="footer-content__links__link"
className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.updates)}
......@@ -184,7 +186,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.get_updates" />
</a>
<a
className="footer-content__links__link"
className={styles.link}
rel="noopener noreferrer"
href="#"
onClick={this.showDialog(dialogTypes.report)}
......@@ -192,7 +194,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.report_issue" />
</a>
<a
className="footer-content__links__link"
className={styles.link}
target="_blank"
rel="noopener noreferrer"
href="https://github.com/mozilla/hubs/blob/master/TERMS.md"
......@@ -200,7 +202,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.terms_of_use" />
</a>
<a
className="footer-content__links__link"
className={styles.link}
target="_blank"
rel="noopener noreferrer"
href="https://github.com/mozilla/hubs/blob/master/PRIVACY.md"
......@@ -208,7 +210,7 @@ class HomeRoot extends Component {
<FormattedMessage id="home.privacy_notice" />
</a>
</div>
<div className="footer-content__links__bottom">
<div className={styles.bottom}>
<div>
<FormattedMessage id="home.made_with_love" />
<span style={{ fontWeight: "bold", color: "white" }}>Mozilla</span>
......@@ -217,7 +219,7 @@ class HomeRoot extends Component {
</div>
</div>
</div>
<video playsInline muted loop autoPlay className="background-video" id="background-video">
<video playsInline muted loop autoPlay className={styles.backgroundVideo} id="background-video">
<source src={homeVideoWebM} type="video/webm" />
<source src={homeVideoMp4} type="video/mp4" />
</video>
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment