Permalink
Browse files

reduced # of requests for social media icons by using a sprite sheet.

  • Loading branch information...
peterkeating committed Nov 13, 2012
1 parent 6fdcd44 commit 51f1dd2b226710a86a775da473cc75ffc2fdc76d
Showing with 135 additions and 13 deletions.
  1. +43 −0 css/master.css
  2. +73 −0 css/scss/master.scss
  3. +19 −13 header.php
  4. BIN images/icon-sprite.png
  5. BIN images/icon-sprite@x2.png
View
@@ -1,3 +1,16 @@
/**
* Micro clearfix, as per: nicolasgallagher.com/micro-clearfix-hack
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
* and over in your markup.
*/
.cf, header .social-navigation {
zoom: 1; }
.cf:before, header .social-navigation:before, .cf:after, header .social-navigation:after {
content: " ";
display: table; }
.cf:after, header .social-navigation:after {
clear: both; }
body {
background-color: #efefef; }
@@ -73,6 +86,28 @@ img {
.tag-icon {
background: url("../images/icon-tag.png") no-repeat; }
.social-media-icon {
background: url("../images/icon-sprite.png") no-repeat; }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 196dpi) {
.social-media-icon {
background: url("../images/icon-sprite@x2.png") no-repeat;
background-size: 111px 102px; } }
.icon-endomondo {
width: 50px;
height: 50px;
background-position: -55px 0px; }
.icon-github {
width: 50px;
height: 50px;
background-position: 0px 0px; }
.icon-twitter {
width: 50px;
height: 41px;
background-position: 0px -55px; }
header a {
text-decoration: none; }
header .header-detail {
@@ -110,13 +145,21 @@ header .page-navigation {
header .page-navigation a:first-child {
display: none; } }
header .social-navigation {
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
right: -5px;
top: -5px; }
header .social-navigation img {
max-height: 45px;
max-width: 50px;
padding-left: 5px; }
header .social-navigation li {
float: left;
margin-right: 10px; }
header .social-navigation li:last-child {
margin-right: 0; }
@media all and (max-width: 600px) {
header .social-navigation {
margin-top: 0.6em;
View
@@ -5,6 +5,7 @@
// NOTES
// MIXINS
// VARIABLES
// CLEARFIX
// MAIN - Different sections of a page.
// SHARED - Elements used throughout the theme.
// FONTSIZES - Various font sizes to help with abstraction.
@@ -104,6 +105,30 @@ $code-font: monospace, sans-serif;
$default-font: "Helvetica Neue", Helvetica, Arial, sans-serif;
// ==========================================================================
// $CLEARFIX
//
// ==========================================================================
/**
* Micro clearfix, as per: nicolasgallagher.com/micro-clearfix-hack
* Extend the clearfix class with Sass to avoid the `.cf` class appearing over
* and over in your markup.
*/
.cf{
zoom:1;
&:before,
&:after{
content:" ";
display:table;
}
&:after{
clear:both;
}
}
// ==========================================================================
// $MAIN
@@ -225,6 +250,40 @@ img {
background: url('../images/icon-tag.png') no-repeat;
}
.social-media-icon {
background: url('../images/icon-sprite.png') no-repeat;
}
// when the screen resolution allows for a better quality image to be displayed
// (basically on iDevices) then lets serve an image that is a much better density.
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 196dpi)
{
.social-media-icon {
background: url('../images/icon-sprite@x2.png') no-repeat;
background-size: 111px 102px;
}
}
.icon-endomondo {
width: 50px;
height: 50px;
background-position: -55px -0px;
}
.icon-github {
width: 50px;
height: 50px;
background-position: -0px -0px;
}
.icon-twitter {
width: 50px;
height: 41px;
background-position: -0px -55px;
}
// ==========================================================================
// $HEADER
@@ -296,6 +355,11 @@ header {
}
.social-navigation {
@extend .cf;
list-style-type: none;
margin: 0;
padding: 0;
position: absolute;
right: -5px;
top: -5px;
@@ -306,6 +370,15 @@ header {
padding-left: 5px;
}
li {
float: left;
margin-right: 10px;
&:last-child {
margin-right: 0;
}
}
@media all and (max-width: 600px) {
margin-top: 0.6em;
position: relative;
View
@@ -36,19 +36,25 @@
<a href="/archive">Archive</a>
</nav>
<nav class="social-navigation">
<a href="http://twitter.com/peterkeating" title="View my Twitter profile." target="_blank">
<img src="<?php bloginfo( "template_url" ); ?>/images/icon-twitter.png" alt="View my Twitter profile." />
</a>
<a href="http://github.com/peterkeating" title="View my Github profile." target="_blank">
<img src="<?php bloginfo( "template_url" ); ?>/images/icon-github.png" alt="View my Github profile." />
</a>
<a href="http://www.endomondo.com/profile/5042109" title="View my Endomondo profile." target="_blank">
<img src="<?php bloginfo( "template_url" ); ?>/images/icon-endomondo.png" alt="View my Github profile." />
</a>
</nav>
<ul class="social-navigation">
<li>
<a href="http://twitter.com/peterkeating" title="View my Twitter profile." target="_blank">
<div class="social-media-icon icon-twitter"></div>
</a>
</li>
<li>
<a href="http://github.com/peterkeating" title="View my Github profile." target="_blank">
<div class="social-media-icon icon-github"></div>
</a>
</li>
<li>
<a href="http://www.endomondo.com/profile/5042109" title="View my Endomondo profile." target="_blank">
<div class="social-media-icon icon-endomondo"></div>
</a>
</li>
</ul>
</div>
</header>
View
BIN +5.45 KB images/icon-sprite.png
Binary file not shown.
View
Binary file not shown.

0 comments on commit 51f1dd2

Please sign in to comment.