From 69cf1656fe3bc9d8502c03d7d73ae6294a1a217f Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Tue, 20 Aug 2024 07:53:35 +0200
Subject: [PATCH] feat(css): improve category link and infobox styling

Enhanced the display rules for category links by enclosing them in brackets and setting them to be hidden by default outside of sections. Improved infobox image dimensions and alignment to ensure consistent display. Adjusted media queries for larger device padding.

Fixes #12.
---
 src/wikimore/static/css/style.css | 43 ++++++++++++++++++++++++++++---
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/wikimore/static/css/style.css b/src/wikimore/static/css/style.css
index e609922..867c97d 100644
--- a/src/wikimore/static/css/style.css
+++ b/src/wikimore/static/css/style.css
@@ -206,12 +206,23 @@ h1 {
     text-align: center;
 }
 
-.category-link {
+section > .category-link {
     display: inline;
-    margin-right: 5px;
     font-size: 0.8em;
 }
 
+section > .category-link::before {
+    content: "[";
+}
+
+section > .category-link::after {
+    content: "]";
+}
+
+.category-link {
+    display: none;
+}
+
 /* General table styling */
 .table {
     margin: 1em auto;
@@ -351,7 +362,6 @@ h1 {
     width: 300px;
     background-color: #f9f9f9;
     border: 1px solid #ddd;
-    padding: 10px;
     font-size: small;
     border-collapse: collapse;
     max-width: 100%;
@@ -407,6 +417,23 @@ h1 {
     margin-top: 5px;
 }
 
+.infobox-image .mw-default-size,
+.infobox-signature .mw-file-element {
+    max-width: 300px;
+    height: auto;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    float: unset;
+}
+
+.infobox-caption {
+    text-align: center;
+    font-style: italic;
+    margin-top: 5px;
+    display: block;
+}
+
 /* Figure styling */
 figure,
 .tmulti,
@@ -452,7 +479,7 @@ figcaption,
 }
 
 .mw-halign-center {
-    display: block;
+    display: flex;
     margin-left: auto;
     margin-right: auto;
     text-align: center;
@@ -540,6 +567,14 @@ span {
     text-decoration: underline;
 }
 
+/* Media query for larger devices */
+@media (min-width: 769px) {
+    #content {
+        padding-left: 5em;
+        padding-right: 5em;
+    }
+}
+
 /* Media query for devices with a max width of 768px */
 @media (max-width: 768px) {
     #header {