Template:OSProject/style.css

.tpl-osproject-grid {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
}

.tpl-osproject-tile {
 background: #f8f9fa;
 border: 1px solid #eaecf0;
 padding: 1em 2em;
 border-radius: 2px;
 margin: 0 1em 1em 0;
 box-sizing: border-box;
 flex: 0 1 360px;

 /* Make each tile a flex container so that we can control where the growth goes
  * in this case, make the growth to the the tagline so that the links are always
  * aligned at the bottom of each row's tiles.
  */
 display: flex;
 flex-flow: column;
 justify-content: flex-start;
}
.tpl-osproject-tile:focus {
 border-color: #36c;
 outline: none;
 box-shadow: 0 1px 4px 0 rgba( 0, 0, 0, 0.25 );
}
.tpl-osproject-tile:not(:focus) .tpl-osproject-tile-title,
.tpl-osproject-tile:not(:focus) .tpl-osproject-tile-tagline {
 cursor: pointer;
}

.tpl-osproject-tile-title {
 margin-top: 0;
 line-height: 1;
 display: block; /* override Minerva `.in-block` */
}
.tpl-osproject-tile-title a,
.tpl-osproject-tile-title a.external {
 color: inherit;
}
.tpl-osproject-tile-title > span.mw-headline {
 display: inline; /* override Minerva `.in-block > span` */
 width: auto; /* override Minerva `.in-block .mw-headline` */
}

.tpl-osproject-tile-lang {
 float: right;
}
.tpl-osproject-tile-lang em {
 color: #72777d;
 font-weight: normal;
 font-style: normal;
}
.tpl-osproject-tile-lang em:before {
 content: '(';
}
.tpl-osproject-tile-lang em:after {
 content: ')';
}

.tpl-osproject-tile-tagline {
 font-size: 1.2em;
 line-height: 1.4;
 flex-grow: 2;
}

.tpl-osproject-tile-links {
 margin: 1em 0 0 0;
}

.tpl-osproject-tile-links li {
 list-style-position: inside;
 margin: 0 0 0.1em 0;
}
.tpl-osproject-tile-links li:first-child {
 list-style: none;
}

.tpl-osproject-tile-links .tpl-osproject-tile-links-more {
 color: #72777d;
 cursor: pointer;
 list-style: none;
 margin-left: -4px;
 padding-left: 20px;
 background: url(https://upload.wikimedia.org/wikipedia/commons/thumb/a/a1/OOjs_UI_icon_caretDown.svg/24px-OOjs_UI_icon_caretDown.svg.png) 4px 50% / 12px no-repeat;
}
.tpl-osproject-tile-links-more:hover {
 text-decoration: underline;
 background-color: #eaecf0;
 color: #54595d;
}
.tpl-osproject-tile-links-more ~ li,
.tpl-osproject-tile:focus .tpl-osproject-tile-links-more,
html.ve-activated body .tpl-osproject-tile-links-more {
 display: none;
}
.tpl-osproject-tile:focus .tpl-osproject-tile-links-more ~ li,
html.ve-activated body .tpl-osproject-tile-links-more ~ li {
 display: list-item;
}

.tpl-osproject-screenreader {
 display: block;
 position: absolute !important;
 clip: rect( 1px, 1px, 1px, 1px );
 width: 1px;
 height: 1px;
 margin: -1px;
 border: 0;
 padding: 0;
 overflow: hidden;
}