From 1202008f45c8ac3ff89c67f7d2ac824bc22874e8 Mon Sep 17 00:00:00 2001
From: Captain ALM <captainalm@captainalm.com>
Date: Fri, 29 Jul 2022 20:15:31 +0100
Subject: [PATCH] .

---
 base.css      | 40 ++++++++++++++++++++++++++++++----------
 dark.css      |  4 ++--
 index.go.html | 26 +++++++++++++-------------
 light.css     |  4 ++--
 4 files changed, 47 insertions(+), 27 deletions(-)

diff --git a/base.css b/base.css
index 493fee3..400f476 100644
--- a/base.css
+++ b/base.css
@@ -61,16 +61,36 @@ main{
     position: fixed;
     max-height: 0;
 }
-.so-pane > p{
-    padding: 2px;
+.so-pane > div{
+    display: table-row;
+    background-color: transparent;
+    box-sizing: inherit;
+    max-width: 100%;
+    width: 100%;
 }
-.so-pane > p, .so-pane > p > *{
+.so-pane > div > div{
+    display: table-cell;
+    background-color: transparent;
+    box-sizing: inherit;
+    max-width: 50%;
+    width: 50%;
+    padding: 2px;
+    text-align: center;
+    vertical-align: middle;
+}
+.so-pane > div > div > *{
+    max-width: 100%;
+    width: 100%;
     vertical-align: middle;
     font-size: 16px;
     text-align: left;
 }
-.so-pane > p > label, .so-pane > p{
-    background-color: transparent;
+.so-pane > div > div > label{
+    max-width: 100%;
+    width: 100%;
+    vertical-align: middle;
+    font-size: 16px;
+    text-align: left;
 }
 .nav-menu, .sort-menu{
 	display: none;
@@ -120,7 +140,7 @@ main{
     top:0;
 }
 .sort-menu:checked ~ .so-pane, .so-pane-open{
-    display: block;
+    display: table;
     box-sizing: content-box;
     position: fixed;
     top: 85px;
@@ -171,8 +191,8 @@ main{
     display: table-row;
     background-color: transparent;
     box-sizing: inherit;
-    width: 100%;
     max-width: 100%;
+    width: 100%;
 }
 .flex-row, .item-table > div{
     display: -webkit-box;
@@ -192,18 +212,18 @@ main{
     flex-wrap: wrap;
     -webkit-justify-content: center;
     justify-content: center;
-    width: 100%;
     max-width: 100%;
+    width: 100%;
     overflow: hidden;
 }
 .item-table > div > div > div{
     padding: 2px;
 }
-.item-table-caption{
+.item-table-caption, .so-pane-caption{
     display: table-caption !important;
     caption-side: bottom;
 }
-.item-table-full, .item-table-360, .item-table-caption{
+.item-table-full, .item-table-360, .item-table-caption, .so-pane-caption{
     background-color: transparent;
     box-sizing: inherit;
 }
diff --git a/dark.css b/dark.css
index 3eb6bae..67e0e67 100644
--- a/dark.css
+++ b/dark.css
@@ -13,10 +13,10 @@ a{
 .header, .nav, footer, .so-pane{
 	background-color: #1d1d1e;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > p > *{
+.home-button > div, .sort-button > div, .menu a, .so-pane > div > div > *{
 	color: #e0e0e0;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > p > input, .so-pane > p > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > div > div > input, .so-pane > div > div > select{
 	background-color: #606061;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{
diff --git a/index.go.html b/index.go.html
index c6e29fb..2e4e850 100644
--- a/index.go.html
+++ b/index.go.html
@@ -32,10 +32,10 @@
         {{ if .Light }}
         <input id="so-theme" type="hidden" name="light" />
         {{ end }}
-        <p>
+        <div>
         {{ $sort := 0 }}
-        <label class="no-dec" for="so-order">Order by:</label>
-        <select name="order" id="so-order">
+            <div><label class="no-dec" for="so-order">Order by:</label></div>
+            <div><select name="order" id="so-order">
             {{ if eq .OrderStartDate 0 }}
             <option value="start">Start Date</option>
             {{ else }}
@@ -60,11 +60,11 @@
             <option value="duration" selected>Duration</option>
             {{ $sort = .OrderDuration }}
             {{ end }}
-        </select>
-        </p>
-        <p>
-        <label class="no-dec" for="so-sort">Sort:</label>
-        <select name="sort" id="so-sort">
+            </select></div>
+        </div>
+        <div>
+            <div><label class="no-dec" for="so-sort">Sort:</label></div>
+            <div><select name="sort" id="so-sort">
             {{ if gt $sort 0 }}
             <option value="asc" selected>Ascending</option>
             {{ else }}
@@ -75,11 +75,11 @@
             {{ else }}
             <option value="desc">Descending</option>
             {{ end }}
-        </select>
-        </p>
-        <p>
-        <input id="so-submit" type="submit" value="Commit">
-        </p>
+            </select></div>
+        </div>
+        <div>
+        <div><input id="so-submit" type="submit" value="Commit"></div>
+        </div>
     </form>
     <input class="nav-menu" type="checkbox" id="nav-menu"/>
     <label class="hmb" for="nav-menu" title="Navigation Links"><span class="hmb-line"></span></label>
diff --git a/light.css b/light.css
index 1d18b06..4d59533 100644
--- a/light.css
+++ b/light.css
@@ -13,10 +13,10 @@ a{
 .header, .nav, footer, .so-pane{
     background-color: #e2e2e1;
 }
-.home-button > div, .sort-button > div, .menu a, .so-pane > p > *{
+.home-button > div, .sort-button > div, .menu a, .so-pane > div > div > *{
     color: #1f1f1f;
 }
-.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > p > input, .so-pane > p > select{
+.home-button:hover, .menu a:hover, .hmb:hover, .sort-button:hover, .sort-menu:checked ~ .sort-button, .sort-button-active, .so-pane > div > div > input, .so-pane > div > div > select{
     background-color: #9f9f9e;
 }
 .hmb-line, .hmb-line::before, .hmb-line::after{