From c196a72d345a6c3522d06f28f8021b6ed644ed32 Mon Sep 17 00:00:00 2001
From: Niko Abeler <niko@rerere.org>
Date: Tue, 23 Jan 2024 19:17:04 +0100
Subject: [PATCH] WIP grid buttons

---
 render/templates/base.tmpl        |  7 ++++++-
 render/templates/views/admin.tmpl |  6 +++---
 web/static/style.css              | 16 ++++++++++++++++
 3 files changed, 25 insertions(+), 4 deletions(-)
 create mode 100644 web/static/style.css

diff --git a/render/templates/base.tmpl b/render/templates/base.tmpl
index e5b37f3..908f01b 100644
--- a/render/templates/base.tmpl
+++ b/render/templates/base.tmpl
@@ -10,9 +10,14 @@
         <link rel="alternate" type="application/rss+xml" title="RSS" href="/index.xml">
         
         <link rel='stylesheet' href='/static/pico.min.css'>
+        <link rel='stylesheet' href='/static/style.css'>
         <style>
+            :root {
+                --color-primary: {{.SiteConfig.HeaderColor}};
+            }
+
             header {
-                background-color: {{.SiteConfig.HeaderColor}};
+                background-color: var(--color-primary);
                 padding-bottom: 1rem !important;
             }
 
diff --git a/render/templates/views/admin.tmpl b/render/templates/views/admin.tmpl
index 35c2d4c..0c8fb70 100644
--- a/render/templates/views/admin.tmpl
+++ b/render/templates/views/admin.tmpl
@@ -3,11 +3,11 @@
 {{define "main"}}
 <h2>Write</h2>
 
-<ul>
+<div class="action-tile-list">
     {{range .Types}}
-    <li><a href="/editor/new/{{.}}/">{{.}}</a></li>
+    <div class="action-tile"><a href="/editor/new/{{.}}/">{{.}}</a></div>
     {{end}}
-</ul>
+</div>
 
 <h2>Content</h2>
 <ul>
diff --git a/web/static/style.css b/web/static/style.css
new file mode 100644
index 0000000..d2e8bb6
--- /dev/null
+++ b/web/static/style.css
@@ -0,0 +1,16 @@
+.action-tile-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+} 
+
+.action-tile {
+    border: 1px solid var(--color-primary);
+    padding: 20px;
+    flex: 1 1 0px;
+    margin: 6px;
+    min-width: 20%;
+    text-align: center;
+    background: var(--color-primary);
+    border-radius: 4px;
+}
\ No newline at end of file