From 5fa325fde7a744e19907fe0c6c9c0734c573ddc8 Mon Sep 17 00:00:00 2001
From: Jakob Meier <comcloudway@ccw.icu>
Date: Tue, 18 Jun 2024 14:39:41 +0200
Subject: [PATCH] Add shortcode to display color swatches

---
 layouts/blog/single.html             |  6 ++++--
 layouts/shortcodes/color-swatch.html | 18 ++++++++++++++++++
 2 files changed, 22 insertions(+), 2 deletions(-)
 create mode 100644 layouts/shortcodes/color-swatch.html
diff --git a/layouts/blog/single.html b/layouts/blog/single.html
index aa804c9..f3556d2 100644
--- a/layouts/blog/single.html
+++ b/layouts/blog/single.html
@@ -7,15 +7,17 @@
 	<body>
 		{{ partial "nav.html" }}
 		<main>
-			<h2>
+			<h1>
 				{{.Title}}
-			</h2>
+			</h1>
 			<small>
 				{{.Date.Format "January 2, 2006"}}
 			</small>
+			{{ if (or (eq .Params.toc nil) .Params.toc)}}
 			<aside>
 				{{ .TableOfContents }}
 			</aside>
+			{{ end }}
 			{{.Content}}
 		</main>
 		{{ partial "footer.html" . }}
diff --git a/layouts/shortcodes/color-swatch.html b/layouts/shortcodes/color-swatch.html
new file mode 100644
index 0000000..448bad5
--- /dev/null
+++ b/layouts/shortcodes/color-swatch.html
@@ -0,0 +1,18 @@
+<div style="display: flex; flex-direction: column; align-items: center; width: fit-content">
+  <div class="cs-preview" style="background: {{ index .Params 0 }}"></div>
+  <span class="cs-text">{{ index .Params 0 }}</span>
+  <style>
+    .cs-preview {
+        width: 5rem;
+        border: 2px solid var(--color-headline);
+        height: 5rem;
+        border-radius: 50%;
+        margin: 0.4rem;
+    }
+    .cs-text {
+        margin: 0.4rem;
+        width: 100%;
+        text-align: center;
+    }
+  </style>
+</div>
-- 
2.38.5

