github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-21 20:47:08 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #20428 from overleaf/jel-cms-bootstrap5

Browse source 
[web] Updates for CMS pages using BS5 and new site design

GitOrigin-RevId: 08b66d1bfb3062a229f16a44efe70527f6fa67a7
This commit is contained in:
Jessica Lawshe 2024-09-18 09:36:08 -05:00 committed by Copybot
parent edf2c68c51
commit a066e96b92
4 changed files with 63 additions and 72 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
services/web/frontend/stylesheets/bootstrap-5/components/image.scss
View file

@ -1,3 +1,3 @@
.img-rounded {
border-radius: $border-radius-large;
border-radius: var(--border-radius-large);
}

6
services/web/frontend/stylesheets/bootstrap-5/components/styled-text.scss
View file

@ -1,9 +1,9 @@
.text-with-bg {
@extend .dm-mono;
padding: 0 10px;
border-radius: 10px;
margin-top: 5px;
padding: 0 var(--spacing-04);
border-radius: var(--border-radius-medium);
margin-top: var(--spacing-02);
// will make all spans content inline while avoiding overflowing the viewport in mobile
// https://developer.mozilla.org/en-US/docs/Web/CSS/display#flow-root

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

@ -3,84 +3,79 @@
/about/*, /contact, /legal, /blog/*, /for/*, /events/*
*/
.cms-page {
&.website-redesign {
h1 {
font-size: 2rem; // 32px
h1 {
font-size: 2rem; // 32px
line-height: 1.333;
}
h2 {
font-size: 1.5rem; // 24px
}
.sales-contact-form-left-column {
.sales-contact-form-heading-title {
font-size: 2.25rem;
font-family: var(-font-family-san-serif);
font-style: normal;
font-weight: 600;
line-height: 1.333;
padding-top: 8px;
padding-right: 50px;
}
h2 {
font-size: 1.5rem; // 24px
}
.sales-contact-form-left-column {
.sales-contact-form-heading-title {
font-size: 2.25rem;
font-family: var(-font-family-san-serif);
font-style: normal;
font-weight: 600;
line-height: 1.333;
padding-top: 8px;
padding-right: 50px;
}
@include media-breakpoint-up(sm) {
.names-container {
display: flex;
gap: 21px;
}
}
.checkbox-label {
font-size: 16px;
font-weight: 400;
@include media-breakpoint-up(sm) {
.names-container {
display: flex;
gap: 21px;
}
}
/* Buttons */
// correct color property set on <a> above:
// TODO: check if reset needed
// .reset-btns;
// .alert {
// .alert;
// }
// .alert-info {
// .btn-info {
// .btn-alert-info;
// }
// }
.checkbox-label {
font-size: 16px;
font-weight: 400;
}
}
.p-no-text-nodes:has(.btn) {
margin-top: var(--spacing-09);
/* Buttons */
// correct color property set on <a> above:
// TODO: check if reset needed
// .reset-btns;
// .alert {
// .alert;
// }
// .alert-info {
// .btn-info {
// .btn-alert-info;
// }
// }
@include media-breakpoint-down(md) {
.btn {
width: 100%;
margin-left: 0;
margin-top: var(--spacing-05);
}
.p-no-text-nodes:has(.btn) {
margin-top: var(--spacing-09);
.btn:first-child {
margin-top: 0;
}
@include media-breakpoint-down(md) {
.btn {
width: 100%;
margin-left: 0;
margin-top: var(--spacing-05);
}
.btn:first-child {
margin-top: 0;
}
}
}
.btn + .btn {
margin-left: var(--spacing-06);
}
.btn + .btn {
margin-left: var(--spacing-06);
}
.optional-text {
font-size: 14px;
}
.optional-text {
font-size: 14px;
}
.section-row {
margin: 0 auto;
// TODO: check max-widths with UX team for new design
// used to have different sizes for different breakpoints but probably not needed
max-width: 1344px;
max-width: 1440px;
}
padding-bottom: 0;

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

@ -1,6 +1,6 @@
/*
Styling for content pages
Including: about, home, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page
Including: about, blog, /for/__, legal, contact, portals, wiki, gallery, plans, and interstitial payment page
*/
// TODO: consolidate cms.scss and content.scss
@ -41,9 +41,7 @@
section
*/
section {
// TODO: static pages look to use --spacing-16 (96px) for total vertical padding
// should that be the default going forward?
padding: var(--spacing-08) var(--spacing-05);
padding: var(--spacing-16) var(--spacing-05) 0 var(--spacing-05);
// TODO: confirm if we will still support this and if so what colors to use
// &.color-block {
@ -90,9 +88,7 @@
// }
.section-row {
// TODO: check max-widths with UX team for new design
// used to have different sizes for different breakpoints but probably not needed
max-width: 1344px;
max-width: 1440px;
}
}