From 301cf9077818ac3f2503f63c180673189f8cea33 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sun, 18 Aug 2024 07:06:27 +0200
Subject: [PATCH] feat: add hatnote styling and improve code readability

Introduced new styles for hatnote elements to enhance visual distinction with margin, padding, background color, border, and font adjustments. Also, improved readability of existing CSS by reformatting multi-line selectors for figures and file elements.

These updates aim to make the content presentation more engaging and the CSS code easier to maintain. Fixes #7.
---
 src/wikimore/static/css/style.css | 19 ++++++++++++++++---
 1 file changed, 16 insertions(+), 3 deletions(-)

diff --git a/src/wikimore/static/css/style.css b/src/wikimore/static/css/style.css
index 67d920a..7999d42 100644
--- a/src/wikimore/static/css/style.css
+++ b/src/wikimore/static/css/style.css
@@ -154,6 +154,16 @@ h1 {
     display: none;
 }
 
+.hatnote {
+    margin: 1em 0;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    font-size: small;
+    font-style: italic;
+}
+
+/* Navbox styling */
 .navbox {
     padding: 3px;
     background-color: #f9f9f9;
@@ -337,7 +347,8 @@ h1 {
 }
 
 /* Figure styling */
-figure, .tmulti {
+figure,
+.tmulti {
     margin: 1em 0;
     padding: 10px;
     background-color: #f9f9f9;
@@ -345,7 +356,8 @@ figure, .tmulti {
     display: inline-block;
 }
 
-figure img, .tmulti .mw-file-element {
+figure img,
+.tmulti .mw-file-element {
     max-width: 100%;
     height: auto;
     border: 1px solid #ddd;
@@ -355,7 +367,8 @@ figure img, .tmulti .mw-file-element {
     margin-right: auto;
 }
 
-figcaption, .thumbcaption {
+figcaption,
+.thumbcaption {
     margin-top: 10px;
     font-size: small;
     text-align: left;