From 99a8c646fbbe4462f5fddd46d69e8b03688fa126 Mon Sep 17 00:00:00 2001
From: Zhiming Wang <zmwangx@gmail.com>
Date: Sat, 8 Aug 2015 11:49:12 -0700
Subject: 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.
---
 source/css/theme-narrow.css |  8 +++++---
 source/css/theme.css        | 30 ++++++++++++++++++++++--------
 2 files changed, 27 insertions(+), 11 deletions(-)

(limited to 'source/css')

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;
-- 
cgit v1.2.1