From 7dba1e49248262a87f7e37dc3d27437057d4cf51 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sat, 29 Jan 2022 16:55:26 +0100
Subject: [PATCH] feat: blog post styling

---
 layouts/partials/vikunja-cloud-banner.html |  7 ++++++
 layouts/post/single.html                   | 27 ++++++++--------------
 tailwind.config.js                         |  6 ++++-
 3 files changed, 22 insertions(+), 18 deletions(-)
 create mode 100644 layouts/partials/vikunja-cloud-banner.html

diff --git a/layouts/partials/vikunja-cloud-banner.html b/layouts/partials/vikunja-cloud-banner.html
new file mode 100644
index 0000000..eb597ea
--- /dev/null
+++ b/layouts/partials/vikunja-cloud-banner.html
@@ -0,0 +1,7 @@
+<a href="https://vikunja.cloud/?utm_source=io&utm_medium=io&utm_campaign=blog_post"
+   class="bg-hero-llama bg-cover bg-no-repeat bg-center py-44 flex items-center justify-center flex-col shadow hover:shadow-lg rounded text-white mt-8">
+	<h2 class="font-title text-3xl font-bold">Vikunja Cloud is here!</h2>
+	<p class="pt-4">
+		Get a hosted Vikunja Account.
+	</p>
+</a>
diff --git a/layouts/post/single.html b/layouts/post/single.html
index f93f828..57035ab 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -1,24 +1,17 @@
 {{ partial "header.html" . }}
 
-<div class="max-w-xl mx-auto">
-	<div class="content">
-		<h1>
-			<a href="{{ .Permalink }}">
-				{{ .Title }}
-			</a>
-		</h1>
-		<p>
-			<i>{{ .Date.Format "2006-01-02" }}</i>
-		</p>
+<article class="max-w-screen-lg mx-auto mt-4">
+	<h1 class="text-3xl font-bold font-title mb-8">
+		<a href="{{ .Permalink }}">
+			{{ .Title }}
+		</a>
+	</h1>
+
+	<div class="max-w-none prose prose-a:text-primary prose-a:no-underline hover:prose-a:underline prose-h1:font-title prose-h1:font-bold prose-img:rounded-sm">
 		{{ 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 "vikunja-cloud-banner.html" }}
+</article>
 
 {{ partial "footer.html" . }}
diff --git a/tailwind.config.js b/tailwind.config.js
index 1b41341..e2f169f 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -5,6 +5,11 @@ module.exports = {
 		'./src/*.css',
 		'./layouts/**/*.html'
 	],
+	safelist: [
+		'p-4',
+		'!text-white',
+		'!underline',
+	],
 	theme: {
 		extend: {
 			colors: {
@@ -25,6 +30,5 @@ module.exports = {
 	plugins: [
 		require('@tailwindcss/typography'),
 		require('@tailwindcss/forms'),
-		require('@tailwindcss/aspect-ratio'),
 	],
 }