From f30d19645761ee1f87bc6feaeb63755c356b2475 Mon Sep 17 00:00:00 2001 From: Emil Miler Date: Wed, 9 Mar 2022 15:16:47 +0100 Subject: [PATCH] Separate styles from template --- src/www/index.html | 73 +--------------------------------------------- src/www/style.css | 70 ++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 72 deletions(-) create mode 100644 src/www/style.css diff --git a/src/www/index.html b/src/www/index.html index ad3ed47..bae9e42 100644 --- a/src/www/index.html +++ b/src/www/index.html @@ -3,78 +3,7 @@ kchan - {name} - +
diff --git a/src/www/style.css b/src/www/style.css new file mode 100644 index 0000000..4aeaf36 --- /dev/null +++ b/src/www/style.css @@ -0,0 +1,70 @@ +.wrap { + max-width: 60rem; + margin: 0 auto; +} +body { + margin: 0; + box-sizing: border-box; + font-size: 18px; + line-height: 1.5; +} + +header { + box-shadow: 0 0 20px 5px rgba(0,0,0,0.2); + padding: .25em .5em; + margin-bottom: 3rem; +} +nav a { + text-decoration: none; + color: #000; +} +nav a:hover { + color: blue; +} +nav a:before { + content: "[ "; + color: #999; +} +nav a:after { + content: " ]"; + color: #999; +} + +main { padding: 0 .5rem } + +article { margin-bottom: 3rem } +article:after { + /* reset float and keep bottom margin */ + content: ""; + display: block; + float: none; + clear: both; +} +article img { + float: left; + width: 15rem; + max-height: 25rem; + margin-right: 1rem; +} +article .title { + font-weight: bold; + margin-bottom: .5rem; +} +article .meta { + display: flex; + margin-bottom: .5rem; +} +article .image-info { + font-size: .8rem; + color: #444; + margin-bottom: .5rem; +} + +@media screen and (max-width: 900px) { + article img { width: 10rem } +} +@media screen and (max-width: 700px) { + body { font-size: 16px } + article img { width: 6rem } + article .meta { flex-direction: column-reverse } +}