Add hero

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>

assets/sass/common.scss

@@ -21,3 +21,19 @@ h6 {
   margin: 0;
   font-weight: 500;
 }
+
+figure {
+  margin: 0;
+}
+
+body {
+  margin: 0.5rem;
+  min-height: calc(100vh - 1rem);
+
+  display: flex;
+  flex-direction: column;
+
+  main {
+    flex: 1;
+  }
+}

assets/sass/content.scss

@@ -0,0 +1,11 @@
+.content {
+  max-width: $width-content;
+  margin: 0 auto;
+  padding: 2rem;
+}
+
+@media (max-width: $width-mobile) {
+  .content {
+    padding: 1rem;
+  }
+}

assets/sass/hero.scss

@@ -0,0 +1,27 @@
+.hero {
+  max-width: $width-content;
+  margin: 0 auto;
+  padding: 2rem 2rem 0 2rem;
+
+  .meta {
+    font-size: 0.8rem;
+
+    .date {
+      color: var(--text-600);
+    }
+
+    .duration {
+      color: color-mix(in srgb, var(--text) 50%, var(--background));
+    }
+  }
+}
+
+.hero + .content {
+  padding-top: 0;
+}
+
+@media (max-width: $width-mobile) {
+  .hero {
+    padding: 1rem 1em 0 1rem;
+  }
+}

assets/sass/image.scss

@@ -0,0 +1,15 @@
+.image {
+  width: 100%;
+  padding: 1rem 0;
+
+  img {
+    width: 100%;
+    display: block;
+  }
+
+  figcaption {
+    text-align: center;
+    padding-top: 0.5rem;
+    color: color-mix(in srgb, var(--text) 50%, var(--background));
+  }
+}

assets/sass/main.scss

@@ -4,9 +4,12 @@ $width-max: 60rem;
 
 @import "colors";
 @import "fonts";
-@import "size";
 @import "common";
 
+@import "image";
+
 @import "header";
 @import "posts";
+@import "content";
+@import "hero";
 @import "footer";

assets/sass/posts.scss

@@ -12,10 +12,6 @@
       font-size: 2.25rem;
     }
 
-    .summary {
-      font-size: 1.1rem;
-    }
-
     .meta {
       font-size: 0.8rem;
 
@@ -34,3 +30,13 @@
     color: var(--text-900);
   }
 }
+
+@media (max-width: $width-mobile) {
+  .posts-list {
+    .post {
+      &:not(:first-child) {
+        margin-top: 2rem;
+      }
+    }
+  }
+}

assets/sass/size.scss

@@ -1,16 +0,0 @@
-body {
-  margin: 0.5rem;
-  min-height: calc(100vh - 1rem);
-  display: flex;
-  flex-direction: column;
-
-  main {
-    flex: 1;
-
-    .content {
-      max-width: $width-content;
-      margin: 0 auto;
-      padding: 2.5rem;
-    }
-  }
-}

layouts/_default/single.html

@@ -0,0 +1,8 @@
+{{ define "main" }}
+  <main>
+    {{ partial (printf "posts/%s.html" (.Params.heroType | default "hero")) . }}
+    <div class="content">
+      {{ .Content }}
+    </div>
+  </main>
+{{ end }}

layouts/partials/image.html

@@ -0,0 +1,12 @@
+{{- $path := .path -}}
+{{- $alt := .alt -}}
+{{- $caption := .caption -}}
+
+{{ if $path }}
+  <figure class="image">
+    <img src="{{- $path | absURL -}}" {{ with $alt }}alt="{{- . -}}"{{ end }} />
+    {{ with $caption }}
+      <figcaption>{{ . }}</figcaption>
+    {{ end }}
+  </figure>
+{{ end }}

layouts/partials/posts/hero.html

@@ -0,0 +1,16 @@
+<section class="hero">
+  <h1>{{ .Title }}</h1>
+  <div class="meta">
+    <span class="date">{{ .Date | time.Format ":date_medium" }}</span>
+    &middot;
+    <span class="duration">{{ printf "%d MIN READ" .ReadingTime }}</span>
+  </div>
+  {{ with .Params.heroImage }}
+    {{ partial "image.html" (dict
+      "path" .path
+      "alt" .alt
+      "caption" .caption
+      )
+    }}
+  {{ end }}
+</section>