redesign blog articles

assets/scss/blog.scss

@@ -16,11 +16,11 @@
 #blog-header {
     background: var(--vriish-gradient);
     font-family: "playfair";
-    font-size: 2rem;
+    font-size: 1.5rem;
     height: 40vh;
     color: var(--vriish-gradient-text);
     mask: var(--vriish-waves);
-    padding: 1rem 1rem 3rem 1rem;
+    padding: 1rem 6rem 3rem 6rem;
     display: flex;
     flex-direction: column;
     place-content: center;
@@ -28,13 +28,14 @@
 
     @media (max-width: 1140px) {
         height: 30vh;
-        font-size: 1.5rem;
+        font-size: 1rem;
     }
     
     h1 {
         letter-spacing: 0.3rem;
-        font-size: 4rem;
+        font-size: 3.5rem;
-        margin: 0;
+        margin: 0 auto;
+        max-width: 1000px;
         @media (max-width: 1140px) {
             font-size: 2.5rem;
         }
@@ -42,10 +43,27 @@
 
     p {
         letter-spacing: 0.15rem;
-        margin: 0;
+        margin: 0 auto;
+        max-width: 1000px;
+        
     }
 }
 
+main {
+    max-width: 800px;
+
+    h1, h2, h3, h4, h5, h6 {
+        margin-top: 2.5rem !important;
+    }
+
+    p {
+        margin: 1.5rem 0;
+    }
+}
+
+// single page
+
+// list
 #posts-wrapper {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(10rem, 18rem));

layouts/blog/single.html

@@ -3,10 +3,15 @@
     <link rel="preload stylesheet" as="style" href="{{ $style.Permalink }}" type="text/css" media="screen" />
 {{- end -}}
 
+{{- define "header" }}
+<header id="blog-header">
+    <h1 class="title">{{ .Title }}</h1>
+    <p title="{{ .Date | time.Format "2. January 2006, 15:04 MST" }}">{{ .Date | time.Format "2. January 2006" }}</p>
+</header>
+{{ end }}
+
 {{- define "main" }}
     <main>
-        <p class="date-published" title="{{ .Date | time.Format "2. January 2006, 15:04 MST" }}">{{ .Date | time.Format "2. January 2006" }}</p>
-        <h1 class="title">{{ .Title }}</h1>
         {{ .Content -}}
         <aside>
         {{- with .Params.topics }}