mirror of
https://github.com/ascribe/onion.git
synced 2024-12-23 01:39:36 +01:00
Finish styling for landing page
This commit is contained in:
parent
36f7d8f3d3
commit
b76ffcde73
@ -27,7 +27,7 @@ let PrizeApp = React.createClass({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container ascribe-prize-app">
|
<div className={'container ascribe-prize-app client--' + subdomain}>
|
||||||
{header}
|
{header}
|
||||||
<RouteHandler />
|
<RouteHandler />
|
||||||
<GlobalNotification />
|
<GlobalNotification />
|
||||||
|
@ -32,13 +32,13 @@ let IkonotvLanding = React.createClass({
|
|||||||
if(this.state.currentUser && this.state.currentUser.email) {
|
if(this.state.currentUser && this.state.currentUser.email) {
|
||||||
return (
|
return (
|
||||||
<ButtonLink to="pieces">
|
<ButtonLink to="pieces">
|
||||||
{getLangText('ENTER')}
|
{getLangText('ENTER TO START')}
|
||||||
</ButtonLink>
|
</ButtonLink>
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
return (
|
return (
|
||||||
<ButtonLink to="signup">
|
<ButtonLink to="signup">
|
||||||
{getLangText('ENTER')}
|
{getLangText('ENTER TO START')}
|
||||||
</ButtonLink>
|
</ButtonLink>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
@ -51,11 +51,13 @@ let IkonotvLanding = React.createClass({
|
|||||||
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png" />
|
<img src="https://s3-us-west-2.amazonaws.com/ascribe0/whitelabel/ikonotv/ikono_tv.png" />
|
||||||
<div className="tagline">
|
<div className="tagline">
|
||||||
<h1>PROTECT</h1>
|
<h1>PROTECT</h1>
|
||||||
<img src="http://placehold.it/600x300" />
|
<div className="poster">
|
||||||
|
<div className="content">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
<h1>& SHARE</h1>
|
<h1>& SHARE</h1>
|
||||||
</div>
|
</div>
|
||||||
<h2>Welcome to the ikonoTV</h2>
|
<h2>Welcome to the ikonoTV<br />Registration Page</h2>
|
||||||
<h2>Registration Page</h2>
|
|
||||||
</header>
|
</header>
|
||||||
<article>
|
<article>
|
||||||
<section>
|
<section>
|
||||||
|
@ -8,9 +8,12 @@ import Footer from '../../footer';
|
|||||||
import GlobalNotification from '../../global_notification';
|
import GlobalNotification from '../../global_notification';
|
||||||
|
|
||||||
import getRoutes from './wallet_routes';
|
import getRoutes from './wallet_routes';
|
||||||
|
import classNames from 'classnames';
|
||||||
|
|
||||||
|
|
||||||
let RouteHandler = Router.RouteHandler;
|
let RouteHandler = Router.RouteHandler;
|
||||||
|
|
||||||
|
|
||||||
let WalletApp = React.createClass({
|
let WalletApp = React.createClass({
|
||||||
mixins: [Router.State],
|
mixins: [Router.State],
|
||||||
|
|
||||||
@ -28,7 +31,7 @@ let WalletApp = React.createClass({
|
|||||||
}
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="container ascribe-prize-app">
|
<div className={classNames('container', 'ascribe-wallet-app', 'client--' + subdomain, {'page--landing': this.isActive('landing')})}>
|
||||||
{header}
|
{header}
|
||||||
<RouteHandler />
|
<RouteHandler />
|
||||||
<GlobalNotification />
|
<GlobalNotification />
|
||||||
|
@ -1,11 +1,20 @@
|
|||||||
|
.client--ikonotv.page--landing {
|
||||||
|
background-color: #c40050;
|
||||||
|
margin: 0;
|
||||||
|
width: 100%;
|
||||||
|
padding: 5em 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.client--ikonotv.page--landing .ascribe-footer {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
.ikonotv-landing {
|
.ikonotv-landing {
|
||||||
/* center all text on the page */
|
/* center all text on the page */
|
||||||
text-align: center;
|
text-align: center;
|
||||||
background-color: #c40050;
|
|
||||||
color: white;
|
color: white;
|
||||||
|
|
||||||
padding: 5em 5em 5em 5em;
|
|
||||||
|
|
||||||
header {
|
header {
|
||||||
/* center all images on the page */
|
/* center all images on the page */
|
||||||
img {
|
img {
|
||||||
@ -16,7 +25,7 @@
|
|||||||
|
|
||||||
/* Ikonotv logo */
|
/* Ikonotv logo */
|
||||||
img:first-child {
|
img:first-child {
|
||||||
width: 200px;
|
max-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
> .tagline {
|
> .tagline {
|
||||||
@ -29,12 +38,30 @@
|
|||||||
|
|
||||||
margin-top: 10px;
|
margin-top: 10px;
|
||||||
margin-bottom: 10px;
|
margin-bottom: 10px;
|
||||||
|
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
font-size: 4em;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .poster {
|
||||||
|
max-width: 600px;
|
||||||
|
margin: 0 auto;
|
||||||
|
> .content {
|
||||||
|
width: 100%;
|
||||||
|
padding-bottom: 56.25%;
|
||||||
|
height: 0;
|
||||||
|
background-color: #ffff00;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> h2 {
|
> h2 {
|
||||||
font-weight: 600;
|
font-weight: 600;
|
||||||
font-size: 2.75em;
|
font-size: 2.75em;
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
font-size: 1.75em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
> h2 + h2 {
|
> h2 + h2 {
|
||||||
@ -44,7 +71,8 @@
|
|||||||
|
|
||||||
article {
|
article {
|
||||||
> section {
|
> section {
|
||||||
width: 65%;
|
width: 100%;
|
||||||
|
max-width: 60em;
|
||||||
margin: 3em auto 1em auto;
|
margin: 3em auto 1em auto;
|
||||||
|
|
||||||
> h1 {
|
> h1 {
|
||||||
@ -57,6 +85,9 @@
|
|||||||
text-align: left;
|
text-align: left;
|
||||||
font-size: 1.3em;
|
font-size: 1.3em;
|
||||||
line-height: 1.8;
|
line-height: 1.8;
|
||||||
|
@media only screen and (max-width: 600px) {
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user