optimize Atom, RSS and CC icons for retina display

Again using -webkit-image-set.

10 files changed, 12 insertions, 9 deletions

diff --git a/source/css/theme.css b/source/css/theme.css
index 9303edb2..c93f2877 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -192,9 +192,10 @@ footer .rfooter {
 footer .rfooter .cc-icon {
     width: 16px;
     height: 16px;
-    padding: 0 2px;
+    padding: 0 1px;
     display: inline-block;
     background-image: url("/img/cc-16.png");
+    background-image: -webkit-image-set( url("/img/cc-16.png") 1x, url("/img/cc-32.png") 2x );
     background-repeat: no-repeat;
     background-position: center;
     background-size: 16px;
@@ -207,7 +208,8 @@ footer .rfooter .atom-icon {
     height: 16px;
     padding: 0 2px;
     display: inline-block;
-    background-image: url("/img/feed-14.png");
+    background-image: url("/img/feed-16.png");
+    background-image: -webkit-image-set( url("/img/feed-16.png") 1x, url("/img/feed-32.png") 2x );
     background-repeat: no-repeat;
     background-position: center;
     background-size: 14px;
@@ -220,7 +222,8 @@ footer .rfooter .rss-icon {
     height: 16px;
     padding: 0 2px;
     display: inline-block;
-    background-image: url("/img/rss-14.png");
+    background-image: url("/img/rss-16.png");
+    background-image: -webkit-image-set( url("/img/rss-16.png") 1x, url("/img/rss-32.png") 2x );
     background-repeat: no-repeat;
     background-position: center;
     background-size: 14px;
diff --git a/source/img/README.rst b/source/img/README.rst
index f8dceeee..6f300dbe 100644
--- a/source/img/README.rst
+++ b/source/img/README.rst
@@ -14,15 +14,15 @@ Credit to `audreyr/favicon-cheat-sheet <https://github.com/audreyr/favicon-cheat
 
 The feed icon isn't so easy to create with TikZ (I don't know the necessary parameters), so I downloaed one (256x256) from `IconFinder <https://www.iconfinder.com/icons/49861/feed_rss_icon>`_. The original PNG can be found `here <http://i.imgur.com/4XE3iL3.png>`_. Then I processed the PNG with ``optipng``, the result of which is ``feed-256.png``. The smaller ``feed-14.png`` is generated through::
 
-  convert feed-256.png -resize 14x14 feed-14.png
-  optipng feed-14.png
+  for size in 16 32; do convert feed-256.png -resize $sizex$size feed-$size.png; done
+  optipng feed-*.png
 
 Next, the horizontal mirror ``rss-14.png`` is generated through::
 
-  convert feed-14.png -flop rss-14.png
-  optipng rss-14.png
+  for size in 16 32; do convert feed-$size.png -flop rss-$size.png; done
+  optipng rss-*.png
 
 The CreativeCommons icon ``cc.svg`` is pulled from `the official downloads page <https://creativecommons.org/about/downloads>`_ and converted to 16x16 PNG through::
 
-  convert cc.svg -resize 16x16 cc-16.png
-  optipng cc-16.png
+  for size in 16 32; do convert cc.svg -resize $sizex$size cc-$size.png; done
+  optipng cc-*.png
diff --git a/source/img/cc-16.png b/source/img/cc-16.png
index db746473..f1e8da59 100644
--- a/source/img/cc-16.png
+++ b/source/img/cc-16.png
diff --git a/source/img/cc-32.png b/source/img/cc-32.png
new file mode 100644
index 00000000..cc0856b6
--- /dev/null
+++ b/source/img/cc-32.png
diff --git a/source/img/feed-14.png b/source/img/feed-14.png
deleted file mode 100644
index 0f45bff8..00000000
--- a/source/img/feed-14.png
+++ /dev/null
diff --git a/source/img/feed-16.png b/source/img/feed-16.png
new file mode 100644
index 00000000..d5ead47c
--- /dev/null
+++ b/source/img/feed-16.png
diff --git a/source/img/feed-32.png b/source/img/feed-32.png
new file mode 100644
index 00000000..2d44b08e
--- /dev/null
+++ b/source/img/feed-32.png
diff --git a/source/img/rss-14.png b/source/img/rss-14.png
deleted file mode 100644
index 53ae6a19..00000000
--- a/source/img/rss-14.png
+++ /dev/null
diff --git a/source/img/rss-16.png b/source/img/rss-16.png
new file mode 100644
index 00000000..3353bc95
--- /dev/null
+++ b/source/img/rss-16.png
diff --git a/source/img/rss-32.png b/source/img/rss-32.png
new file mode 100644
index 00000000..227a0535
--- /dev/null
+++ b/source/img/rss-32.png