Draw blog icon with pure HTML and CSS

Using web font Open Sans (light) instead of Helvetica Neue. Text is
thinner, but close enough and feels about right.

2 files changed, 27 insertions, 11 deletions

diff --git a/source/css/theme-narrow.css b/source/css/theme-narrow.css
index 86d78443..d8b9eca5 100644
--- a/source/css/theme-narrow.css
+++ b/source/css/theme-narrow.css
@@ -12,9 +12,11 @@ body {
 .nav-icon {
     width: 150px;
     height: 150px;
-    background-image: url("/img/icon-150.png");
-    background-image: -webkit-image-set( url("/img/icon-150.png") 1x, url("/img/icon-300.png") 2x );
-    background-size: 150px;
+    line-height: 150px;
+}
+
+.nav-icon:before {
+    font-size: 54px;
 }
 
 .nav-title, .nav-author {
diff --git a/source/css/theme.css b/source/css/theme.css
index 70ce6b75..302550b9 100644
--- a/source/css/theme.css
+++ b/source/css/theme.css
@@ -15,19 +15,33 @@ body {
 }
 
 .nav-icon {
-    margin: 2px 0;
+    display: block;
+    margin: 2px auto;
     width: 100px;
     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;
-    vertical-align: middle;
+    border-radius: 50%;
+    background: #ddd;
+    line-height: 100px;
+    text-align: center;
     font-size: 0;
 }
 
+.nav-icon:before {
+    content: "ZW";
+    display: inline-block;
+    font-family: "Open Sans";
+    font-size: 36px;
+    font-weight: 300;
+    color: #fff;
+    text-decoration: none;
+    /* stretch to mimic Helvetica Neue */
+    transform: scale(1,0.9);
+    -webkit-transform: scale(1,0.9);
+    -moz-transform: scale(1,0.9);
+    -ms-transform: scale(1,0.9);
+    -o-transform: scale(1,0.9);
+}
+
 .nav-title {
     font-size: 16px;
     font-weight: bold;