pyc-website
main website for pyc inc.
git clone https://9o.is/git/pyc-website.git
commit ef6b72e2af269b0a6a163793d04e37c646755107 parent c7a09952d31ddda02724c3dc92c9be2ab851a41c Author: Jul <jul@9o.is> Date: Wed, 30 Apr 2014 17:36:36 -0400 p tags now use optima font, restructured h tags (cleaner now) and index page to include jumbotron on top Diffstat:
| A | src/main/webapp/fonts/optima-webfont.eot | | | 0 | |
| A | src/main/webapp/fonts/optima-webfont.ttf | | | 0 | |
| A | src/main/webapp/fonts/optima-webfont.woff | | | 0 | |
| M | src/main/webapp/index.html | | | 40 | +++++++++++++++++++--------------------- |
| M | src/main/webapp/less/custom.less | | | 25 | ++++++++++++++++++++++++- |
| M | src/main/webapp/less/overrides.less | | | 19 | +++++++++++++++++++ |
| M | src/main/webapp/less/pages/index.less | | | 13 | +++++++++++++ |
| M | src/main/webapp/less/smartadmin/main-custom.less | | | 55 | ------------------------------------------------------- |
| M | src/main/webapp/less/variables.less | | | 10 | ++++------ |
9 files changed, 79 insertions(+), 83 deletions(-)
diff --git a/src/main/webapp/fonts/optima-webfont.eot b/src/main/webapp/fonts/optima-webfont.eot Binary files differ. diff --git a/src/main/webapp/fonts/optima-webfont.ttf b/src/main/webapp/fonts/optima-webfont.ttf Binary files differ. diff --git a/src/main/webapp/fonts/optima-webfont.woff b/src/main/webapp/fonts/optima-webfont.woff Binary files differ. diff --git a/src/main/webapp/index.html b/src/main/webapp/index.html @@ -18,14 +18,14 @@ </div> </div> - <div id="applyatm-index" class="col-xs-12 col-sm-4"> + <div id="applyatm-index" class="col-xs-12 col-md-4"> <div class="row"> <div class="col-xs-12"> - <h2 class="text-primary"> - Are you a merchant? Apply for a Bitcoin ATM! <br/> + <h3 class="text-primary bold"> + ARE YOU A MERCHANT? APPLY FOR A BITCOIN ATM! <br/> <small>Fill the form below & we'll contact you shortly.</small> - </h2> + </h3> </div> </div> @@ -34,19 +34,19 @@ <table> <tr> <td><i class="fa fa-wrench fa-4x"></i></td> - <td><h4>Free installation and maintenance</h4></td> + <td><h5>Free installation and maintenance</h5></td> </tr> <tr> <td><i class="fa fa-bitcoin fa-4x pull-left"></i></td> - <td><h4>Hot and new emerging technology</h4></td> + <td><h5>Hot and new emerging technology</h5></td> </tr> <tr> <td><i class="fa fa-thumbs-up fa-4x pull-left"></i></td> - <td><h4>Increase business exposure</h4></td> + <td><h5>Increase business exposure</h5></td> </tr> <tr> <td><i class="fa fa-shield fa-4x pull-left"></i></td> - <td><h4>Safe and reliable way for customers to purchase Bitcoin</h4></td> + <td><h5>Safe and reliable way for customers to purchase Bitcoin</h5></td> </tr> </table> </div> @@ -63,15 +63,15 @@ </div> - <div id="findatm-index" class="col-xs-12 col-sm-4 bg-secondary-gradient"> + <div id="findatm-index" class="col-xs-12 col-md-4 bg-secondary-gradient"> <div class="row"> <div class="col-xs-12"> - <h2 class="text-white">Find ATM Locations</h2> + <h2 class="text-white bold">FIND ATM LOCATIONS</h2> </div> </div> <div class="row"> - <div class="col-xs-12"> + <div class="col-xs-12 padding-top-10"> <span data-lift="embed?what=/templates-hidden/parts/find-atm-form"></span> </div> </div> @@ -80,34 +80,32 @@ <div class="col-xs-12 padding-20"> <img src="https://maps.googleapis.com/maps/api/staticmap?center=40.736755,-74.033353&zoom=13&size=360x240&sensor=false" - alt="Looking for a business in Hoboken" style="width: 100%"> + alt="Looking for a business in Hoboken" class="center-fixed-expand"> </div> </div> <div class="row"> <div class="col-xs-12 text-white"> - <h4>We're in the process of finding a bussiness in the - Hoboken, NJ area to host a Bitcoin ATM.</h4> + <h5>We're in the process of finding a bussiness in the + Hoboken, NJ area to host a Bitcoin ATM.</h5> </div> </div> </div> - <div id="whoweare-index" class="col-xs-12 col-sm-4 bg-primary-gradient text-white"> + <div id="whoweare-index" class="col-xs-12 col-md-4 bg-primary-gradient text-white"> <div class="row"> <div class="col-xs-12"> - <h2 class="text-white">Who We Are</h2> + <h2 class="text-white bold">WHO WE ARE</h2> </div> </div> <div class="row"> - <div class="col-xs-12"> + <div class="col-xs-12 padding-top-10"> <p> PYC is an ATM service operator for the bitcoin currency. We enable customers to retrieve bitcoin instantly, just as they retrieve cash from a bank ATM. </p> - <br> - <a data-lift="Menus.item?name=About Us" class="btn btn-primary" type="button">Learn More About Us</a> </div> </div> @@ -117,10 +115,10 @@ <h3>What is Bitcoin?</h3> </div> </div> - <div class="col-xs-12 padding-bottom-20"> + <div class="col-xs-8 col-sm-6 col-md-12 padding-bottom-20"> <a data-lift="Menus.item?name=What Is Bitcoin" type="button" class="btn btn-default btn-lg btn-block"> <small>Click Here to </small><strong>Understand</strong><br> - <img src="/img/bitcoin_logo.png" alt="Click Here to Learn More About Bitcoin" style="width: 100%"></img> + <img src="/img/bitcoin_logo.png" alt="Click Here to Learn More About Bitcoin" style="width:100%"></img> </a> </div> <div class="col-xs-12"> diff --git a/src/main/webapp/less/custom.less b/src/main/webapp/less/custom.less @@ -2,7 +2,19 @@ // by adding things here instead of overriding existing .LESS files, it makes merging changes on product updates easier //@import url(http://fonts.googleapis.com/css?family=Cinzel:900); -@import url(https://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700); +@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400); + +// Optima for p tags in base font size! +@font-face { + font-family: 'Optima'; + src: url('@{icon-font-path}/optima-webfont.eot'); + src: url('@{icon-font-path}/optima-webfont.eot?#iefix') format('embedded-opentype'), + url('@{icon-font-path}/optima-webfont.woff') format('woff'), + url('@{icon-font-path}/optima-webfont.ttf') format('truetype'); + font-weight: normal; + font-style: normal; +} + .background-size(@size) { -webkit-background-size: @size; @@ -135,4 +147,15 @@ .padding-20 { padding-top: 20px; padding-bottom: 20px; +} + +.margin-bottom-10 { + margin-bottom: 10px; +} + +//bold headers +h1,h2,h3,h4,h5,h6,h7 { + &.bold { + font-weight: @headings-font-weight + 100; + } } \ No newline at end of file diff --git a/src/main/webapp/less/overrides.less b/src/main/webapp/less/overrides.less @@ -29,6 +29,25 @@ body { } /******************************************** + * Fonts by tags and important classes + ********************************************/ + + p { + font-family: @font-family-serif; + font-size: @font-size-base + 2; + } + + .jumbotron { + * { + font-family: @font-family-sans-serif !important; + } + + p { + font-size: @jumbotron-font-size; + } + } + +/******************************************** * NAVBAR ********************************************/ diff --git a/src/main/webapp/less/pages/index.less b/src/main/webapp/less/pages/index.less @@ -45,6 +45,19 @@ } } + // for div,img, btn etc that need 100% width but looks bad when stretched + .center-fixed-expand { + @media(min-width: @screen-md) { + width: 100%; + } + } + + & > div[class^="col-"] { + padding-left: 0; + padding-right: 0; + } + + // formats the atm application form #applyatm-index-form { fieldset { padding:0 } footer { background:none } diff --git a/src/main/webapp/less/smartadmin/main-custom.less b/src/main/webapp/less/smartadmin/main-custom.less @@ -20,12 +20,6 @@ body { a:hover, a:active, a:focus, button, button:active, button:focus, object, embed, input::-moz-focus-inner { outline: 0; } - -h1,h2,h3,h4 { - margin:0; - font-family: @font-family-sans-serif; - font-weight: @headings-font-weight - 200; -} .page-title { margin: 12px 0 28px; @@ -176,55 +170,6 @@ body.container { border-bottom:0; } -/* - * Headers - */ - -h1 { - letter-spacing:-1px; - font-size:@font-size-h1; - margin:10px 0; -}h1 small { - font-size:@font-size-h4; - font-weight:300; - letter-spacing:-1px; -}.lead { - font-size:@font-size-h4 + 1px; -} - -h2 { - letter-spacing:-1px; - font-size: @font-size-h2; - margin:20px 0; - line-height:normal; -} - -h3 { - display: block; - font-size: @font-size-h3; - margin: 20px 0; - line-height:normal; -} - -h4 { - line-height:normal; -} - -h5 { - font-size: @font-size-h5; - font-weight: 300; - margin: 10px 0; - line-height:normal; -} - -h6 { - font-size: @font-size-h6; - margin: 10px 0; - font-weight:bold; - line-height:normal; -} - - .row-seperator-header { margin:15px 14px 20px; border-bottom:none; diff --git a/src/main/webapp/less/variables.less b/src/main/webapp/less/variables.less @@ -78,11 +78,10 @@ // Typography // ------------------------- -@font-family-sans-serif: "Open Sans", Arial, Helvetica, Sans-Serif; -@font-family-serif: Georgia, "Times New Roman", Times, serif; +@font-family-sans-serif: "Open Sans", Helvetica, Arial, Sans-Serif; +@font-family-serif: "Optima", Georgia, "Times New Roman", Times, serif; @font-family-monospace: Monaco, Menlo, Consolas, "Courier New", monospace; @font-family-base: @font-family-sans-serif; -@font-family-big-base: "Cinzel", "Open Sans", Arial, Helvetica, Sans-Serif; @font-size-base: 14px; @font-size-large: ceil(@font-size-base * 1.24); // ~16px @@ -99,15 +98,14 @@ @line-height-computed: floor(@font-size-base * @line-height-base); // ~20px @headings-font-family: @font-family-base; -@headings-font-weight: 500; +@headings-font-weight: 300; @headings-line-height: 1.1; @headings-color: inherit; // Iconography // ------------------------- -@icon-font-path: "../fonts/"; -@icon-font-name: "glyphicons-halflings-regular"; +@icon-font-path: "../fonts"; // Components