From: Benjamin Auder <benjamin.auder@somewhere>
Date: Sat, 8 Dec 2018 20:55:55 +0000 (+0100)
Subject: Improve list style on welcome page for small screens
X-Git-Url: https://git.auder.net/js/css/%7B%7B%20asset%28%27mixstore/images/%7B%7B%20targetUrl%20%7D%7D?a=commitdiff_plain;h=ea6bb36e86f23f1046d3d1dd03cfb46d598f97f7;p=vchess.git

Improve list style on welcome page for small screens
---

diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
index 4176bf8e..e4f846ee 100644
--- a/public/stylesheets/index.sass
+++ b/public/stylesheets/index.sass
@@ -29,3 +29,18 @@
 
 #welcome ul > li
   font-family: monospace
+
+table.list-table
+  width: 300px
+  margin: 0 auto
+  border: 0
+  tbody
+    border: 0
+    tr
+      border: 0
+      margin: 0
+      padding: 0
+      td
+        padding: 0
+        text-align: left
+        border: 0
diff --git a/views/index.pug b/views/index.pug
index 99a5b561..4be9cf92 100644
--- a/views/index.pug
+++ b/views/index.pug
@@ -47,12 +47,18 @@ block content
 								(otherwise it's no longer a variant but a whole new game!).
 							p(style="font-style:italic;color:purple") However...
 							p Each variant has its own new rules, which can involve
-							ul
-								li * different pieces movements
-								li * different chessboard(s)&nbsp;&nbsp;&nbsp;
-								li * new pieces&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-								li * moves side effects&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
-								li ...and so on&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+							table.list-table
+								tbody
+									tr
+										td * different pieces movements
+									tr
+										td * different chessboard(s)
+									tr
+										td * new pieces
+									tr
+										td * moves side effects
+									tr
+										td ...and so on
 						.section
 							p.
 								Example: imagine that a capture is an atomic explosion, wiping all adjacent squares