From 94594701e313a85c89ccfd59c6f5761fcf174d3a Mon Sep 17 00:00:00 2001 From: M Fahru Date: Wed, 10 Jan 2024 09:51:00 -0700 Subject: [PATCH] Merge pull request #16441 from overleaf/mf-fix-new-homepage-issues [web] Fix new homepage visual issues GitOrigin-RevId: 240d6a557982173c6a890de3a5ab0770b4ac8b64 --- .../frontend/stylesheets/app/homepage.less | 117 +++++++++++++----- .../stylesheets/app/website-redesign.less | 102 ++++++++++++--- 2 files changed, 170 insertions(+), 49 deletions(-) diff --git a/services/web/frontend/stylesheets/app/homepage.less b/services/web/frontend/stylesheets/app/homepage.less index a875d22f6a..80ab0d77e0 100644 --- a/services/web/frontend/stylesheets/app/homepage.less +++ b/services/web/frontend/stylesheets/app/homepage.less @@ -331,48 +331,81 @@ } .website-redesign { - .home-top { + .home-animation-text-container { padding-top: @header-height; - p { - margin: 0; + display: flex; + flex-direction: column; + align-items: center; + + .home-begin-text { + font-weight: 400; + display: flex; + color: #5f5ff0; + font-size: 4rem; + line-height: 1.25; + font-family: 'DM Mono', monospace; + align-self: flex-start; + width: 100%; + margin-top: 0; + font-weight: 400; + + @media (max-width: @screen-sm-max) { + text-align: center; + flex-direction: column; + align-items: center; + font-size: 2.25rem; + } } - .home-top-card { - margin-top: @margin-lg; - display: flex; - flex-direction: column; - align-items: center; + .home-parenthesis-text { + color: #bbdbb8; + font-size: 4rem; + line-height: 1.25; + font-family: 'DM Mono', monospace; + display: inherit; - .home-top-begin-text { - font-weight: 400; - display: flex; - color: #5f5ff0; - font-size: 4rem; - line-height: 1.25; + #home-animation-text { font-family: 'DM Mono', monospace; - align-self: flex-start; - width: 100%; - margin-top: 0; - font-weight: 400; - - @media (max-width: @screen-sm-max) { - text-align: center; - flex-direction: column; - align-items: center; - font-size: 2.25rem; - } + color: @neutral-70; } - .home-top-parenthesis-text { - font-weight: 500; - color: #bbdbb8; - font-size: 4rem; - line-height: 1.25; - font-family: 'DM Mono', monospace; - display: inherit; + @media (max-width: @screen-sm-max) { + font-size: 2.25rem; + } + } + } - @media (max-width: @screen-sm-max) { - font-size: 2.25rem; + .home-top-text { + text-align: center; + font-size: 1.25rem; + line-height: 1.4; + margin-bottom: 0; + + @media (max-width: @screen-sm-max) { + font-size: 1.125rem; + line-height: 1.33; + padding: 0 100px; + } + + @media (max-width: @screen-xs-max) { + padding: 0 20px; + } + + // force different line for desktop on both text + > span:first-of-type { + display: block; + + @media (max-width: @screen-sm-max) { + display: inline; + } + } + + // need to have an extra space only for mobile + // since on mobile all the text are inline + .dash-text { + @media (max-width: @screen-sm-max) { + &::after { + content: ' '; } } } @@ -484,6 +517,16 @@ } } + .home-millions-user-text { + text-align: center; + font-size: 1.25rem; + margin-bottom: 5px; + + @media (max-width: @screen-sm-max) { + font-size: 1rem; + } + } + .home-university-logos { display: flex; justify-content: space-between; @@ -512,4 +555,10 @@ display: block; } } + + .home-plans-footer { + text-align: center; + font-size: 1.125rem; + line-height: 1.333; + } } diff --git a/services/web/frontend/stylesheets/app/website-redesign.less b/services/web/frontend/stylesheets/app/website-redesign.less index d84a122644..4c9c0b1e25 100644 --- a/services/web/frontend/stylesheets/app/website-redesign.less +++ b/services/web/frontend/stylesheets/app/website-redesign.less @@ -133,6 +133,18 @@ box-shadow: 0px 2px 4px 0px rgba(30, 37, 48, 0.16); border-top: 8px solid #2f4858; padding: 48px 40px 48px 40px; + + &.info-card-big-text { + h3 { + font-size: 1.5rem; + line-height: 1.333; + } + + p { + font-size: 1.125rem; + line-height: 1.333; + } + } } } } @@ -153,13 +165,33 @@ } .features-card-description { - h3 { - font-size: 1.875rem; // 30px - line-height: 2.5rem; // 40px + padding-top: 16px; + + h3.features-card-ul-title { + font-size: 1.875rem; + line-height: 1.5; + } + + h3.features-card-title { + font-size: 1.5rem; + line-height: 1.4; + margin-bottom: 8px; } p { - margin-bottom: 10px; + margin-bottom: 16px; + font-size: 1.125rem; + line-height: 1.333; + + @media (max-width: @screen-sm-max) { + font-size: 1rem; + line-height: 1.375; + } + } + + a.green-link { + margin-top: 4px; + display: block; } ul { @@ -168,11 +200,16 @@ margin: 0; li { - margin-bottom: 16px; + margin-bottom: 12px; + font-size: 1.125rem; + line-height: 1.333; // flex is needed in the case of "premium" label being on the same line display: flex; @media (max-width: @screen-sm-max) { + font-size: 1rem; + line-height: 1.375; + // only for label-premium that appears directly as a child of li > .label-premium { margin-left: auto; @@ -274,6 +311,13 @@ } } + .cta-card-text { + font-size: 1.125rem; + line-height: 1.333; + margin: 8px 0; + text-align: center; + } + .cta-card-quote { font-size: 1.875rem; // 30px font-weight: 600; @@ -350,7 +394,7 @@ border-top-left-radius: 24px; border-top-right-radius: 0; border-bottom-left-radius: 24px; - padding: 96px 64px; + padding: 96px 56px; @media (max-width: @screen-sm-max) { border-top-left-radius: 24px; @@ -361,7 +405,18 @@ } blockquote { - margin-bottom: auto; + hyphens: auto; + flex-grow: 1; + } + + .testimonial-media-author { + font-size: 1.125rem; + line-height: 1.333; + + @media (max-width: @screen-sm-max) { + font-size: 1rem; + line-height: 1.375; + } } } @@ -457,6 +512,9 @@ } .link-with-arrow { + font-size: 1.125rem; + line-height: 1.333; + i.material-symbols-rounded { vertical-align: middle; padding-bottom: 3px; @@ -515,12 +573,13 @@ // most of these are here to replace rules from core/type.less blockquote { border-left: none; - font-size: 28px; + font-size: 1.875rem; + line-height: 1.333; font-weight: 600; - line-height: 38px; quotes: '\0022''\0022'; // use straight (" ") instead of curly ones (“ ”) padding: unset; margin: unset; + font-family: 'Noto Sans', sans-serif; &::after { visibility: visible; @@ -536,19 +595,19 @@ &::after, &::before { - font-size: 28px; - line-height: 38px; + font-size: 1.875rem; + line-height: 1.333; } @media (max-width: @screen-sm-max) { - font-size: 24px; - line-height: 32px; + font-size: 1.5rem; + line-height: 1.333; &::after, &::before { visibility: visible; - font-size: 24px; - line-height: 32px; + font-size: 1.5rem; + line-height: 1.333; } } } @@ -590,4 +649,17 @@ .label-premium { height: 20px; // override default height } + + .header-description { + p { + font-size: 1.25rem; + line-height: 1.4; + margin-bottom: 0; + + @media (max-width: @screen-sm-max) { + font-size: 1.125rem; + line-height: 1.33; + } + } + } }