add post date to blog listing

config.toml

@@ -29,3 +29,9 @@ enableemoji = true
   [[params.links.footer]]
   name = "Public Matrix chat"
   link = "https://matrix.to/#/#coopcloud:autonomic.zone?via=autonomic.zone"
+  [[params.links.footer]]
+  name = "Mastodon"
+  link = "https://social.coop/@coopcloud"
+  [[params.links.footer]]
+  name = "Twitter"
+  link = "https://twitter.com/coop_cloud"

content/blog/our-new-blog-and-some-project-announcements.md

@@ -3,6 +3,7 @@ title: "Our new blog and some project announcements"
 date: 2021-07-07T13:17:04+05:00
 draft: false
 image: "/img/cc-birds.jpeg"
+imageCredit: '"birds flying near clouds" by Kendrick Mills on Unsplash'
 description: "CoS funding, beta release news, monthly updates and more!"
 ---
 

themes/coopcloud.tech/assets/scss/main.scss

@@ -199,23 +199,30 @@ footer .separator {
 .blog-archive {
     padding: 3rem 3rem;
     @media (max-width: 450px) { padding: 3rem 1rem; }
-    h3 {
-        padding-bottom: 1em;
-        text-transform: uppercase;
-        a:hover { text-decoration: underline; }
-    }
-}
 
-.blog-listing {
-    display: grid;
-    grid-template-columns: 1fr 2fr;
-    @media (max-width: 768px) { grid-template-columns: 1fr; }
-    gap: 2rem;
-    .text {
-        p {
-            font-weight: 300;
-            font-size: 1.5rem;
-            margin-bottom: 1.5rem;
+    .blog-listing {
+        display: grid;
+        grid-template-columns: 1fr 2fr;
+        @media (max-width: 768px) { grid-template-columns: 1fr; }
+        gap: 2rem;
+        
+        .text {
+            h3 {
+                padding-bottom: 5px;
+                @media (max-width: 480px) { padding-bottom: 11px; }
+                text-transform: uppercase;
+                a:hover { text-decoration: underline; }
+            }
+    
+            .post-date {
+                text-transform: uppercase;
+            }
+    
+            p {
+                font-weight: 300;
+                font-size: 1.5rem;
+                margin-bottom: 1.5rem;
+            }
         }
     }
 }
@@ -224,14 +231,26 @@ footer .separator {
     padding: 4rem 6rem;
     @media (max-width: 450px) { padding: 2.5rem  1.4rem 1rem; }
     
-    img.hero {
-        margin-bottom: 2rem;
-        margin-left: auto;
-        margin-right: auto;
-        width: 100%;
-        max-height: 50vh;
-        object-fit: cover;
-        object-position: center;
+    figure {
+        img.hero {
+            margin-left: auto;
+            margin-right: auto;
+            width: 100%;
+            max-height: 50vh;
+            object-fit: cover;
+            object-position: center;
+        }
+
+        figcaption {
+            font-weight: 300;
+            color: white;
+            padding: 5px;
+            background: #00000063;
+            text-align: end;
+            position: relative;
+            bottom: 34px;
+            width: max-content;
+        }
     }
     
     .content {
@@ -241,4 +260,8 @@ footer .separator {
             font-weight: 100;
         }
     }
+    
+    .post-metadata {
+        text-transform: uppercase;
+    }
 }

themes/coopcloud.tech/layouts/_default/list.html

@@ -7,6 +7,7 @@
                 <a href="{{ .RelPermalink }}"><img src="{{ with .Params.image }}{{ . }}{{ end }}" alt=""></a>
                 <div class="text">
                     <h3><a class="title" href="{{ .RelPermalink }}">{{ .Title }}</a></h3>
+                    <small class="post-date">{{ .PublishDate.Format "January 2, 2006" }}</small>
                     <p class="summary block has-text-weight-light is-size-4">
                         {{ .Summary }}
                     </p>

themes/coopcloud.tech/layouts/_default/single.html

@@ -1,8 +1,15 @@
 {{ define "main" }}
     <article class="blog-post">
         <div class="container">
-            <img src="{{ with .Params.image }}{{ . }}{{ end }}" alt="" class="hero">
+            <figure>
+                <img src="{{ with .Params.image }}{{ . }}{{ end }}" alt="" class="hero">
+                <figcaption>{{ .Params.imageCredit }}</figcaption>
+            </figure>
             <h1 class="title is-uppercase">{{ .Title }}</h1>
+            <div class="post-metadata">
+                <p class="post-date">{{ .PublishDate.Format "January 2, 2006" }}</p>
+                <p class="reading-time">Reading time: {{ .ReadingTime }} minutes</p>
+            </div>
             <hr>
             <div class="content">{{ .Content }}</div>
             <hr>