From c31030d91a546b143cf68e176822508d1354e94d Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 5 Sep 2021 18:40:19 +0200
Subject: [PATCH] Add Vikunja Cloud banner to blog posts

---
 layouts/post/single.html |  7 +++++++
 src/main.scss            | 19 +++++++++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/layouts/post/single.html b/layouts/post/single.html
index 1b1405f..861ea65 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -13,6 +13,13 @@
 		</p>
 		{{ partial "headline-hash.html" .Content }}
 	</div>
+
+	<div class="vikunja-cloud-banner">
+		<h2 class="title">Vikunja Cloud is here!</h2>
+		<a href="https://vikunja.cloud/?utm_source=io&utm_medium=io&utm_campaign=blog_post" class="button noshadow">
+			Get a hosted Vikunja Account
+		</a>
+	</div>
 </div>
 
 {{ partial "footer.html" . }}
diff --git a/src/main.scss b/src/main.scss
index 06b9baf..6024ac5 100644
--- a/src/main.scss
+++ b/src/main.scss
@@ -76,6 +76,9 @@ h1, h2, h3, h4, h5, h6 {
   margin: 2em auto;
   min-height: calc(100vh - 57px - 10rem);
 
+  max-width: $desktop - (2 * $gap);
+  width: 100%;
+
   .card{
     margin-bottom: 2em;
 
@@ -301,3 +304,19 @@ h1, h2, h3, h4, h5, h6 {
     }
   }
 }
+
+.vikunja-cloud-banner {
+  background: url('../images/bg-3.jpg') no-repeat center;
+  background-size: cover;
+
+  border-radius: 4px;
+  box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.06) 0px 1px 2px 0px;
+  color: rgb(31, 41, 55);
+  padding: 11rem 0;
+
+  align-items: center;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+}