Add CSS transition to feed icons

This commit is contained in:
Wesley Moore 2010-06-28 07:14:48 +10:00
parent 7f7debb6fd
commit 02412458f3
2 changed files with 18 additions and 15 deletions

View file

@ -77,16 +77,18 @@ a
h1 a h1 a
text-decoration: none text-decoration: none
body.home h1 > a:hover
border-bottom: 2px solid #111
h1 a
&:link, &:visited &:link, &:visited
color: #111 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 sup
vertical-align: super vertical-align: super
font-size: 0.8em font-size: 0.8em
@ -271,7 +273,7 @@ a
margin-left: 2em margin-left: 2em
img img
-webkit-transition: opacity 500ms -webkit-transition: opacity 500ms ease-in
position: absolute position: absolute
top: -75px top: -75px
@ -359,6 +361,13 @@ img.alignleft
margin: 5px 10px 5px 0 margin: 5px 10px 5px 0
img.feed-icon
-webkit-transition: opacity 500ms
opacity: 0.5
&:hover
opacity: 1.0
#content .alignright, img.alignright #content .alignright, img.alignright
float: right float: right
margin: 5px 0 5px 10px margin: 5px 0 5px 10px
@ -413,9 +422,3 @@ table
img a img a
border: none border: none
img.feed-icon
opacity: 0.75
&:hover
opacity: 1.0

View file

@ -13,7 +13,7 @@
<section id="technical" class="column"> <section id="technical" class="column">
<div> <div>
<h1><a href="/technical/articles/">Technical</a> <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> </h1>
<ul class="articles"> <ul class="articles">
<% technical_articles[0..4].each do |article| %> <% technical_articles[0..4].each do |article| %>
@ -27,7 +27,7 @@
<section id="personal" class="column"> <section id="personal" class="column">
<div> <div>
<h1><a href="/personal/articles/">Personal</a> <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> </h1>
<ul class="articles"> <ul class="articles">
<% personal_articles[0..4].each do |article| %> <% personal_articles[0..4].each do |article| %>