From 7f52b9d8aaaa16869821632b57ea8dc86bab865a Mon Sep 17 00:00:00 2001 From: Zhiming Wang Date: Sat, 25 Jul 2015 19:12:43 -0700 Subject: 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. --- source/css/theme-narrow.css | 5 +++-- source/css/theme.css | 11 ++++++++++- 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'); -- cgit v1.2.1