agw/overleaf-cep
1
0
Fork 0
mirror of https://github.com/yu-i-i/overleaf-cep.git synced 2026-05-23 09:09:36 +02:00
Code Issues Packages Projects Releases Wiki Activity

[B2C] Bootstrap 5 migration of why-latex page (#25133)

Browse Source 
* adding temporary rendering of the BS5 version of why-latex page

* adding first section on the page with new styling, that is compatible with BS5

* adding next section

* adding cards and copy pasting existing styling

* using variables instead of direct values

* fixing the styling of h3 in info-card

* adding next section and its styling

* adding variables

* adding features card section

* adding the next features card

* adding the next features card section

* adding another card section

* adding last feature card section

* adding next section

* adding next section

* adding next section

* adding begin now card

* running npm run lint:styles:fix

* making some style changes to match BS3 version for smaller screen under lg in BS5

* adding a width fix to image

* changing breakpoints to bring consistency in stylesheet

* adding vars

* adding split test

* removing the temporary rendering solution for the BS5 page

* adding splitTestHandler Stub

GitOrigin-RevId: 1257dff09e5371d68e102972e3544559800ca339
This commit is contained in:
Davinder Singh
2025-05-20 10:51:24 +01:00
committed by Copybot
parent efd55ffe97
commit bb24aa46d1
1 changed files with 161 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

161
services/web/frontend/stylesheets/bootstrap-5/pages/website-redesign.scss
View File

@@ -262,12 +262,173 @@
height: 20px;
}
.centered-block {
@include media-breakpoint-up(lg) {
text-align: center;
}
}
.header-description {
p {
font-size: var(--font-size-05);
line-height: var(--line-height-03);
margin-bottom: 0;
@include media-breakpoint-down(lg) {
font-size: var(--font-size-04);
line-height: var(--line-height-02);
}
}
}
.resources {
@include media-breakpoint-up(lg) {
display: flex;
/* equal heights */
flex-wrap: wrap;
}
.resources-card {
display: flex;
flex-flow: column wrap;
margin-bottom: 48px;
align-content: flex-start;
@include media-breakpoint-down(lg) {
margin-bottom: 16px;
}
img {
width: 56px;
}
h3 {
width: 100%;
font-size: var(--font-size-05);
}
a {
margin-top: auto;
@include heading-xs;
}
p {
margin-bottom: var(--spacing-05);
}
}
}
.green-round-background {
@extend .round-background;
background: var(--green-30);
}
.why-latex {
h1 {
margin-top: var(--spacing-08);
}
.sub-heading {
font-size: var(--font-size-04);
}
}
.info-cards {
padding: 0;
@include media-breakpoint-up(lg) {
display: flex;
/* equal heights */
flex-wrap: wrap;
}
.info-card-container {
margin-bottom: var(--spacing-06);
padding-left: var(--spacing-06);
padding-right: var(--spacing-06);
h3 {
font-size: var(--font-size-05);
line-height: var(--line-height-04);
}
.info-card {
border-radius: 8px;
height: 100%;
box-shadow:
0 2px 4px 0 #1e253014,
0 4px 12px 0 #1e25301f;
border-top: 8px solid var(--sapphire-blue);
padding: var(--spacing-09) var(--spacing-10);
&.info-card-big-text {
h3 {
font-size: var(--font-size-06);
line-height: var(--line-height-02);
}
p {
font-size: var(--font-size-04);
line-height: var(--line-height-02);
}
}
i.material-symbols {
color: var(--sapphire-blue);
}
}
}
}
.heading-section-md-align-left {
@include media-breakpoint-down(lg) {
display: flex;
flex-direction: column;
align-items: baseline;
h2 {
text-align: left;
}
p {
text-align: left;
}
}
}
.responsive-button-container {
display: flex;
margin-top: var(--spacing-08);
gap: var(--spacing-06);
&.centered-buttons {
justify-content: center;
}
&.align-left-button-sm {
@include media-breakpoint-down(md) {
justify-content: start;
}
}
@include media-breakpoint-down(md) {
width: 100%;
flex-direction: column;
}
}
.overleaf-sticker {
width: unset;
@include media-breakpoint-down(lg) {
width: 74px; // 70% of 106px
}
}
.features-card {
display: flex; /* equal heights */
flex-wrap: wrap;