Template:MC-Section/styles.css

/* * Styles for formatting and  lists * * Each list (opened by ) is a flexbox which wraps horizontally. * * Each item is another flexbox, oriented vertically (no wrapping). * * Within the item, the cover and data area are separate, and the data fields * are (mostly) spans with display:block; */

/* allow floaty things to push this out of the way */ .ws-mc-section { display: flow-root; } .ws-mc-header { text-align: center; font-weight: bold; padding: 3px 0; box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px; margin-top: 4ex; margin-bottom: 1ex; border-radius: 3px; }

.ws-mc-list { display: flex; flex-wrap: wrap; align-items: stretch; /*justify-content: center;*/ /* not sure if centered is better */ }

.ws-mc-item { position: relative; display: flex; flex-direction: column; justify-content: space-between; align-items:center; width: 15em; border-radius: 3px; margin: 1ex 1ex; text-align:center; background-color: white; color: #202122; box-shadow: rgba(50, 50, 93, 0.25) 0 6px 12px -2px, rgba(0, 0, 0, 0.3) 0 3px 7px -3px; }

.ws-mc-item:hover { box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px; }

/*.ws-mc-highlight {*/ /*}*/

.ws-mc-item-cover { padding: 1em; margin: 0 auto; flex-grow: 1; }

/* shrink iamge to fix if needed */ .ws-mc-item-cover img { max-width: 100%; height: auto; }

.ws-mc-item-data { font-size: 92%; padding: 1em; }

.ws-mc-item-data > p > span { display: block; }

/* avoid doubling up padding/margin at bottom of cards */ .ws-mc-item-data > p { margin-bottom: 0.5ex; }

/* these two go together */ .ws-mc-item-data .ws-mc-item-flag, .ws-mc-item-data .ws-mc-item-year{ display: inline-block; }

.ws-mc-item-author { font-weight: bold; }

.ws-mc-item-subject { color: green; font-size: 92%; }

.ws-mc-item-progress { width: 100%; }

.ws-mc-item-progress .wst-progress-bar { border: none; border-top: 1px solid gray; height: 10px; border-radius: 0; }

/* */ /* Sprint highlight ribbon */ .ws-mc-sprint-marker{ position: absolute; right: -5px; top: -5px; z-index: 1; overflow: hidden; width: 150px; height: 150px; text-align: right; } .ws-mc-sprint-marker span { font-size: 12px; color: #fff; text-align: center; font-weight: bold; line-height: 20px; transform: rotate(45deg); width: 170px; display: block; background: #7DB57D; color: #202122; /*background: linear-gradient(#73CC73 0%, #5CA35C 100%);*/ box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1); position: absolute; top: 44px; right: -32px; }

.ws-mc-sprint-marker span::before { content: ''; position: absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #79A70A; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79A70A; }

.ws-mc-sprint-marker span::after { content: ''; position: absolute; right: 0%; top: 100%; z-index: -1; border-right: 3px solid #79A70A; border-left: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #79A70A; }

/* -- * Mobile formatting */

body.skin-minerva .ws-mc-list { justify-content: center; }

/* on ipads, make sure we can get three tiles */ @media only screen and (max-width: 800px) { body.skin-minerva .ws-mc-item { width: 190px; /* allows 3 cols on an ipad */ } }

/* on phones, make the tiles smaller (but not on tablets) */ @media only screen and (max-width: 600px) { body.skin-minerva .ws-mc-item { width: 135px; /* allows 2 cols on a galaxy/iphone */ } }