updating navbar & footer styles, adding dotted links in jumbotron and footer

This commit is contained in:
davegandy 2013-10-12 08:22:50 -04:00
parent aaca03ed62
commit e2ef7f022c
6 changed files with 78 additions and 60 deletions

View File

@ -1,4 +1,4 @@
<div class="navbar navbar-default navbar-static-top hidden-print"> <div class="navbar navbar-inverse navbar-static-top hidden-print">
<div class="container"> <div class="container">
<div class="navbar-header"> <div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

View File

@ -1,7 +1,7 @@
.jumbotron { .jumbotron {
background-color: @jumbotron-bg; background-color: @jumbotron-bg;
// #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg); // #gradient > .directional(@jumbotron-bg, mix(@jumbotron-bg, @jumbotron-bg-dark, 0%), -40deg);
border-bottom: 1px solid @jumbotron-bg-dark; border-bottom: 1px solid @jumbotron-border;
margin-bottom: 0; margin-bottom: 0;
&, h1 { color: @jumbotron-text; } &, h1 { color: @jumbotron-text; }
padding: 60px 0 40px; padding: 60px 0 40px;

View File

@ -1,45 +1,5 @@
--- ---
--- ---
// BOOTSTRAP OVERRIDES
// -------------------
// Links
@link-color: lighten(@jumbotron-bg, 10%);
@link-hover-color: @jumbotron-bg;
// Typography
@font-family-sans-serif: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: museo-slab, Georgia, "Times New Roman", Times, serif;
@headings-font-family: @font-family-serif;
// Form states and alerts
@state-warning-text: mix(@yellow-dark, @yellow-darker, 80%);
@state-warning-bg: @yellow-lighter;
@state-warning-border: darken(spin(@state-warning-bg, -10), 7%);
@state-danger-text: @red;
@state-danger-bg: @red-lighter;
@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
@state-success-text: mix(@green-darker, @green-dark, 30%);
@state-success-bg: @green-lighter;
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-info-text: mix(@blue-dark, @blue, 50%);
@state-info-bg: @blue-lighter;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Navbar
@navbar-height: 40px;
@navbar-inverse-brand-color: #fff;
//@brand-primary: @blue-dark;
//@brand-success: @green;
//@brand-warning: @yellow-dark;
//@brand-danger: @red;
//@brand-info: @blue;
// SITE VARIABLES // SITE VARIABLES
// -------------- // --------------
@ -100,5 +60,58 @@
@jumbotron-bg: desaturate(#1d9d74, 0%); @jumbotron-bg: desaturate(#1d9d74, 0%);
@jumbotron-bg-dark: darken(@jumbotron-bg, 10%); @jumbotron-bg-dark: darken(@jumbotron-bg, 10%);
@jumbotron-border: mix(@jumbotron-bg, @jumbotron-bg-dark, 75%);
@jumbotron-text: #fff; @jumbotron-text: #fff;
// BOOTSTRAP OVERRIDES
// -------------------
// Links
@link-color: lighten(@jumbotron-bg, 10%);
@link-hover-color: @jumbotron-bg;
// Typography
@font-family-sans-serif: proxima-nova, "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-family-serif: museo-slab, Georgia, "Times New Roman", Times, serif;
@headings-font-family: @font-family-serif;
// Form states and alerts
@state-warning-text: mix(@yellow-dark, @yellow-darker, 80%);
@state-warning-bg: @yellow-lighter;
@state-warning-border: darken(spin(@state-warning-bg, -10), 7%);
@state-danger-text: @red;
@state-danger-bg: @red-lighter;
@state-danger-border: darken(spin(@state-danger-bg, -10), 4%);
@state-success-text: mix(@green-darker, @green-dark, 30%);
@state-success-bg: @green-lighter;
@state-success-border: darken(spin(@state-success-bg, -10), 13%);
@state-info-text: mix(@blue-dark, @blue, 50%);
@state-info-bg: @blue-lighter;
@state-info-border: darken(spin(@state-info-bg, -10), 7%);
// Navbar
@navbar-height: 40px;
@navbar-inverse-brand-color: #fff;
// Reset inverted navbar basics
@navbar-inverse-color: mix(@jumbotron-bg, #fff, 50%);
@navbar-inverse-bg: @jumbotron-bg;
@navbar-inverse-border: @jumbotron-border;
// Inverted navbar links
@navbar-inverse-link-color: mix(@jumbotron-bg, #fff, 35%);
@navbar-inverse-link-hover-color: #fff;
@navbar-inverse-link-active-bg: @navbar-inverse-border;
//@brand-primary: @blue-dark;
//@brand-success: @green;
//@brand-warning: @yellow-dark;
//@brand-danger: @red;
//@brand-info: @blue;

View File

@ -1,22 +1,19 @@
#footer { #footer {
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground); // #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
background-color: @jumbotron-bg; background-color: @jumbotron-bg;
border-top: 1px solid mix(@jumbotron-bg, @jumbotron-bg-dark, 50%); border-top: 1px solid @jumbotron-border;
color: mix(@jumbotron-text, @jumbotron-bg, 60%);
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
a { a {
color: #fff; color: mix(@jumbotron-text, @jumbotron-bg, 80%);
text-shadow: 0 -1px 0 rgba(0,0,0,.25); border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 60%);
&:hover { &:hover {
color: #fff; color: @jumbotron-text;
text-decoration: none;
border-bottom: solid 1px @jumbotron-text;
} }
} }
.container { padding-top: 40px; }
.container {
padding-top: 40px;
}
color: mix(@jumbotron-bg, #fff, 35%);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
.project { margin-top: 10px; } .project { margin-top: 10px; }
} }

View File

@ -35,18 +35,26 @@
background-color: @jumbotron-bg; background-color: @jumbotron-bg;
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: @jumbotron-text; background-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
border-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
color: @jumbotron-bg; color: @jumbotron-bg;
text-shadow: 0 -1px 0 rgba(0,0,0,0.15); text-shadow: 0 -1px 0 @jumbotron-text;
} }
} }
.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, 40%); color: mix(@jumbotron-text, @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 { color: mix(@jumbotron-text, @jumbotron-bg, 70%); } a {
a:hover { color: mix(@jumbotron-text, @jumbotron-bg, 100%); } color: mix(@jumbotron-text, @jumbotron-bg, 70%);
border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 50%);
&:hover {
color: @jumbotron-text;
text-decoration: none;
border-bottom: solid 1px @jumbotron-text;
}
}
} }
} }

View File

@ -5,5 +5,5 @@
text-align: center; text-align: center;
background-color: #f5f5f5; background-color: #f5f5f5;
border-top: 1px solid #fff; border-top: 1px solid #fff;
border-bottom: 1px solid #ddd; border-bottom: 1px solid #eee;
} }