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 1429225688a..990b0a0556c 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 4c3b7a40163..15c570ba948 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 6ec678935ca..faf2dd66d6e 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 8fb8984dc3d..650ab2772fb 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 84312b52dc3..992c7750961 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 4abb6a2a041..3d34c3c73c1 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 766c220fa6a..f941f1f1ac2 100644 --- a/themes/classic/source/_includes/navigation.html +++ b/themes/classic/source/_includes/navigation.html @@ -1,7 +1,7 @@ -