.gallery.gallery-tagged { .gallery-title { display: block; text-align: left; } .gallery-summary { text-align: left; max-width: 828px; } .gallery-filters { @include media-breakpoint-down(lg) { margin-top: var(--spacing-06); } } h2 { margin-top: 0; } } .gallery { margin-top: var(--spacing-10); .gallery-tagged-tags-container-spacing { padding: 0 var(--spacing-09); margin-bottom: var(--spacing-16); h2 { margin-bottom: var(--spacing-09); } } .gallery-filters { float: right; margin-bottom: var(--spacing-11); display: flex; flex-wrap: wrap; gap: var(--spacing-04); @include media-breakpoint-down(lg) { float: none; } a { text-decoration: none; &:visited { color: var(--green-50); } &:hover { color: var(--green-60); } &.active { font-weight: 600; text-decoration: underline; } } } .gallery-header { margin-bottom: var(--spacing-09); @include media-breakpoint-up(lg) { max-width: $templates-search-max-width; display: flex; flex-direction: column; align-items: center; margin-left: auto; margin-right: auto; } } .gallery-title { display: flex; flex-direction: column; align-items: center; justify-content: center; margin-bottom: var(--spacing-06); text-align: center; } .gallery-summary { @include body-lg; text-align: center; margin-bottom: 0; } .tagged-header-container { margin-bottom: var(--spacing-16); } .top-picks-banner { padding: 0; margin: 0 auto var(--spacing-16) auto; h2 { @include heading-xl; } .doc-rows-container { margin-top: var(--spacing-09); } } .recent-templates-container { padding: 0 var(--spacing-09); margin-bottom: var(--spacing-16); h2 { margin-bottom: var(--spacing-09); @include heading-xl; } } .no-articles-matching { color: var(--neutral-90); font-weight: 600; @include heading-lg; } .template-summary { margin-top: var(--spacing-02); margin-bottom: var(--spacing-09); @include body-lg; } @mixin line-clamp { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .popular-tags-list, .gallery-container { --bs-gutter-x: var(--spacing-09); row-gap: var(--spacing-11); } .gallery-container { align-items: baseline; } .gallery-thumbnail { a { @extend .link-black-text; display: inline-block; width: 100%; .thumbnail, .thumbnail-tag { position: relative; &::before { content: ''; background: var(--neutral-90); opacity: 0; position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.15s ease-in-out; } } .thumbnail-tag { &::before { border-radius: var(--border-radius-medium); } } .thumbnail { &::before { border-radius: var(--border-radius-base); } } &:hover { .thumbnail, .thumbnail-tag { &::before { transition: opacity 0.15s ease-in-out; opacity: 0.08; } } } } .thumbnail, .thumbnail-tag { margin: 0 0 var(--spacing-08) 0; img { width: 100%; display: inline-block; } } .thumbnail { img { @include shadow-lg; border-radius: var(--border-radius-base); } } .caption { // Override Server Pro template styles background: none; border: none; margin-top: var(--spacing-04); } .caption-description { color: var(--neutral-70); margin-bottom: 0; @include line-clamp; } .author-name { margin-top: var(--spacing-04); color: var(--neutral-70); font-weight: 600; } .gallery-list-item-title { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-04); .badge-container { display: inline-block; text-wrap: nowrap; .badge:not(:first-child) { margin-left: var(--spacing-04); } } * { flex-basis: content; cursor: inherit; } } .caption-title { color: var(--neutral-90); font-weight: 600; @include heading-md; @include line-clamp; } } .related-tags-top-spacing { margin-top: var(--spacing-16); } .gallery-tagged-template-tags-container { display: flex; flex-wrap: wrap; gap: var(--spacing-05); .badge-content { padding-left: var(--spacing-02); padding-right: var(--spacing-02); } } .pagination { margin-top: var(--spacing-13); } .popular-tags { margin-top: 0; margin-bottom: var(--spacing-16); a { width: 100%; } } .popular-tags, .recent-docs, .featured-docs { h2 { margin-bottom: var(--spacing-09); } } .recent-docs + .featured-docs { margin-top: var(--spacing-16); } .gallery-item-title { * { vertical-align: middle; } h1 { display: inline; margin: unset; } h1:has(+ .gallery-item-title-badge-container) { margin-right: var(--spacing-06); } .gallery-item-title-badge-container { display: inline-flex; justify-content: center; align-items: center; gap: var(--spacing-04); .badge-content { font-size: var(--font-size-02); line-height: var(--line-height-02); } } } .template-details-container { @include heading-xs; @include media-breakpoint-up(lg) { gap: var(--spacing-04) var(--spacing-11); display: grid; grid-template-columns: auto auto; } .template-detail { @include media-breakpoint-down(lg) { margin-bottom: var(--spacing-06); } @include media-breakpoint-up(lg) { display: contents; } div:first-child { white-space: nowrap; } &.tags > div { margin-top: var(--spacing-06); } } } .gallery-abstract { word-break: break-word; hyphens: auto; a { hyphens: none; } p:last-child { margin-bottom: 0; } } .cta-links-container { margin-top: var(--spacing-09); margin-bottom: var(--spacing-09); .cta-links { display: inline-flex; align-items: flex-start; flex-wrap: wrap; gap: var(--spacing-06); .btn { margin: 0; // gap will handle spacing } } } .gallery-large-pdf-preview { img { width: 100%; } @include shadow-md; } .related-tags-header { margin-top: var(--spacing-16); } .related-tags { margin-top: var(--spacing-09); max-height: 61px; overflow: hidden; &.all-tags { max-height: none; // min-height prevents elements below the tags from moving upwards // when Show More is clicked min-height: 102px; } .badge-link { max-width: 200px; } } .show-more-tags { margin-top: var(--spacing-06); } @include media-breakpoint-up(lg) { .template-item-left-section { padding-right: var(--spacing-10); } .template-item-right-section { padding-left: var(--spacing-10); } } @include media-breakpoint-down(md) { .template-item-left-section { .badge-link-list { margin-top: var(--spacing-04); } } .template-item-right-section { margin-top: var(--spacing-11); } } }