reorganizing variables

This commit is contained in:
davegandy 2013-10-19 15:06:42 -04:00
parent a918c2ee6d
commit bc6860866b
6 changed files with 42 additions and 51 deletions

View File

@ -1,9 +1,9 @@
.jumbotron { .jumbotron {
background-color: lighten(@jumbotron-bg, 2%); 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; border-bottom: 1px solid @jumbotron-border;
margin-bottom: 0; margin-bottom: 0;
&, h1 { color: @jumbotron-text; } &, h1 { color: @jumbotron-color; }
padding: 50px 0 40px; padding: 50px 0 40px;
h1 { h1 {
@ -15,7 +15,7 @@
} }
p { p {
font-family: @font-family-alt; font-family: @font-family-alt;
color: mix(@jumbotron-text, @jumbotron-bg, 75%); color: mix(@jumbotron-color, @jumbotron-bg, 75%);
margin-top: 15px; margin-top: 15px;
margin-bottom: 15px; margin-bottom: 15px;
font-size: 24px; font-size: 24px;

View File

@ -1,7 +1,7 @@
// SITE SPECIFIC NAVBAR STYLES // SITE SPECIFIC NAVBAR STYLES
.navbar { margin-bottom: 0; } .navbar { margin-bottom: 0; }
.navbar-inverse { background-color: lighten(@jumbotron-bg, 2%); } .navbar-inverse { background-color: lighten(@fa-green, 2%); }
.navbar-brand { .navbar-brand {
font-family: @font-family-serif; font-family: @font-family-serif;
font-weight: 300; font-weight: 300;

View File

@ -45,24 +45,10 @@
@purple-light: #c3b8f4; @purple-light: #c3b8f4;
@purple-lighter: #fbf5ff; @purple-lighter: #fbf5ff;
// Reds @fa-green: #1d9d74;
@red: #9d261d; @fa-green-dark: darken(@fa-green, 10%);
@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;
@jumbotron-border: mix(@fa-green, @fa-green-dark, 75%);
@font-family-alt: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif; @font-family-alt: proxima-nova-sc-osf, "Helvetica Neue", Helvetica, Arial, sans-serif;
@ -71,15 +57,15 @@
// Brand colors // Brand colors
//@brand-primary: @blue-dark; //@brand-primary: @blue-dark;
@brand-success: lighten(@jumbotron-bg, 5%); @brand-success: lighten(@fa-green, 5%);
//@brand-warning: @yellow-dark; //@brand-warning: @yellow-dark;
//@brand-danger: @red; //@brand-danger: @red;
//@brand-info: @blue; //@brand-info: @blue;
// Links // Links
@link-color: lighten(@jumbotron-bg, 5%); @link-color: lighten(@fa-green, 5%);
@link-hover-color: darken(@jumbotron-bg, 5%); @link-hover-color: darken(@fa-green, 5%);
// Typography // Typography
@ -89,7 +75,7 @@
// Components // Components
@component-active-bg: @jumbotron-bg; @component-active-bg: @fa-green;
// Navbar // Navbar
@ -97,19 +83,24 @@
@navbar-inverse-brand-color: #fff; @navbar-inverse-brand-color: #fff;
// Reset inverted navbar basics // Reset inverted navbar basics
@navbar-inverse-color: mix(@jumbotron-bg, #fff, 50%); @navbar-inverse-color: mix(@fa-green, #fff, 50%);
@navbar-inverse-bg: @jumbotron-bg; @navbar-inverse-bg: @fa-green;
@navbar-inverse-border: @jumbotron-border; @navbar-inverse-border: @jumbotron-border;
// Inverted navbar links // 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-hover-color: #fff;
@navbar-inverse-link-active-bg: @navbar-inverse-border; @navbar-inverse-link-active-bg: @navbar-inverse-border;
// Inverted navbar toggle // Inverted navbar toggle
@navbar-inverse-toggle-hover-bg: @jumbotron-bg-dark; @navbar-inverse-toggle-hover-bg: @fa-green-dark;
@navbar-inverse-toggle-icon-bar-bg: @jumbotron-text; @navbar-inverse-toggle-icon-bar-bg: @jumbotron-color;
@navbar-inverse-toggle-border-color: mix(@jumbotron-text, @jumbotron-bg, 75%); @navbar-inverse-toggle-border-color: mix(@jumbotron-color, @fa-green, 75%);
// Jumbotron
@jumbotron-color: #fff;
@jumbotron-bg: @fa-green;
// Form states and alerts // Form states and alerts
@ -133,5 +124,5 @@
// Carousel // Carousel
@carousel-text-shadow: 0 1px 0 rgba(255,255,255,0.25); @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; @carousel-control-font-size: 30px;

View File

@ -18,14 +18,14 @@
} }
&:hover { &:hover {
background-color: @jumbotron-bg; background-color: @fa-green;
color: @jumbotron-text; color: @jumbotron-color;
text-decoration: none; text-decoration: none;
.fa-icon { .fa-icon {
font-size: 28px; font-size: 28px;
vertical-align: -6px; vertical-align: -6px;
} }
.text-muted { color: mix(@jumbotron-text, @jumbotron-bg, 70%); } .text-muted { color: mix(@jumbotron-color, @fa-green, 70%); }
} }
} }
} }

View File

@ -1,16 +1,16 @@
#footer { #footer {
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); // #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
background-color: lighten(@jumbotron-bg, 2%); background-color: lighten(@fa-green, 2%);
border-top: 1px solid @jumbotron-border; 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); text-shadow: 0 1px 0 rgba(0,0,0,0.15);
a { a {
color: mix(@jumbotron-text, @jumbotron-bg, 80%); color: mix(@jumbotron-color, @fa-green, 80%);
border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 60%); border-bottom: dotted 1px mix(@jumbotron-color, @fa-green, 60%);
&:hover { &:hover {
color: @jumbotron-text; color: @jumbotron-color;
text-decoration: none; text-decoration: none;
border-bottom: solid 1px @jumbotron-text; border-bottom: solid 1px @jumbotron-color;
} }
} }
.container { padding-top: 40px; } .container { padding-top: 40px; }

View File

@ -31,30 +31,30 @@
font-family: @font-family-serif; font-family: @font-family-serif;
font-size: 24px; font-size: 24px;
padding: 17px 30px; padding: 17px 30px;
color: @jumbotron-text; color: @jumbotron-color;
border-color: mix(@jumbotron-text, @jumbotron-bg, 75%); border-color: mix(@jumbotron-color, @jumbotron-bg, 75%);
background-color: transparent; background-color: transparent;
text-shadow: 0 1px 0 rgba(0,0,0,0.15); text-shadow: 0 1px 0 rgba(0,0,0,0.15);
&:hover { &:hover {
background-color: mix(@jumbotron-text, @jumbotron-bg, 95%); background-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
border-color: mix(@jumbotron-text, @jumbotron-bg, 95%); border-color: mix(@jumbotron-color, @jumbotron-bg, 95%);
color: @jumbotron-bg; color: @jumbotron-bg;
text-shadow: 0 -1px 0 @jumbotron-text; text-shadow: 0 -1px 0 @jumbotron-color;
} }
} }
.shameless-self-promotion { .shameless-self-promotion {
margin-top: @buffer-lg; margin-top: @buffer-lg;
font-size: @font-size-base; font-size: @font-size-base;
line-height: @line-height-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); text-shadow: 0 1px 0 rgba(0,0,0,0.15);
a { a {
color: mix(@jumbotron-text, @jumbotron-bg, 70%); color: mix(@jumbotron-color, @jumbotron-bg, 70%);
border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 50%); border-bottom: dotted 1px mix(@jumbotron-color, @jumbotron-bg, 50%);
&:hover { &:hover {
color: @jumbotron-text; color: @jumbotron-color;
text-decoration: none; text-decoration: none;
border-bottom: solid 1px @jumbotron-text; border-bottom: solid 1px @jumbotron-color;
} }
} }
} }