From 4f9a056beae31b3adbbf1c8475abf0ee4e8cb43e Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <5312836+lawshe@users.noreply.github.com>
Date: Thu, 17 Oct 2024 07:35:13 -0500
Subject: [PATCH] Merge pull request #21146 from overleaf/jel-begin-card

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

GitOrigin-RevId: 822a91bb156222b61cbf671d78522fc942d4e5b4
---
 .../web/app/views/_mixins/begin_now_card.pug  | 39 ++++++++++---------
 .../bootstrap-5/components/blog-posts.scss    |  5 +++
 .../bootstrap-5/components/pagination.scss    |  2 +-
 .../stylesheets/bootstrap-5/pages/cms.scss    |  8 ----
 .../bootstrap-5/pages/content.scss            |  4 ++
 .../bootstrap-5/pages/templates-v2.scss       |  4 ++
 6 files changed, 34 insertions(+), 28 deletions(-)

diff --git a/services/web/app/views/_mixins/begin_now_card.pug b/services/web/app/views/_mixins/begin_now_card.pug
index fe06649cb4..d53881996f 100644
--- a/services/web/app/views/_mixins/begin_now_card.pug
+++ b/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")}
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 544337cd4a..3f5ea7ab7e 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/blog-posts.scss
+++ b/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;
+  }
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss b/services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss
index 54de4761d2..2273267958 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/components/pagination.scss
+++ b/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;
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
index c938da7148..fab835fae4 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/cms.scss
+++ b/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);
 }
diff --git a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss b/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
index c07ad0f2da..c7f10a48e7 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/content.scss
+++ b/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 {
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 e5c5c60de3..e2378dc334 100644
--- a/services/web/frontend/stylesheets/bootstrap-5/pages/templates-v2.scss
+++ b/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);