From 271013701263328480d2a1303824e94f00868d41 Mon Sep 17 00:00:00 2001
From: c6ristian <c6ristian@christian.moe>
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 @@
-
-<article>
+<article class="blog">
   {{- partial "blog-header.html" (dict "headingLink" true "level" 2 "page" . ) }}
-
-  {{- if in .RawContent "<!--more-->" }}
+  <section>
+    {{- if in .RawContent "<!--more--> " }}
     {{ .Summary | safeHTML }}
-  {{- else }}
+    {{- else }}
     <p>{{ .Summary | safeHTML }}</p>
-  {{- end }}
-  {{- if .Truncated }}
+    {{- end }}
+    {{- if .Truncated }}
     <div class="morelink"><a href="{{ .RelPermalink }}">mehr...</a></div>
-  {{- end }}
+    {{- end }}
+  </section>
 </article>
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" }}
-  <main class="container" aria-role="main">
+<main class="container" aria-role="main">
+  <article class="blog">
     {{- partial "blog-header.html" (dict "page" . ) }}
 
-    <section class="content">
+    <section>
       {{ .Content }}
     </section>
 
@@ -14,5 +15,6 @@
       <small class="li-comma">letzte Änderung: {{ .Format "2006-01-02 15:04" }}</small>
       {{- end }}
     </div>
-  </main>
+  </article>
+</main>
 {{ 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 }}
-      <header>
+      <header class="blog-header">
         {{- if $headingLink }}<a href="{{ .RelPermalink }}">{{ end }}
         <h{{ $level }}>{{ .Title }}</h{{ $level }}>
         {{- if $headingLink }}</a>{{ end }}
@@ -38,5 +38,6 @@
           {{- end }}
           {{- end }}
         </div>
+        {{ if isset .Params "header" }} <img class="container" src="{{ .Params.header.image }}" alt="{{ .Params.header.caption }}" /> {{ end }}
       </header>
 {{- end }}