diff options
| author | Zhiming Wang <zmwangx@gmail.com> | 2015-07-25 19:12:43 -0700 |
|---|---|---|
| committer | Zhiming Wang <zmwangx@gmail.com> | 2015-07-25 19:12:43 -0700 |
| commit | 7f52b9d8aaaa16869821632b57ea8dc86bab865a (patch) | |
| tree | b81d08896612d88cb47792abc860b9f8f8f267e3 | |
| parent | c6cb551425b06c15fa61f8bfba2591fdd9ca736d (diff) | |
| download | my_new_personal_website-7f52b9d8aaaa16869821632b57ea8dc86bab865a.tar.xz my_new_personal_website-7f52b9d8aaaa16869821632b57ea8dc86bab865a.zip | |
select blog icon with CSS
This way we can deliver the right size based on the window size (wide or
narrow), rather than deliver a universal one then scale down.
| -rw-r--r-- | source/css/theme-narrow.css | 5 | ||||
| -rw-r--r-- | source/css/theme.css | 11 | ||||
| -rw-r--r-- | templates/template.html | 2 |
3 files changed, 14 insertions, 4 deletions
diff --git a/source/css/theme-narrow.css b/source/css/theme-narrow.css index 0410154a..c36a767e 100644 --- a/source/css/theme-narrow.css +++ b/source/css/theme-narrow.css @@ -11,10 +11,11 @@ nav div { margin: auto; } -nav div.logo { +nav div .blog-icon { height: 200px; width: 200px; - padding: 2px 0; + background-image: url("/img/icon-200.png"); + background-size: 200px; } nav div.title, div.author { diff --git a/source/css/theme.css b/source/css/theme.css index 4de354c1..93bc3068 100644 --- a/source/css/theme.css +++ b/source/css/theme.css @@ -16,8 +16,17 @@ nav div { text-align: center; } -nav div.logo { +nav div .blog-icon { padding: 2px 0; + width: 100px; + height: 100px; + display: inline-block; + background-image: url("/img/icon-100.png"); + background-repeat: no-repeat; + background-position: center; + background-size: 100px; + vertical-align: middle; + font-size: 0; } nav div.title { diff --git a/templates/template.html b/templates/template.html index beafdc55..69b5ba97 100644 --- a/templates/template.html +++ b/templates/template.html @@ -48,7 +48,7 @@ ga('send', 'pageview'); </head> <body> <nav> -<div class="logo"><a href="/"><img src="/img/icon-200.png" srcset="/img/icon-400.png 2x" alt="blog icon"></a></div> +<div><a class="blog-icon" href="/">blog icon</a></div> <div class="title"><a href="/">dl? cmplnts?</a></div> <div class="author">by <a href="https://github.com/zmwangx" target="_blank">Zhiming Wang</a></div> </nav> |