From be7be0e16aa31cc1b45b3c0e52767bac563b4139 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jonas=20Sch=C3=A4fer?= <j.wielicki@sotecware.net>
Date: Sun, 17 Jan 2021 20:22:52 +0100
Subject: [PATCH] Add link buttons to demo for comparing styles

---
 snikket_web/templates/demo.html | 81 +++++++++++++++++++++++++--------
 1 file changed, 63 insertions(+), 18 deletions(-)

diff --git a/snikket_web/templates/demo.html b/snikket_web/templates/demo.html
index bd8c4db..eda56b5 100644
--- a/snikket_web/templates/demo.html
+++ b/snikket_web/templates/demo.html
@@ -166,24 +166,69 @@
 		<label for="fex-f9">Text area</label>
 		<textarea rows="5"></textarea>
 	</div>
-	<p>The following demonstrate the different button styles. First normal buttons:</p>
-	<div class="f-bbox">
-		<button class="tertiary">Tertiary</button>
-		<button class="secondary">Secondary</button>
-		<button class="primary">Primary</button>
-	</div>
-	<p>Then the accentuated versions:</p>
-	<div class="f-bbox">
-		<button class="tertiary accent">Tertiary (Accent)</button>
-		<button class="secondary accent">Secondary (Accent)</button>
-		<button class="primary accent">Primary (Accent)</button>
-	</div>
-	<p>And finally, the Danger Zone:</p>
-	<div class="f-bbox">
-		<button class="tertiary danger">Tertiary (Danger)</button>
-		<button class="secondary danger">Secondary (Danger)</button>
-		<button class="primary danger">Primary (Danger)</button>
-	</div>
+	<div class="demo-columns"><div class="demo-column">
+		<p>The following demonstrate the different button styles. First normal buttons:</p>
+		<div class="f-bbox">
+			{#- -#}
+			<button class="tertiary">Tertiary</button>
+			{#- -#}
+			<button class="secondary">Secondary</button>
+			{#- -#}
+			<button class="primary">Primary</button>
+			{#- -#}
+		</div>
+		<p>Then the accentuated versions:</p>
+		<div class="f-bbox">
+			{#- -#}
+			<button class="tertiary accent">Tertiary</button>
+			{#- -#}
+			<button class="secondary accent">Secondary</button>
+			{#- -#}
+			<button class="primary accent">Primary</button>
+			{#- -#}
+		</div>
+		<p>And finally, the Danger Zone:</p>
+		<div class="f-bbox">
+			{#- -#}
+			<button class="tertiary danger">Tertiary</button>
+			{#- -#}
+			<button class="secondary danger">Secondary</button>
+			{#- -#}
+			<button class="primary danger">Primary</button>
+			{#- -#}
+		</div>
+	</div><div class="demo-column">
+		<p>The following demonstrate the different button styles. First normal buttons:</p>
+		<div class="f-bbox">
+			{#- -#}
+			<a class="button tertiary">Tertiary</a>
+			{#- -#}
+			<a class="button secondary">Secondary</a>
+			{#- -#}
+			<a class="button primary">Primary</a>
+			{#- -#}
+		</div>
+		<p>Then the accentuated versions:</p>
+		<div class="f-bbox">
+			{#- -#}
+			<a class="button tertiary accent">Tertiary</a>
+			{#- -#}
+			<a class="button secondary accent">Secondary</a>
+			{#- -#}
+			<a class="button primary accent">Primary</a>
+			{#- -#}
+		</div>
+		<p>And finally, the Danger Zone:</p>
+		<div class="f-bbox">
+			{#- -#}
+			<a class="button tertiary danger">Tertiary</a>
+			{#- -#}
+			<a class="button secondary danger">Secondary</a>
+			{#- -#}
+			<a class="button primary danger">Primary</a>
+			{#- -#}
+		</div>
+	</div></div>
 {#
 {% for style in ["primary", "secondary", "tertiary"] %}
 	<p>The following demonstrate the <em>{{ style }}</em> button styles:</p>