From 814be44c151088dfb90d6a01281c9206151b0a88 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Sat, 11 Jun 2011 15:23:54 -0400 Subject: 1. Improved responsive navigation styling when email subscription is present 2. Refactored subscription styling to be more DRY 3. Added an image for email subscriptions 4. Added assets directory to the gitignore for stashing working files 5. Improved gem list in the Gemfile --- .gitignore | 1 + Gemfile | 1 + Gemfile.lock | 2 + _config.yml | 3 +- themes/classic/sass/default/core/_utilities.scss | 17 ++++++ .../classic/sass/default/partials/_navigation.scss | 58 +++++++++++++-------- themes/classic/source/_includes/navigation.html | 8 +-- themes/classic/source/images/email.png | Bin 0 -> 301 bytes 8 files changed, 64 insertions(+), 26 deletions(-) create mode 100644 themes/classic/source/images/email.png diff --git a/.gitignore b/.gitignore index 14292256..990b0a05 100644 --- a/.gitignore +++ b/.gitignore @@ -3,6 +3,7 @@ .sass-cache .gist_cache _cache +_assets public source/_stash vendor diff --git a/Gemfile b/Gemfile index 4c3b7a40..15c570ba 100644 --- a/Gemfile +++ b/Gemfile @@ -7,3 +7,4 @@ gem 'RedCloth' gem 'haml', '>= 3.1' gem 'compass', '>= 0.11' gem 'rubypants' +gem 'rb-fsevent' diff --git a/Gemfile.lock b/Gemfile.lock index 6ec67893..faf2dd66 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -22,6 +22,7 @@ GEM maruku (0.6.0) syntax (>= 1.0.0) rake (0.9.0) + rb-fsevent (0.4.0) rdiscount (1.6.8) rubypants (0.2.0) sass (3.1.1) @@ -36,5 +37,6 @@ DEPENDENCIES haml (>= 3.1) jekyll rake + rb-fsevent rdiscount rubypants diff --git a/_config.yml b/_config.yml index 8fb8984d..650ab277 100644 --- a/_config.yml +++ b/_config.yml @@ -1,6 +1,7 @@ # Required configuration source: source destination: public +port: 4000 url: http://yoursite.com title: My Octopress Blog @@ -16,7 +17,7 @@ simple_search: http://google.com/search # Optional configurations -# For RSS +# For RSS Feed email: # Twitter diff --git a/themes/classic/sass/default/core/_utilities.scss b/themes/classic/sass/default/core/_utilities.scss index 84312b52..992c7750 100644 --- a/themes/classic/sass/default/core/_utilities.scss +++ b/themes/classic/sass/default/core/_utilities.scss @@ -1,4 +1,21 @@ @mixin mask-image($img, $repeat: no-repeat){ @include experimental(mask-image, image-url($img), -webkit, -moz, -o, -ms); @include experimental(mask-repeat, $repeat, -webkit, -moz, -o, -ms); + width: image-width($img); + height: image-height($img); } + +@mixin selection($bg: #b4d5fe, $color: inherit){ + * { + &::-moz-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; } + &::-webkit-selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px;} + &::selection { background: $bg; color: $color; text-shadow: darken($bg, 20) 0 1px 1px; } + } +} + +@function text-color($color, $dark: dark, $light: light){ + $text-color: ( (red($color)*299) + (green($color)*587) + (blue($color)*114) ) / 1000; + $text-color: if($text-color >= 150, $dark, $light); + @return $text-color; +} + diff --git a/themes/classic/sass/default/partials/_navigation.scss b/themes/classic/sass/default/partials/_navigation.scss index 4abb6a2a..3d34c3c7 100644 --- a/themes/classic/sass/default/partials/_navigation.scss +++ b/themes/classic/sass/default/partials/_navigation.scss @@ -70,25 +70,32 @@ body > nav { border-left: 1px solid $nav-border-right; } } - fieldset[role=mobile-nav] { display: none; } - fieldset[role=site-search]{ width: 100%; } form { float: right; text-align: left; - width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 5px; padding-left: .8em; + width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium + 5px; .search { width: 93%; font-size: .95em; line-height: 1.2em; } } + ul[data-subscription$=email] + form { + width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 48px; + .search { width: 91%; } + } + fieldset[role=mobile-nav] { display: none; } + fieldset[role=site-search]{ width: 100%; } } @media only screen and (min-width: 992px) { form { width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 + 5px; } + ul[data-subscription$=email] + form { + width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 48px; + } } } .no-placeholder { @@ -97,25 +104,34 @@ body > nav { text-indent: 1.3em; } } +@mixin mask-subscription-nav($feed: 'rss.png'){ + position: relative; top: 0px; + text-indent: -999999em; + background-color: $nav-border-right; + border: 0; + padding: 0; + &,&:after { @include mask-image($feed); } + &:after { + content: ""; + position: absolute; top: -1px; left: 0; + background-color: lighten($nav-color, 25); + } + &:hover:after { background-color: lighten($nav-color, 20); } +} .maskImage { - ul[role=subscription] { li, a { border: 0; padding: 0; }} - a[rel=subscribe-rss]{ - position: relative; top: 0px; - width: image-width('rss.png'); - height: image-height('rss.png'); - @include mask-image('rss.png'); - text-indent: -999999em; - background-color: $nav-border-right; - border: 0; - padding: 0; - &:hover:after { background-color: darken($nav-border-left, 10); } - &:after { - content: ""; - @include mask-image('rss.png'); - width: image-width('rss.png'); - height: image-height('rss.png'); - position: absolute; top: -1px; left: 0; - background-color: $nav-border-left; + body > nav { + @media only screen and (min-width: 550px) { + ul[data-subscription$=email] + form { + width: $sidebar-width-medium - $pad-medium*2 - $sidebar-pad-medium - 32px; + } + } + @media only screen and (min-width: 992px) { + ul[data-subscription$=email] + form { + width: $sidebar-width-wide - $pad-wide - $sidebar-pad-wide*2 - 32px; + } } } + ul[role=subscription] { li, a { border: 0; padding: 0; }} + a[rel=subscribe-rss]{ @include mask-subscription-nav('rss.png'); } + a[rel=subscribe-email]{ @include mask-subscription-nav('email.png'); } } diff --git a/themes/classic/source/_includes/navigation.html b/themes/classic/source/_includes/navigation.html index 766c220f..f941f1f1 100644 --- a/themes/classic/source/_includes/navigation.html +++ b/themes/classic/source/_includes/navigation.html @@ -1,7 +1,7 @@ -