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.
This commit is contained in:
Kumi 2024-08-20 07:53:35 +02:00
parent 1e31998f50
commit 69cf1656fe
Signed by: kumi
GPG key ID: ECBCC9082395383F

View file

@ -206,12 +206,23 @@ h1 {
text-align: center; text-align: center;
} }
.category-link { section > .category-link {
display: inline; display: inline;
margin-right: 5px;
font-size: 0.8em; font-size: 0.8em;
} }
section > .category-link::before {
content: "[";
}
section > .category-link::after {
content: "]";
}
.category-link {
display: none;
}
/* General table styling */ /* General table styling */
.table { .table {
margin: 1em auto; margin: 1em auto;
@ -351,7 +362,6 @@ h1 {
width: 300px; width: 300px;
background-color: #f9f9f9; background-color: #f9f9f9;
border: 1px solid #ddd; border: 1px solid #ddd;
padding: 10px;
font-size: small; font-size: small;
border-collapse: collapse; border-collapse: collapse;
max-width: 100%; max-width: 100%;
@ -407,6 +417,23 @@ h1 {
margin-top: 5px; 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 styling */
figure, figure,
.tmulti, .tmulti,
@ -452,7 +479,7 @@ figcaption,
} }
.mw-halign-center { .mw-halign-center {
display: block; display: flex;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
text-align: center; text-align: center;
@ -540,6 +567,14 @@ span {
text-decoration: underline; 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 query for devices with a max width of 768px */
@media (max-width: 768px) { @media (max-width: 768px) {
#header { #header {