redesign blog listing

assets/scss/blog.scss

@@ -2,11 +2,71 @@
 @import "variables";
 @import "main";
 
-// markup
+// fonts
+@import "fonts/playfair";
 
+// markup
 @import "markup/render-image";
 
 // partials
 @import "partials/sidebar";
 @import "partials/footer";
-@import "partials/helpers/icons.scss";
+@import "partials/helpers/icons.scss";
+
+#blog-header {
+    background: var(--vriish-gradient);
+    font-family: "playfair";
+    font-size: 2rem;
+    height: 40vh;
+    color: var(--vriish-gradient-text);
+    mask: var(--vriish-waves);
+    padding: 1rem 1rem 3rem 1rem;
+    display: flex;
+    flex-direction: column;
+    place-content: center;
+    text-align: center;
+
+    @media (max-width: 1140px) {
+        height: 30vh;
+        font-size: 1.5rem;
+    }
+    
+    h1 {
+        letter-spacing: 0.3rem;
+        font-size: 4rem;
+        margin: 0;
+        @media (max-width: 1140px) {
+            font-size: 2.5rem;
+        }
+    }
+
+    p {
+        letter-spacing: 0.15rem;
+        margin: 0;
+    }
+}
+
+#posts-wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));
+    gap: 1rem;
+    justify-content: center;
+    
+    .post-wrapper {
+        hyphens: auto;
+        padding: 1rem;
+        color: var(--vriish-gradient-text);
+        background: var(--vriish-gradient);
+        border-radius: .5em;
+        display: flex;
+        flex-direction: column;
+        scroll-snap-align: start;
+        text-decoration: none;
+        min-height: 10rem;
+        justify-content: space-between;
+
+        p {
+            margin: 0;
+        }
+    }
+}

i18n/de.yaml

@@ -21,11 +21,17 @@ made-with:
 verticalposts-more:
     other: mehr
 
-# Content
+# Home
 introduction-heading:
     other: Hola, ich bin Vri
 introduction-sub:
     other: und Informatik ist meine Leidenschaft.
 
 latest-posts-heading:
-    other: Aus meinem Blog
+    other: Aus meinem Blog
+
+# Blog
+blog-heading:
+    other: Artikel
+blog-sub:
+    other: aus meinem Blog

i18n/en.yaml

@@ -6,7 +6,6 @@ projects:
 blog:
     other: Blog
 
-
 # Footer
 build:
     other: "Build "
@@ -29,4 +28,10 @@ introduction-sub:
     other: and Computer Science is my passion.
 
 latest-posts-heading:
-    other: From my Blog
+    other: From my Blog
+
+# Blog
+blog-heading:
+    other: Articles
+blog-sub:
+    other: from my Blog

layouts/blog/list.html

@@ -3,14 +3,28 @@
     <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
 {{- end -}}
 
+{{- define "header" }}
+<header id="blog-header">
+    <h1 class="title">{{ i18n "blog-heading" }}</h1>
+    <p>{{ i18n "blog-sub" }}</p>
+</header>
+{{ end }}
+
 {{- define "main" }}
 
     <main>
-        <h1 class="title">{{ .Title }}</h1>
+        <div id="posts-wrapper">
-        <p>{{ .Content }}</p>
+        {{ range (where .Site.RegularPages "Section" "blog") }}
-    {{- range .Pages }}
+            <a href="{{ .Permalink }}" class="post-wrapper">
-        <p> <a href="{{ .Permalink }}">{{ .Title }}</a> <span>{{ .Date | time.Format ":date_long" }}</span> </p>
+                <p class="title">{{ .Title }}</p>
-    {{- end }}
+                <aside class="meta" title="{{ .Date | time.Format "2 Jan 2006, 15:04 MST" }}">
+                    <span class="date">{{ .Date | time.Format "2. January 2006" }}</span>
+                    <span class="author">{{ with .Params.author }}by {{ end }}{{ .Params.author }}</span>
+                </aside>
+            </a>
+        {{ end }}
+        </div>
+        
     </main>
 
 {{- end }}