From 98a5349ac2f926d8265dc474a04038d53b57a442 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sun, 18 Aug 2024 08:41:09 +0200
Subject: [PATCH] feat: improve responsiveness and layout of the site

Enhanced the website's responsiveness by introducing global box-sizing,
setting max-width to 100%, and adding media queries for devices with
maximum widths of 768px and 480px. Updated the layout to use flexbox,
ensuring content adapts seamlessly across various screen sizes.

These changes aim to provide a better user experience on mobile and
tablet devices. Also, resolved overflow issues in multiple sections
ensuring the elements don't exceed the viewport width.
---
 src/wikimore/static/css/style.css | 126 +++++++++++++++++++++++++++++-
 1 file changed, 124 insertions(+), 2 deletions(-)

diff --git a/src/wikimore/static/css/style.css b/src/wikimore/static/css/style.css
index 7999d42..45e2fad 100644
--- a/src/wikimore/static/css/style.css
+++ b/src/wikimore/static/css/style.css
@@ -1,9 +1,16 @@
 /* General styling */
+* {
+    box-sizing: border-box;
+    max-width: 100%;
+}
+
 body {
     font-family: Arial, sans-serif;
     margin: 0;
     padding: 0;
     background-color: #f8f9fa;
+    width: 100%;
+    overflow-x: hidden;
 }
 
 /* Link styling */
@@ -16,10 +23,11 @@ a {
 #header {
     background-color: #ffffff;
     border-bottom: 1px solid #a2a9b1;
-    padding: 10px;
+    padding: 10px 20px;
     display: flex;
     align-items: center;
     justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 #header h1 {
@@ -38,6 +46,17 @@ a {
     padding: 0;
     display: flex;
     align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+}
+
+#search-form input[type="text"],
+#search-form select,
+#search-form button {
+    flex: 1;
+    padding: 5px;
+    margin: 5px;
+    box-sizing: border-box;
 }
 
 #search-form input[type="text"] {
@@ -56,6 +75,7 @@ a {
 /* Content styling */
 #content {
     padding: 20px;
+    overflow-x: hidden;
 }
 
 h1 {
@@ -72,6 +92,10 @@ h1 {
     border: 1px solid #a2a9b1;
     padding: 10px;
     box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    margin: 10px 0;
 }
 
 .toc {
@@ -108,6 +132,8 @@ h1 {
     max-width: 100%;
     background-color: #f9f9f9;
     border: 1px solid #ddd;
+    display: block;
+    overflow-x: auto;
 }
 
 .table th {
@@ -272,6 +298,11 @@ h1 {
     padding: 10px;
     font-size: small;
     border-collapse: collapse;
+    width: 100%;
+    margin: 10px 0;
+    display: flex;
+    flex-direction: column;
+    overflow-x: auto;
 }
 
 .infobox-above {
@@ -354,6 +385,10 @@ figure,
     background-color: #f9f9f9;
     border: 1px solid #ddd;
     display: inline-block;
+    width: 100%;
+    display: block;
+    margin: 10px 0;
+    overflow-x: auto;
 }
 
 figure img,
@@ -410,4 +445,91 @@ figcaption,
 
 span {
     display: inline;
-}
\ No newline at end of file
+}
+
+/* Media query for devices with a max width of 768px */
+@media (max-width: 768px) {
+    #header {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    #header h1 {
+        margin-bottom: 10px;
+        font-size: 1.2em;
+    }
+
+    #content {
+        padding: 10px;
+    }
+
+    .sidebar {
+        width: 100%;
+        margin: 10px 0;
+        float: none;
+    }
+
+    .table {
+        width: 100%;
+        overflow-x: auto;
+    }
+
+    .infobox {
+        width: 100%;
+        margin: 10px 0;
+        float: none;
+    }
+
+    figure,
+    .tmulti {
+        width: 100%;
+        display: block;
+        margin: 10px 0;
+    }
+}
+
+/* Media query for devices with a max width of 480px */
+@media (max-width: 480px) {
+    #header {
+        padding: 10px;
+    }
+
+    #header h1 {
+        font-size: 1em;
+    }
+
+    #search-form input[type="text"],
+    #search-form select,
+    #search-form button {
+        padding: 10px;
+    }
+
+    #content {
+        padding: 5px;
+    }
+
+    h1 {
+        font-size: 1.5em;
+    }
+
+    .sidebar {
+        width: 100%;
+        margin: 5px 0;
+    }
+
+    .table th,
+    .table td {
+        padding: 5px;
+    }
+
+    .infobox {
+        width: 100%;
+        margin: 5px 0;
+    }
+
+    figure,
+    .tmulti {
+        width: 100%;
+        margin: 5px 0;
+    }
+}