|
|
| Line 1: |
Line 1: |
| /* CSS placed here will be applied to all skins */ | | /* Landing page */ |
| #ca-talk { display:none!important; }
| | .landing-grid-header { |
| | | display: flex; |
| .mainpage-contents .tile-halves {
| | flex-direction: column; |
| flex: 1;
| | flex-wrap: wrap; |
| margin-right: 0.9rem;
| | margin: 20px; |
| }
| |
| | |
| .mainpage-contents .tile-halves:hover .tile-top img {
| |
| transform: scale(1.04);
| |
| }
| |
| | |
| .mainpage-contents .tile-halves:last-child {
| |
| margin-right: 0;
| |
| }
| |
| | |
| .mainpage-contents .tile-top {
| |
| height: 4.5rem;
| |
| position: relative;
| |
| }
| |
| | |
| .mainpage-contents .tile-top h2 a {
| |
| display: block;
| |
| text-align: center;
| |
| text-decoration: none;
| |
| line-height: 4.5rem;
| |
| padding-left: 0.45rem;
| |
| }
| |
| | |
| .mainpage-contents h2 {
| |
| margin: 0;
| |
| padding: 0;
| |
| }
| |
| | |
| .tile-row {
| |
| display: flex;
| |
| flex-flow: row wrap;
| |
| margin-bottom: 1em;
| |
| }
| |
| | |
| .tile-halves {
| |
| display: flex;
| |
| flex-flow: row wrap;
| |
| border: 1px solid #e4eaee;
| |
| background: #ffffff;
| |
| 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: #949eaa;
| |
| overflow: hidden;
| |
| padding: 0;
| |
| height: 13vw;
| |
| max-height: 12em;
| |
| }
| |
| | |
| .tile-top.tile-image a {
| |
| width: 100%;
| |
| }
| |
| | |
| .tile-top.tile-image img {
| |
| width: 100%;
| |
| height: auto;
| |
| transition: 0.4s ease-out;
| |
| }
| |
| | |
| .tile-bottom {
| |
| background: #ffffff;
| |
| border-top: 1px solid #e4eaee;
| |
| 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;
| |
| }
| |
| | |
| .tile-bottom.read-more {
| |
| background: #f9fafa;
| |
| transition: 0.3s ease-out;
| |
| }
| |
| | |
| .tile-bottom.read-more a {
| |
| color: #949eaa;
| |
| font-weight: bold;
| |
| text-align: right;
| |
| } | | } |
|
| |
|
| .tile-bottom.read-more:hover { | | @media(min-width: 500px) { |
| background: #f2f4f4; | | .landing-grid-header { |
| | flex-direction: row; |
| | } |
| } | | } |
|
| |
|
| .tile-bottom.read-more:hover .arrow { | | .landing-grid-item { |
| transform: translateX(50%);
| | background: rgba(0, 0, 0, 0.02); |
| | border: 1px solid #eee; |
| | border-radius: 4px; |
| | text-align: center; |
| | font-weight: 600; |
| | flex: 1 0 25%; |
| | margin: 10px; |
| | padding: 10px 0; |
| } | | } |
|
| |
|
| .tile-bottom.read-more .arrow { | | .landing-grid-item .floatnone { |
| filter: invert(43%) sepia(50%) hue-rotate(175deg);
| | min-height: 80px; |
| margin-left: 0.4em;
| | line-height: 80px; |
| transition: 0.3s ease-out;
| |
| } | | } |