From 814be44c151088dfb90d6a01281c9206151b0a88 Mon Sep 17 00:00:00 2001 From: Brandon Mathis Date: Sat, 11 Jun 2011 15:23:54 -0400 Subject: [PATCH] 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 +- .../classic/sass/default/core/_utilities.scss | 17 +++++ .../sass/default/partials/_navigation.scss | 58 +++++++++++------- .../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 1429225..990b0a0 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 4c3b7a4..15c570b 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 6ec6789..faf2dd6 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 8fb8984..650ab27 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 84312b5..992c775 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 4abb6a2..3d34c3c 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 766c220..f941f1f 100644 --- a/themes/classic/source/_includes/navigation.html +++ b/themes/classic/source/_includes/navigation.html @@ -1,7 +1,7 @@ -