Merge pull request #21146 from overleaf/jel-begin-card

[web] Spacing adjustments around "\begin {now}" card on gallery and blog

GitOrigin-RevId: 822a91bb156222b61cbf671d78522fc942d4e5b4

services/web/app/views/_mixins/begin_now_card.pug

@@ -2,22 +2,23 @@ mixin begin_now_card()
 	- var registerURL = '/register'
 	- var plansURL = '/user/subscription/plans'
 	- var isUserLoggedIn = !!getSessionUser()
-	
-	div.card.card-pattern.cta-card
-		.card-body
-			p.dm-mono
-				span.font-size-display-xs
-					span.text-purple-bright \begin
-					span.text-green-bright {
-					span now
-					span.text-green-bright }
-			p #{translate("discover_why_people_worldwide_trust_overleaf", {count: 18})}
-			p
-				if !isUserLoggedIn
-					a.btn.btn-primary.card-link(
-						href=registerURL
-					) #{translate("sign_up_for_free")}
-				a.card-link(
-					class = isUserLoggedIn ? 'btn btn-primary' : 'btn btn-secondary'
-					href=plansURL
-				) #{translate("explore_all_plans")}
+
+	.begin-now-card
+		div.card.card-pattern
+			.card-body
+				p.dm-mono
+					span.font-size-display-xs
+						span.text-purple-bright \begin
+						span.text-green-bright {
+						span now
+						span.text-green-bright }
+				p #{translate("discover_why_people_worldwide_trust_overleaf", {count: 18})}
+				p
+					if !isUserLoggedIn
+						a.btn.btn-primary.card-link(
+							href=registerURL
+						) #{translate("sign_up_for_free")}
+					a.card-link(
+						class = isUserLoggedIn ? 'btn btn-primary' : 'btn btn-secondary'
+						href=plansURL
+					) #{translate("explore_all_plans")}

services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss

@@ -41,6 +41,7 @@
 
 .blog {
   margin-top: var(--spacing-16);
+  margin-bottom: var(--spacing-16);
 
   img {
     max-width: 100%;
@@ -197,4 +198,8 @@
       font-size: small;
     }
   }
+
+  .pagination {
+    margin: var(--spacing-09) 0 0 0;
+  }
 }

services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss

@@ -3,7 +3,7 @@
 .pagination {
   display: inline-block;
   padding-left: 0;
-  margin: var(--spacing-08) 0;
+  margin: 0;
 
   > li {
     display: inline-block;

services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss

@@ -525,14 +525,6 @@
   }
 }
 
-.card-pattern.cta-card {
-  .font-size-display-xs {
-    @include media-breakpoint-down(lg) {
-      font-size: var(--font-size-08);
-    }
-  }
-}
-
 .contact-form-error-container {
   padding-bottom: var(--spacing-08);
 }

services/web/frontend/stylesheets/bootstrap-5/pages/content.scss

@@ -29,6 +29,10 @@
     border-color: var(--neutral-30);
   }
 
+  .begin-now-card {
+    margin: var(--spacing-16) 0;
+  }
+
   // TODO: only used on about page. Confirm with UX changes needed
   // .container-small {
   //   section .section-row {

services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss

@@ -192,6 +192,10 @@
     }
   }
 
+  .pagination {
+    margin-top: var(--spacing-13);
+  }
+
   .popular-tags {
     .gallery-thumbnail {
       margin: 0 0 var(--spacing-06);