From 0c12cbc3a39f773add05fe7bb5166d85795ef666 Mon Sep 17 00:00:00 2001
From: Eric Bower <me@erock.io>
Date: Tue, 25 Jun 2024 20:58:28 -0400
Subject: [PATCH] style: add box colors

---
 static/smol.css       | 10 ++++++++++
 tmpl/styles.page.tmpl | 39 +++++++++++++++++++++++++++++++++------
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/static/smol.css b/static/smol.css
index 053db20..98e997e 100644
--- a/static/smol.css
+++ b/static/smol.css
@@ -730,6 +730,16 @@ figure {
   padding: 0.15rem 0.35rem;
 }
 
+.box-alert {
+  border: 2px solid var(--hover);
+  padding: 0.5rem 0.75rem;
+}
+
+.box-sm-alert {
+  border: 2px solid var(--hover);
+  padding: 0.15rem 0.35rem;
+}
+
 .list-none {
   list-style-type: none;
 }
diff --git a/tmpl/styles.page.tmpl b/tmpl/styles.page.tmpl
index 5a54c73..503a133 100644
--- a/tmpl/styles.page.tmpl
+++ b/tmpl/styles.page.tmpl
@@ -10,14 +10,41 @@
 
 {{define "body"}}
 {{template "nav" .}}
+
+<h1 class="text-2xl">Styles</h1>
+
 <div class="group">
-  <div><code class="pill">example</code></div>
-  <div><code class="pill">example longer</code></div>
+  <div class="group">
+    <h2 class="text-xl">Pill</h2>
+
+    <div><code class="pill">example</code></div>
+    <div><code class="pill">example longer</code></div>
+
+    <div><code class="pill-alert">example</code></div>
+    <div><code class="pill-alert">example longer</code></div>
+
+    <div><code class="pill-info">example</code></div>
+    <div><code class="pill-info">example longer</code></div>
+  </div>
+
+  <div class="group">
+    <h2 class="text-xl">Box</h2>
+
+    <div class="box">
+      This is a box!
+    </div>
+
+    <div class="box-sm">
+      This is a smaller box!
+    </div>
 
-  <div><code class="pill-alert">example</code></div>
-  <div><code class="pill-alert">example longer</code></div>
+    <div class="box-alert">
+      This is a box alert!
+    </div>
 
-  <div><code class="pill-info">example</code></div>
-  <div><code class="pill-info">example longer</code></div>
+    <div class="box-sm-alert">
+      This is a smaller box alert!
+    </div>
+  </div>
 </div>
 {{end}}