Gallery redesign - Gallery item page redesign (#21034)

* adding .gallery at top level

* adding styling for heading and buttons

* removing padding under cta-links

* removing find more templates text

* adding field title styling

* adding .details-container for spacing between the content

* adding a colon after field-title

* moving tags styling into badge.scss file to make it more generic to use

* moving section tag one level below to use it as a flex containe for adding gap property

* adding field-description class

* fixing the image width

* adding some padding between the content

* renaming  a file to a more descriptive name

* adding .gallery-abstract class in the scss file

* adding colons in pug file

* adding previous-page-link and its container class

* moving paddings to larger screens only and adding a top margin for mobile screens]

* adding some spacing above tags on mobile view when heading and tags are vertically aligned

* adding styling to the badge and removing extra padding from h1 to match figma

* lint:fix

* swapping position of top-pick and official badges

* adding path and itemPlural

* removing unused top margin

GitOrigin-RevId: a5c9b731b69ecfe2b752015c410e10a0fec2c704

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;
+  }
+}

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);

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;
 

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);
+    }
+  }
 }