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.
Diffstat (limited to '')
| -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> |