MediaWiki:Common.less/tiles.less

/* --------------------- tiles --------------------- */// mainpage.less relies on this; check before changing anything:root { --byline-arrow-filter: invert(29%) sepia(0%) saturate(376%) hue-rotate(172deg) brightness(87%) contrast(80%); // match --byline-color --tile-border-color: #cabe9b; --tile-background-color: #f9f3eb; --tile-link-button-color: #f5e9db; --tile-link-button-highlight-color: saturate( darken( #e2d2ba, 2.5% ), 2% ); --tile-dark-color: @white; --tile-dark-bg: @shuttle-gray; --tile-dark-link-color: #ccc; --tile-dark-byline-color: fade( @white, 70% ); --tile-dark-header-color: @white;}.tile { background: var(--tile-background-color); border: 1px solid var(--tile-border-color); box-shadow: @box-shadow; padding: 1.5em 2em 1em; max-width: 40em; h2 { font-size: 1.4em; font-weight: bold; border: none; margin: 0 0 .4em; } // reduce spacing when byline and heading appear together // (which should be the only way bylines appear) .byline + h2 { margin-top: -0.5em; } &.dark { color: var(--tile-dark-color); background: var(--tile-dark-bg); border: none; box-shadow: @box-shadow-dark; h2 { color: var(--tile-dark-header-color); } a { color: var(--tile-dark-link-color); } .byline { color: var(--tile-dark-byline-color); } }}.byline { font-size: .9em; color: var(--byline-color); a { color: var(--byline-color); }}/* --------------------- tile halves --------------------- */// contains .tile or .tile-halves.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: @box-shadow; h2 { font-size: 1.4em; font-weight: bold; border: none; margin: 0 0 .4em; } .byline + h2 { margin-top: -0.5em; }}// goes inside .tile-halves.tile-top { width: 100%; padding: 1.3rem 1.5rem .6rem; &.tile-image { display: flex; align-items: center; // vertically center images background-color: var(--byline-color); overflow: hidden; padding: 0; height: 13vw; max-height: 12em; transition: .4s ease-out; .tile-halves:hover & img { transform: scale(1.1); transition: .5s ease-out; } span { width: 100%; } img { width: 100%; object-fit: cover; max-height: 200px; transition: .4s ease-out; } }}// goes inside .tile-halves.tile-bottom { background: var(--tile-background-color); border-top: 1px solid var(--tile-border-color); width: 100%; padding: 1rem 1.5rem .6rem; &.link-button { align-self: flex-end; // have link stick to the bottom padding: 0; a { display: block; text-align: center; padding: .75em 1.5em .8em; text-decoration: none; } } // must be used in conjunction with .link-button &.read-more { background: var(--tile-link-button-color); transition: .3s ease-out; a { color: var(--byline-color); font-weight: bold; text-align: right; } &:hover { background: var(--tile-link-button-highlight-color); .arrow { transform: translateX(50%); } } .arrow { filter: var(--byline-arrow-filter); margin-left: .4em; transition: .3s ease-out; } }}/* --------------------- oswf tile --------------------- */.tile.oswf-day { margin-left: .5em;}.oswf-tile { margin: 1em; &.oswf-complete { opacity: 0.65; } .oswf-summary { font-size: 105%; line-height: 1.6; margin-top: -0.4em; } .oswf-img { display: block; max-width: 75px; float: right; img { max-width: 100%; height: auto; } } .oswf-guidance { border-top: 1px solid @gallery; padding-top: 1em; }}