mirror of
https://github.com/overleaf/overleaf.git
synced 2024-11-21 20:47:08 -05:00
Add styling for feature page header.
This commit is contained in:
parent
821f35b622
commit
5c294785e3
1 changed files with 40 additions and 1 deletions
|
@ -14,12 +14,16 @@
|
|||
@rfp-card-shadow: 0 0 30px 5px rgba(0, 0, 0, .3);
|
||||
@rfp-border-radius: 5px;
|
||||
|
||||
@rfp-header-height: 80px;
|
||||
@rfp-header-height-collapsed: 50px;
|
||||
|
||||
.rfp-main {
|
||||
background-color: @rfp-rp-blue-dark;
|
||||
color: #FFF;
|
||||
font-size: 18px;
|
||||
min-width: @screen-xs-min;
|
||||
}
|
||||
|
||||
// Typographical scale and basics.
|
||||
.rfp-h1 {
|
||||
font-size: @rfp-h1-size;
|
||||
|
@ -80,6 +84,35 @@
|
|||
font-weight: 700;
|
||||
}
|
||||
// Sections
|
||||
.rfp-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
z-index: 2;
|
||||
height: @rfp-header-height;
|
||||
transition: height .2s;
|
||||
background-color: fade(@rfp-rp-blue-darkest, 90%);
|
||||
padding: 10px 30px;
|
||||
min-width: @screen-xs-min;
|
||||
@media (min-width: @screen-sm-min) {
|
||||
padding-left: 60px;
|
||||
padding-right: 60px;
|
||||
}
|
||||
.rfp-main-header-collapsed & {
|
||||
height: @rfp-header-height-collapsed;
|
||||
}
|
||||
}
|
||||
.rfp-header-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
max-width: @container-large-desktop;
|
||||
height: 100%;
|
||||
margin: auto;
|
||||
}
|
||||
.rfp-header-logo {
|
||||
height: 21px;
|
||||
}
|
||||
.rfp-section {
|
||||
padding: 30px;
|
||||
text-align: center;
|
||||
|
@ -94,6 +127,7 @@
|
|||
background-position: center;
|
||||
background-color: @rfp-rp-blue-darker;
|
||||
min-height: 100vh;
|
||||
padding-top: @rfp-header-height;
|
||||
.rfp-lead {
|
||||
opacity: 0;
|
||||
transition: opacity 0.8s ease;
|
||||
|
@ -162,7 +196,7 @@
|
|||
}
|
||||
.rfp-section-wrapper {
|
||||
max-width: @container-large-desktop;
|
||||
margin: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
// Elements
|
||||
.rfp-h1-masthead-portion {
|
||||
|
@ -404,6 +438,11 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rfp-cta-header {
|
||||
font-size: 1em;
|
||||
padding: .2em 1em;
|
||||
}
|
||||
.rfp-cta-main {
|
||||
display: block;
|
||||
transition: transform 0.25s;
|
||||
|
|
Loading…
Reference in a new issue