[web] Migrate general Pug pages to BS5 (2) (#26121)

* Reapply "[web] Migrate general Pug pages to BS5 (#25937)"

This reverts commit c0afd7db2dde6a051043ab3e85a969c1eeb7d6a3.

* Fixup layouts in `404` and `closed` pages

Oversight from https://github.com/overleaf/internal/pull/25937

* Use `.container-custom-sm` and `.container-custom-md` instead of inconsistent page widths

* Copy error-pages.less

* Convert error-pages.lss to SCSS

* Revert changes to pug files

* Nest CSS in `.error-container` so nothing leaks to other pages

* Remove `font-family-serif`

* Use CSS variables

* Remove `padding: 0` from `.full-height`: it breaks the layout in BS5

* Fix error-actions buttons

* Revert changes to .container-custom...

* Update services/web/app/views/external/planned_maintenance.pug

Co-authored-by: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>

* Update services/web/app/views/general/closed.pug

Co-authored-by: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>

---------

Co-authored-by: Rebeka Dekany <50901361+rebekadekany@users.noreply.github.com>
GitOrigin-RevId: 313f04782a72fae7cc66d36f9d6467bad135fd60

services/web/app/views/general/400.pug

@@ -2,7 +2,6 @@ extends ../layout/layout-no-js
 
 block vars
 	- metadata = { title: 'Something went wrong' }
-	- bootstrap5PageStatus = 'disabled'
 
 block body
 	body.full-height
@@ -27,5 +26,4 @@ block body
 							| .
 						p.error-actions
 							a.error-btn(href="javascript:history.back()") Back
-							|  
 							a.btn.btn-secondary(href="/") Home

services/web/app/views/general/404.pug

@@ -1,8 +1,5 @@
 extends ../layout-marketing
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	main.content.content-alt#main-content
 		.container

services/web/app/views/general/500.pug

@@ -2,7 +2,6 @@ extends ../layout/layout-no-js
 
 block vars
 	- metadata = { title: 'Something went wrong' }
-	- bootstrap5PageStatus = 'disabled'
 
 block body
 	body.full-height

services/web/app/views/general/closed.pug

@@ -1,13 +1,10 @@
 extends ../layout-marketing
 
-block vars
-	- bootstrap5PageStatus = 'disabled'
-
 block content
 	main.content#main-content
 		.container
 			.row
-				.col-md-8.col-md-offset-2.text-center
+				.col-lg-8.offset-lg-2.text-center
 					.page-header
 						h1 Maintenance
 					p

services/web/app/views/general/unsupported-browser.pug

@@ -2,7 +2,6 @@ extends ../layout/layout-no-js
 
 block vars
 	- metadata = { title: 'Unsupported browser' }
-	- bootstrap5PageStatus = 'disabled'
 
 block body
 	body.full-height

services/web/app/views/layout/layout-no-js.pug

@@ -13,6 +13,6 @@ html(lang="en")
 		link(rel="icon", href="/favicon.ico")
 
 		if buildCssPath
-			link(rel="stylesheet", href=buildCssPath())
+			link(rel="stylesheet", href=buildCssPath('', 5))
 
 block body

services/web/frontend/stylesheets/bootstrap-5/base/layout.scss

@@ -91,3 +91,7 @@ hr {
 .container-custom-sm {
   max-width: 400px;
 }
+
+.full-height {
+  height: 100%;
+}

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

@@ -37,6 +37,7 @@
 @import 'editor/math-preview';
 @import 'editor/references-search';
 @import 'editor/editor-survey';
+@import 'error-pages';
 @import 'website-redesign';
 @import 'group-settings';
 @import 'templates-v2';

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

@@ -0,0 +1,56 @@
+.error-container {
+  display: flex;
+  align-items: center;
+
+  &.full-height {
+    margin-top: calc(-1 * ($header-height + var(--spacing-08)) / 2);
+  }
+
+  .error-details {
+    flex: 1 1 50%;
+    padding: var(--spacing-08);
+    max-width: 90%;
+
+    @include media-breakpoint-up(sm) {
+      padding: var(--spacing-11);
+    }
+  }
+
+  .error-status {
+    @include heading-lg;
+
+    margin-bottom: var(--spacing-08);
+    color: var(--content-secondary);
+  }
+
+  .error-description {
+    @include heading-sm;
+
+    color: var(--content-disabled-dark);
+    margin-bottom: var(--spacing-08);
+  }
+
+  .error-box {
+    background-color: var(--bg-light-tertiary);
+    padding: var(--spacing-04);
+    font-family: $font-family-monospace;
+    margin-bottom: var(--spacing-08);
+  }
+
+  .error-actions {
+    margin-top: var(--spacing-11);
+    display: flex;
+    gap: var(--spacing-06);
+  }
+
+  .error-btn {
+    @extend .btn;
+    @extend .btn-primary;
+
+    display: block;
+
+    @include media-breakpoint-up(sm) {
+      display: inline-block;
+    }
+  }
+}