github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-09-16 02:52:31 -04:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #16441 from overleaf/mf-fix-new-homepage-issues

Browse source 
[web] Fix new homepage visual issues

GitOrigin-RevId: 240d6a557982173c6a890de3a5ab0770b4ac8b64
This commit is contained in:
M Fahru 2024-01-10 09:51:00 -07:00 committed by Copybot
parent 41735fbd89
commit 94594701e3
2 changed files with 170 additions and 49 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
services/web/frontend/stylesheets/app/homepage.less
View file

@ -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;
}
}

102
services/web/frontend/stylesheets/app/website-redesign.less
View file

@ -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;
}
}
}
}