From 98796a0e18ad9f3e6fca10fb4a267bea5bfc5e81 Mon Sep 17 00:00:00 2001 From: Ben Stein-Lobovits Date: Tue, 30 Jun 2015 17:07:05 -0700 Subject: [PATCH] [FIX] landing page styles --- src/less/ripple/landing.less | 56 +++++++++++++++++------------------ src/templates/tabs/login.jade | 8 ++--- 2 files changed, 31 insertions(+), 33 deletions(-) diff --git a/src/less/ripple/landing.less b/src/less/ripple/landing.less index be947e46b..f3e86a55a 100644 --- a/src/less/ripple/landing.less +++ b/src/less/ripple/landing.less @@ -45,23 +45,23 @@ header.loggedOut { background: url('/img/bg_title.png'), -moz-linear-gradient(83.68% 67.94% 160.57deg,rgba(67, 147, 184, 1) 0%,rgba(52, 106, 169, 1) 100%); background: url('/img/bg_title.png'), linear-gradient(160.57deg, rgba(67, 147, 184, 1) 0%, rgba(52, 106, 169, 1) 100%); background-repeat: no-repeat; - background-position: 25% 60%; + background-position: 0% 30%; z-index: 1; background-color: #4c8db8; /* Old browsers */ height: auto; min-height: 820px; - - + + // Pixel ratio: 2 @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2) { background: url('/img/bg_title_2x.png'), -webkit-linear-gradient(160.57deg, rgba(67, 147, 184, 1) 0%, rgba(52, 106, 169, 1) 100%); background: url('/img/bg_title_2x.png'), -moz-linear-gradient(83.68% 67.94% 160.57deg,rgba(67, 147, 184, 1) 0%,rgba(52, 106, 169, 1) 100%); background: url('/img/bg_title_2x.png'), linear-gradient(160.57deg, rgba(67, 147, 184, 1) 0%, rgba(52, 106, 169, 1) 100%); background-repeat: no-repeat; - background-position: 25% 60%; + background-position: 0% 30%; z-index: 1; background-size: 100%; - height: auto; + height: auto; min-height: 820px; } @@ -71,10 +71,10 @@ header.loggedOut { height: auto; max-width: 1400px; margin: auto; - + & a { color: @white; - + &:hover { color: @midgray; } @@ -85,14 +85,13 @@ header.loggedOut { text-align: center; font-family: 'OpenSansLight'; } - + .welcomeText { text-align: center; font-family: 'OpenSansLight'; font-size: 60px; color: @white; - margin: 150px auto 70px; - max-width: 400px; + margin: 50px auto 30px; } hr { @@ -137,7 +136,7 @@ header.loggedOut { -webkit-transition:.5s; transition:.5s; padding-top: 20px; - + &:hover { opacity: .7; -o-transition:.5s; @@ -149,9 +148,8 @@ header.loggedOut { } #t-login .auth-form-container .auth-form-wrapper, #t-account .auth-form-container .auth-form-wrapper { - float: right; border: none; - background: rgba(76, 141, 184, .8); + background: transparent; border-radius: 5px; } @@ -172,13 +170,13 @@ header.loggedOut { h2.loginTop { border-bottom: none !important; - padding-bottom: 0px !important; + padding-bottom: 0px !important; font-size: 35px; } h2.signUpTop { border-bottom: none !important; - padding-bottom: 0px !important; + padding-bottom: 0px !important; font-size: 35px; & a:hover { @@ -202,7 +200,7 @@ header.loggedOut { color: @white; max-width: 600px; margin: auto; - padding: 60px 0 50px; + padding: 20px 0 50px; } .form-group { @@ -221,11 +219,11 @@ header.loggedOut { text-align: left !important; color: @landingblue; } - + .secretText { color: @brand-success !important; } - + .reSend { cursor: pointer; margin-top: 0px; @@ -237,7 +235,7 @@ header.loggedOut { top: 2px; } } - + .loading_text:hover { color: @midgray; text-decoration: underline; @@ -253,7 +251,7 @@ header.loggedOut { background-color: rgba(52,65,77,.4); color: @white; border: none; - + &:focus { -webkit-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0 8px rgba(255, 255, 255, 0.4); -moz-box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.075), 0 0 8px rgba(255, 255, 255, 0.4); @@ -302,7 +300,7 @@ header.loggedOut { footer.loggedOut { border-top: none; } - + .loggingIn, .error, .success, .fa-exclamation-triangle { color: @white !important; } @@ -349,7 +347,7 @@ header.loggedOut { } - + //buttons form.ng-invalid .btn-success { @@ -378,7 +376,7 @@ header.loggedOut { -moz-transition:5s; -webkit-transition:.5s; transition:.5s; - + &:hover { background: rgba(255,255,255,0.4); -o-transition:.5s; @@ -391,7 +389,7 @@ header.loggedOut { text-decoration: none; } } - + } } @@ -449,7 +447,7 @@ header.loggedOut { h2.signUpTop, h2.loginTop { font-size: 2em !important; } - + .tabBg { height: 85px !important; } @@ -466,11 +464,11 @@ header.loggedOut { .tabBg { width: 48% !important; } - + .t-login .tabBg, .pm-default .tabBg { left: 15px !important; } - + } @@ -481,7 +479,7 @@ header.loggedOut { .tabBg { width: 25% !important; } - + .t-login .tabBg, .pm-default .tabBg { left: 50%; } @@ -493,4 +491,4 @@ header.loggedOut { img.xrpHolder { width: 75%; } - } \ No newline at end of file + } diff --git a/src/templates/tabs/login.jade b/src/templates/tabs/login.jade index 5be6e9405..16db571c3 100644 --- a/src/templates/tabs/login.jade +++ b/src/templates/tabs/login.jade @@ -1,7 +1,7 @@ section.col-xs-12.content(ng-controller="LoginCtrl") include ../tabs/banner/announcement .row.auth-form-container(ng-hide="$routeParams.to") - .col-xs-12.col-sm-4.col-md-8.hidden-xs + .col-xs-12.hidden-xs .welcomeText(l10n) Welcome to Ripple Trade hr p.heroText(l10n) Trade hundreds of assets, from XRP to crypto to gold to fiat. @@ -35,7 +35,7 @@ section.col-xs-12.content(ng-controller="LoginCtrl") p(l10n-inc) to .address {{ $routeParams.to | rpripplenamefull:{tilde:true} }} | . - p(l10n-inc) Log in to your Ripple Trade account to continue. You + p(l10n-inc) Log in to your Ripple Trade account to continue. You | will be able to confirm this transaction on the next page. div.info(ng-show="'trust' == $route.current.tabName") p.literal {{$routeParams.label}} @@ -51,7 +51,7 @@ section.col-xs-12.content(ng-controller="LoginCtrl") .amount span.currency {{$routeParams.amount | rpamount}} {{$routeParams.amount | rpcurrency}} | . - p(l10n-inc) Log in to your Ripple Trade account to continue. You + p(l10n-inc) Log in to your Ripple Trade account to continue. You | will be able to confirm this transaction on the next page. div.info(ng-show="'contacts' == $route.current.tabName") @@ -60,7 +60,7 @@ section.col-xs-12.content(ng-controller="LoginCtrl") p(l10n-inc) You're adding .address {{ $routeParams.to | rpripplenamefull:{tilde:true} }} p(l10n-inc) to your contacts list - p(l10n-inc) Log in to your Ripple Trade account to continue. You + p(l10n-inc) Log in to your Ripple Trade account to continue. You | will be able to confirm this transaction on the next page.