|
|
| Line 21: |
Line 21: |
| clear: left; | | clear: left; |
| margin: 0 0.5em 0.5em 0; | | margin: 0 0.5em 0.5em 0; |
| }
| |
|
| |
| /* Mainpage */
| |
| .mainpage-contents {
| |
| grid-area: content;
| |
| grid-template-columns: repeat(6, 1fr);
| |
| }
| |
|
| |
| .mainpage-contents .tile-halves {
| |
| flex: 1;
| |
| }
| |
|
| |
| .mainpage-contents .tile-top {
| |
| position: relative;
| |
| }
| |
|
| |
| .mainpage-contents h2 {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
|
| |
| .mainpage-contents .tile-bottom.link-button a {
| |
| padding: 0.75em 0.2em;
| |
| }
| |
|
| |
| /* Tiles */
| |
| .tile {
| |
| box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
| |
| padding: 1.5em 2em 1em;
| |
| max-width: 40em;
| |
| }
| |
|
| |
| .tile h2 {
| |
| font-size: 1.4em;
| |
| font-weight: bold;
| |
| border: none;
| |
| margin: 0 0 0.4em;
| |
| }
| |
|
| |
| .tile .byline + h2 {
| |
| margin-top: -0.5em;
| |
| }
| |
|
| |
| .tile-row {
| |
| display: flex;
| |
| flex-flow: row wrap;
| |
| margin-bottom: 1em;
| |
| }
| |
|
| |
| .tile-halves {
| |
| display: flex;
| |
| flex-flow: row wrap;
| |
| box-shadow: 0 0.25rem 0.35rem -0.25rem rgba(0, 0, 0, 0.1);
| |
| }
| |
|
| |
| .tile-halves h2 {
| |
| font-size: 1.4em;
| |
| font-weight: bold;
| |
| border: none;
| |
| margin: 0 0 0.4em;
| |
| }
| |
|
| |
| .tile-halves .byline + h2 {
| |
| margin-top: -0.5em;
| |
| }
| |
|
| |
| .tile-top {
| |
| width: 100%;
| |
| padding: 1.3rem 1.5rem 0.6rem;
| |
| }
| |
|
| |
| .tile-top.tile-image {
| |
| display: flex;
| |
| align-items: center;
| |
| overflow: hidden;
| |
| padding: 0;
| |
| height: 13vw;
| |
| max-height: 12em;
| |
| transition: 0.4s ease-out;
| |
| }
| |
|
| |
| .tile-halves:hover .tile-top.tile-image img {
| |
| transform: scale(1.1);
| |
| transition: 0.5s ease-out;
| |
| }
| |
|
| |
| .tile-top.tile-image span {
| |
| width: 100%;
| |
| }
| |
|
| |
| .tile-top.tile-image img {
| |
| width: 100%;
| |
| object-fit: cover;
| |
| max-height: 200px;
| |
| transition: 0.4s ease-out;
| |
| }
| |
|
| |
| .tile-bottom {
| |
| width: 100%;
| |
| padding: 1rem 1.5rem 0.6rem;
| |
| }
| |
|
| |
| .tile-bottom.link-button {
| |
| align-self: flex-end;
| |
| padding: 0;
| |
| }
| |
|
| |
| .tile-bottom.link-button a {
| |
| display: block;
| |
| text-align: center;
| |
| padding: 0.75em 1.5em 0.8em;
| |
| text-decoration: none;
| |
| } | | } |
Latest revision as of 06:46, 28 September 2025
/* CSS placed here will be applied to all skins */
/* Pixel art scaling */
img{
-ms-interpolation-mode: nearest-neighbor; /* For older IE */
image-rendering: -moz-crisp-edges; /* For Firefox */
image-rendering: -o-crisp-edges; /* For Opera */
image-rendering: -webkit-optimize-contrast; /* For Webkit (Chrome, Safari) */
image-rendering: crisp-edges; /* Standard, but older browsers might need prefixes */
image-rendering: pixelated; /* Modern standard, often preferred */
}
/* Infoboxes */
.infobox-right {
float: right;
clear: right;
margin: 0 0 0.5em 0.5em;
}
.infobox-left {
float: left;
clear: left;
margin: 0 0.5em 0.5em 0;
}
