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