From: Ben Beltran Date: Wed, 3 Jun 2020 19:18:40 +0000 (+0200) Subject: Update the blog style X-Git-Tag: 5.0.0~25 X-Git-Url: https://git.r.bdr.sh/rbdr/blog/commitdiff_plain/05d725fad196f53874c5d15ca493962986f8af73?hp=fd728287049742f66f7aeaf79f855132da9ef400 Update the blog style --- diff --git a/lib/blog.js b/lib/blog.js index 541d6b3..50ebbf2 100644 --- a/lib/blog.js +++ b/lib/blog.js @@ -136,6 +136,7 @@ module.exports = class Blog { internals.debuglog('Parsing markdown'); posts.push({ ...metadata, + index: i, html: Marked(postContent), raw: postContent }); diff --git a/static/css/style.css b/static/css/style.css index 6c7fd1b..2a35a63 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -7,7 +7,9 @@ body { background-image: url('/images/header_background.png'); background-size: auto 300px; background-attachment: fixed; - line-height: 1.45; + line-height: 1.45em; + + font-family: Times, 'Times New Roman', serif; } header { @@ -25,28 +27,52 @@ header a { main { background-color: white; - padding: 1.414em; + padding: 1.414em 4.53em; + display: flex; + flex-flow: column; + align-items: center; } -h1, h2, h3, h4 { - margin: 1.414em 0 0.5em; +h1, h2, h3 { font-weight: 400; width: 100%; - max-width: 640px; } +h1 { + font-size: 2rem; + line-height: 1.05em; + max-width: 30rem; + margin: 0.5em 0 0.5em; + text-transform: uppercase; +} +h2, h3 { + max-width: 30rem; + font-size: 1rem; + margin: 2em 0; +} + +h2 { font-variant: small-caps; } +h3 { font-style: italic; } -p, ul, ol, img { +ul, ol, img { width: 100%; margin: 1.414em 0; - max-width: 480px;; + max-width: 30em; } -ul, ol { margin-left: 1.414em; } +p { + max-width: 30em; + text-align: justify; + text-indent: 1.5em; +} + +hr + p, +h1 + p, +h2 + p, +h3 + p { + text-indent: 0; +} -h1 { font-size: 3.998em; } -h2 { font-size: 2.827em; } -h3 { font-size: 1.999em; } -h4 { font-size: 1.414em; } +ul, ol { margin-left: 1.414em; } code { background-color: whitesmoke; @@ -56,10 +82,82 @@ code { pre { background-color: whitesmoke; padding: 1em; - max-width: 40em; + font-size: 1.231em; + max-width: 30em; + margin: 1.414em 0 1.414em -1em; } -footer { - background-color: pink; +hr { + border: 0; + border-bottom: 1px solid #666; + width: 30em; + margin: 1.414em 0; +} + +hr.separator { + width: 100%; + border-bottom: 10px solid #666; +} + +footer, +footer a { + color: #fff; + background-color: blue; +} +footer p { + font-family: arial, sans-serif; + text-align: left; + text-indent: 0; padding: 1.414em; } + +/* Image and caption sttyles */ + +p img { + margin-left: -1.125em; +} + +hr + p img, +h1 + p img, +h2 + p img, +h3 + p img { + margin-left: 0; +} + +img { + width: 100%; + max-width: 30em; +} + +img + em { + color: #999; + display: block; + margin: -1.414em 0 1.414em; + text-align: right; +} + +/* Dark Mode Support */ + +@media (prefers-color-scheme: dark) { + main { + background-color: black; + color: white; + } + + code, + pre { + background-color: #444; + } + + a { + color: #53FFFF; + } + + a:visited { + color: #FF55FF; + } + + hr.separator { + border-bottom: 10px solid #999; + } +} diff --git a/static/images/header_background.png b/static/images/header_background.png index 8352b5e..6d1989f 100644 Binary files a/static/images/header_background.png and b/static/images/header_background.png differ diff --git a/static/images/header_foreground.png b/static/images/header_foreground.png index eb9b34d..e0fadd1 100644 Binary files a/static/images/header_foreground.png and b/static/images/header_foreground.png differ diff --git a/templates/index.html b/templates/index.html index 3e37304..8ab8e3c 100644 --- a/templates/index.html +++ b/templates/index.html @@ -22,10 +22,10 @@
{{~ it.posts: post}} -
+
{{= post.html}}
-
+
{{~}} {{? it.posts.length === 0}}

This is a fresh blog!