Add sample kabna todo board

2023-04-03 00:25:08 +10:00 · 2023-04-03 00:25:08 +10:00 · 47d3e8d687
parent b1f0cc8ae7
commit 47d3e8d687
5 changed files with 96 additions and 1 deletions
--- a/.zs/board.html
+++ b/.zs/board.html
@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  {{ styles }}
+  <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
+  <title>{{ title }}</title>
+  <meta name="title" content="{{ title }}" />
+  <meta name="description" content="{{ description }}" />
+  <meta name="keywords" content="{{ keywords }}" />
+</head>
+
+<body>
+  <nav>
+    <a id="brand" href="/">Home 🏠</a>
+    <a href="/TestPage.html">Test Page 🧪</a>
+    <a href="https://zs.mills.io/">Demo 🥳</a>
+    <a href="https://git.mills.io/prologic/zs">Source 💾</a>
+  </nav>
+  <header>
+    <h1>{{ title }}</h1>
+  </header>
+  <article class="board">{{ content }}</article>
+  {{ editthispage }}
+  <footer>
+    Copyright &copy; James Mills ·
+    Last modified <time datetime="{{ date +%Y-%m-%dT%H:%M:%SZ%:z }}">{{ date }}</time> ·
+    Built with <a href="https://git.mills.io/prologic/zs">zs</a>
+  </footer>
+  {{ scripts }}
+</body>
+
+</html>
--- a/.zs/styles
+++ b/.zs/styles
@ -2,7 +2,7 @@

 set -e

-CSS="bahunya highlight site"
+CSS="bahunya board highlight site"

 for css in $CSS; do
    printf "<link rel=\"stylesheet\" href=\"/assets/css/%s.css\">\n" "$css"
--- a/TODO.md
+++ b/TODO.md
@ -0,0 +1,19 @@
+---
+title: TODO KanBan Board
+layout: board.html
+---
+
+# TODO Board
+
+## Backlog
+
+- Get feedback on zs
+
+## In Progress
+
+- Develop more samples
+
+## Done
+
+- Build CGI sample
+- Build Kanban sample
--- a/assets/css/board.css
+++ b/assets/css/board.css
@ -0,0 +1,35 @@
+.board {
+	display: grid;
+	column-gap: 50px;
+	justify-items: center;
+}
+
+/* Display long board titles without extending first grid column. Will display at least 6 columns */
+.board h1 {
+	grid-column: 1/6;
+	justify-self: left;
+	padding-left: 5%;
+}
+
+.board h2 {
+	grid-row: 2;
+}
+
+/* Disable anchor hover effect */
+.board h2:hover .anchor:before {
+	display: none;
+}
+
+.board ul {
+	grid-row: 3;
+	padding-left: 0;
+}
+
+.board li {
+	display: block;
+	border: 1px solid;
+	padding: 15px;
+	margin-bottom: 30px;
+	text-align: center;
+	border-radius: 25px;
+}
--- a/index.md
+++ b/index.md
@ -78,6 +78,10 @@ With the [wikilink][wikilink] extension you can link to other pages more easily

 {{ list slides }}

+### And Kanban Boards!
+
+- [[TODO]]
+
 ### Remember cgi scripts?

 - [[TestCGI]]