From 88d20e6e6e3ca8d97980a823a6233bcf9b828f41 Mon Sep 17 00:00:00 2001
From: Kumi <git@kumi.email>
Date: Sun, 25 Aug 2024 16:55:16 +0200
Subject: [PATCH] feat(style): add evolution charts and improve gallery styling

Extended CSS with new styling rules for evolution charts, enhancing the
visual presentation and interactivity of clade elements. Improved gallery
layout with responsive styling for a more user-friendly and aesthetically
pleasing experience, especially on smaller screens.

Fixes #20
---
 src/wikimore/static/css/style.css | 188 +++++++++++++++++++++++++++++-
 1 file changed, 182 insertions(+), 6 deletions(-)

diff --git a/src/wikimore/static/css/style.css b/src/wikimore/static/css/style.css
index cc31f8e..ac1b314 100644
--- a/src/wikimore/static/css/style.css
+++ b/src/wikimore/static/css/style.css
@@ -206,16 +206,16 @@ h1 {
     text-align: center;
 }
 
-section > .category-link {
+section>.category-link {
     display: inline;
     font-size: 0.8em;
 }
 
-section > .category-link::before {
+section>.category-link::before {
     content: "[";
 }
 
-section > .category-link::after {
+section>.category-link::after {
     content: "]";
 }
 
@@ -292,6 +292,124 @@ section > .category-link::after {
     color: #555;
 }
 
+/* Evolution charts styling */
+.clade {
+    overflow-x: auto;
+    overflow-y: hidden;
+}
+
+.clade p {
+    font-size: inherit;
+}
+
+.clade {
+    border-spacing: 0;
+    margin: 0;
+    font-size: 100%;
+    line-height: 100%;
+    border-collapse: separate;
+    width: auto;
+}
+
+.clade .clade {
+    width: 100%;
+    line-height: inherit;
+}
+
+.clade .clade-label {
+    min-width: 0.2em;
+    width: 0.1em;
+    padding: 0.1em 0.15em;
+    vertical-align: bottom;
+    text-align: center;
+    border-left: 1px solid;
+    border-bottom: 1px solid;
+    white-space: nowrap;
+}
+
+.clade .clade-label::before,
+.clade .clade-slabel::before {
+    content: "\2060 ";
+}
+
+.clade .clade-fixed-width {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.clade .clade-fixed-width:hover {
+    overflow: visible;
+}
+
+.clade .clade-label.first {
+    border-left: none;
+    border-right: none;
+}
+
+.clade .clade-label.reverse {
+    border-left: none;
+    border-right: 1px solid;
+}
+
+.clade .clade-slabel {
+    padding: 0 0.15em;
+    vertical-align: top;
+    text-align: center;
+    border-left: 1px solid;
+    white-space: nowrap;
+}
+
+.clade .clade-slabel:hover {
+    overflow: visible;
+}
+
+.clade .clade-slabel.last {
+    border-left: none;
+    border-right: none;
+}
+
+.clade .clade-slabel.reverse {
+    border-left: none;
+    border-right: 1px solid;
+}
+
+.clade .clade-bar {
+    vertical-align: middle;
+    text-align: left;
+    padding: 0 0.5em;
+    position: relative;
+}
+
+.clade .clade-bar.reverse {
+    text-align: right;
+    position: relative;
+}
+
+.clade .clade-leaf {
+    border: 0;
+    padding: 0;
+    text-align: left;
+}
+
+.clade .clade-leafR {
+    border: 0;
+    padding: 0;
+    text-align: right;
+}
+
+.clade .clade-leaf.reverse {
+    text-align: right;
+}
+
+.linkA {
+    background-color: yellow;
+}
+
+.linkB {
+    background-color: green;
+}
+
+
 /* Navbox styling */
 .navbox {
     padding: 3px;
@@ -506,13 +624,57 @@ figcaption,
 }
 
 .mw-file-element {
-    display: block;
-    margin-left: auto;
-    margin-right: auto;
     max-width: 100%;
     height: auto;
 }
 
+/* General styling for gallery */
+.mw-gallery-packed {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    padding: 0;
+    list-style-type: none;
+    margin: 0;
+}
+
+.mw-gallery-packed .gallerybox {
+    margin: 5px;
+    flex: 0 1 auto;
+}
+
+.mw-gallery-packed .thumb {
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    padding: 5px;
+    text-align: center;
+}
+
+.mw-gallery-packed .thumb img {
+    max-width: 100%;
+    height: auto;
+    display: block;
+}
+
+.mw-gallery-packed .gallerytext {
+    text-align: center;
+    font-size: 0.9em;
+    padding: 5px;
+}
+
+.mw-gallery-packed .gallerytext i {
+    font-style: italic;
+}
+
+.mw-gallery-packed .gallerytext a {
+    color: #1e90ff;
+    text-decoration: none;
+}
+
+.mw-gallery-packed .gallerytext a:hover {
+    text-decoration: underline;
+}
+
 /* Reference styling */
 .reflist-lower-alpha .references {
     list-style-type: lower-alpha;
@@ -631,6 +793,20 @@ span {
         float: none;
         clear: none;
     }
+
+    .mw-gallery-packed {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .mw-gallery-packed .gallerybox {
+        width: 100%;
+        max-width: 300px;
+    }
+
+    .mw-gallery-packed .thumb {
+        max-width: 100%;
+    }
 }
 
 /* Media query for devices with a max width of 480px */