|
|
| (One intermediate revision by the same user not shown) |
| 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 */
| |
| :root {
| |
| --byline-arrow-filter: invert(29%) sepia(0%) saturate(376%) hue-rotate(172deg) brightness(87%) contrast(80%);
| |
| --tile-border-color: #cabe9b;
| |
| --tile-background-color: #f9f3eb;
| |
| --tile-link-button-color: #f5e9db;
| |
| --tile-link-button-highlight-color: #dfccb0;
| |
| }
| |
|
| |
| .tile {
| |
| background: var(--tile-background-color);
| |
| border: 1px solid var(--tile-border-color);
| |
| 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;
| |
| border: 1px solid var(--tile-border-color);
| |
| background: var(--tile-background-color);
| |
| 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;
| |
| background-color: var(--byline-color);
| |
| 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 {
| |
| background: var(--tile-background-color);
| |
| border-top: 1px solid var(--tile-border-color);
| |
| 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;
| |
| } | | } |
