pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
commit 8239afac7589f43b4f5efe914d3dfe6d5625912b parent 7473eb82acbe7002a62193b108d11b9542a935fd Author: Jul <jul@9o.is> Date: Sun, 2 Mar 2014 20:01:59 -0500 changes to ui Diffstat:
24 files changed, 692 insertions(+), 140 deletions(-)
diff --git a/project/plugins.sbt b/project/plugins.sbt @@ -9,4 +9,4 @@ addSbtPlugin("com.eed3si9n" % "sbt-buildinfo" % "0.2.5") addSbtPlugin("com.earldouglas" % "xsbt-web-plugin" % "0.4.2") -addSbtPlugin("com.typesafe.sbteclipse" % "sbteclipse-plugin" % "2.4.0") +addSbtPlugin("com.typesafe.sbteclipse" % "sbteclipse-plugin" % "2.4.0") +\ No newline at end of file diff --git a/src/main/scala/bootstrap/liftweb/Boot.scala b/src/main/scala/bootstrap/liftweb/Boot.scala @@ -22,7 +22,7 @@ import net.liftmodules.mongoauth.MongoAuth class Boot extends Loggable { def boot { logger.info("Run Mode: "+Props.mode.toString) - + // init mongodb MongoConfig.init() @@ -73,9 +73,12 @@ class Boot extends Loggable { // Force the request to be UTF-8 LiftRules.early.append(_.setCharacterEncoding("UTF-8")) - + // Init Extras LiftExtras.init() + + // set name to generate correct minified js and css files + LiftExtras.artifactName.default.set("pyd-0.0.1") // don't include the liftAjax.js code. It's served statically. LiftRules.autoIncludeAjaxCalc.default.set(() => (session: LiftSession) => false) diff --git a/src/main/scala/com/pyd/config/Site.scala b/src/main/scala/com/pyd/config/Site.scala @@ -2,13 +2,11 @@ package com.pyd package config import model.User - import net.liftweb._ import common._ -import http.S +import http.{S, OkResponse, RedirectResponse} import sitemap._ import sitemap.Loc._ - import net.liftmodules.mongoauth.Locs object MenuGroups { @@ -27,8 +25,15 @@ case class MenuLoc(menu: Menu) { object Site extends Locs { import MenuGroups._ - // locations (menu entries) + // locations (for top group) val home = MenuLoc(Menu.i("Home") / "index" >> TopBarGroup) + val about = MenuLoc(Menu.i("About") / "about" >> TopBarGroup) + val blog = MenuLoc(Menu.i("Blog") / "blog" >> TopBarGroup >> EarlyResponse(() => Full(RedirectResponse("http://blog."+S.hostName)))) + val faqs = MenuLoc(Menu.i("FAQs") / "faqs" >> TopBarGroup) + val contact = MenuLoc(Menu.i("Contact Us") / "contact" >> TopBarGroup) + + val ourTeam = MenuLoc(Menu.i("Our Team") / "about" / "ourteam") + val loginToken = MenuLoc(buildLoginTokenMenu) val logout = MenuLoc(buildLogoutMenu) private val profileParamMenu = Menu.param[User]("User", "Profile", @@ -44,6 +49,11 @@ object Site extends Locs { private def menus = List( home.menu, + about.menu, + blog.menu, + faqs.menu, + contact.menu, + ourTeam.menu, Menu.i("Login") / "login" >> RequireNotLoggedIn, register.menu, loginToken.menu, @@ -54,6 +64,7 @@ object Site extends Locs { editProfile.menu, Menu.i("Error") / "error" >> Hidden, Menu.i("404") / "404" >> Hidden, + Menu.i("Status") / "ping" >> Hidden >> CalcStateless(() => true ) >> EarlyResponse(() => Full(OkResponse())), Menu.i("Throw") / "throw" >> EarlyResponse(() => throw new Exception("This is only a test.")) ) diff --git a/src/main/scala/com/pyd/snippet/UtilSnips.scala b/src/main/scala/com/pyd/snippet/UtilSnips.scala @@ -2,11 +2,11 @@ package com.pyd package snippet import scala.xml.NodeSeq - import net.liftweb._ import util.Props - -import net.liftmodules.extras._, snippet._ +import http.S +import net.liftmodules.extras._ +import snippet._ /* * Base all LiftScreens off this. Currently configured to use bootstrap 3. diff --git a/src/main/webapp/about.html b/src/main/webapp/about.html @@ -0,0 +1,5 @@ +<div data-lift="surround?with=default;at=content"> + + <span data-lift="Menu.item?name=Our Team;donthide=true;linktoself=true;a:class=btn btn-primary btn-large">Our Team »</span> + +</div> +\ No newline at end of file diff --git a/src/main/webapp/about/ourteam.html b/src/main/webapp/about/ourteam.html @@ -0,0 +1,53 @@ +<div data-lift="surround?with=default;at=content"> + <div id="ourteam"> + <div class="row ourstory"> + <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12"> + <p style="font-size:15px; margin: 40px;"> + Our beautiful story goes here. + </p> + </div> + </div> + + <div class="row ourstory"> + <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> + <img style="width:100%" src="/img/marist.jpg" /> + </div> + <div class="col-xs-12 col-sm-6 col-md-6 col-lg-6"> + <img style="width:100%" src="/img/ualbany.jpg" /> + </div> + </div> + + <br><br><hr><br><br> + + <div class="row"> + <div class="ourteam-box col-xs-12 col-sm-4 col-md-4 col-lg-4"> + <img src="" /> + <h2 class="name">Emilio Pagan-Yourno</h2> + <h5 class="title">Co-Founder</h5> + <p> + Emilio Pagan-Yourno is an outgoing bitcoin enthusiast with an unparalleled drive to learn more about potential applications with regards to bitcoin. He believes in bitcoin as a potential replacement to the archaic credit card processing system that has too easily allowed for cybercriminals to cause headaches and millions in damages. + Emilio is a Junior at Marist College. He also interns 24/hours a week for the ITS department for NYS in Albany,NY where he works in the Human Resources office as a database administrator. + In addition to working hard in school and his internship, Emilio also enjoys travelling and playing tennis. + </p> + </div> + <div class="ourteam-box col-xs-12 col-sm-4 col-md-4 col-lg-4"> + <img src="" /> + <h2 class="name">Andrew Desbien</h2> + <h5 class="title">Co-Founder</h5> + <p> + Upon graduation of Shenendehowa High School (Clifton Park, NY) as part of the class of 2011, Andrew attended Elms College (Chicopee, MA) where he made the Dean's list and was part of the NCAA Baseball team for three academic semesters. Andrew + then decided to pursue his degree at the State University of New York at Albany where he is currently majoring Information Science with a minor in Business. In his free time, he enjoys playing and watching baseball, golf and fishing. + </p> + </div> + <div class="ourteam-box col-xs-12 col-sm-4 col-md-4 col-lg-4"> + <img src="/img/julio.jpg" /> + <h2 class="name">Julio Cabrera</h2> + <h5 class="title">Software Engineer & Security Expert</h5> + <p> + A visionaire, a security expert, an NSF scholar and an exceptional Marist College student. + What more could he say? + </p> + </div> + </div> + </div> +</div> +\ No newline at end of file diff --git a/src/main/webapp/app/BsPlugins.js b/src/main/webapp/app/BsPlugins.js @@ -0,0 +1,7 @@ + +$('#big-tab a').click(function (e) { + e.preventDefault(); + $(this).tab('show'); +}); + +$('#big-tab a:first').tab('show'); diff --git a/src/main/webapp/contact.html b/src/main/webapp/contact.html @@ -0,0 +1,16 @@ +<div data-lift="surround?with=default;at=content"> + +<address> + <strong>PYD LLC</strong><br> + 795 Folsom Ave, Suite 600<br> + San Francisco, CA 94107<br> + <abbr title="Phone">P:</abbr> (123) 456-7890 +</address> + +<address> + <strong>Full Name</strong><br> + <a href="mailto:#">first.last@example.com</a> +</address> + + +</div> +\ No newline at end of file diff --git a/src/main/webapp/faqs.html b/src/main/webapp/faqs.html @@ -0,0 +1,20 @@ + +<div data-lift="surround?with=default;at=content"> + +<style> + ol li { + margin: 10px 0; + } + .list-unstyled { + margin-left: 20px; + } +</style> + <ol> + <li><strong>Question #1 goes here</strong></li> + <ul class="list-unstyled"> + <li>Answer to question #1</li> + </ul> + <li><strong>Question #2 goes here</strong></li> + </ol> + +</div> +\ No newline at end of file diff --git a/src/main/webapp/fonts/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff b/src/main/webapp/fonts/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff Binary files differ. diff --git a/src/main/webapp/fonts/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff b/src/main/webapp/fonts/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff Binary files differ. diff --git a/src/main/webapp/fonts/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff b/src/main/webapp/fonts/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff Binary files differ. diff --git a/src/main/webapp/fonts/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff b/src/main/webapp/fonts/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff Binary files differ. diff --git a/src/main/webapp/fonts/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff b/src/main/webapp/fonts/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff Binary files differ. diff --git a/src/main/webapp/img/athens.jpg b/src/main/webapp/img/athens.jpg Binary files differ. diff --git a/src/main/webapp/img/julio.jpg b/src/main/webapp/img/julio.jpg Binary files differ. diff --git a/src/main/webapp/img/logo_transparent.png b/src/main/webapp/img/logo_transparent.png Binary files differ. diff --git a/src/main/webapp/img/marist.jpg b/src/main/webapp/img/marist.jpg Binary files differ. diff --git a/src/main/webapp/img/ualbany.jpg b/src/main/webapp/img/ualbany.jpg Binary files differ. diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html @@ -1,55 +1,254 @@ <div data-lift="surround?with=base-wrap;at=content"> <lift:head> - <title data-lift="Menu.title">PYD: %*%</title> + <title data-lift="Menu.title">PYD: The Easiest Way to Bitcoins</title> </lift:head> <div class="main-content"> <div data-lift="Notices"></div> - <div class="col-xs-12 col-sm-12 col-md-5 col-lg-4"> - <div class="well no-padding"> - <form action="index.html" id="login-form" - class="smart-form client-form"> - <header> Sign In </header> - - <fieldset> - - <section> - <label class="label">What is your E-mail address?</label> <label - class="input"> <i class="icon-append fa fa-user"></i> <input - type="email" name="email"> <b - class="tooltip tooltip-top-right"><i - class="fa fa-user txt-color-teal"></i> Please enter email - address/username</b></label> - </section> - - <section> - <label class="label">What is your Password?</label> <label - class="input"> <i class="icon-append fa fa-lock"></i> <input - type="password" name="password"> <b - class="tooltip tooltip-top-right"><i - class="fa fa-lock txt-color-teal"></i> Enter your password</b> - </label> - <div class="note"> - <a href="javascript:void(0)">Forgot password?</a> - </div> - </section> - - <section> - <label class="checkbox"> <input type="checkbox" - name="remember" checked=""> <i></i>Stay signed in - </label> - </section> - </fieldset> - <footer> - <a type="submit" class="btn btn-primary"> <i - class="fa fa-lock fa-fw"></i> Sign in Securely - </a> - </footer> - </form> + <div class="row"> + <div class="hidden-xs hidden-sm col-md-5 col-lg-4"></div> + <div id="big-tabs-outer" + class="col-xs-12 col-sm-12 col-md-7 col-lg-8 jarviswidget well"> + <ul id="big-tabs" class="nav nav-tabs bordered nav-justified"> + <li class="active"><a href="#find-atms" data-toggle="tab">Buy Bitcoin</a></li> + <li><a href="#sell-bitcoin" data-toggle="tab">Sell Bitcoin</a></li> + <li><a href="#merchant-deals" data-toggle="tab">Merchants</a></li> + + </ul> </div> + </div> + + <div class="row"> + + <div id="big-pane-outer" + class="col-xs-12 col-sm-12 col-md-12 col-lg-12 no-padding"> + <div class="tab-content"> + + <div id="sell-bitcoin" class="tab-pane fade in"> + + </div> + + <div id="merchant-deals" class="tab-pane fade in"> + <div class="row"> + <div class="left-content col-xs-12 col-sm-12 col-md-6 col-lg-6"> + <h1>Bitcoin to Cash</h1> + <p> + <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <span class="fa-stack fa-lg"> <i + class="fa fa-circle fa-stack-2x"></i> <i + class="fa fa-btc fa-stack-1x fa-inverse"></i> + </span> <a href="/" class="btn btn-primary btn-xs">Host an ATM Now!</a> + </p> + <p class="message">Recieve up to $10,000 cash back on your + first $1,000,000 in sales when accepting Bitcoin at your business</p> + </div> + + <div id="merchant-signup" + class="right-content col-xs-12 col-sm-12 col-md-5 col-lg-4 col-lg-offset-1"> + <div class="no-padding"> + <form class="smart-form form-inline colored-form " role="form"> + <fieldset> + <section> + <label class="label">What is your E-mail address?</label> <label + class="input"> <i class="icon-append fa fa-envelope-o"></i> + <input type="email" name="email" placeholder="you@exeample.com"> + <b class="tooltip tooltip-top-right"><i + class="fa fa-user txt-color-blue"></i> Please enter email + address</b></label> + </section> + </fieldset> + <footer> + <a type="submit" class="btn btn-warning"> <i + class="fa fa-lock fa-fw"></i> Host a Bitcoin ATM + </a> + </footer> + </form> + + </div> + </div> + + <!-- <div + class="right-content col-xs-12 col-sm-12 col-md-5 col-lg-4 col-lg-offset-2"> + Bitcoin Vending Machine picture goes here</div> --> + </div> + </div> + + <div id="find-atms" class="tab-pane fade in active nj-map-pic"> + <div class="layer"></div> + + <div id="find-atms-coming-soon" + class="col-xs-12 col-sm-12 col-md-6 col-lg-5"> + <h1>Cash to Bitcoin</h1> + <p class="message">Fill the form on the right side to get + notified when an ATM comes to your home town.</p> + </div> + + <div id="notify-form-outer" + class="col-xs-12 col-sm-12 col-md-5 col-lg-4 col-lg-offset-2 content-right"> + + <form action="" id="notify-form" class="smart-form client-form"> + <header>Notify me when there is a nearby ATM</header> + <fieldset> + <div class="row"> + <section class="col col-6"> + <label class="input"> <i + class="icon-prepend fa fa-user"></i> <input name="fname" + placeholder="First name" type="text"> + </label> + </section> + <section class="col col-6"> + <label class="input"> <i + class="icon-prepend fa fa-user"></i> <input name="lname" + placeholder="Last name" type="text"> + </label> + </section> + </div> + + <div class="row"> + <section class="col col-6"> + <label class="input"> <i + class="icon-prepend fa fa-envelope-o"></i> <input + name="email" placeholder="E-mail" type="email"> + </label> + </section> + + <section class="col col-6"> + <label class="input"> <input name="code" + placeholder="Post code" type="text"> + </label> + </section> + </div> + <div class="row"> + <section class="col col-6"> + <label class="input"> <input name="city" + placeholder="City" type="text"> + </label> + </section> + <section class="col col-3"> + <label class="select"> <select name="state"> + <option value="0" selected="" disabled="ST"></option> + <option value="1">AL</option> + <option value="2">AK</option> + <option value="3">AZ</option> + <option value="4">AR</option> + <option value="5">CA</option> + <option value="6">CO</option> + <option value="7">CT</option> + <option value="8">DE</option> + <option value="9">FL</option> + <option value="10">GA</option> + <option value="11">HI</option> + <option value="12">ID</option> + <option value="13">IL</option> + <option value="14">IN</option> + <option value="15">IA</option> + <option value="16">KS</option> + <option value="17">KY</option> + <option value="18">LA</option> + <option value="19">ME</option> + <option value="20">MD</option> + <option value="21">MA</option> + <option value="22">MI</option> + <option value="23">MN</option> + <option value="24">MS</option> + <option value="25">MO</option> + <option value="26">MT</option> + <option value="27">NE</option> + <option value="28">NV</option> + <option value="29">NH</option> + <option value="30">NJ</option> + <option value="31">NM</option> + <option value="32">NY</option> + <option value="33">NC</option> + <option value="34">ND</option> + <option value="35">OH</option> + <option value="36">OK</option> + <option value="37">OR</option> + <option value="38">PA</option> + <option value="39">RI</option> + <option value="40">SC</option> + <option value="41">SD</option> + <option value="42">TN</option> + <option value="43">TX</option> + <option value="44">UT</option> + <option value="45">VT</option> + <option value="46">VA</option> + <option value="47">WA</option> + <option value="48">WV</option> + <option value="49">WI</option> + <option value="50">WY</option> + </select> + </label> + </section> + + </div> + </fieldset> + + <footer> + <button type="submit" class="btn btn-primary">Notify + Me</button> + </footer> + </form> + </div> + </div> + </div> + </div> + <!-- end of big-pane-outer --> + </div> + <!-- end of row --> + + + <div class="row"> + <div class="sales-box col-xs-12 col-sm-4 col-md-4 col-lg-4"> + <h2>Secure, Reliable, Easy</h2> + <p>Bitcoins are kept offline and fully encrypted to keep + everyone safe.</p> + <p> + <a class="btn btn-default" href="#" role="button">View details + »</a> + </p> + </div> + <div class="sales-box col-xs-12 col-sm-4 col-md-4 col-lg-4"> + <h2>Merchant Deals</h2> + <p>1% cash back, zero fraud and chargebacks. Business the way it's meant to be.</p> + <p> + <a class="btn btn-default" href="#" role="button">View details + »</a> + </p> + </div> + <div class="sales-box col-xs-12 col-sm-4 col-md-4 col-lg-4"> + <h2>Low Fees</h2> + <p>Only 5% interest rate when buying Bitcoins from an ATM.</p> + <p> + <a class="btn btn-default" href="#" role="button">View details + »</a> + </p> + </div> </div> + <hr> + </div> <div class="row"> diff --git a/src/main/webapp/less/custom.less b/src/main/webapp/less/custom.less @@ -1,2 +1,11 @@ -// Add anything custom here -- mixins, variable overrides -// by adding things here instead of overriding existing .LESS files, it makes merging changes on product updates easier -\ No newline at end of file +// Add anything custm here -- mixins, variable overrides +// by adding things here instead of overriding existing .LESS files, it makes merging changes on product updates easier + +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700); + +.background-size(@size) { + -webkit-background-size: @size; + -moz-background-size: @size; + -o-background-size: @size; + background-size: @size; +} +\ No newline at end of file diff --git a/src/main/webapp/less/overrides.less b/src/main/webapp/less/overrides.less @@ -1,30 +1,65 @@ //need to override just oe ortwo small stylistic things and don't want to edit the main .less files? Add those overrides here -@navbar-toprow: 0.20; -@navbar-bottomrow: 0.75; +body { + overflow: auto; +} + +@navbar-toprow: 0.40; +@navbar-bottomrow: 0.50; #navbar-main { + margin-bottom: 0; + .navbar-brand { - padding: (@navbar-padding-vertical * 0.66667) @navbar-padding-horizontal; + padding: (@navbar-padding-vertical * 0.33333) @navbar-padding-horizontal; img { - height: (@navbar-padding-vertical * 1.25); + height: @navbar-height * 0.66667; } } .bottom-row { min-height: (@navbar-height * @navbar-bottomrow); } + + .top-row { + .navbar-nav > li > a { + &:hover { + background-color: @brand-primary; + color: @white; + } + } + } + + + .navbar-toggle { + background-color: @brand-primary; + .icon-bar { + background-color: @white; + } + } } -@media (min-width: 768px) { +@media (min-width: @screen-sm) { #navbar-main { + .collapse { + .pull-right(); + padding: 0 !important; + + .row > * { + padding: 0 !important; + .nav { .pull-right(); } + } + } + .top-row { .navbar-nav > li > a { min-height: (@navbar-height * @navbar-toprow); padding-top: (@navbar-padding-vertical * @navbar-toprow); padding-bottom: (@navbar-padding-vertical * @navbar-toprow); - line-height: (@line-height-computed * 0.44444) + line-height: (@line-height-computed * 0.44444); + border-bottom-right-radius: 3px; + border-bottom-left-radius: 3px; } } @@ -43,7 +78,220 @@ } } -.smart-form footer .btn .btn-link { - font: 300 15px/29px 'Open Sans', Helvetica, Arial, sans-serif; - .box-shadow(0 0 0 transparent) !important; +.smart-form.colored-form { + background-color: @brand-primary; + & > *, label { + background: none; + color: @white; + font-weight: 400; + } + header { + border-bottom: 1px solid rgba(255,255,255, 0.1); + } + + fieldset { + padding-top: 5px; + padding-bottom: 5px; + } + + footer { + border-top: 1px solid rgba(255,255,255, 0.1); + padding-top: 0; + padding-bottom: 5px; + } +} + +#merchant-signup { + padding-left: 0; + z-index: 20; + + form { + padding: 10px; + margin-bottom: @line-height-computed; + } +} + +@big-pane-min-height: 330px; + +#big-tabs-outer { + @media (min-width: @screen-md) { + margin-top: -60px; + } + + padding-right: 0; + + // override: keep big tabs horizontals until xs, not sm device. + #big-tabs { + @media (min-width: @screen-xs-min) { + > li { + display: table-cell; + width: 1%; + > a { + margin-bottom: 0; + } + } + } + } + + #big-tabs > li > a { + padding-top: 15px; + padding-bottom: 15px; + font-size: 16px; + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + } +} + +#big-pane-outer { + @media (min-width: @screen-md) { + margin-top: -30px; + } + @media (max-width: @screen-sm-max) { + margin-top: -30px; + } + + min-height: @big-pane-min-height; + border: 2px solid @nav-link-hover-bg; + border-top: 0; + + .tab-content { + .tab-pane { + padding: 30px; + } + } + + .nj-map-pic { + width: 100%; + + + @media (min-width: @screen-lg) { + height: @big-pane-min-height; + } + + @media (max-width: @screen-md-max) { + height: @big-pane-min-height; + } + + @media (max-width: @screen-sm-max) { + height: 460px; + } + + background: url('http://maps.googleapis.com/maps/api/staticmap?center=40.778202,-74.122381&zoom=12&size=2000x460&sensor=false') no-repeat center center fixed; + .background-size(cover); + + .layer { + #gradient > .horizontal-three-colors(rgba(0,0,0,0.4), rgba(0,0,0,0.3), 50%, rgba(0,0,0,0.4)); + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } + } + + @margin-spacing: 100px; + @title-font-size: 50px; + @message-font-size: 18px; + + h1 { + color: @white; + + @media (max-width: @screen-xs) { + font-size: @title-font-size * 0.75; + } + + @media (min-width: @screen-xs) { + font-size: @title-font-size; + } + + @media (min-width: @screen-md) { + //margin-top: @margin-spacing; + //margin-left: @margin-spacing; + } + + } + + p { + @media (min-width: @screen-md) { + //margin-left: @margin-spacing; + } + + &.message { + @media (max-width: @screen-xs){ + font-size: @message-font-size * 0.85; + } + + @media (min-width: @screen-xs) { + font-size: @message-font-size; + } + } + } + + #find-atms p { + color: @white; + } + + #merchant-deals h1 { + color: @brand-primary; + } + + #merchant-deals p span { + color: @brand-warning; + } + + .right-content { + @media (min-width: @screen-lg) { + padding: 5px; + } + + @media (max-width: @screen-md-max) { + padding: 20px; + } + } +} + +// Collapse to full width when xs-device is found +// ex. class="col-xs-6 xxs-collapse col-sm-6" +.xxs-collapse { + @media (max-width: @screen-xs) { + width: 100%; + } +} + +.sales-box, .ourteam-box { + h2 { + color: @brand-primary; + font-weight: 400; + } + + p { + + } +} + +#ourteam { + + .ourteam-box { + img { + width: 70%; + margin-left: 15%; + } + + .name, .title { + text-align: center; + } + + p { + margin-top: 20px; + } + } + + .row.ourstory { + p { + font-size: 15px; + } + img { + width: 100%; + } + } } \ No newline at end of file diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less @@ -10,12 +10,55 @@ // Brand colors // ------------------------- +// Grays +// ------------------------- +@black: #000; +@gray-darkest: lighten(@black, 5.5%); // #111'ish? +@gray-darker: lighten(@black, 13.5%); // #222 +@gray-dark: lighten(@black, 20%); // #333 +@gray: lighten(@black, 33.5%); // #555 +@gray-light: lighten(@black, 60%); // #999 +@gray-mid-light: lighten(@black, 75%); // #CCC'ish? +@gray-lighter: lighten(@black, 93.5%); // #eee +@gray-lightest: lighten(@black, 95.5%); // #fafafa'ish? + +// COLOR PALLET +// -------------------------------------------------- + +@blueStandard: #3276B1; +@blueSky: #0091D9; +@blue: #57889C; +@blueLight: #92A2A8; +@blueDark: #4c4f53; +@green: #356e35; +@greenLight: #71843f; +@greenDark: #496949; +@greenBright: #40AC2B; +@red: #a90329; +@yellow: #b09b5b; +@orange: #F7931E; //#f7921d; //#C79121; +@orangeDark: #A57225; +@pink: #ac5287; +@pinkDark: #a8829f; +@purple: #6E587A; +@darken: #404040; +@lighten: #d5e7ec; +@white: #ffffff; +@greyDark: #525252; +@magenta: #6e3671; +@teal: #568a89; +@redLight: #a65858; +@redBright: #ed1c24; +@tealLight: #0AA66E; + //@brand-primary: #3276B1; -@brand-primary: #3E648D; +//@brand-primary: #446E9B; +@brand-primary: #3E648D; +@brand-secondary: @orange; @brand-success: #739E73; -@brand-warning: #C79121; -@brand-danger: #A90329; -@brand-info: #57889C; +@brand-warning: @orange; +@brand-danger: @red; +@brand-info: @blue; // Scaffolding // ------------------------- @@ -254,7 +297,7 @@ // ------------------------- // Basics of a navbar -@navbar-height: 80px; +@navbar-height: 120px; @navbar-margin-bottom: @line-height-computed; @navbar-default-color: #777; @navbar-default-bg: #f8f8f8; @@ -646,50 +689,6 @@ * SMARTADMIN VARIABLES */ -// Main Theme Values -// -------------------------------------------------- - -// Grays -// ------------------------- -@black: #000; -@gray-darkest: lighten(@black, 5.5%); // #111'ish? -@gray-darker: lighten(@black, 13.5%); // #222 -@gray-dark: lighten(@black, 20%); // #333 -@gray: lighten(@black, 33.5%); // #555 -@gray-light: lighten(@black, 60%); // #999 -@gray-mid-light: lighten(@black, 75%); // #CCC'ish? -@gray-lighter: lighten(@black, 93.5%); // #eee -@gray-lightest: lighten(@black, 95.5%); // #fafafa'ish? - -// COLOR PALLET -// -------------------------------------------------- - -@blueStandard: #3276B1; -@blueSky: #0091D9; -@blue: #57889C; -@blueLight: #92A2A8; -@blueDark: #4c4f53; -@green: #356e35; -@greenLight: #71843f; -@greenDark: #496949; -@greenBright: #40AC2B; -@red: #a90329; -@yellow: #b09b5b; -@orange: #C79121; -@orangeDark: #A57225; -@pink: #ac5287; -@pinkDark: #a8829f; -@purple: #6E587A; -@darken: #404040; -@lighten: #d5e7ec; -@white: #ffffff; -@greyDark: #525252; -@magenta: #6e3671; -@teal: #568a89; -@redLight: #a65858; -@redBright: #ed1c24; -@tealLight: #0AA66E; - // IMAGE PATH & BACKGROUNDS // -------------------------------------------------- diff --git a/src/main/webapp/templates-hidden/base-wrap.html b/src/main/webapp/templates-hidden/base-wrap.html @@ -23,33 +23,10 @@ <link rel="apple-touch-icon" sizes="72x72" href="images/apple-touch-icon-72x72.png"> <link rel="apple-touch-icon" sizes="114x114" href="images/apple-touch-icon-114x114.png"> --> - -<!-- GOOGLE FONT --> -<link rel="stylesheet" - href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700"> </head> <body> - <!-- - <div class="navbar navbar-default" role="navigation"> - <div class="container"> - <div class="navbar-header"> - <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> - <span class="sr-only">Toggle navigation</span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - <span class="icon-bar"></span> - </button> - <a class="navbar-brand" href="/">PYD</a> - </div> - <div class="collapse navbar-collapse"> - <ul class="nav navbar-nav" data-lift="Menus.group?group=topbar"></ul> - <span data-lift="UserTopbar"></span> - </div> - </div> - </div> ---> - <div id="navbar-main" class="navbar navbar-default" role="navigation"> + <div id="navbar-main" class="navbar" role="navigation"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" @@ -58,7 +35,7 @@ class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> - <a class="navbar-brand" href="/"><img src="img/logo.png"></a> + <a class="navbar-brand" href="/"><img src="/img/logo_transparent.png"></a> </div> <div class="collapse navbar-collapse"> <div class="row top-row"> @@ -66,9 +43,9 @@ <ul class="nav navbar-nav" data-lift="Menus.group?group=topbar"></ul> </div> </div> - <div class="row bottom-row"> + <div class="row bottom-row hidden-sm hidden-xs"> <div class="col-md-12"> - <span data-lift="UserTopbar"></span> + </div> </div>