mirror of
https://github.com/github/choosealicense.com
synced 2024-12-21 20:30:10 +01:00
Use a CSS sprite for the homepage images.
-2 http requests, -1KB.
This commit is contained in:
parent
f8aa15b59d
commit
d86fc76265
@ -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
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
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 |
@ -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>I’m 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>
|
||||
|
Loading…
x
Reference in New Issue
Block a user