diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss index 1b7534c125..1d2dbb8337 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/badge.scss @@ -97,3 +97,25 @@ $max-width: 160px; margin-left: 5px; font-weight: var(--badge-font-weight); } + +.tags { + .tags-list { + list-style: none; + padding: 0; + display: flex; + gap: var(--spacing-05); + flex-wrap: wrap; + } + + .badge-tag { + padding: 0 var(--bs-badge-padding-x); + } + + li { + display: inline-flex; + } + + a { + font-size: small; + } +} diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss index 106bcd83fd..5403ac8b2c 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss @@ -150,30 +150,6 @@ } } - .tags { - margin-top: var(--margin-md); - - .tags-list { - list-style: none; - padding: 0; - display: flex; - gap: var(--spacing-05); - flex-wrap: wrap; - } - - .badge-tag { - padding: 0 var(--bs-badge-padding-x); - } - - li { - display: inline-flex; - } - - a { - font-size: small; - } - } - pre { border: 1px solid var(--neutral-40); border-radius: var(--border-radius-base); diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/link.scss b/services/web/frontend/stylesheets/bootstrap-5/components/link.scss index 0acc6554ad..190e14106a 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/components/link.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/components/link.scss @@ -1,3 +1,7 @@ +.previous-page-link-container { + margin-bottom: var(--spacing-09); +} + .previous-page-link { @include body-sm; diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss index 89cd76ddd0..8b846d481c 100644 --- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss +++ b/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss @@ -190,4 +190,119 @@ row-gap: var(--spacing-11); } } + + .gallery-item-title { + display: inline-flex; + gap: var(--spacing-06); + + h1 { + margin: unset; + } + + .gallery-item-title-badge-container { + display: 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 { + display: flex; + flex-direction: column; + gap: var(--spacing-04); + } + + .gallery-abstract { + word-break: break-word; + hyphens: auto; + + a { + hyphens: none; + } + } + + .field-title { + color: var(--neutral-70); + font-weight: 600; + + @include heading-xs; + } + + .field-description { + @include heading-xs; + } + + .section-tags { + display: flex; + gap: var(--spacing-04); + } + + .cta-links { + margin: var(--spacing-09) 0; + + .col-md-12 { + display: inline-flex; + gap: var(--spacing-04); + padding: unset; + } + } + + .gallery-large-pdf-preview { + img { + width: 100%; + } + + @include shadow-md; + } + + @include media-breakpoint-down(lg) { + .gallery-container { + display: grid; + grid-template-columns: 50% 50%; + + &.use-percent { + .gallery-thumbnail { + align-content: end; + width: 100%; + } + } + } + } + + @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) { + .gallery-container { + grid-template-columns: 100%; + + &.use-percent { + .gallery-thumbnail { + padding-left: unset; + padding-right: unset; + } + } + } + + .template-item-right-section { + margin-top: var(--spacing-11); + } + + .section-tags { + margin-top: var(--spacing-04); + } + } }