github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-29 11:23:37 -05:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #16678 from overleaf/tm-website-redesign-features-card-tweaking

Browse source 
Refactor features-card styling and make some visual tweaks to features-card sections

GitOrigin-RevId: 2220f27f3962abb22243f3559cdcf1a88e5fe202
This commit is contained in:
M Fahru 2024-01-23 14:55:49 -07:00 committed by Copybot
parent 5c517a56c3
commit 57a3b834b7
2 changed files with 22 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -564,13 +564,13 @@
#home-features-arrow-green { #home-features-arrow-green {
position: absolute; position: absolute;
left: 173px; left: 154px;
top: -122px; top: -98px;
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
height: 100px; height: 100px;
left: 111px; left: 120px;
top: -84px; top: -60px;
} }
} }

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

@ -214,20 +214,14 @@
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
.features-card-image { .features-card-media,
.features-card-media-right {
padding-top: 24px;
img.img-responsive { img.img-responsive {
width: 100%; width: 100%;
} }
@media (max-width: @screen-sm-max) {
margin-bottom: 50px;
}
}
.features-card-video {
display: flex;
justify-content: center;
video { video {
box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12), box-shadow: 0px 4px 6px 0px rgba(30, 37, 48, 0.12),
0px 8px 16px 0px rgba(30, 37, 48, 0.12); 0px 8px 16px 0px rgba(30, 37, 48, 0.12);
@ -236,18 +230,21 @@
width: 100%; width: 100%;
} }
video.video-w-md-90 {
width: 90%;
@media (max-width: @screen-sm-max) {
width: 100%;
}
}
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
margin-bottom: 50px; margin-bottom: 50px;
} }
} }
@media (min-width: @screen-md-min) {
.features-card-media-right {
padding-left: 64px;
}
.features-card-media {
padding-right: 64px;
}
}
.features-card-description, .features-card-description,
.features-card-description-list { .features-card-description-list {
padding-top: 16px; padding-top: 16px;
@ -322,8 +319,10 @@
} }
.features-card-hero { .features-card-hero {
/* borrow from features-card, but rewrite if needed before adding too many overrides */ display: flex; /* equal heights */
.features-card; flex-wrap: wrap;
align-items: center;
position: relative; position: relative;
height: 655px; height: 655px;
padding-top: @line-height-computed * 2; padding-top: @line-height-computed * 2;