www/adium.im 610:5a2c73ed4e0c: Condense sprites to save file-siz...
commits at adium.im
commits at adium.im
Mon Mar 5 16:56:58 UTC 2012
details: http://hg.adium.im/www/adium.im/rev/5a2c73ed4e0c
revision: 610:5a2c73ed4e0c
branch: rewrite
author: Paul Wilde <me at paulwilde.co.uk>
date: Mon Mar 05 16:56:48 2012 +0000
Condense sprites to save file-size. Added icons to the blog.
diffs (301 lines):
diff -r 75639d20e03d -r 5a2c73ed4e0c assets/images/sprite.png
Binary file assets/images/sprite.png has changed
diff -r 75639d20e03d -r 5a2c73ed4e0c assets/scripts/help.js
--- a/assets/scripts/help.js Sun Mar 04 19:06:31 2012 +0000
+++ b/assets/scripts/help.js Mon Mar 05 16:56:48 2012 +0000
@@ -31,7 +31,7 @@
$('#search-container').submit(function() { return false; });
// Change search icon on focus, then change it back on blur
- $input.focus(function() { $('#search-icon').css('backgroundPosition', '-227px -132px'); });
+ $input.focus(function() { $('#search-icon').css('backgroundPosition', '-97px -167px'); });
$input.blur(function() {
// Do not lose focus of the search field if a search is active
@@ -41,7 +41,7 @@
$('#search-results').remove();
}
- $('#search-icon').css('backgroundPosition', '-227px -102px');
+ $('#search-icon').css('backgroundPosition', '-97px -145px');
});
// Prevent clicks inside the search container from hiding the search-results div
diff -r 75639d20e03d -r 5a2c73ed4e0c assets/styles/blog.css
--- a/assets/styles/blog.css Sun Mar 04 19:06:31 2012 +0000
+++ b/assets/styles/blog.css Mon Mar 05 16:56:48 2012 +0000
@@ -1,10 +1,20 @@
-hgroup, hgroup h1 { padding: 0 0 18px; }
+article footer ul {
+ font-weight: 500;
+ margin-left: -25px;
+}
-small.date, p.comments {
- font-size: 1.5em;
+article footer ul li {
+ list-style-type: none;
+ padding: 0 25px 0 21px;
+ float: left;
color: #999;
- font-weight: 500;
+ background: url('../images/sprite.png') no-repeat;
}
+article footer ul li:last-child { padding-right: 0; }
+
+article footer li.date { background-position: -175px -127px; }
+article footer li.author { padding-left: 22px; background-position: -175px -147px; }
+article footer li.comments { background-position: -175px -167px; }
.content section.has-aside { width: 70%; }
diff -r 75639d20e03d -r 5a2c73ed4e0c assets/styles/global.css
--- a/assets/styles/global.css Sun Mar 04 19:06:31 2012 +0000
+++ b/assets/styles/global.css Mon Mar 05 16:56:48 2012 +0000
@@ -20,7 +20,7 @@
}
article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
+footer, header, hgroup, menu, nav, section, small {
display: block;
}
@@ -158,43 +158,42 @@
nav li span:before {
content: '';
- position: relative;
- top: -1px;
- padding-bottom: 2px;
- padding-left: 22px;
+ padding-bottom: 1px;
+ padding-left: 16px;
+ margin-right: 6px;
background: url('../images/sprite.png') 0 0 no-repeat;
}
-.home span:before, .blog span:before { padding-left: 23px; }
-.merch span:before { padding-left: 25px; }
+.home span:before, .blog span:before { padding-left: 17px; }
+.merch span:before { padding-left: 19px; }
-.home a span:before { background-position: -20px -49px; }
-.home a:hover span:before, .home.active a:link span:before { background-position: -20px -19px; }
-.home a:active span:before { background-position: -20px -79px; }
+.home a span:before { background-position: 0 -22px; }
+.home a:hover span:before, .home.active a:link span:before { background-position: 0 0; }
+.home a:active span:before { background-position: 0 -44px; }
-.about a span:before { background-position: -51px -49px; }
-.about a:hover span:before, .about.active a:link span:before { background-position: -51px -19px; }
-.about a:active span:before { background-position: -51px -79px; }
+.about a span:before { background-position: -22px -22px; }
+.about a:hover span:before, .about.active a:link span:before { background-position: -22px 0; }
+.about a:active span:before { background-position: -22px -44px; }
-.help a span:before { background-position: -112px -49px; }
-.help a:hover span:before, .help.active a:link span:before { background-position: -112px -19px; }
-.help a:active span:before { background-position: -112px -79px; }
+.help a span:before { background-position: -65px -22px; }
+.help a:hover span:before, .help.active a:link span:before { background-position: -65px 0; }
+.help a:active span:before { background-position: -65px -44px; }
-.blog a span:before { background-position: -81px -49px; }
-.blog a:hover span:before, .blog.active a:link span:before { background-position: -81px -19px; }
-.blog a:active span:before { background-position: -81px -79px; }
+.blog a span:before { background-position: -43px -22px; }
+.blog a:hover span:before, .blog.active a:link span:before { background-position: -43px 0; }
+.blog a:active span:before { background-position: -43px -44px; }
-.xtras a span:before { background-position: -205px -49px; }
-.xtras a:hover span:before, .xtras.active a:link span:before { background-position: -205px -19px; }
-.xtras a:active span:before { background-position: -205px -79px; }
+.xtras a span:before { background-position: -130px -22px; }
+.xtras a:hover span:before, .xtras.active a:link span:before { background-position: -130px 0; }
+.xtras a:active span:before { background-position: -130px -44px; }
-.dev a span:before { background-position: -142px -49px; }
-.dev a:hover span:before, .dev.active a:link span:before { background-position: -142px -19px; }
-.dev a:active span:before { background-position: -142px -79px; }
+.dev a span:before { background-position: -85px -22px; }
+.dev a:hover span:before, .dev.active a:link span:before { background-position: -85px 0; }
+.dev a:active span:before { background-position: -85px -44px; }
-.merch a span:before { background-position: -172px -49px; }
-.merch a:hover span:before, .merch.active a:link span:before { background-position: -172px -19px; }
-.merch a:active span:before { background-position: -172px -79px; }
+.merch a span:before { background-position: -106px -22px; }
+.merch a:hover span:before, .merch.active a:link span:before { background-position: -106px 0; }
+.merch a:active span:before { background-position: -106px -44px; }
/********** Sub Navigation Container **********/
@@ -632,7 +631,7 @@
#search-icon {
position: absolute;
- background: url('../../assets/images/sprite.png') no-repeat -227px -102px;
+ background: url('../../assets/images/sprite.png') no-repeat -97px -145px;
width: 26px;
height: 26px;
}
@@ -663,7 +662,7 @@
left: 9px;
height: 7px;
width: 18px;
- background: url('../images/sprite.png') -264px -231px no-repeat;
+ background: url('../images/sprite.png') -103px -136px no-repeat;
}
#search-results li {
@@ -724,7 +723,7 @@
/********** Footer **********/
footer .container {
- padding: 25px 35px;
+ padding: 25px 35px 12px;
max-width: 930px;
}
@@ -764,7 +763,7 @@
}
/* Notice: Fixes full width (inc whitespace) being hyperlinked */
-.social a { float: left; margin: 3px 0 10px; border: 0; }
+.social a { float: left; margin: 3px 0 10px 0; border: 0; }
a.twitter { clear: both; }
.social a:hover { text-decoration: none; }
@@ -773,16 +772,17 @@
content: '';
position: relative;
top: -1px;
- padding: 0 0 3px 23px;
+ padding: 0 0 3px 17px;
+ margin-right: 7px;
background: url('../images/sprite.png');
}
-a.facebook span:before { background-position: -265px -140px; }
-a.twitter span:before { background-position: -265px -80px; }
+a.facebook span:before { background-position: -174px -86px; }
+a.twitter span:before { background-position: -174px -42px; }
a:hover.twitter { color: #4697ce; }
a:hover.facebook { color: #3b5996; }
-a:hover.facebook span:before { background-position: -265px -170px; }
-a:hover.twitter span:before { background-position: -265px -110px; }
+a:hover.facebook span:before { background-position: -174px -108px; }
+a:hover.twitter span:before { background-position: -174px -64px; }
#hosting li {
text-indent: -999em;
@@ -795,18 +795,18 @@
#hosting li.networkredux span { height: 23px; }
#hosting li.networkredux {
- background-position: -20px -116px;
+ background-position: 0 -66px;
width: 132px;
height: 23px;
margin: 11px 30px 0 0;
}
-#hosting li.networkredux:hover { background-position: -20px -156px; }
+#hosting li.networkredux:hover { background-position: 0 -94px; }
#hosting li.cachefly {
- background-position: -20px -200px;
+ background-position: 0 -122px;
width: 98px;
height: 45px;
}
-#hosting li.cachefly:hover { background-position: -130px -200px; }
+#hosting li.cachefly:hover { background-position: 0 -172px; }
/********** Media Queries **********/
@@ -822,6 +822,7 @@
@media (max-width: 860px) {
nav li span:before, .home span:before, .blog span:before, .merch span:before {
padding-left: 0;
+ margin-right: 0;
}
}
@@ -859,7 +860,7 @@
border-image: none;
}
nav li span { padding: 14px 30px 14px 15px; }
- nav li span:before, .blog span:before, .merch span:before { padding-left: 25px; }
+ nav li span:before, .blog span:before, .merch span:before { padding-left: 19px; margin-right: 6px; }
nav ul, nav li { border: 0; }
nav li { float: left; width: 33.19%; border-top: 1px solid #d5d5d5; border-right: 1px solid #d5d5d5; }
.blog, .merch { border-right: 0; }
diff -r 75639d20e03d -r 5a2c73ed4e0c assets/styles/home.css
--- a/assets/styles/home.css Sun Mar 04 19:06:31 2012 +0000
+++ b/assets/styles/home.css Mon Mar 05 16:56:48 2012 +0000
@@ -92,19 +92,8 @@
.banner a:hover { text-decoration: underline; }
-.release-notes { background: url('../images/sprite.png') no-repeat -265px -18px; }
-
-.source {
- background: url('../images/sprite.png') no-repeat -265px -48px;
- margin-right: 0;
-}
-
-a.button.download:before {
- content: '';
- position: relative;
- background: url('../images/sprite.png') no-repeat -232px -20px;
- padding: 0 0 2px 24px;
-}
+.release-notes { background: url('../images/sprite.png') no-repeat -174px 2px; }
+.source { background: url('../images/sprite.png') no-repeat -174px -19px; }
a.button.download {
float: none;
@@ -128,7 +117,15 @@
box-shadow: inset 0 1px rgba(255, 255, 255, .7), 0 1px 1px rgba(0, 0, 0, .2);
}
-a:hover.button.download:before { background-position: -232px -50px; }
+a.button.download:before {
+ content: '';
+ position: relative;
+ background: url('../images/sprite.png') no-repeat -151px 0;
+ padding: 0 0 2px 18px;
+ margin-right: 6px;
+}
+
+a:hover.button.download:before { background-position: -151px -23px; }
a.button.download:hover {
text-decoration: none;
@@ -142,7 +139,7 @@
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #daf6c1), color-stop(1, #a0c281));
}
-a:active.button.download:before { background-position: -232px -80px; }
+a:active.button.download:before { background-position: -151px -46px; }
a.button.download:active {
border-color: rgba(0, 0, 0, .35);
@@ -191,7 +188,7 @@
margin-left: -9px;
height: 9px;
width: 18px;
- background: url('../images/sprite.png') -264px -201px no-repeat;
+ background: url('../images/sprite.png') -102px -122px no-repeat;
}
/********** Screenshots **********/
@@ -311,7 +308,7 @@
@media (max-width: 380px) {
/* Header */
- a.button.download:before { padding: 0; }
+ a.button.download:before { padding: 0; margin: 0; }
/* Screenshots */
.screenshots figure { width: auto; }
More information about the commits
mailing list