sprites split into two sizes

fritzmg · Dec 21, 2014 · 163ddb9 · 163ddb9
1 parent b832b08
commit 163ddb9
Show file tree

Hide file tree

Showing 13 changed files with 19 additions and 65 deletions.
diff --git a/assets/boxxed/sprites-16.png b/assets/boxxed/sprites-16.png
diff --git a/assets/boxxed/sprites-32.png b/assets/boxxed/sprites-32.png
diff --git a/assets/light/sprites-32.png b/assets/light/sprites-32.png
diff --git a/assets/light/sprites-64.png b/assets/light/sprites-64.png
diff --git a/system/modules/sharebuttons/assets/boxxed/boxxed.css b/system/modules/sharebuttons/assets/boxxed/boxxed.css
@@ -3,7 +3,7 @@
 .sharebuttons > ul.boxxed > li > a {
 	width:32px;
 	height:32px;
-	background-image:url('sprites.png');
+	background-image:url('sprites-32.png');
 }
 
 .sharebuttons > ul.boxxed > li > a.facebook {

diff --git a/system/modules/sharebuttons/assets/boxxed/boxxed_16.css b/system/modules/sharebuttons/assets/boxxed/boxxed_16.css
@@ -3,62 +3,39 @@
 .sharebuttons > ul.boxxed_16 > li > a {
 	width:16px;
 	height:16px;
-	background-image:url('sprites.png');
+	background-image:url('sprites-16.png');
 }
 
 .sharebuttons > ul.boxxed_16 > li > a.facebook {
-	background-position:-20px -40px;
+	background-position:-20px 0;
 }
 
 .sharebuttons > ul.boxxed_16 > li > a.twitter {
-	background-position:-80px -40px;
+	background-position:-80px 0;
 }
 
 .sharebuttons > ul.boxxed_16 > li > a.gplus {
-	background-position:-40px -40px;
+	background-position:-40px 0;
 }
 
 .sharebuttons > ul.boxxed_16 > li > a.linkedin {
-	background-position:-60px -40px;
+	background-position:-60px 0;
 }
 
 .sharebuttons > ul.boxxed_16 > li > a.xing {
-	background-position:-100px -40px;
+	background-position:-100px 0;
 }
 
 .sharebuttons > ul.boxxed_16 > li > a.mail {
-	background-position:0 -40px;
+	background-position:0 0;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (-o-min-device-pixel-ratio: 13/10),
        only screen and (min-resolution: 120dpi) 
 {
 	.sharebuttons > ul.boxxed_16 > li > a {
-		background-size:auto 28px;
-	}
-
-	.sharebuttons > ul.boxxed_16 > li > a.facebook {
-		background-position:-20px 0;
-	}
-
-	.sharebuttons > ul.boxxed_16 > li > a.twitter {
-		background-position:-80px 0;
-	}
-
-	.sharebuttons > ul.boxxed_16 > li > a.gplus {
-		background-position:-40px 0;
-	}
-
-	.sharebuttons > ul.boxxed_16 > li > a.linkedin {
-		background-position:-60px 0;
-	}
-
-	.sharebuttons > ul.boxxed_16 > li > a.xing {
-		background-position:-100px 0;
-	}
-
-	.sharebuttons > ul.boxxed_16 > li > a.mail {
-		background-position:0 0;
+		background-size:auto 16px;
+		background-image:url('sprites-32.png');
 	}
 }
diff --git a/system/modules/sharebuttons/assets/boxxed/sprites-16.png b/system/modules/sharebuttons/assets/boxxed/sprites-16.png
diff --git a/system/modules/sharebuttons/assets/boxxed/sprites-32.png b/system/modules/sharebuttons/assets/boxxed/sprites-32.png
diff --git a/system/modules/sharebuttons/assets/boxxed/sprites.png b/system/modules/sharebuttons/assets/boxxed/sprites.png
diff --git a/system/modules/sharebuttons/assets/light/light.css b/system/modules/sharebuttons/assets/light/light.css
@@ -3,62 +3,39 @@
 .sharebuttons > ul.light > li > a {
 	width:32px;
 	height:32px;
-	background-image:url('sprites.png');
+	background-image:url('sprites-32.png');
 }
 
 .sharebuttons > ul.light > li > a.facebook {
-	background-position:-40px -80px;
+	background-position:-40px 0;
 }
 
 .sharebuttons > ul.light > li > a.twitter {
-	background-position:-200px -80px;
+	background-position:-200px 0;
 }
 
 .sharebuttons > ul.light > li > a.gplus {
-	background-position:-80px -80px;
+	background-position:-80px 0;
 }
 
 .sharebuttons > ul.light > li > a.linkedin {
-	background-position:-120px -80px;
+	background-position:-120px 0;
 }
 
 .sharebuttons > ul.light > li > a.xing {
-	background-position:-240px -80px;
+	background-position:-240px 0;
 }
 
 .sharebuttons > ul.light > li > a.mail {
-	background-position:0 -80px;
+	background-position:0 0;
 }
 
 @media only screen and (-webkit-min-device-pixel-ratio: 1.3),
        only screen and (-o-min-device-pixel-ratio: 13/10),
        only screen and (min-resolution: 120dpi) 
 {
 	.sharebuttons > ul.light > li > a {
-		background-size:auto 56px;
-	}
-
-	.sharebuttons > ul.light > li > a.facebook {
-		background-position:-40px 0;
-	}
-
-	.sharebuttons > ul.light > li > a.twitter {
-		background-position:-200px 0;
-	}
-
-	.sharebuttons > ul.light > li > a.gplus {
-		background-position:-80px 0;
-	}
-
-	.sharebuttons > ul.light > li > a.linkedin {
-		background-position:-120px 0;
-	}
-
-	.sharebuttons > ul.light > li > a.xing {
-		background-position:-240px 0;
-	}
-
-	.sharebuttons > ul.light > li > a.mail {
-		background-position:0 0;
+		background-size:auto 32px;
+		background-image:url('sprites-64.png');
 	}
 }
diff --git a/system/modules/sharebuttons/assets/light/sprites-32.png b/system/modules/sharebuttons/assets/light/sprites-32.png
diff --git a/system/modules/sharebuttons/assets/light/sprites-64.png b/system/modules/sharebuttons/assets/light/sprites-64.png
diff --git a/system/modules/sharebuttons/assets/light/sprites.png b/system/modules/sharebuttons/assets/light/sprites.png