1
0
mirror of https://github.com/github/choosealicense.com synced 2024-06-09 12:47:49 +02:00

Use a CSS sprite for the homepage images.

-2 http requests, -1KB.
This commit is contained in:
XhmikosR 2013-12-13 19:43:30 +02:00
parent f8aa15b59d
commit d86fc76265
7 changed files with 29 additions and 3 deletions

View File

@ -176,6 +176,18 @@ strong {
margin-top: 20px;
}
.triptych-sprite {
background-image: url(../img/home-sprite.png);
background-repeat: no-repeat;
display: inline-block;
}
.three-arrows { background-position: 0 0; width: 72px; height: 57px; }
.lightbulb { background-position: 0 -57px; width: 43px; height: 72px; }
.circular { background-position: 0 -129px; width: 72px; height: 69px; }
.license-family {
clear: both;
margin-bottom: 50px;
@ -468,3 +480,17 @@ strong {
}
.with-love { float: right; clear: right; }
@media only screen and (-webkit-min-device-pixel-ratio: 2.0),
only screen and (min--moz-device-pixel-ratio: 2.0),
only screen and (-o-min-device-pixel-ratio: 200/100),
only screen and (min-device-pixel-ratio: 2.0) {
.three-arrows,
.lightbulb,
.circular {
background-image: url(../img/home-sprite@2x.png);
-webkit-background-size: 72px 198px;
-moz-background-size: 72px 198px;
background-size: 72px 198px;
}
}

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.2 KiB

BIN
img/home-sprite.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.9 KiB

BIN
img/home-sprite@2x.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 4.2 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.9 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.5 KiB

View File

@ -14,7 +14,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
<ul class="triptych situations clearfix">
<li class="whatever">
<a href="licenses/mit">
<img src="img/three-arrows@2x.png" alt="three arrows" width="72" height="57">
<span class="triptych-sprite three-arrows"></span>
<h3>I want it simple and permissive.</h3>
</a>
<p>
@ -26,7 +26,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
</li>
<li class="patents">
<a href="licenses/apache">
<img src="img/lightbulb@2x.png" alt="light bulb" width="43" height="72">
<span class="triptych-sprite lightbulb"></span>
<h3>Im concerned about patents.</h3>
</a>
<p>
@ -38,7 +38,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
</li>
<li class="copyleft">
<a href="licenses/gpl-v2">
<img src="img/circular@2x.png" alt="circular arrows" width="72" height="69">
<span class="triptych-sprite circular"></span>
<h3>I care about sharing improvements.</h3>
</a>
<p>