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:
parent
1e31998f50
commit
69cf1656fe
1 changed files with 39 additions and 4 deletions
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue