Make the background and the footer gradiations customizable

This change extracts following variables for allowing customizatin:
- nav-bg-back
- nav-bg-front
- footer-bg-back
- footer-bg-front
This commit is contained in:
MORITA Hajime (omo) 2011-10-23 06:55:20 -07:00
parent 408ed3e1e2
commit 633b3389f3
4 changed files with 11 additions and 2 deletions

View File

@ -23,6 +23,8 @@ $type-border: #ddd !default;
/* Navigation */ /* Navigation */
$nav-bg: #ccc !default; $nav-bg: #ccc !default;
$nav-bg-front: image-url('noise.png');
$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11));
$nav-color: darken($nav-bg, 38) !default; $nav-color: darken($nav-bg, 38) !default;
$nav-color-hover: darken($nav-color, 25) !default; $nav-color-hover: darken($nav-color, 25) !default;
$nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default; $nav-placeholder: desaturate(darken($nav-bg, 10), 15) !default;
@ -46,6 +48,8 @@ $twitter-status-link: lighten($sidebar-link-color-subdued, 15) !default;
$footer-color: #888 !default; $footer-color: #888 !default;
$footer-bg: #ccc !default; $footer-bg: #ccc !default;
$footer-bg-front: image-url('noise.png');
$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11));
$footer-color: darken($footer-bg, 38) !default; $footer-color: darken($footer-bg, 38) !default;
$footer-color-hover: darken($footer-color, 10) !default; $footer-color-hover: darken($footer-color, 10) !default;
$footer-border-top: lighten($footer-bg, 15) !default; $footer-border-top: lighten($footer-bg, 15) !default;

View File

@ -5,9 +5,14 @@
//$header-bg: #263347; //$header-bg: #263347;
//$subtitle-color: lighten($header-bg, 58); //$subtitle-color: lighten($header-bg, 58);
//$nav-bg: desaturate(lighten(#8fc17a, 18), 5); //$nav-bg: desaturate(lighten(#8fc17a, 18), 5);
//$nav-bg-front: image-url('noise.png');
//$nav-bg-back: linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11));
//$sidebar-bg: desaturate(#eceff5, 8); //$sidebar-bg: desaturate(#eceff5, 8);
//$sidebar-link-color: saturate(#526f9a, 10); //$sidebar-link-color: saturate(#526f9a, 10);
//$sidebar-link-color-hover: darken(#7ab662, 9); //$sidebar-link-color-hover: darken(#7ab662, 9);
//$footer-bg: #ccc !default;
//$footer-bg-front: image-url('noise.png');
//$footer-bg-back: linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-
/* To use the light Solarized highlighting theme uncomment the following line */ /* To use the light Solarized highlighting theme uncomment the following line */

View File

@ -4,7 +4,7 @@ body > footer {
color: $footer-color; color: $footer-color;
text-shadow: lighten($footer-bg, 5) 0 1px; text-shadow: lighten($footer-bg, 5) 0 1px;
background-color: $footer-bg; background-color: $footer-bg;
@include background(image-url('noise.png'), linear-gradient(lighten($footer-bg, 8), $footer-bg, darken($footer-bg, 11))); @include background($footer-bg-front, $footer-bg-back);
border-top: 1px solid $footer-border-top; border-top: 1px solid $footer-border-top;
position: relative; position: relative;
padding-top: 1em; padding-top: 1em;

View File

@ -1,7 +1,7 @@
body > nav { body > nav {
position: relative; position: relative;
background-color: $nav-bg; background-color: $nav-bg;
@include background(image-url('noise.png'), linear-gradient(lighten($nav-bg, 8), $nav-bg, darken($nav-bg, 11))); @include background($nav-bg-front, $nav-bg-back);
border: { border: {
top: 1px solid $nav-border-top; top: 1px solid $nav-border-top;
bottom: 1px solid $nav-border-bottom; } bottom: 1px solid $nav-border-bottom; }