feat: blog post styling

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>

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" . }}

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'),
 	],
 }