From e59b755090faf19aa68ae34e3173fb3a21ef5ee6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Th=C3=A9ophile=20Bastian?= Date: Wed, 10 Apr 2024 15:43:52 +0200 Subject: [PATCH] Blog: enhance layout --- layouts/_default/baseof.html | 2 +- layouts/blog/list.html | 1 - layouts/blog/single.html | 20 ++++++ layouts/partials/blog/entry_list.html | 18 ++--- scss/_blog.scss | 98 ++++++++++++++++++++------- static/css/style.css | 79 ++++++++++++++------- 6 files changed, 157 insertions(+), 61 deletions(-) create mode 100644 layouts/blog/single.html diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html index 23766d5..e8a33f4 100644 --- a/layouts/_default/baseof.html +++ b/layouts/_default/baseof.html @@ -31,7 +31,7 @@ {{ partial "menu" . }} -
+
{{ block "pagename" . }} {{ end }} diff --git a/layouts/blog/list.html b/layouts/blog/list.html index cf49de2..172f623 100644 --- a/layouts/blog/list.html +++ b/layouts/blog/list.html @@ -10,7 +10,6 @@
{{ range .Pages }} {{ partial "blog/entry_list.html" . }} -
{{ end }}
{{ end }} diff --git a/layouts/blog/single.html b/layouts/blog/single.html new file mode 100644 index 0000000..d0e907d --- /dev/null +++ b/layouts/blog/single.html @@ -0,0 +1,20 @@ +{{ define "profilepic" }}
{{ end }} +{{ define "contentclass" }}blog{{ end }} + +{{ define "pagename" }} +
+
{{ .Date | time.Format ":date_medium" }}
+{{ with .GetTerms "blog/tags" }} + +{{ end }} +

{{ .Title }}

+
+{{ end }} + +{{ define "main" }} + {{ .Content }} +{{ end }} diff --git a/layouts/partials/blog/entry_list.html b/layouts/partials/blog/entry_list.html index 5fd4dc2..7ec9009 100644 --- a/layouts/partials/blog/entry_list.html +++ b/layouts/partials/blog/entry_list.html @@ -1,13 +1,13 @@
-
- {{ .Title }} +
+ {{ with .GetTerms "blog/tags" }} + + {{ end }} {{ .Date | time.Format ":date_medium" }}
- {{ with .GetTerms "blog/tags" }} -
diff --git a/scss/_blog.scss b/scss/_blog.scss index 8d8118f..0e36b4d 100644 --- a/scss/_blog.scss +++ b/scss/_blog.scss @@ -5,48 +5,94 @@ #entries { .blog_entry { padding: 15px 0; - .blog_entry_descr { - display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 10px; - .blog_entry_title { - display: block; - font-size: 1.1em; - text-align: left; - } - .blog_entry_date { - color: $fg_color_light; - font-style: italic; - display: block; - align-self: flex-start; - } + .blog_entry_title { + display: block; + font-size: 1.1em; + text-align: left; } - .blog_entry_tags::before { - content: "Tags:" + .blog_entry_meta { + display: flex; + justify-content: flex-end; + align-items: center; + column-gap: 10px; + + font-style: italic; + font-size: 0.9em; + color: $fg_color_light; + } + .blog_entry_date { + display: block; + align-self: flex-start; } .blog_entry_tags { list-style: none; padding-left: 0; - margin: 5px 0; - font-size: 0.9em; + margin: 0; li { display: inline; - font-style: italic; } li ~ li::before { content: ", "; } + &::before { + content: "Tags:" + } } } +} - hr { - width: 80%; - border-color: $fg_color_light; +#post_head { + margin: 20px 0; + + h1 { + margin: 5px 0; } - hr:last-child { - display: none; + #post_date { + text-align: right; + font-style: italic; + } + + #post_tags { + display: flex; + justify-content: flex-end; + + list-style: none; + padding-left: 0; + margin: 5px 0; + &::before { + content: "Tags: "; + font-style: italic; + padding-right: 1em; + } + li { + font-style: italic; + } + li ~ li::before { + content: ", "; + } + } +} + +.blog { + .highlight>pre { + padding: 10px; + border-radius: 10px; + } + + img { + display: block; + margin: 10px auto; + max-width: 80%; + max-height: 60vh; + border-radius: 10px; + } + + blockquote { + font-style: italic; + border-left: 3px solid #8b8bbd; + padding-left: 15px; + margin-left: 25px; } } diff --git a/static/css/style.css b/static/css/style.css index 600e401..f356184 100644 --- a/static/css/style.css +++ b/static/css/style.css @@ -2,39 +2,70 @@ @import url("fonts.css"); #entries .blog_entry { padding: 15px 0; } - #entries .blog_entry .blog_entry_descr { + #entries .blog_entry .blog_entry_title { + display: block; + font-size: 1.1em; + text-align: left; } + #entries .blog_entry .blog_entry_meta { display: flex; - justify-content: space-between; - align-items: flex-start; - gap: 10px; } - #entries .blog_entry .blog_entry_descr .blog_entry_title { - display: block; - font-size: 1.1em; - text-align: left; } - #entries .blog_entry .blog_entry_descr .blog_entry_date { - color: #555555bb; - font-style: italic; - display: block; - align-self: flex-start; } - #entries .blog_entry .blog_entry_tags::before { - content: "Tags:"; } + justify-content: flex-end; + align-items: center; + column-gap: 10px; + font-style: italic; + font-size: 0.9em; + color: #555555bb; } + #entries .blog_entry .blog_entry_date { + display: block; + align-self: flex-start; } #entries .blog_entry .blog_entry_tags { list-style: none; padding-left: 0; - margin: 5px 0; - font-size: 0.9em; } + margin: 0; } #entries .blog_entry .blog_entry_tags li { - display: inline; - font-style: italic; } + display: inline; } #entries .blog_entry .blog_entry_tags li ~ li::before { content: ", "; } + #entries .blog_entry .blog_entry_tags::before { + content: "Tags:"; } -#entries hr { - width: 80%; - border-color: #555555bb; } +#post_head { + margin: 20px 0; } + #post_head h1 { + margin: 5px 0; } + #post_head #post_date { + text-align: right; + font-style: italic; } + #post_head #post_tags { + display: flex; + justify-content: flex-end; + list-style: none; + padding-left: 0; + margin: 5px 0; } + #post_head #post_tags::before { + content: "Tags: "; + font-style: italic; + padding-right: 1em; } + #post_head #post_tags li { + font-style: italic; } + #post_head #post_tags li ~ li::before { + content: ", "; } -#entries hr:last-child { - display: none; } +.blog .highlight > pre { + padding: 10px; + border-radius: 10px; } + +.blog img { + display: block; + margin: 10px auto; + max-width: 80%; + max-height: 60vh; + border-radius: 10px; } + +.blog blockquote { + font-style: italic; + border-left: 3px solid #8b8bbd; + padding-left: 15px; + margin-left: 25px; } html { background-color: white; }