5-layouts edit

listing-layout  edit

NEW CLASSES. THIS HAS NOT BEEN UPDATED IN CASCADE YET. Used for listing blocks and listing pages

l-listing__title
l-listing__author l-listing__date

l-listing__content. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

l-listing__title

l-listing__content. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.

l-listing__title

l-listing__content. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.

Copy
Edit
<!-- components/5-layouts/listing-layout.php --> <section class="l-listing"> <article class="l-listing__entry"> <a class="l-listing__image" href=""><img src="https://via.placehold.it/100x100" width="100" height="100" alt=""></a> <a class="l-listing__title">l-listing__title</a> <div class="l-listing__metadata"> <span class="l-listing__author">l-listing__author</span> <span class="l-listing__date">l-listing__date</span> </div> <p class="l-listing__content">l-listing__content. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p> </article> <article class="l-listing__entry"> <a class="l-listing__image" href=""><img src="https://via.placehold.it/100x100" width="100" height="100" alt=""></a> <a class="l-listing__title">l-listing__title</a> <p class="l-listing__content">l-listing__content. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet.</p> </article> <article class="l-listing__entry"> <a class="l-listing__title">l-listing__title</a> <p class="l-listing__content">l-listing__content. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit. Facere possimus, omnis voluptas assumenda est, omnis dolor repellendus.</p> </article> </section>
Cancel
Copy
Copy
Edit
/* scss/5-layouts/_listing-layout.scss */ .user_content { h5 + .l-listing, h6 + .l-listing { margin-top: toRem(13); } .l-listing { &__entry { overflow: auto; margin-bottom: toRem(remove-unit($listing-content-nextentry) - 16); margin-left: 0; list-style-type: none; overflow-wrap: break-word; & > *:last-child { // make sure last child doesn't have a bottom margin // to ensure consistent spacing between entries margin-bottom: 0; } } &__title { display: block; margin-bottom: toRem(remove-unit($listing-title-next) - 16); letter-spacing: $h6-letter-spacing; font-size: $h6-font-size; font-weight: $h6-font-weight; line-height: $h6-line-height; overflow-wrap: break-word; &.-directory-name { margin-top: -6px; font-size: toRem(22); line-height: 1.6; } } &__metadata { margin-top: 3px; margin-bottom: toRem(remove-unit($listing-byline-content) - 16); color: $listing-byline-color; font-size: $listing-byline-font-size; font-weight: 400; line-height: $listing-byline-line-height; } &__date { font-weight: bold; &:last-child:not(:first-child):before { // add | if not the only element display: inline-block; margin: 0 5px; content: "| "; font-weight: normal; } } &__metadata.l-listing__date:last-child:not(:first-child):before, &__author { font-style: italic; } &__image { float: left; max-width: 100px; height: 100px; margin-top: 0; margin-right: toRem(15); margin-bottom: toRem(7); margin-bottom: toRem(remove-unit($listing-content-nextentry) - 49); overflow: hidden; } &__image + .l-listing__title, &__image ~ .l-listing__content { @include breakpoint(600px) { margin-left: 115px; } } &__label { font-weight: bold; &.-directory-title { display: inline-block; line-height: 1.3; } } // to show thumbs on mobile // add .-show-mobile-thumbs to .l-listing or .l-listing__entry &.-show-mobile-thumbs, &__entry.-show-mobile-thumbs { .l-listing__image { display: block; & + .l-listing__title, & ~ .l-listing__content { margin-left: 0; @include breakpoint($mobile-to-wide-mobile-breakpoint) { margin-left: 115px; } } } &.directory_listing .l-listing__content { // always margin for directory with thumb margin-left: 0 !important; } &.directory_listing .l-listing__image ~ .l-listing__content { // always margin for directory with thumb margin-left: 115px !important; } } } }
Cancel