From bbb1a51567a94606bb44fe87f2858d493e7ad511 Mon Sep 17 00:00:00 2001
From: Darren 'Tadgy' Austin <darren@afterdark.org.uk>
Date: Sat, 10 Aug 2024 16:57:55 +0100
Subject: [PATCH] CSS updates to fix issues on small screens.  Thanks to
 'litelinux' on LQ.

---
 html/dark.css            | 13 ++++++++++---
 html/includes/donate.php |  8 ++++----
 html/light.css           | 13 ++++++++++---
 3 files changed, 24 insertions(+), 10 deletions(-)

diff --git a/html/dark.css b/html/dark.css
index e662153..0ed978a 100644
--- a/html/dark.css
+++ b/html/dark.css
@@ -68,6 +68,7 @@ td {
   background: #060606;
   border: 2px solid #aaaaaa;
   box-shadow: 10px 10px 10px -5px rgba(128,128,128,0.5);
+  overflow-x: auto;
 }
 
 .boxmargins {
@@ -79,6 +80,11 @@ td {
   padding-right: 20px;
 }
 
+.donatebutton {
+  margin-left: 100px;
+  margin-right: 100px;
+}
+
 .heading {
   font-size: 200%;
 }
@@ -154,6 +160,7 @@ td {
   margin-right: auto;
   margin-top: 30px;
   text-align: center;
+  width: 100%;
 }
 
 #copyright {
@@ -162,9 +169,8 @@ td {
 }
 
 #donatebuttons {
-  display: grid;
-  column-gap: 10%;
-  grid-template-columns: auto auto;
+  display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 10px;
   margin-top: 20px;
@@ -198,6 +204,7 @@ td {
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
+  width: 100%;
 }
 
 #motd {
diff --git a/html/includes/donate.php b/html/includes/donate.php
index 3fcd857..25e1d96 100644
--- a/html/includes/donate.php
+++ b/html/includes/donate.php
@@ -1,9 +1,9 @@
 <div id="donatebuttons">
   <?php if ($_COOKIE['theme'] == "light") { ?>
-    <a href="https://www.patreon.com/slackwareUK" title="Patreon"><img src="/html/patreon-black.png" title="Patreon" alt="Patreon Logo"></a>
-    <a href="https://paypal.me/DonateToSlackwareUK" title="PayPal"><img src="/html/paypal-black.png" title="PayPal" alt="PayPal Logo"></a>
+    <a class="donatebutton" href="https://www.patreon.com/slackwareUK" title="Patreon"><img src="/html/patreon-black.png" title="Patreon" alt="Patreon Logo"></a>
+    <a class="donatebutton" href="https://paypal.me/DonateToSlackwareUK" title="PayPal"><img src="/html/paypal-black.png" title="PayPal" alt="PayPal Logo"></a>
   <?php } else { ?>
-    <a href="https://www.patreon.com/slackwareUK" title="Patreon"><img src="/html/patreon-white.png" title="Patreon" alt="Patreon Logo"></a>
-    <a href="https://paypal.me/DonateToSlackwareUK" title="PayPal"><img src="/html/paypal-white.png" title="PayPal" alt="PayPal Logo"></a>
+    <a class="donatebutton" href="https://www.patreon.com/slackwareUK" title="Patreon"><img src="/html/patreon-white.png" title="Patreon" alt="Patreon Logo"></a>
+    <a class="donatebutton" href="https://paypal.me/DonateToSlackwareUK" title="PayPal"><img src="/html/paypal-white.png" title="PayPal" alt="PayPal Logo"></a>
   <?php } ?>
 </div>
diff --git a/html/light.css b/html/light.css
index 3eacc09..63caab4 100644
--- a/html/light.css
+++ b/html/light.css
@@ -68,6 +68,7 @@ td {
   background: #f0f0f0;
   border: 2px solid #070707;
   box-shadow: 10px 10px 10px -5px rgba(0,0,0,0.5);
+  overflow-x: auto;
 }
 
 .boxmargins {
@@ -79,6 +80,11 @@ td {
   padding-right: 20px;
 }
 
+.donatebutton {
+  margin-left: 100px;
+  margin-right: 100px;
+}
+
 .heading {
   font-size: 200%;
 }
@@ -154,6 +160,7 @@ td {
   margin-right: auto;
   margin-top: 30px;
   text-align: center;
+  width: 100%;
 }
 
 #copyright {
@@ -162,9 +169,8 @@ td {
 }
 
 #donatebuttons {
-  display: grid;
-  column-gap: 10%;
-  grid-template-columns: auto auto;
+  display: flex;
+  flex-wrap: wrap;
   justify-content: center;
   margin-bottom: 10px;
   margin-top: 20px;
@@ -198,6 +204,7 @@ td {
   display: flex;
   justify-content: center;
   margin-bottom: 30px;
+  width: 100%;
 }
 
 #motd {