chore: rework playfield, center on page

vladdeSV · Apr 6, 2024 · 0cca8e9 · 0cca8e9
1 parent 331b213
commit 0cca8e9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 37 deletions.
diff --git a/website/index.html b/website/index.html
@@ -82,39 +82,37 @@ <h2>Test it</h2>
         </label>
 
         <div>
-            <div>
-                <p><strong>with Checkswipe.js</strong></p>
-                <form class=game>
-                    <fieldset data-checkswipe>
-                        <label><input type=checkbox name=1> Option 1</label>
-                        <label><input type=checkbox name=2> Option 2</label>
-                        <label><input type=checkbox name=3> Option 3</label>
-                        <label><input type=checkbox name=4> Option 4</label>
-                        <label><input type=checkbox name=5> Option 5</label>
-                    </fieldset>
-                    <p><span data-timer data-best-display=–>–</span></p>
-                    <div class=reset>
-                        <button type=reset>reset timer</button>
-                    </div>
-                </form>
-            </div>
-
-            <div>
-                <p><strong>vanilla</strong></p>
-                <form class=game>
-                    <fieldset>
-                        <label><input type=checkbox name=1> Option 1</label>
-                        <label><input type=checkbox name=2> Option 2</label>
-                        <label><input type=checkbox name=3> Option 3</label>
-                        <label><input type=checkbox name=4> Option 4</label>
-                        <label><input type=checkbox name=5> Option 5</label>
-                    </fieldset>
-                    <p><span data-timer data-best-display=–>–</span></p>
-                    <div class=reset>
-                        <button type=reset>reset timer</button>
-                    </div>
-                </form>
-            </div>
+            <p><strong>with Checkswipe.js</strong></p>
+            <form class=game>
+                <fieldset data-checkswipe>
+                    <label><input type=checkbox name=1> Option 1</label>
+                    <label><input type=checkbox name=2> Option 2</label>
+                    <label><input type=checkbox name=3> Option 3</label>
+                    <label><input type=checkbox name=4> Option 4</label>
+                    <label><input type=checkbox name=5> Option 5</label>
+                </fieldset>
+                <p><span data-timer data-best-display=–>–</span></p>
+                <div class=reset>
+                    <button type=reset>reset timer</button>
+                </div>
+            </form>
+        </div>
+
+        <div>
+            <p><strong>vanilla</strong></p>
+            <form class=game>
+                <fieldset>
+                    <label><input type=checkbox name=1> Option 1</label>
+                    <label><input type=checkbox name=2> Option 2</label>
+                    <label><input type=checkbox name=3> Option 3</label>
+                    <label><input type=checkbox name=4> Option 4</label>
+                    <label><input type=checkbox name=5> Option 5</label>
+                </fieldset>
+                <p><span data-timer data-best-display=–>–</span></p>
+                <div class=reset>
+                    <button type=reset>reset timer</button>
+                </div>
+            </form>
         </div>
     </section>
 

diff --git a/website/the.style.css b/website/the.style.css
@@ -42,12 +42,27 @@ code.version {
 }
 
 .playfield {
-  display: inline-block;
+  display: grid;
+  gap: 0.5em 2em;
+  max-width: 500px;
+  margin: 2em auto;
+  grid-template-rows: auto auto; /* Define two rows */
+  grid-template-columns: 1fr 1fr; /* Define two columns of equal width */
+  grid-template-areas:
+    "a a" /* first row, one element spanning two columns */
+    "b c"; /* second row, two elements */
 }
 
-.playfield > div {
-  display: flex;
-  gap: 2em;
+.playfield > label {
+  grid-area: a;
+}
+
+.playfield > div:first-of-type {
+  grid-area: b;
+}
+
+.playfield > div:last-of-type {
+  grid-area: c;
 }
 
 .game button[type=reset] {