diff options
| author | Zhiming Wang <zmwangx@gmail.com> | 2015-08-08 11:49:12 -0700 |
|---|---|---|
| committer | Zhiming Wang <zmwangx@gmail.com> | 2015-08-08 11:49:12 -0700 |
| commit | 99a8c646fbbe4462f5fddd46d69e8b03688fa126 (patch) | |
| tree | d24a474dcbee564d512cbccf725997e605035356 | |
| parent | 94f82685672bcd4e5731de3c1c61e79f7edc07b2 (diff) | |
| download | my_new_personal_website-99a8c646fbbe4462f5fddd46d69e8b03688fa126.tar.xz my_new_personal_website-99a8c646fbbe4462f5fddd46d69e8b03688fa126.zip | |
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.
| -rw-r--r-- | source/css/theme-narrow.css | 8 | ||||
| -rw-r--r-- | source/css/theme.css | 30 | ||||
| -rw-r--r-- | templates/template.html | 3 |
3 files changed, 29 insertions, 12 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; diff --git a/templates/template.html b/templates/template.html index 003d73b5..b84991af 100644 --- a/templates/template.html +++ b/templates/template.html @@ -18,6 +18,7 @@ $endif$ <link href='/css/theme-wide.css' media="only screen and (min-width: 1441px)" rel="stylesheet" type="text/css"/> <link href='/css/theme-narrow.css' media="only screen and (max-width: 1023px)" rel="stylesheet" type="text/css"/> <link href='/css/print.css' media="print" rel="stylesheet" type="text/css"/> + <link href="//fonts.googleapis.com/css?family=Open+Sans:light" rel="stylesheet" type="text/css"/> <link href="//fonts.googleapis.com/css?family=PT+Serif:regular,italic,bold,bolditalic" rel="stylesheet" type="text/css"/> <link href="//fonts.googleapis.com/css?family=Droid+Sans+Mono" rel="stylesheet" type="text/css"/> <script> @@ -32,7 +33,7 @@ $endif$ </head> <body> <nav class="nav"> - <a class="nav-icon" href="/">blog icon</a> + <a class="nav-icon" href="/" title="Home"> </a> <div class="nav-title"><a href="/" class="nav-link">dl? cmplnts?</a></div> <div class="nav-author">by <a href="https://github.com/zmwangx" class="nav-link" target="_blank">Zhiming Wang</a></div> </nav> |