PrivateCoffee/wikimore
5
1
Fork 1
Code Issues 11 Pull requests Projects Releases Packages Wiki Activity Actions

feat(style): add evolution charts and improve gallery styling

Browse source 
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
This commit is contained in:
Kumi 2024-08-25 16:55:16 +02:00
parent 08b03e7989
commit 88d20e6e6e
Signed by: kumi
GPG key ID: ECBCC9082395383F
1 changed files with 182 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

188
src/wikimore/static/css/style.css
View file

@ -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 */