From bc6860866b86105e3c4a6d4557f0798ba77a0772 Mon Sep 17 00:00:00 2001 From: davegandy Date: Sat, 19 Oct 2013 15:06:42 -0400 Subject: [PATCH] reorganizing variables --- src/assets/less/site/bootstrap/jumbotron.less | 6 +-- src/assets/less/site/bootstrap/navbar.less | 2 +- src/assets/less/site/bootstrap/variables.less | 47 ++++++++----------- .../less/site/fontawesome-icon-list.less | 6 +-- src/assets/less/site/footer.less | 12 ++--- src/assets/less/site/jumbotron-carousel.less | 20 ++++---- 6 files changed, 42 insertions(+), 51 deletions(-) diff --git a/src/assets/less/site/bootstrap/jumbotron.less b/src/assets/less/site/bootstrap/jumbotron.less index 578799887..0799b28fe 100644 --- a/src/assets/less/site/bootstrap/jumbotron.less +++ b/src/assets/less/site/bootstrap/jumbotron.less @@ -1,9 +1,9 @@ .jumbotron { background-color: lighten(@jumbotron-bg, 2%); - border-top: 1px solid mix(@jumbotron-bg, @jumbotron-text, 90%); + border-top: 1px solid mix(@jumbotron-bg, @jumbotron-color, 90%); border-bottom: 1px solid @jumbotron-border; margin-bottom: 0; - &, h1 { color: @jumbotron-text; } + &, h1 { color: @jumbotron-color; } padding: 50px 0 40px; h1 { @@ -15,7 +15,7 @@ } p { font-family: @font-family-alt; - color: mix(@jumbotron-text, @jumbotron-bg, 75%); + color: mix(@jumbotron-color, @jumbotron-bg, 75%); margin-top: 15px; margin-bottom: 15px; font-size: 24px; diff --git a/src/assets/less/site/bootstrap/navbar.less b/src/assets/less/site/bootstrap/navbar.less index 06910cb61..4e0104bc0 100644 --- a/src/assets/less/site/bootstrap/navbar.less +++ b/src/assets/less/site/bootstrap/navbar.less @@ -1,7 +1,7 @@ // SITE SPECIFIC NAVBAR STYLES .navbar { margin-bottom: 0; } -.navbar-inverse { background-color: lighten(@jumbotron-bg, 2%); } +.navbar-inverse { background-color: lighten(@fa-green, 2%); } .navbar-brand { font-family: @font-family-serif; font-weight: 300; diff --git a/src/assets/less/site/bootstrap/variables.less b/src/assets/less/site/bootstrap/variables.less index 7d48b3a4c..8f53b7736 100644 --- a/src/assets/less/site/bootstrap/variables.less +++ b/src/assets/less/site/bootstrap/variables.less @@ -45,24 +45,10 @@ @purple-light: #c3b8f4; @purple-lighter: #fbf5ff; -// Reds -@red: #9d261d; -@red-dark: darken(@red, 10%); - -@constructicons-green-light: desaturate(#c9f8b2, 55%); -@constructicons-green-dark: desaturate(#a0d57d, 55%); - -@constructicons-purple: #573486; -@constructicons-purple-dark: #2e1d51; - - - -@jumbotron-bg: #1d9d74; -@jumbotron-bg-dark: darken(#1d9d74, 10%); - -@jumbotron-border: mix(@jumbotron-bg, @jumbotron-bg-dark, 75%); -@jumbotron-text: #fff; +@fa-green: #1d9d74; +@fa-green-dark: darken(@fa-green, 10%); +@jumbotron-border: mix(@fa-green, @fa-green-dark, 75%); @font-family-alt: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif; @@ -71,15 +57,15 @@ // Brand colors //@brand-primary: @blue-dark; -@brand-success: lighten(@jumbotron-bg, 5%); +@brand-success: lighten(@fa-green, 5%); //@brand-warning: @yellow-dark; //@brand-danger: @red; //@brand-info: @blue; // Links -@link-color: lighten(@jumbotron-bg, 5%); -@link-hover-color: darken(@jumbotron-bg, 5%); +@link-color: lighten(@fa-green, 5%); +@link-hover-color: darken(@fa-green, 5%); // Typography @@ -89,7 +75,7 @@ // Components -@component-active-bg: @jumbotron-bg; +@component-active-bg: @fa-green; // Navbar @@ -97,19 +83,24 @@ @navbar-inverse-brand-color: #fff; // Reset inverted navbar basics -@navbar-inverse-color: mix(@jumbotron-bg, #fff, 50%); -@navbar-inverse-bg: @jumbotron-bg; +@navbar-inverse-color: mix(@fa-green, #fff, 50%); +@navbar-inverse-bg: @fa-green; @navbar-inverse-border: @jumbotron-border; // Inverted navbar links -@navbar-inverse-link-color: mix(@jumbotron-bg, #fff, 35%); +@navbar-inverse-link-color: mix(@fa-green, #fff, 35%); @navbar-inverse-link-hover-color: #fff; @navbar-inverse-link-active-bg: @navbar-inverse-border; // Inverted navbar toggle -@navbar-inverse-toggle-hover-bg: @jumbotron-bg-dark; -@navbar-inverse-toggle-icon-bar-bg: @jumbotron-text; -@navbar-inverse-toggle-border-color: mix(@jumbotron-text, @jumbotron-bg, 75%); +@navbar-inverse-toggle-hover-bg: @fa-green-dark; +@navbar-inverse-toggle-icon-bar-bg: @jumbotron-color; +@navbar-inverse-toggle-border-color: mix(@jumbotron-color, @fa-green, 75%); + + +// Jumbotron +@jumbotron-color: #fff; +@jumbotron-bg: @fa-green; // Form states and alerts @@ -133,5 +124,5 @@ // Carousel @carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25); -@carousel-control-color: @jumbotron-bg-dark; +@carousel-control-color: @fa-green-dark; @carousel-control-font-size: 30px; diff --git a/src/assets/less/site/fontawesome-icon-list.less b/src/assets/less/site/fontawesome-icon-list.less index 3f7ba6892..27c3471ae 100644 --- a/src/assets/less/site/fontawesome-icon-list.less +++ b/src/assets/less/site/fontawesome-icon-list.less @@ -18,14 +18,14 @@ } &:hover { - background-color: @jumbotron-bg; - color: @jumbotron-text; + background-color: @fa-green; + color: @jumbotron-color; text-decoration: none; .fa-icon { font-size: 28px; vertical-align: -6px; } - .text-muted { color: mix(@jumbotron-text, @jumbotron-bg, 70%); } + .text-muted { color: mix(@jumbotron-color, @fa-green, 70%); } } } } diff --git a/src/assets/less/site/footer.less b/src/assets/less/site/footer.less index 27383f62e..3fb6d0099 100755 --- a/src/assets/less/site/footer.less +++ b/src/assets/less/site/footer.less @@ -1,16 +1,16 @@ #footer { // #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); - background-color: lighten(@jumbotron-bg, 2%); + background-color: lighten(@fa-green, 2%); border-top: 1px solid @jumbotron-border; - color: mix(@jumbotron-text, @jumbotron-bg, 60%); + color: mix(@jumbotron-color, @fa-green, 60%); text-shadow: 0 1px 0 rgba(0,0,0,0.15); a { - color: mix(@jumbotron-text, @jumbotron-bg, 80%); - border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 60%); + color: mix(@jumbotron-color, @fa-green, 80%); + border-bottom: dotted 1px mix(@jumbotron-color, @fa-green, 60%); &:hover { - color: @jumbotron-text; + color: @jumbotron-color; text-decoration: none; - border-bottom: solid 1px @jumbotron-text; + border-bottom: solid 1px @jumbotron-color; } } .container { padding-top: 40px; } diff --git a/src/assets/less/site/jumbotron-carousel.less b/src/assets/less/site/jumbotron-carousel.less index 5ed2ef70d..9f00083c1 100644 --- a/src/assets/less/site/jumbotron-carousel.less +++ b/src/assets/less/site/jumbotron-carousel.less @@ -31,30 +31,30 @@ font-family: @font-family-serif; font-size: 24px; padding: 17px 30px; - color: @jumbotron-text; - border-color: mix(@jumbotron-text, @jumbotron-bg, 75%); + color: @jumbotron-color; + border-color: mix(@jumbotron-color, @jumbotron-bg, 75%); background-color: transparent; text-shadow: 0 1px 0 rgba(0,0,0,0.15); &:hover { - background-color: mix(@jumbotron-text, @jumbotron-bg, 95%); - border-color: mix(@jumbotron-text, @jumbotron-bg, 95%); + background-color: mix(@jumbotron-color, @jumbotron-bg, 95%); + border-color: mix(@jumbotron-color, @jumbotron-bg, 95%); color: @jumbotron-bg; - text-shadow: 0 -1px 0 @jumbotron-text; + text-shadow: 0 -1px 0 @jumbotron-color; } } .shameless-self-promotion { margin-top: @buffer-lg; font-size: @font-size-base; line-height: @line-height-base; - color: mix(@jumbotron-text, @jumbotron-bg, 50%); + color: mix(@jumbotron-color, @jumbotron-bg, 50%); text-shadow: 0 1px 0 rgba(0,0,0,0.15); a { - color: mix(@jumbotron-text, @jumbotron-bg, 70%); - border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 50%); + color: mix(@jumbotron-color, @jumbotron-bg, 70%); + border-bottom: dotted 1px mix(@jumbotron-color, @jumbotron-bg, 50%); &:hover { - color: @jumbotron-text; + color: @jumbotron-color; text-decoration: none; - border-bottom: solid 1px @jumbotron-text; + border-bottom: solid 1px @jumbotron-color; } } }