github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-12-01 16:11:34 -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;
} }
} }

33
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,15 +230,18 @@
width: 100%; width: 100%;
} }
video.video-w-md-90 {
width: 90%;
@media (max-width: @screen-sm-max) { @media (max-width: @screen-sm-max) {
width: 100%; margin-bottom: 50px;
} }
} }
@media (max-width: @screen-sm-max) { @media (min-width: @screen-md-min) {
margin-bottom: 50px; .features-card-media-right {
padding-left: 64px;
}
.features-card-media {
padding-right: 64px;
} }
} }
@ -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;