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; } }