From 02412458f3737249b1c8d6200190f695d3a2a1ad Mon Sep 17 00:00:00 2001
From: Wesley Moore <wez@wezm.net>
Date: Mon, 28 Jun 2010 07:14:48 +1000
Subject: [PATCH] Add CSS transition to feed icons

---
 content/screen.sass | 29 ++++++++++++++++-------------
 layouts/home.html   |  4 ++--
 2 files changed, 18 insertions(+), 15 deletions(-)

diff --git a/content/screen.sass b/content/screen.sass
index 357ed5c..0ca62dd 100644
--- a/content/screen.sass
+++ b/content/screen.sass
@@ -77,16 +77,18 @@ a
 h1 a
   text-decoration: none
 
-
-body.home h1 > a:hover
-  border-bottom: 2px solid #111
-
-
-h1 a
   &:link, &:visited
     color: #111
 
 
+body.home h1 > a
+  -webkit-transition: border-bottom-color 500ms
+  border-bottom: 2px solid rgba(17, 17, 17, 0.0)
+
+  &:hover
+    border-bottom-color: rgba(17, 17, 17, 1.0)
+
+
 sup
   vertical-align: super
   font-size: 0.8em
@@ -271,7 +273,7 @@ a
       margin-left: 2em
 
     img
-      -webkit-transition: opacity 500ms
+      -webkit-transition: opacity 500ms ease-in
       position: absolute
       top: -75px
 
@@ -359,6 +361,13 @@ img.alignleft
   margin: 5px 10px 5px 0
 
 
+img.feed-icon
+  -webkit-transition: opacity 500ms
+  opacity: 0.5
+
+  &:hover
+    opacity: 1.0
+
 #content .alignright, img.alignright
   float: right
   margin: 5px 0 5px 10px
@@ -413,9 +422,3 @@ table
 
     img a
       border: none
-
-img.feed-icon
-  opacity: 0.75
-
-  &:hover
-    opacity: 1.0
diff --git a/layouts/home.html b/layouts/home.html
index 302c822..aa39f5e 100644
--- a/layouts/home.html
+++ b/layouts/home.html
@@ -13,7 +13,7 @@
   <section id="technical" class="column">
     <div>
       <h1><a href="/technical/articles/">Technical</a>
-        <sup><a href="http://feeds.feedburner.com/wezm-technical"><img src="/images/black-feed-icon.png" width="12" height="12" alt="Black Feed Icon" /></a></sup>
+        <sup><a href="http://feeds.feedburner.com/wezm-technical"><img src="/images/black-feed-icon.png" class="feed-icon" width="12" height="12" alt="Black Feed Icon" /></a></sup>
       </h1>
       <ul class="articles">
       <% technical_articles[0..4].each do |article| %>
@@ -27,7 +27,7 @@
   <section id="personal" class="column">
     <div>
       <h1><a href="/personal/articles/">Personal</a>
-        <sup><a href="http://feeds.feedburner.com/wezm-personal"><img src="/images/black-feed-icon.png" width="12" height="12" /></a></sup>
+        <sup><a href="http://feeds.feedburner.com/wezm-personal"><img src="/images/black-feed-icon.png" class="feed-icon" width="12" height="12" /></a></sup>
       </h1>
       <ul class="articles">
       <% personal_articles[0..4].each do |article| %>