diff options
| -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> |