☠️ RESET for v2
This commit is contained in:
@@ -1,138 +0,0 @@
|
||||
// Introduction
|
||||
.intro {
|
||||
background-color: $color-tertiary;
|
||||
overflow: hidden;
|
||||
|
||||
// Title
|
||||
.title-parallax {
|
||||
margin-top: -#{pxVW(160)};
|
||||
margin-left: -#{pxVW(160)};
|
||||
|
||||
@include breakpoint (1920px) {
|
||||
margin-top: -160px;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Description
|
||||
&__description {
|
||||
margin-top: 14vw;
|
||||
margin-bottom: 72px;
|
||||
padding: 0 32px;
|
||||
color: $color-text;
|
||||
|
||||
@include breakpoint (600px) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 120px;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: relative;
|
||||
|
||||
// Beige background under
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: pxVW(768);
|
||||
background-color: $color-tertiary;
|
||||
|
||||
@include breakpoint (xxl) {
|
||||
height: 820px;
|
||||
}
|
||||
@media (min-aspect-ratio: 16/10) {
|
||||
height: 36vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Photos
|
||||
.gallery__picture:before {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Explore
|
||||
.explore--homepage {
|
||||
margin-top: pxVW(248);
|
||||
|
||||
@include breakpoint (lg) {
|
||||
margin-top: 248px;
|
||||
}
|
||||
|
||||
// Description
|
||||
.style-description {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
// Globe
|
||||
// .globe {
|
||||
// }
|
||||
|
||||
// Browse
|
||||
.browse {
|
||||
margin-top: 4vw;
|
||||
|
||||
@include breakpoint (xl) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
// Of text
|
||||
.of {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: pxVW(224);
|
||||
font-family: $font-serif-extra;
|
||||
font-size: pxVW(248);
|
||||
line-height: 1;
|
||||
color: $color-lightpurple;
|
||||
text-transform: uppercase;
|
||||
user-select: none;
|
||||
pointer-events: none;
|
||||
|
||||
@include breakpoint (lg) {
|
||||
margin-bottom: 200px;
|
||||
font-size: rem(248px);
|
||||
}
|
||||
|
||||
span {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
// Massive title
|
||||
.anim-title {
|
||||
margin-top: -#{pxVW(224)};
|
||||
margin-left: -60px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -184px;
|
||||
}
|
||||
|
||||
span:nth-of-type(1) {
|
||||
letter-spacing: -6vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,106 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
}
|
||||
dd {
|
||||
width: 65%;
|
||||
max-width: 560px;
|
||||
min-width: 232px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Globe
|
||||
.globe--part {
|
||||
margin-top: 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 136px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Credit page
|
||||
*/
|
||||
&--credits {
|
||||
z-index: 120;
|
||||
}
|
||||
}
|
||||
@@ -1,200 +0,0 @@
|
||||
// Place section
|
||||
.place {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
// Title
|
||||
&__title {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
max-height: 768px;
|
||||
padding: pxVW(350) 0 pxVW(200);
|
||||
text-align: center;
|
||||
|
||||
@media screen and (orientation: portrait) and (max-width: $screen-xs) {
|
||||
height: 144vw;
|
||||
padding: 0;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
flex-direction: row;
|
||||
align-items: flex-end;
|
||||
padding: pxVW(240) 0 pxVW(288); // 528
|
||||
height: auto;
|
||||
max-height: none;
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
padding-top: 240px;
|
||||
padding-bottom: 280px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
--offset: #{pxVW(72)};
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: inline-block;
|
||||
text-align: center;
|
||||
padding-left: 3vw;
|
||||
pointer-events: none;
|
||||
|
||||
.anim-translate {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
@include breakpoint (xl) {
|
||||
--offset: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
&_top {
|
||||
margin-left: calc(-1 * var(--offset));
|
||||
text-align: left;
|
||||
}
|
||||
&_bottom {
|
||||
text-align: right;
|
||||
margin-left: var(--offset);
|
||||
}
|
||||
|
||||
// Switcher button
|
||||
.button-control {
|
||||
z-index: 1;
|
||||
margin: 32px auto 0;
|
||||
flex-shrink: 0;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-left: -24px;
|
||||
margin-right: 0;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Description
|
||||
&__description {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: pxVW(200);
|
||||
padding-bottom: 72px;
|
||||
background-color: $color-tertiary;
|
||||
will-change: transform, opacity;
|
||||
|
||||
@include breakpoint (mob) {
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
padding-bottom: pxVW(240);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
border-radius: 8px 0 0 8px;
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
padding-top: 200px;
|
||||
padding-bottom: 240px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0;
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(18px);
|
||||
font-family: $font-sans-light;
|
||||
line-height: 1.64;
|
||||
color: $color-text;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Updated notice
|
||||
.updated {
|
||||
font-size: rem(12px);
|
||||
margin-top: 32px;
|
||||
|
||||
strong {
|
||||
font-family: $font-sans-sb;
|
||||
color: rgba($color-text, 0.4);
|
||||
}
|
||||
|
||||
@include breakpoint (md) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle
|
||||
.toggle {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (md) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
// Right side background completion
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -49.9vw;
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrap
|
||||
&__wrap {
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (md) {
|
||||
padding-left: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
// Background illustration
|
||||
&__illustration {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
will-change: transform, opacity;
|
||||
|
||||
.parallax {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
max-width: 1760px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
&_img {
|
||||
position: relative;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: translateX(-50%);
|
||||
transform-origin: 0 0;
|
||||
background-image: var(--url-mobile);
|
||||
background-position: 0 0;
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% auto;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
background-image: var(--url-desktop);
|
||||
}
|
||||
@media (min-width: $screen-sm) and (-webkit-min-device-pixel-ratio: 2),
|
||||
(min-width: $screen-sm) and (min-resolution: 192dpi) {
|
||||
background-image: var(--url-desktop-2x);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,182 +0,0 @@
|
||||
// Viewer
|
||||
.viewer {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
min-height: 560px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 100%;
|
||||
padding-top: 24px;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Top part
|
||||
*/
|
||||
&__top {
|
||||
position: relative;
|
||||
z-index: 10;
|
||||
margin-top: 16px;
|
||||
padding-left: 24px;
|
||||
padding-right: 16px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
flex-flow: row wrap;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
justify-content: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 48px;
|
||||
}
|
||||
|
||||
// Tip message
|
||||
.tip {
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(10px);
|
||||
text-transform: uppercase;
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
&__buttons {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
margin-left: 16px;
|
||||
|
||||
&:first-child {
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Carousel
|
||||
*/
|
||||
.carousel {
|
||||
width: 100%;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
margin-top: 20%;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
margin: auto;
|
||||
}
|
||||
// Landscape
|
||||
@media screen and (min-width: $screen-sm) and (max-width: $screen-lg) and (orientation: landscape) {
|
||||
width: 95%;
|
||||
}
|
||||
|
||||
// Wrap
|
||||
.wrap {
|
||||
@include breakpoint (xs) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
left: 0;
|
||||
right: 0;
|
||||
|
||||
&__images {
|
||||
@include breakpoint (xs) {
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
// Specific box shadow for images
|
||||
&__photo {
|
||||
box-shadow: 0 pxVW(16) pxVW(40) rgba(#2e025c, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
// Informations
|
||||
&__infos {
|
||||
margin-top: 32px;
|
||||
margin-bottom: 16px;
|
||||
padding: 0 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Location
|
||||
&__locations {
|
||||
@include breakpoint (sm) {
|
||||
width: 75%;
|
||||
}
|
||||
}
|
||||
&__location {
|
||||
margin-top: 0;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Date
|
||||
&__date {
|
||||
font-size: rem(12px);
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(14px);
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo number
|
||||
&__number {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
left: 0;
|
||||
top: -28vw;
|
||||
width: 100%;
|
||||
height: 40vw;
|
||||
overflow: hidden;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
top: auto;
|
||||
right: 8vw;
|
||||
left: auto;
|
||||
bottom: -14.5vw;
|
||||
width: auto;
|
||||
height: 16.8vw;
|
||||
font-size: 21vw;
|
||||
text-align: right;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
bottom: -180px;
|
||||
height: 232px;
|
||||
font-size: rem(300px);
|
||||
}
|
||||
}
|
||||
|
||||
// Dots
|
||||
&__dots {
|
||||
position: relative;
|
||||
z-index: 20;
|
||||
margin-top: 24px;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user