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 {
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;

View File

@ -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;

View File

@ -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;

View File

@ -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%); }
}
}
}

View File

@ -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; }

View File

@ -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;
}
}
}