From 814be44c151088dfb90d6a01281c9206151b0a88 Mon Sep 17 00:00:00 2001
From: Brandon Mathis <brandon@imathis.com>
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
---
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
4 files changed, 58 insertions(+), 25 deletions(-)
create mode 100644 themes/classic/source/images/email.png
(limited to 'themes')
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 @@
-<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">
diff --git a/themes/classic/source/images/email.png b/themes/classic/source/images/email.png
new file mode 100644
index 00000000..e55473fe
Binary files /dev/null and b/themes/classic/source/images/email.png differ
--
cgit v1.2.1