1
0
mirror of https://github.com/github/choosealicense.com synced 2024-12-22 12:50:24 +01: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; 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 { .license-family {
clear: both; clear: both;
margin-bottom: 50px; margin-bottom: 50px;
@ -468,3 +480,17 @@ strong {
} }
.with-love { float: right; clear: right; } .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"> <ul class="triptych situations clearfix">
<li class="whatever"> <li class="whatever">
<a href="licenses/mit"> <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> <h3>I want it simple and permissive.</h3>
</a> </a>
<p> <p>
@ -26,7 +26,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
</li> </li>
<li class="patents"> <li class="patents">
<a href="licenses/apache"> <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> <h3>Im concerned about patents.</h3>
</a> </a>
<p> <p>
@ -38,7 +38,7 @@ description: A site to provide non-judgmental guidance on choosing a license for
</li> </li>
<li class="copyleft"> <li class="copyleft">
<a href="licenses/gpl-v2"> <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> <h3>I care about sharing improvements.</h3>
</a> </a>
<p> <p>