create single blog template

content/blog/announcement.md

@@ -3,10 +3,13 @@ title: "This week in Co-op Cloud (2021-06-25)"
 date: 2021-07-06T13:17:04+05:00
 draft: true
 image: "/img/solarpunk.jpg"
+description: "A review of the past week"
 ---
 
 We were inspired by the ["This Week in Matrix"](https://matrix.org/blog/category/this-week-in-matrix/) style logging so we decided we've git it a shot ourselves. We'll try to write up something each week to keep folks updated on what is going on with the project. Here we gooooooo...
 
+<!--more-->
+
 ### CoS funding
 
 We've received substantial funding which will allow us to focus on releasing a stable beta release of Co-op Cloud 🎉 🎆 ✨ Read more in [the announcement post](#LINK-TO-ABOVE-ARTICLE). We're Very Excited.

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

@@ -199,7 +199,32 @@ footer .separator {
 .blog-listing {
     display: grid;
     grid-template-columns: 1fr 2fr;
-    @media (max-width: 768px) { grid-template-columns: 1fr;    
-    }
+    @media (max-width: 768px) { grid-template-columns: 1fr; }
     gap: 2rem;
+    .text {
+        p {
+            font-weight: 300;
+            font-size: 1.5rem;
+            margin-bottom: 1.5rem;
+        }
+    }
+}
+
+.blog-post {
+    padding: 4rem 6rem;
+    @media (max-width: 450px) { padding: 2.5rem  1.4rem 1rem; }
+    
+    img.hero {
+        margin-bottom: 1.5rem;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    .content {
+        h3 { text-transform: uppercase; }
+        p {
+            font-size: 1.2rem;
+            font-weight: 100;
+        }
+    }
 }

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

@@ -1,5 +1,11 @@
 {{ define "main" }}
-<h1>{{ .Title }}</h1>
-<br><br>
-{{ .Content }}
+    <article class="blog-post">
+        <div class="container">
+            <img src="{{ with .Params.image }}{{ . }}{{ end }}" alt="" class="hero">
+            <h1 class="title is-uppercase">{{ .Title }}</h1>
+            <hr>
+            <div class="content">{{ .Content }}</div>
+            <hr>
+        </div>
+    </article>
 {{ end }}