From b85ae1c990c60e9d4700235b712d83c9a8e43051 Mon Sep 17 00:00:00 2001
From: Aadil Ayub <aadilayub@protonmail.com>
Date: Wed, 7 Jul 2021 05:22:51 +0500
Subject: [PATCH] create single blog template

---
 themes/coopcloud.tech/assets/scss/main.scss   | 29 +++++++++++++++++--
 .../layouts/_default/single.html              | 12 ++++++--
 2 files changed, 36 insertions(+), 5 deletions(-)

diff --git a/themes/coopcloud.tech/assets/scss/main.scss b/themes/coopcloud.tech/assets/scss/main.scss
index 80dee30..2ea7ef2 100644
--- a/themes/coopcloud.tech/assets/scss/main.scss
+++ b/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;
+        }
+    }
 }
\ No newline at end of file
diff --git a/themes/coopcloud.tech/layouts/_default/single.html b/themes/coopcloud.tech/layouts/_default/single.html
index 7e5c09d..429a48d 100644
--- a/themes/coopcloud.tech/layouts/_default/single.html
+++ b/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 }}