style: added .pill class

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

Hide file tree

Showing 4 changed files with 49 additions and 1 deletion.
diff --git a/main.go b/main.go
@@ -139,6 +139,11 @@ func main() {
 						Href: "/plain-text-lists",
 						Page: pager("plain-text-lists.md"),
 					},
+					{
+						Text: "Styles",
+						Href: "/styles",
+						Page: pager("styles.md"),
+					},
 				},
 			},
 

diff --git a/posts/styles.md b/posts/styles.md
@@ -0,0 +1,5 @@
+---
+title: styles
+description: pico.sh styles
+template: styles.page.tmpl
+---
diff --git a/static/smol.css b/static/smol.css
@@ -41,7 +41,7 @@
     --main-hue: 250;
     --white: #f2f2f2;
     --white-light: #f2f2f2;
-    --white-dark: #c6c6c6;
+    --white-dark: #e8e8e8;
     --code: #414558;
     --pre: #252525;
     --bg-color: #282a36;
@@ -111,6 +111,21 @@ code {
   padding: 0.1rem 0.3rem;
 }
 
+.pill {
+  border: 1px solid var(--link-color);
+  color: var(--link-color);
+}
+
+.pill-alert {
+  border: 1px solid var(--hover);
+  color: var(--hover);
+}
+
+.pill-info {
+  border: 1px solid var(--visited);
+  color: var(--visited);
+}
+
 pre {
   font-size: 14px;
   border-radius: 5px;

diff --git a/tmpl/styles.page.tmpl b/tmpl/styles.page.tmpl
@@ -0,0 +1,23 @@
+{{template "base" .}}
+
+{{define "title"}}{{.Data.Title}}{{end}}
+
+{{define "meta"}}
+<meta name="description" content="{{.Data.Description}}" />
+{{end}}
+
+{{define "attrs"}}class="container"{{end}}
+
+{{define "body"}}
+{{template "nav" .}}
+<div class="group">
+  <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>
+{{end}}