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
This commit is contained in:
Brandon Mathis 2011-06-11 15:23:54 -04:00
parent 14ba4cfd3c
commit 814be44c15
8 changed files with 64 additions and 26 deletions

1
.gitignore vendored
View File

@ -3,6 +3,7 @@
.sass-cache
.gist_cache
_cache
_assets
public
source/_stash
vendor

View File

@ -7,3 +7,4 @@ gem 'RedCloth'
gem 'haml', '>= 3.1'
gem 'compass', '>= 0.11'
gem 'rubypants'
gem 'rb-fsevent'

View File

@ -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

View File

@ -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

View File

@ -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;
}

View File

@ -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;
}
}
.maskImage {
ul[role=subscription] { li, a { border: 0; padding: 0; }}
a[rel=subscribe-rss]{
@mixin mask-subscription-nav($feed: 'rss.png'){
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 { @include mask-image($feed); }
&: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;
background-color: lighten($nav-color, 25);
}
&:hover:after { background-color: lighten($nav-color, 20); }
}
.maskImage {
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'); }
}

View File

@ -1,7 +1,7 @@
<ul role="subscription">
<li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss">RSS</a></li>
{% if site.subscribe_emai %}
<li><a href="{{ site.subscribe_email }}" rel="subscribe-email">Email</a></li>
<ul role="subscription" data-subscription="rss{% if site.subscribe_email %} email{% endif %}">
<li><a href="{{ site.subscribe_rss }}" rel="subscribe-rss" title="subscribe via RSS">RSS</a></li>
{% if site.subscribe_email %}
<li><a href="{{ site.subscribe_email }}" rel="subscribe-email" title="subscribe via email">Email</a></li>
{% endif %}
</ul>
<form action="{{ site.simple_search }}" method="get">

Binary file not shown.

After

Width:  |  Height:  |  Size: 301 B