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));

assets/scss/markup/render-image.scss

@@ -3,11 +3,12 @@
     flex-direction: column;
     margin: 3rem auto;
     img {
-        border-radius: 1rem;
+        border-radius: 0.5rem;
         margin: 0 auto;
         box-shadow: rgba(0, 0, 0, .25) 0 0 .5rem;
+        max-width: 100%;
     }
-    &.with-text img { margin-bottom: .5rem; }
+    &.with-text img { margin-bottom: .75rem; }
     &-text {
         font-size: .8em;
         font-weight: 300;

assets/scss/variables.scss

@@ -63,8 +63,8 @@
 		--background: var(--primary-light-850);
 		--border: var(--primary-dark-800);
 
-		--text: var(--primary-dark-50);
+		--text: var(--primary-dark-200);
-		--text-hover: var(--primary-dark-100);
+		--text-hover: var(--primary-dark-250);
 		--link-underline: var(--primary-dark-700);
 		--link-underline-hover: var(--primary-dark-600);
 

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