Félix Péault
65c9822b73
- Don't run the onScroll method on load, creates a funky translate otherwise - Bind window innerHeight via Svelte - Path scroll smoothing option value as prop
103 lines
1.9 KiB
SCSS
103 lines
1.9 KiB
SCSS
.page {
|
|
overflow-x: hidden;
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
|
|
// Page part
|
|
&__part {
|
|
will-change: transform, opacity;
|
|
}
|
|
|
|
// Top part
|
|
&__top {
|
|
margin-top: 96px;
|
|
margin-bottom: 56px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
@include breakpoint (sm) {
|
|
margin-top: 120px;
|
|
margin-bottom: 96px;
|
|
}
|
|
|
|
a {
|
|
position: absolute;
|
|
top: -64px;
|
|
|
|
@include breakpoint (sm){
|
|
top: 50%;
|
|
left: 0;
|
|
transform: translateY(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
// Description
|
|
&__description {
|
|
max-width: 312px;
|
|
margin: 0 auto;
|
|
margin-bottom: 72px;
|
|
color: $color-tertiary;
|
|
|
|
@include breakpoint (sm) {
|
|
max-width: 472px;
|
|
margin-bottom: 120px;
|
|
}
|
|
|
|
// Some margins
|
|
h1 + p {
|
|
margin-top: 24px;
|
|
}
|
|
p + .button {
|
|
margin-top: 40px;
|
|
}
|
|
}
|
|
|
|
// Category
|
|
&__category {
|
|
margin-bottom: 96px;
|
|
text-align: center;
|
|
|
|
&:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
|
|
h2 {
|
|
margin-bottom: 56px;
|
|
}
|
|
dl {
|
|
margin-bottom: 40px;
|
|
}
|
|
dt {
|
|
margin-bottom: 4px;
|
|
|
|
@include breakpoint (sm) {
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
a {
|
|
cursor: ne-resize;
|
|
}
|
|
}
|
|
dd {
|
|
width: 65%;
|
|
max-width: 560px;
|
|
min-width: 232px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
|
|
// Globe
|
|
.globe--part {
|
|
margin-top: 72px;
|
|
|
|
@include breakpoint (sm) {
|
|
margin-top: 136px;
|
|
}
|
|
}
|
|
}
|