style: add box colors

picosh · Jun 26, 2024 · 0c12cbc · 0c12cbc
1 parent 14a0fc4
commit 0c12cbc
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 6 deletions.
diff --git 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
@@ -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}}