github/overleaf
1
0
Fork 0
mirror of https://github.com/overleaf/overleaf.git synced 2024-11-07 20:31:06 -05:00
Code Issues Projects Releases Packages Wiki Activity

Predefined sizing for main video; max content width.

Browse source
This commit is contained in:
Paulo Reis 2017-03-08 15:00:59 +00:00
parent f398b45d75
commit ebd4db4484
1 changed files with 27 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

30
services/web/public/stylesheets/app/review-features-page.less
View file

@ -18,6 +18,7 @@
background-color: @rfp-rp-blue-dark; background-color: @rfp-rp-blue-dark;
color: #FFF; color: #FFF;
font-size: 18px; font-size: 18px;
min-width: @screen-xs-min;
} }
// Typographical scale and basics. // Typographical scale and basics.
.rfp-h1 { .rfp-h1 {
@ -117,8 +118,10 @@
background-color: @rfp-rp-blue-light; background-color: @rfp-rp-blue-light;
text-align: left; text-align: left;
@media (min-width: @screen-sm-min) { @media (min-width: @screen-sm-min) {
display: flex; .rfp-section-wrapper {
align-items: center; display: flex;
align-items: center;
}
} }
} }
.rfp-feature-description-container, .rfp-feature-description-container,
@ -157,6 +160,10 @@
.rfp-section-final { .rfp-section-final {
background-color: @rfp-rp-blue-darker; background-color: @rfp-rp-blue-darker;
} }
.rfp-section-wrapper {
max-width: @container-large-desktop;
margin: auto;
}
// Elements // Elements
.rfp-h1-masthead-portion { .rfp-h1-masthead-portion {
display: inline-block; display: inline-block;
@ -187,14 +194,31 @@
border-radius: @rfp-border-radius; border-radius: @rfp-border-radius;
} }
.rfp-video-masthead { .rfp-video-masthead {
width: 400px;
height: 241px;
margin-bottom: 2em; margin-bottom: 2em;
transform: translate(0, 100px); transform: translate(0, 100px);
opacity: 0; opacity: 0;
transition: transform 0.8s ease 1s, opacity 0.8s ease 1s; transition: transform 0.8s ease 1s, opacity 0.8s ease 1s;
box-shadow: none;
max-width: none;
@media (min-width: 600px) {
width: 525px;
height: 316px;
}
@media (min-width: @screen-sm-min) {
width: 633px;
height: 381px;
}
@media (min-width: @screen-sm-min) {
width: 697px;
height: 420px;
}
.rfp-section-masthead-in & { .rfp-section-masthead-in & {
transform: translate(0, 0); transform: translate(0, 0);
opacity: 1; opacity: 1;
box-shadow: @rfp-card-shadow;
} }
} }
.rfp-video-anim { .rfp-video-anim {