assets/scss/blog.scss

@@ -16,11 +16,11 @@
 #blog-header {
     background: var(--vriish-gradient);
     font-family: "playfair";
-    font-size: 1.5rem;
+    font-size: 2rem;
     height: 40vh;
     color: var(--vriish-gradient-text);
     mask: var(--vriish-waves);
-    padding: 1rem 6rem 3rem 6rem;
+    padding: 1rem 1rem 3rem 1rem;
     display: flex;
     flex-direction: column;
     place-content: center;
@@ -28,14 +28,13 @@
 
     @media (max-width: 1140px) {
         height: 30vh;
-        font-size: 1rem;
+        font-size: 1.5rem;
     }
     
     h1 {
         letter-spacing: 0.3rem;
-        font-size: 3.5rem;
-        margin: 0 auto;
-        max-width: 1000px;
+        font-size: 4rem;
+        margin: 0;
         @media (max-width: 1140px) {
             font-size: 2.5rem;
         }
@@ -43,27 +42,10 @@
 
     p {
         letter-spacing: 0.15rem;
-        margin: 0 auto;
-        max-width: 1000px;
-        
+        margin: 0;
     }
 }
 
-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,12 +3,11 @@
     flex-direction: column;
     margin: 3rem auto;
     img {
-        border-radius: 0.5rem;
+        border-radius: 1rem;
         margin: 0 auto;
         box-shadow: rgba(0, 0, 0, .25) 0 0 .5rem;
-        max-width: 100%;
     }
-    &.with-text img { margin-bottom: .75rem; }
+    &.with-text img { margin-bottom: .5rem; }
     &-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-200);
-		--text-hover: var(--primary-dark-250);
+		--text: var(--primary-dark-50);
+		--text-hover: var(--primary-dark-100);
 		--link-underline: var(--primary-dark-700);
 		--link-underline-hover: var(--primary-dark-600);
 

layouts/blog/single.html

@@ -3,15 +3,10 @@
     <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 }}