Improve list style on welcome page for small screens

diff --git a/public/stylesheets/index.sass b/public/stylesheets/index.sass
index 4176bf8..e4f846e 100644 (file)
--- 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 99a5b56..4be9cf9 100644 (file)
--- 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)   
-                                                               li * new pieces                
-                                                               li * moves side effects        
-                                                               li ...and so on                
+                                                       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