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 #16226 from overleaf/mf-website-redesign-home-issues-2

Browse source 
[web] Fix styling issues on homepage redesign

GitOrigin-RevId: 4115680abaa6c44ed901c696321558a808851cde
This commit is contained in:
M Fahru 2023-12-14 10:26:01 -07:00 committed by Copybot
parent 114149ddf6
commit 097e41f9ae
2 changed files with 54 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -344,6 +344,7 @@
align-items: center;
.home-top-begin-text {
font-weight: 400;
display: flex;
color: #5f5ff0;
font-size: 4rem;
@ -363,6 +364,7 @@
}
.home-top-parenthesis-text {
font-weight: 500;
color: #bbdbb8;
font-size: 4rem;
line-height: 1.25;
@ -481,4 +483,33 @@
margin-top: 2px;
}
}
.home-university-logos {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
> img {
max-width: 145px;
}
// 991px
@media (max-width: @screen-sm-max) {
justify-content: center;
gap: 50px;
}
}
.home-templates-button-desktop {
@media (max-width: @screen-sm-max) {
display: none;
}
}
.home-templates-button-mobile {
display: none;
@media (max-width: @screen-sm-max) {
display: block;
}
}
}

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

@ -27,6 +27,11 @@
font-weight: 600;
}
// override .btn default style
.btn {
font-weight: 600;
}
.img-rounded {
// TODO: design specifies 'border-radius-large' which is 5px, but uses 16px
border-radius: 16px;
@ -164,21 +169,18 @@
li {
margin-bottom: 16px;
// flex is needed in the case of "premium" label being on the same line
display: flex;
@media (max-width: @screen-sm-max) {
i {
height: 25px; // force height if text wraps to multiple lines
}
.label-premium {
// only for label-premium that appears directly as a child of li
> .label-premium {
margin-left: auto;
height: 20px; // force height if text wraps to multiple lines
align-self: center;
}
}
h4 {
display: flex;
margin-top: 0;
margin-bottom: 8px;
font-size: 20px;
@ -247,15 +249,23 @@
.cta-card-title {
font-size: 3.25rem; // 52px
font-weight: 500;
font-family: 'DM Mono', monospace;
margin-bottom: 8px;
line-height: 1.3;
&.title-mono {
> span {
// override Noto Sans
font-family: 'DM Mono', monospace;
}
}
span.purple-color {
color: #939aff;
font-weight: 400;
}
span.lime-color {
font-weight: 500;
color: #7ee787;
}
@ -306,18 +316,6 @@
}
.integrations-card {
h3 {
display: flex;
align-items: center;
@media (max-width: @screen-sm-max) {
.label-premium {
margin-left: auto;
height: 20px;
}
}
}
.integrations-icons {
img {
width: 6rem; // 96px
@ -588,4 +586,8 @@
width: 100%;
}
}
.label-premium {
height: 20px; // override default height
}
}