From 271013701263328480d2a1303824e94f00868d41 Mon Sep 17 00:00:00 2001 From: c6ristian Date: Sun, 29 Oct 2023 22:05:09 +0100 Subject: [PATCH] [FEATURE] Blog: make the blog posts looks much nicer and add a header image --- themes/ccchh/archetypes/article.md | 3 ++ themes/ccchh/archetypes/event.md | 3 ++ themes/ccchh/assets/sass/main.scss | 52 +++++++++++++++++-- themes/ccchh/layouts/_default/summary.html | 16 +++--- themes/ccchh/layouts/blog/single.html | 8 +-- .../ccchh/layouts/partials/blog-header.html | 3 +- 6 files changed, 69 insertions(+), 16 deletions(-) diff --git a/themes/ccchh/archetypes/article.md b/themes/ccchh/archetypes/article.md index 8bd575d..f94a316 100644 --- a/themes/ccchh/archetypes/article.md +++ b/themes/ccchh/archetypes/article.md @@ -6,6 +6,9 @@ draft: true authors: - your name # tags: +# header: +# caption: A caption für the picture will be used as Alt-Text +# image: Path to the image --- TODO: Write your blog post diff --git a/themes/ccchh/archetypes/event.md b/themes/ccchh/archetypes/event.md index 3a2010a..5cd4653 100644 --- a/themes/ccchh/archetypes/event.md +++ b/themes/ccchh/archetypes/event.md @@ -8,6 +8,9 @@ location: Z9 authors: - your name # tags: +# header: +# caption: A caption für the picture will be used as Alt-Text +# image: Path to the image --- TODO: Describe your event here diff --git a/themes/ccchh/assets/sass/main.scss b/themes/ccchh/assets/sass/main.scss index af1728b..b087d0b 100644 --- a/themes/ccchh/assets/sass/main.scss +++ b/themes/ccchh/assets/sass/main.scss @@ -30,6 +30,7 @@ header { body>footer { padding-top: var(--spacing); padding-bottom: var(--spacing); + nav { ul { display: flex; @@ -76,7 +77,7 @@ body>main { } .morelink { - margin-top: calc(var(--typography-spacing-vertical) * -1); + margin-top: calc(var(--typography-spacing-vertical) * -0.5); } .pagination { @@ -154,16 +155,16 @@ body>main { .announcement { border-radius: var(--border-radius); background: var(--code-background-color); - padding: 10px 15px; margin-bottom: var(--typography-spacing-vertical); + padding-bottom: 1rem; header { margin-bottom: 1rem; } p { - margin-bottom: calc(var(--typography-spacing-vertical) / 2); + margin: 0 1rem; } // .morelink { @@ -255,7 +256,6 @@ body>main { } - // Blog Overview: Categories list div.nav-aside { ul { @@ -268,3 +268,47 @@ div.nav-aside { } } } + + +.blog-header { + // General Customizations + border-top-left-radius: 10px; + border-top-right-radius: 10px; + border: 5px solid var(--muted-border-color); + background-color: var(--muted-border-color); + padding-bottom: 10px; + + h1, + h2, + h3, + h4, + h5, + h6, + div { + margin: 15px var(--block-spacing-horizontal); + } + + img { + padding: 15px var(--block-spacing-horizontal); + width: 100%; + height: 25cqw; + object-fit: cover; + object-position: top; + } +} + +.blog { + background-color: var(--card-background-color); + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + border: 2px solid var(--card-background-color); + padding-bottom: 0; +} + +article.blog { + padding-bottom: var(--block-spacing-vertical); +} + +article>header { + padding: unset; +} diff --git a/themes/ccchh/layouts/_default/summary.html b/themes/ccchh/layouts/_default/summary.html index b393fed..e37c9a6 100644 --- a/themes/ccchh/layouts/_default/summary.html +++ b/themes/ccchh/layouts/_default/summary.html @@ -1,13 +1,13 @@ - -
+
{{- partial "blog-header.html" (dict "headingLink" true "level" 2 "page" . ) }} - - {{- if in .RawContent "" }} +
+ {{- if in .RawContent " " }} {{ .Summary | safeHTML }} - {{- else }} + {{- else }}

{{ .Summary | safeHTML }}

- {{- end }} - {{- if .Truncated }} + {{- end }} + {{- if .Truncated }} - {{- end }} + {{- end }} +
diff --git a/themes/ccchh/layouts/blog/single.html b/themes/ccchh/layouts/blog/single.html index b298a64..3bd007f 100644 --- a/themes/ccchh/layouts/blog/single.html +++ b/themes/ccchh/layouts/blog/single.html @@ -1,8 +1,9 @@ {{ define "main" }} -
+
+
{{- partial "blog-header.html" (dict "page" . ) }} -
+
{{ .Content }}
@@ -14,5 +15,6 @@ letzte Änderung: {{ .Format "2006-01-02 15:04" }} {{- end }} -
+
+ {{ end }} diff --git a/themes/ccchh/layouts/partials/blog-header.html b/themes/ccchh/layouts/partials/blog-header.html index 6a1eb92..7c27276 100644 --- a/themes/ccchh/layouts/partials/blog-header.html +++ b/themes/ccchh/layouts/partials/blog-header.html @@ -5,7 +5,7 @@ {{- $showAuthors := not (.reduced | default false) -}} {{ with $page }} -
+
{{- if $headingLink }}{{ end }} {{ .Title }} {{- if $headingLink }}{{ end }} @@ -38,5 +38,6 @@ {{- end }} {{- end }} + {{ if isset .Params "header" }} {{ .Params.header.caption }} {{ end }}
{{- end }}