From 01db430407b5d16d04f78317932eaaab5efc5cb4 Mon Sep 17 00:00:00 2001 From: Zhiming Wang Date: Sat, 25 Jul 2015 19:20:30 -0700 Subject: use -webkit-image-set to make icon look sharper on Retina displays --- source/css/theme-narrow.css | 1 + source/css/theme.css | 1 + 2 files changed, 2 insertions(+) (limited to 'source/css') diff --git a/source/css/theme-narrow.css b/source/css/theme-narrow.css index c36a767e..90735546 100644 --- a/source/css/theme-narrow.css +++ b/source/css/theme-narrow.css @@ -15,6 +15,7 @@ nav div .blog-icon { height: 200px; width: 200px; background-image: url("/img/icon-200.png"); + background-image: -webkit-image-set( url("/img/icon-200.png") 1x, url("/img/icon-400.png") 2x ); background-size: 200px; } diff --git a/source/css/theme.css b/source/css/theme.css index 93bc3068..9303edb2 100644 --- a/source/css/theme.css +++ b/source/css/theme.css @@ -22,6 +22,7 @@ nav div .blog-icon { height: 100px; display: inline-block; background-image: url("/img/icon-100.png"); + background-image: -webkit-image-set( url("/img/icon-100.png") 1x, url("/img/icon-200.png") 2x ); background-repeat: no-repeat; background-position: center; background-size: 100px; -- cgit v1.2.1