1
0
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:
vrde 2015-09-18 13:46:15 +02:00
parent 36f7d8f3d3
commit b76ffcde73
4 changed files with 50 additions and 14 deletions

View File

@ -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 />

View File

@ -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>

View File

@ -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 />

View File

@ -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;
}
} }
} }
} }