app/assets/stylesheets/spotlight/_pages.scss in blacklight-spotlight-0.20.1 vs app/assets/stylesheets/spotlight/_pages.scss in blacklight-spotlight-0.20.2

- old
+ new

@@ -114,79 +114,88 @@ .sidenav.contacts .contact-photo + div[itemprop] ~ div[itemprop] { margin-left: 87px; } .item-grid-block { - h3 {margin-top: 0;} + h3 { margin-top: 0; } + + .text-col { + float: none; + width: auto; + } + .items-col { margin-bottom: 1em; z-index: 1; display: flex; flex-flow: row wrap; justify-content: space-between; align-content: stretch; - .box { - align-self: auto; - order: 1; - margin: auto; - flex: 1 0 25%; + @media (max-width: $screen-sm-max) { + margin-bottom: $line-height-computed; + } + } - .thumbnail { - border: 1px solid $gray-lighter; - padding: 0; - margin: 0; - border-radius: 0; + .box { + align-self: auto; + flex: 1 0 25%; + margin: auto; + min-width: 25%; + order: 1; + padding: 5px; - a { - & > img { - border: 1px solid $gray-light; - width: 100%; - height: 100%; - object-fit: cover; - overflow: hidden; - } - } + @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { + min-width: 128px; + } + } - } + .thumbnail { + border: 1px solid $gray-lighter; + border-radius: 0; + margin: 0; + padding: 0; - min-width: 25%; - height: 120px; + img { + border: 1px solid $gray-light; + width: 100%; + height: 110px; + object-fit: cover; + overflow: hidden; + @media (min-width: $screen-lg-min) { - height: 170px; // default: no sidebar, no text column + height: 160px; // default: no sidebar, no text column // reduce height if on a page with a sidebar or text column, because will be less wide .col-md-9 & { - height: 135px; + height: 125px; } } - padding: 5px; } + } - .item-0 { - flex: 3 1 41%; - } + .item-0 { + flex: 3 1 41%; + } - .item-2 { - flex: 2 1 33%; - } + .item-2 { + flex: 2 1 33%; + } - .item-0, .item-1, .item-2 { - height: 220px; - order: 0; + .item-0, + .item-1, + .item-2 { + order: 0; + + .thumbnail img { + height: 210px; @media (min-width: $screen-lg-min) { - height: 280px; // default: no sidebar, no text column + height: 270px; // default: no sidebar, no text column // reduce height if on a page with a sidebar or text column, because will be less wide .col-md-9 & { - height: 240px; + height: 230px; } } } - } - @media (max-width: $screen-sm-max) { - &.items-block .items-col {margin-bottom: $line-height-computed;} - } - @media (min-width: $screen-md-min) and (max-width: $screen-md-max) { - &.items-block .items-col .box {min-width: 128px;} } } .preview-btn, .preview-exit-btn { float: left;