Add shadow, border radius, and border around release images

johnjago · Jun 6, 2024 · fe16871 · fe16871
1 parent 508b33e
commit fe16871
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 2 deletions.
diff --git a/assets/style.css b/assets/style.css
@@ -13,3 +13,7 @@
 	mask-size: contain;
 	mask-repeat: no-repeat;
 }
+
+.img-all-around-shadow img {
+	box-shadow: 0 0 1rem -0.25rem rgba(0, 0, 0, 0.25);
+}
diff --git a/layouts/releases/list.html b/layouts/releases/list.html
@@ -39,7 +39,7 @@ <h1 class="text-7xl text-center font-bold mt-16 mb-4">
 				>
 					<h2>{{ .Title }}</h2>
 				</a>
-				<div class="prose prose-h3:text-lg prose-h3:mt-0 mt-8">
+				<div class="prose prose-h3:text-xl prose-h3:mt-0 prose-img:rounded-lg prose-img:border prose-img:border-gray-200 img-all-around-shadow mt-8">
 					{{ .Content }}
 				</div>
 			</article>

diff --git a/layouts/releases/single.html b/layouts/releases/single.html
@@ -3,7 +3,7 @@
 	<h1 class="text-4xl font-bold mb-4">{{ .Title }}</h1>
 	<p class="mb-2">Dashify <strong>{{ .Params.Version }}</strong></p>
 	<p class="mb-8">Released <time datetime='{{ .Date.Format "2006-01-02" }}' class="font-semibold">{{ .Date.Format "2 January 2006" }}</time></p>
-	<article class="prose max-w-none">
+	<article class="prose prose-img:rounded-lg prose-img:border prose-img:border-gray-200 img-all-around-shadow max-w-none">
 		{{ .Content }}
 	</article>
 	<div class="bg-[#9D6095E3] mt-28 text-xl mx-auto text-center py-12 px-8 text-gray-50 rounded-lg">