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="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">

View file

@ -1,7 +1,7 @@
.jumbotron {
background-color: @jumbotron-bg;
// #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;
&, h1 { color: @jumbotron-text; }
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
// --------------
@ -100,5 +60,58 @@
@jumbotron-bg: desaturate(#1d9d74, 0%);
@jumbotron-bg-dark: darken(@jumbotron-bg, 10%);
@jumbotron-border: mix(@jumbotron-bg, @jumbotron-bg-dark, 75%);
@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 {
// #gradient > .vertical(@navbarInverseBackgroundHighlight, @navbarInverseBackground);
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 {
color: #fff;
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
color: mix(@jumbotron-text, @jumbotron-bg, 80%);
border-bottom: dotted 1px mix(@jumbotron-text, @jumbotron-bg, 60%);
&:hover {
color: #fff;
color: @jumbotron-text;
text-decoration: none;
border-bottom: solid 1px @jumbotron-text;
}
}
.container {
padding-top: 40px;
}
color: mix(@jumbotron-bg, #fff, 35%);
text-shadow: 0 -1px 0 rgba(0,0,0,.25);
.container { padding-top: 40px; }
.project { margin-top: 10px; }
}

View file

@ -35,18 +35,26 @@
background-color: @jumbotron-bg;
text-shadow: 0 1px 0 rgba(0,0,0,0.15);
&:hover {
background-color: @jumbotron-text;
background-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
border-color: mix(@jumbotron-text, @jumbotron-bg, 95%);
color: @jumbotron-bg;
text-shadow: 0 -1px 0 rgba(0,0,0,0.15);
text-shadow: 0 -1px 0 @jumbotron-text;
}
}
.shameless-self-promotion {
margin-top: @buffer-lg;
font-size: @font-size-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);
a { color: mix(@jumbotron-text, @jumbotron-bg, 70%); }
a:hover { color: mix(@jumbotron-text, @jumbotron-bg, 100%); }
a {
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;
background-color: #f5f5f5;
border-top: 1px solid #fff;
border-bottom: 1px solid #ddd;
border-bottom: 1px solid #eee;
}