From 0d266da02e80c1f8a3bed84d8fb71fec86a7fe84 Mon Sep 17 00:00:00 2001
From: Jessica Lawshe <jessica.lawshe@overleaf.com>
Date: Mon, 5 Dec 2022 09:32:08 -0600
Subject: [PATCH] Merge pull request #10774 from overleaf/jel-new-page-style

[web] Updates to new page style

GitOrigin-RevId: 4d29b4642efef608164fb9fc6875c1618565d231
---
 .../web/frontend/stylesheets/app/content_page.less  |  2 +-
 .../web/frontend/stylesheets/components/lists.less  |  1 +
 services/web/frontend/stylesheets/core/page.less    | 13 +++++++++++++
 3 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/services/web/frontend/stylesheets/app/content_page.less b/services/web/frontend/stylesheets/app/content_page.less
index c06e805b9d..d6f7d07f30 100644
--- a/services/web/frontend/stylesheets/app/content_page.less
+++ b/services/web/frontend/stylesheets/app/content_page.less
@@ -47,7 +47,7 @@
   }
 
   .page-header {
-    margin-top: 0;
+    margin-top: 60px;
   }
 
   /*
diff --git a/services/web/frontend/stylesheets/components/lists.less b/services/web/frontend/stylesheets/components/lists.less
index 5d7ced87b2..755941664c 100644
--- a/services/web/frontend/stylesheets/components/lists.less
+++ b/services/web/frontend/stylesheets/components/lists.less
@@ -30,6 +30,7 @@
   @icon-bullet-list-icon-size: 30px;
   ul {
     list-style: none;
+    margin-top: 30px;
     padding-left: 20px;
   }
 
diff --git a/services/web/frontend/stylesheets/core/page.less b/services/web/frontend/stylesheets/core/page.less
index 70a1ebc8d7..5377e90615 100644
--- a/services/web/frontend/stylesheets/core/page.less
+++ b/services/web/frontend/stylesheets/core/page.less
@@ -20,4 +20,17 @@
   video {
     clip-path: inset(0 0); // fix Safari bug that will sometimes add border
   }
+
+  .section-row {
+    margin: 0 auto;
+    /* match .col-sm-12 */
+    /* @grid-gutter-width  is used for margins */
+    max-width: (@screen-sm) - @grid-gutter-width!important;
+    @media (min-width: @screen-md-min) {
+      max-width: (@screen-md) - @grid-gutter-width!important;
+    }
+    @media (min-width: @screen-lg-min) {
+      max-width: (@screen-lg) - @grid-gutter-width!important;
+    }
+  }
 }