Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Use double resolution logo for retina screens
Retina screens can display higher DPI images, and standard DPI images
(especially those containing text) can appear fuzzy.  This includes a
double size logo image, along with the CSS needed to display them.  To
make sure the 2x image matches the standard logo, a regenerated logo
image is included.  The responsive design for small screens has also
been adjusted to use the small logo instead of resizing the large logo.
  • Loading branch information
haarg committed Aug 13, 2014
1 parent 2ff3bb2 commit 4d44924
Show file tree
Hide file tree
Showing 4 changed files with 34 additions and 13 deletions.
25 changes: 18 additions & 7 deletions root/static/css/style.css
Expand Up @@ -70,18 +70,29 @@ label input[type="text"], label select {
.big-logo {
margin: 42px auto 44px auto;
display: block;
width: 322px;
height: 58px;
background: transparent url('/static/images/logo.png') no-repeat -1px -1px;
width: 326px;
height: 59px;
background: transparent url('/static/images/metacpan-logo.png') no-repeat;
}

.small-logo {
position: relative;
margin: 0 12px 0 0;
margin: 1px 13px 0 0;
float: left;
width: 180px;
height: 34px;
background: transparent url('/static/images/logo.png') no-repeat -1px -68px;
height: 33px;
background: transparent url('/static/images/metacpan-logo.png') no-repeat 0px -59px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(-moz-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-device-pixel-ratio: 2) {

.big-logo, .small-logo {
background-image: url('/static/images/metacpan-logo@2x.png');
background-size: 326px;
}
}

button.favorite, a.favorite {
Expand Down Expand Up @@ -343,4 +354,4 @@ div.qtip-github table th {

#icon-rss {
background: url('/static/icons/icon-rss.png');
}
}
Binary file modified root/static/images/logo.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added root/static/images/logo@2x.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
22 changes: 16 additions & 6 deletions root/static/less/responsive.less
Expand Up @@ -142,14 +142,24 @@
}

.big-logo {
margin: 20px 0 30px 0;
width: 161px;
height: 28px;
background: transparent url('/static/images/logo.png') no-repeat -1px -1px;
background-size: 151px 47.25px;
background-repeat: no-repeat;
margin: 20px 0 25px 0;
width: 180px;
height: 33px;
background: transparent url('/static/images/logo.png') no-repeat 0px -59px;
}

@media (-webkit-min-device-pixel-ratio: 2),
(-moz-min-device-pixel-ratio: 2),
(-o-min-device-pixel-ratio: 2/1),
(min-device-pixel-ratio: 2) {

.big-logo {
background-image: url('/static/images/logo@2x.png');
background-size: 326px;
}
}


.home img {
width: 137px;
height: 27px;
Expand Down

0 comments on commit 4d44924

Please sign in to comment.