less/main.less
/*--------------------------------------
 * #CONTENTS
 * -------------------------------------
 *
 * BASE SETUP
 *
 * Imports..............Import all the things.
 * Typography...........Setup our typography.
 * Colors...............Setup our colors.
 * Scaffolding..........Basic setup.
 *
 * COMPONENTS
 *
 * Navbar...............Main navigation.
 * Flash alerts.........Flash messages at the top of the page.
 * Jumbotron............Landing page.
 * Mini-tron............Page headers.
 * Soften...............Faded out HR.
 * Footer...............Footer styles.
 */





/*------------------------------------*\
  #IMPORTS
\*------------------------------------*/

/**
 * First, import base frameworks and fonts:
 *
 *  - Bootstrap        http://getbootstrap.com/
 *  - Boostrap Social  http://lipis.github.io/bootstrap-social/
 *  - Font Awesome     http://fontawesome.io/
 */

@import "bootstrap.less";
@import "../public/lib/bootstrap-social/bootstrap-social.less";
@import "../public/lib/font-awesome/less/font-awesome.less";
@fa-font-path: "../lib/font-awesome/fonts";





/*------------------------------------*\
    #TYPOGRAPHY
\*------------------------------------*/

@font-family-sans-serif:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;

/**
 *   In <head>:
 *   link(rel='stylesheet', href='//fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,500,700')
 */

/**
 * http://css-tricks.com/watch-your-font-weight/
 * http://alistapart.com/article/say-no-to-faux-bold
 *
 * Bootstrap uses five different font weights:
 *
 * 200 - Jumbotron paragraph
 * 300 - Paragraph .lead class
 * 400 - Normal Font Weight
 * 500 - Headings
 * 700 - Bold Text
 *
 * In order to completely change to a different font we need to:
 *
 * 1) Include the font - the easiest is with an example from Google fonts.
 *    (Google sets up your @font-face rules correctly with the same
 *    name for each @font-face rule - see links above)
 *    You need to include all weights needed. However Open Sans does
 *    NOT have a 200 weight, so we will substitute a 300 weight and skip the italic
 *    version. In the Head section include the font stylesheet:
 *
 *    <link href='http: *fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,500,700', rel='stylesheet'>
 *
 * 2) Override the  the "@font-family-sans-serif" variable from variables.less:
 *    @font-family-sans-serif:  "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
 *
 * 3) Override Jumbotron paragraph if you don't have a 200 weight:
 *
 *    .jumbotron {
 *       p {
 *         font-weight: 300;
 *       }
 *     }
 *
 * Boom! Done.
 */





/*------------------------------------*\
  #COLORS
\*------------------------------------*/

/**
 * This needs some explaining.  I'd rather keep colors separate
 * from widgets. That way I can just use HTML markup to colorize
 * widgets in a semantic way:
 *
 *   <div class="jumbotron bg-blue white"></div>
 *
 * This means give me a jumbotron with a blue background and white text
 *
 *   <div class="jumbotron bg-green orange"></div>
 *
 * Green background, orange text, get it?
 *
 * This separation is very practical in use. However, if I
 * make a widget that is designed with a particular color
 * I use the color in the name. Example: .btn-white or .navbar-yellow
 *
 * I usually designate brand colors only but since this
 * is an example so I included a more complete set.
 */

// Brand Color Scheme (checkout: https://kuler.adobe.com/explore)
@brand1:        #377DB5;  // Blue
@brand2:        #70CCF2;  // Aqua
@brand3:        #FFDBC2;  // Salmon
@brand4:        #FF7B64;  // Orange
@brand5:        #E61D46;  // Red


// Boostrap colors in case you need to override them
@brand-primary: #428bca;
@brand-success: #5cb85c;
@brand-info:    #5bc0de;
@brand-warning: #f0ad4e;
@brand-danger:  #d9534f;

// Brand Colors
.brand1 {       color: @brand1; }
.brand2 {       color: @brand2; }
.brand3 {       color: @brand3; }
.brand4 {       color: @brand4; }
.brand5 {       color: @brand5; }

// Brand Backgrounds
.bg-brand1 {    background-color: @brand1; }
.bg-brand2 {    background-color: @brand2; }
.bg-brand3 {    background-color: @brand3; }
.bg-brand4 {    background-color: @brand4; }
.bg-brand5 {    background-color: @brand5; }

// Bootstrap provides an incomplete grayscale
// because it doesn't define white and black.
// Note the items commented below are coming
// from Bootstrap but we add white and black:

// Gray Scale
@white:             #FFFFFF;
// @gray-lighter
// @gray-light
// @gray
// @gray-dark
// @gray-darker
@black:             #111111;

// Gray Scale
.white {            color: @white; }
.gray-lighter {     color: @gray-lighter; }
.gray-light {       color: @gray-light; }
.gray {             color: @gray; }
.gray-dark {        color: @gray-dark; }
.gray-darker {      color: @gray-darker; }
.black {            color: @black; }

// Gray Scale Backgrounds
.bg-white {         background-color: @white; }
.bg-gray-lighter {  background-color: @gray-lighter; }
.bg-gray-light {    background-color: @gray-light; }
.bg-gray {          background-color: @gray; }
.bg-gray-dark {     background-color: @gray-dark; }
.bg-gray-darker {   background-color: @gray-darker; }
.bg-black {         background-color: @black; }

// Other Colors http://clrs.cc/

// Cool
@aqua:          #7FDBFF;
@blue:          #0074D9;
@navy:          #001F3F;
@teal:          #39CCCC;
@green:         #2ECC40;
@olive:         #3D9970;
@lime:          #01FF70;

// Warm
@yellow:        #FFDC00;
@orange:        #FF851B;
@red:           #FF4136;
@pink:          #FF748A;
@fuchsia:       #F012BE;
@purple:        #B10DC9;
@maroon:        #85144B;

// Colors
.aqua {         color: @aqua; }
.blue {         color: @blue; }
.navy {         color: @navy; }
.teal {         color: @teal; }
.green {        color: @green; }
.olive {        color: @olive; }
.lime {         color: @lime; }

.yellow {       color: @yellow; }
.orange {       color: @orange; }
.red {          color: @red; }
.pink {         color: @pink; }
.fuchsia {      color: @fuchsia; }
.purple {       color: @purple; }
.maroon {       color: @maroon; }

// Backgrounds
.bg-aqua {      background-color: @aqua; }
.bg-blue {      background-color: @blue; }
.bg-navy {      background-color: @navy; }
.bg-teal {      background-color: @teal; }
.bg-green {     background-color: @green; }
.bg-olive {     background-color: @olive; }
.bg-lime {      background-color: @lime; }

.bg-yellow {    background-color: @yellow; }
.bg-orange {    background-color: @orange; }
.bg-red {       background-color: @red; }
.bg-pink {      background-color: @pink; }
.bg-fuchsia {   background-color: @fuchsia; }
.bg-purple {    background-color: @purple; }
.bg-maroon {    background-color: @maroon; }





/*------------------------------------*\
  #SCAFFOLDING
\*------------------------------------*/

html {
  /* Sticky Footer Styles Below */
  position: relative;
  min-height: 100%;
}

body {
  /* Account for fixed navbar */
  padding-top: 50px;
  /* Sticky Footer: margin bottom = footer height */
  margin-bottom: 80px;
}

/* Use a thin style for large headers */
h1, h2 {
  font-weight: 300;
}




/*------------------------------------*\
  #COMPONENTS
\*------------------------------------*/

/**
 * Navbar
 */

@navbar-default-brand-color: @gray-darker;
@navbar-default-link-hover-bg: darken(@navbar-default-bg, 6.5%);

.navbar-nav .profile-image {
  width: 30px;
  height: 30px;
  margin: -15px 15px -15px 0;
}
.navbar-brand {
  background-image: url(/favicon.png);
  background-repeat: no-repeat;
  background-size: 40px;
  background-position: left center;
  padding-left: 45px;
  margin-top: -1px;
  margin-left: 15px;
}

/**
 * Flash Alerts
 */

/* remove rounded border */
@alert-border-radius: 0px;

.alert {
  margin-bottom: 0px;
  text-align: center;
}

.progress {
  margin-bottom: 0 !important;
}

/*
 * Jumbotron
 */

@jumbotron-bg: @brand1;
@jumbotron-heading-color: @white;
@brand1-darker: darken(@brand1, 8%);

.jumbotron,
.mini-tron {
  text-shadow: 0 1px 0 rgba(0,0,0,.2);
  background-color: @brand1;
  background-image: -webkit-gradient(linear, left top, left bottom, from(@brand1-darker), to(@brand1));
  background-image: -webkit-linear-gradient(top, @brand1-darker 0%, @brand1 100%);
  background-image:      -o-linear-gradient(top, @brand1-darker 0%, @brand1 100%);
  background-image:         linear-gradient(to bottom, @brand1-darker 0%, @brand1 100%);
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='@brand1-darker', endColorstr='@brand1', GradientType=0);
  background-repeat: repeat-x;
}

.jumbotron {
  margin-bottom: 0px;
  h1 {
    text-align: center;
    margin-top: 0px;
    margin-bottom: 10px;
    font-size: 26px;
  }
}

@media (min-width: 768px) {
  .jumbotron {
    margin-bottom: 0px;
    h1 {
      font-size: 65px;
      margin-top: 20px;
      margin-bottom: 50px;
    }
    h2 {
      text-align: center;
      margin-top: 50px;
      font-size: 40px;
    }
    h3 {
      font-weight: 300;
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 28px;
    }
    li {
      line-height: 1;
      margin: 20px;
      font-size: 20px;
      font-weight: 300;
    }
    p {
      font-weight: 300;
      font-size: 18px;
    }
  }
}

@media (min-width: 1170px) {
  .jumbotron {
    h1 {
      font-size: 70px;
    }
    h3 {
      margin-top: 20px;
      margin-bottom: 20px;
      font-size: 34px;
    }
    li {
      line-height: 1;
      margin: 20px;
      font-size: 26px;
    }
    p {
      font-size: 22px;
    }
  }
}

.btn-white {
  color: #333;
  background-color: @white;
}

.btn-white:hover,
.btn-white:focus,
.btn-white:active {
  color: @white;
  background-color: transparent;
  text-shadow: 1px 1px 1px rgba(0,0,0,.6);
  border-color: @white;
}

.jumbotron .btn {
  width: 100%;
  padding: 10px 20px;
  font-size: 22px;
}

@media (min-width: 768px) {
  .jumbotron .btn {
    width: 100%;
    padding: 15px 30px;
    font-size: 28px;
  }
}

/*
 * Page headers (mini-tron)
 * Jumbotron-esque page headers
 */

.mini-tron {
  position: relative;
  padding: 30px 15px;
  color: lighten(@brand1, 35%);
  text-align: center;
  margin-bottom: 40px;
  font-size: 20px;
  h1 {
    margin-top: 0;
    color: @white;
  }
  p {
    margin-bottom: 0;
    font-weight: 300;
    line-height: 1.4;
  }
}

.mini-tron .container {
  position: relative;
}

@media (min-width: 768px) {
  .mini-tron {
    padding-top: 60px;
    padding-bottom: 60px;
    font-size: 24px;
    text-align: left;
    h1 {
      font-size: 60px;
      line-height: 1;
    }
  }
}

@media (min-width: 992px) {
  .mini-tron {
    h1,
    p {
      margin-right: 180px;
    }
  }
}

/**
 * Faded out hr
 */

.soften {
  height: 2px;
  margin: 10px 0;
  background-image: -webkit-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:    -moz-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:     -ms-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  background-image:      -o-linear-gradient(left, rgba(0,0,0,0), rgba(0,0,0,.1), rgba(0,0,0,0));
  border: 0;
}

/**
 * Panel Headers Like Buttons
 */

.panel-button:hover {
  background: darken(#f5f5f5, 15%);
}
a.noDecoration {
  text-decoration: none;
}
a.noDecoration:hover {
  text-decoration: none;
}

/**
 * Footer
 */

.footer {
  text-align: center;
  /* Sticky footer styles below */
  position: absolute;
  bottom: 0;
  height: 80px;
  width: 100%;
  /* Sticky footer styles end */
  p {
    font-size: 14px;
    color: darken(@gray-light, 15%);
    margin-top: 15px;
    margin-bottom: 15px;
    a {
      text-decoration: none;
      color: @gray-light;
      &:hover {
        color: @gray-lighter;
      }
    }
  }
}

/**
 * Other Media/Responsiveness
 */

@media (max-width: 480px) {
}
@media (max-width: 992px) {
}


@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1170px) {
}
