[FEATURE] Blog: make the blog posts looks much nicer and add a header image

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

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

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;
+}

themes/ccchh/layouts/_default/summary.html

@@ -1,7 +1,6 @@
-
+<article class="blog">
-<article>
   {{- partial "blog-header.html" (dict "headingLink" true "level" 2 "page" . ) }}
-
+  <section>
     {{- if in .RawContent "<!--more--> " }}
     {{ .Summary | safeHTML }}
     {{- else }}
@@ -10,4 +9,5 @@
     {{- if .Truncated }}
     <div class="morelink"><a href="{{ .RelPermalink }}">mehr...</a></div>
     {{- end }}
+  </section>
 </article>

themes/ccchh/layouts/blog/single.html

@@ -1,8 +1,9 @@
 {{ define "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>
+  </article>
 </main>
 {{ end }}

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 }}