☠️ RESET for v2
This commit is contained in:
@@ -1,38 +1,52 @@
|
||||
html {
|
||||
font: #{$base-font-size} $font-sans;
|
||||
color: $color-text;
|
||||
font: #{$base-font-size}/1.2 $font-sans;
|
||||
color: #fff;
|
||||
min-width: 320px;
|
||||
overflow-x: hidden;
|
||||
word-break: normal;
|
||||
}
|
||||
body {
|
||||
@include font-smooth;
|
||||
background: $color-primary;
|
||||
color: #fff;
|
||||
cursor: default;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior-y: none;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
text-rendering: optimizeLegibility;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
strong {
|
||||
font-weight: normal;
|
||||
font-weight: 700;
|
||||
}
|
||||
em {
|
||||
font-style: normal;
|
||||
}
|
||||
figure, p, dl, dt, dd, ul, ol, li {
|
||||
figure, p, dl, dt, dd, ul, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
figure img {
|
||||
figure, picture {
|
||||
display: block;
|
||||
}
|
||||
nav li:before {
|
||||
display: none;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Accessibility outline
|
||||
// Remove default focus styles for mouse users if :focus-visible is supported
|
||||
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
|
||||
outline: none;
|
||||
}
|
||||
[data-focus-visible-added], *:focus-visible {
|
||||
outline: 1px dashed $color-tertiary;
|
||||
}
|
||||
|
||||
// Selection
|
||||
::selection { color: #fff; background: $color-secondary; }
|
||||
::-moz-selection { color: #fff; background: $color-secondary; }
|
||||
@@ -50,215 +64,19 @@ button {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Title: Massive
|
||||
.title-massive {
|
||||
font-family: $font-serif-extra;
|
||||
font-size: pxVW(800);
|
||||
line-height: 1;
|
||||
color: $color-secondary;
|
||||
letter-spacing: -2vw;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (lg) {
|
||||
font-size: pxVW(700);
|
||||
}
|
||||
@include breakpoint (1920px) {
|
||||
font-size: rem(900px);
|
||||
letter-spacing: -40px;
|
||||
}
|
||||
|
||||
&, span {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Title: Category
|
||||
.title-category {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(28px);
|
||||
line-height: 1;
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
// Title: Locations
|
||||
.title-location {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(48px);
|
||||
line-height: 1;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(64px);
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
font-size: rem(72px);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
font-size: rem(96px);
|
||||
}
|
||||
|
||||
em {
|
||||
display: block;
|
||||
font-size: rem(18px);
|
||||
color: $color-lightpurple;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: inline-block;
|
||||
font-size: rem(32px);
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
span, em {
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
// Bigger version
|
||||
&--big {
|
||||
font-size: pxVW(180);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: pxVW(130);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
font-size: pxVW(160);
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
font-size: rem(160px);
|
||||
}
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
font-size: 0.35em;
|
||||
|
||||
@include breakpoint (md) {
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inline version
|
||||
&--inline {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
flex-direction: row;
|
||||
align-items: baseline;
|
||||
}
|
||||
|
||||
em {
|
||||
margin: 8px 0 4px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 2px 16px 0 24px;
|
||||
}
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* Text Styles
|
||||
/* Global elements
|
||||
========================================================================== */
|
||||
// Location
|
||||
.style-location {
|
||||
font-family: $font-serif;
|
||||
font-size: 6vw;
|
||||
color: #fff;
|
||||
line-height: 1.15;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (mob) {
|
||||
font-size: rem(24px);
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(28px);
|
||||
}
|
||||
|
||||
a {
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
|
||||
&:hover {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
.street {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
// Split text elements
|
||||
.word, .char {
|
||||
display: inline-block;
|
||||
transform-style: preserve-3d;
|
||||
will-change: transform;
|
||||
}
|
||||
.words-3d {
|
||||
perspective: 800px;
|
||||
|
||||
// Information (capitalized text)
|
||||
.style-caps {
|
||||
font-family: $font-sans;
|
||||
font-size: rem(12px);
|
||||
color: $color-tertiary;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
// Transparent variant
|
||||
&--transparent {
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(14px);
|
||||
}
|
||||
}
|
||||
|
||||
// Short text (description)
|
||||
.style-description {
|
||||
color: $color-tertiary;
|
||||
font-family: $font-sans-light;
|
||||
font-size: rem(18px);
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 572px;
|
||||
margin: 0 auto;
|
||||
font-size: rem(28px);
|
||||
line-height: 1.64;
|
||||
}
|
||||
|
||||
// Dark text
|
||||
&--dark {
|
||||
color: $color-text;
|
||||
}
|
||||
|
||||
// Small text variant
|
||||
&--small {
|
||||
font-size: rem(16px);
|
||||
line-height: 1.4;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(20px);
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Notice
|
||||
.style-notice {
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
font-family: $font-sans-light;
|
||||
font-size: rem(14px);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(16px);
|
||||
span {
|
||||
transform-origin: 0 85%;
|
||||
}
|
||||
}
|
||||
@@ -1,12 +1,7 @@
|
||||
/* Fonts list
|
||||
========================================================================== */
|
||||
$fonts: (
|
||||
"G-Light",
|
||||
"G-Regular",
|
||||
"G-Semibold",
|
||||
"M-Extralight",
|
||||
"M-Light"
|
||||
);
|
||||
@each $font in $fonts {
|
||||
@include font-face($font);
|
||||
}
|
||||
@include font-face("Garnett", "G-Light", 300);
|
||||
@include font-face("Garnett", "G-Regular", 400);
|
||||
@include font-face("Garnett", "G-Semibold", 500);
|
||||
@include font-face("Magnolia", "M-Extralight", 200);
|
||||
@include font-face("Magnolia", "M-Light", 300);
|
||||
0
src/style/_typography.scss
Normal file
0
src/style/_typography.scss
Normal file
@@ -12,36 +12,42 @@ $color-gray: #666;
|
||||
$color-lightgray: #999;
|
||||
|
||||
// CSS Variables
|
||||
// :root {
|
||||
// }
|
||||
:root {
|
||||
// Sizes
|
||||
--container-width: 1680px;
|
||||
|
||||
// Animation
|
||||
--ease-quart: cubic-bezier(.165, .84, .44, 1);
|
||||
--ease-cubic: cubic-bezier(.785, .135, .15, .86);
|
||||
--ease-inout-quart: cubic-bezier(.76, 0, .24, 1);
|
||||
}
|
||||
|
||||
|
||||
/* Fonts
|
||||
========================================================================== */
|
||||
$base-font-size: 28px;
|
||||
$base-font-size: 28px !default;
|
||||
|
||||
// Families
|
||||
$replacement-sans: "Helvetica, Arial, sans-serif";
|
||||
$replacement-serif: "Georgia, serif";
|
||||
$font-sans: "G-Regular", #{$replacement-sans};
|
||||
$font-sans-sb: "G-Semibold", #{$replacement-sans};
|
||||
$font-sans-light: "G-Light", #{$replacement-sans};
|
||||
$font-serif: "M-Light", #{$replacement-serif};
|
||||
$font-serif-extra: "M-Extralight", #{$replacement-serif};
|
||||
$font-sans: "Garnett", #{$replacement-sans};
|
||||
$font-serif: "Magnolia", #{$replacement-serif};
|
||||
|
||||
|
||||
|
||||
/* Sizes, margins and spacing
|
||||
====================================================================== */
|
||||
$base-width: 1600;
|
||||
$base-width: 1600 !default;
|
||||
|
||||
// Blocks
|
||||
// Grid
|
||||
$cols-m: 12 !default;
|
||||
$cols-d: 32 !default;
|
||||
|
||||
|
||||
/* Directories
|
||||
========================================================================== */
|
||||
$dir-img: "/img";
|
||||
$dir-fonts: "/fonts";
|
||||
$dir-img: "/images" !default;
|
||||
$dir-fonts: "/fonts" !default;
|
||||
|
||||
|
||||
/* Animation
|
||||
@@ -54,10 +60,14 @@ $ease-inout: ease-in-out;
|
||||
|
||||
/* Responsive breakpoints
|
||||
========================================================================== */
|
||||
$screen-mob: 450px;
|
||||
$screen-xs: 767px;
|
||||
$screen-sm: 768px;
|
||||
$screen-md: 992px;
|
||||
$screen-lg: 1200px;
|
||||
$screen-xl: 1440px;
|
||||
$screen-xxl: 1600px;
|
||||
$breakpoints: (
|
||||
mob: 450px,
|
||||
mob-lg: 550px,
|
||||
xs: 767px,
|
||||
sm: 768px,
|
||||
md: 992px,
|
||||
sd: 1200px,
|
||||
lg: 1440px,
|
||||
xl: 1600px,
|
||||
fhd: 1920px,
|
||||
) !default;
|
||||
@@ -1,23 +0,0 @@
|
||||
/*
|
||||
** Badge
|
||||
*/
|
||||
.badge {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
color: $color-primary-darker;
|
||||
font-family: $font-sans-sb;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
background-color: $color-secondary-light;
|
||||
box-shadow: 0 0 0 4px rgba($color-tertiary, 0.15);
|
||||
border-radius: 50vh;
|
||||
|
||||
// Small size
|
||||
&--small {
|
||||
height: 14px;
|
||||
padding: 0 4px;
|
||||
font-size: rem(7px);
|
||||
line-height: 15px;
|
||||
}
|
||||
}
|
||||
@@ -1,283 +0,0 @@
|
||||
// Button: Control
|
||||
.button-control {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
padding-top: 2px;
|
||||
pointer-events: auto;
|
||||
border-radius: 50%;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background-color 350ms $ease-quart;
|
||||
will-change: transform, opacity;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: block;
|
||||
height: auto;
|
||||
transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
|
||||
will-change: transform;
|
||||
|
||||
&:not([data-width]) {
|
||||
width: 13px;
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
&:not([data-width]) {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Variants
|
||||
*/
|
||||
&--white {
|
||||
background-color: #fff;
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
&--lightpink {
|
||||
background-color: rgba($color-secondary, 0.4);
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: rgba($color-secondary, 0.85);
|
||||
}
|
||||
}
|
||||
&--pink {
|
||||
background-color: rgba($color-secondary, 0.85);
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
&--gray {
|
||||
background-color: $color-gray;
|
||||
|
||||
&:hover, &.hover {
|
||||
background-color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Effects
|
||||
*/
|
||||
&--shadow {
|
||||
box-shadow: 0 0 10px rgba(#000, 0.4);
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** Directions
|
||||
*/
|
||||
// To left
|
||||
&.dir-left {
|
||||
.icon[aria-hidden] {
|
||||
transform: translate(100%, -50%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(-100%, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// To right
|
||||
&.dir-right {
|
||||
.icon[aria-hidden] {
|
||||
transform: translate(-150%, -50%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(100%, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// From top
|
||||
&.dir-top {
|
||||
.icon[aria-hidden] {
|
||||
left: auto;
|
||||
transform: translate(0, -150%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(0, 100%);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
// From bottom
|
||||
&.dir-bottom {
|
||||
.icon[aria-hidden] {
|
||||
left: auto;
|
||||
transform: translate(0, 150%);
|
||||
}
|
||||
|
||||
&:hover, &.hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate(0, -100%);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Dashed style
|
||||
*/
|
||||
&--dashed {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
background-color: rgba($color-lightpurple, 0.5);
|
||||
transition: background-color 150ms $ease-inout;
|
||||
will-change: transform, opacity;
|
||||
|
||||
// Icon
|
||||
svg[fill] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Dashed circle
|
||||
svg:not([fill]) {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 130%;
|
||||
height: 130%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
circle {
|
||||
display: block;
|
||||
stroke-width: 1.75;
|
||||
stroke-dasharray: 7, 3;
|
||||
stroke: rgba($color-lightpurple, 0.35);
|
||||
fill: none;
|
||||
transform-origin: 50% 50%;
|
||||
animation: rotateDashes 5s linear infinite;
|
||||
animation-play-state: paused;
|
||||
animation-delay: 50ms;
|
||||
transition: stroke 150ms $ease-inout;
|
||||
will-change: stroke;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover, &:focus {
|
||||
background-color: rgba($color-lightpurple, 0.65);
|
||||
|
||||
* {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Big version
|
||||
*/
|
||||
&--big {
|
||||
width: 88px;
|
||||
height: 88px;
|
||||
text-decoration: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 120px;
|
||||
height: 120px;
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: rgba(#fff, 0.3);
|
||||
text-transform: uppercase;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(8px);
|
||||
letter-spacing: 1px;
|
||||
line-height: 1;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 10px;
|
||||
font-size: rem(10px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Big Dashed
|
||||
&.button-control--dashed {
|
||||
// Icon
|
||||
svg[fill] {
|
||||
@include breakpoint (xs) {
|
||||
width: 28px;
|
||||
}
|
||||
}
|
||||
// Circle
|
||||
circle {
|
||||
@include breakpoint (sm) {
|
||||
stroke-width: 4.5;
|
||||
stroke-dasharray: 20, 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,71 +0,0 @@
|
||||
// Button: Outline
|
||||
.button-outline {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 1px 16px 0;
|
||||
background: none;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 275ms $ease-cubic;
|
||||
will-change: border, color;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 40px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
|
||||
// Second text
|
||||
.text {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
display: block;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
span, &:after {
|
||||
transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
color: $color-lightpurple;
|
||||
border-color: $color-lightpurple;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
border-color: $color-tertiary;
|
||||
|
||||
span {
|
||||
opacity: 0;
|
||||
transform: translateY(-75%);
|
||||
}
|
||||
.text:after {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,97 +0,0 @@
|
||||
// Default button
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: $color-gray;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
|
||||
will-change: background-color, color;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 48px;
|
||||
padding: 1px 24px 0;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
// Icon if existing
|
||||
img, svg {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: auto;
|
||||
margin-right: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 22px;
|
||||
height: auto;
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
svg {
|
||||
transition: all 350ms $ease-cubic;
|
||||
|
||||
.anim {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
.text {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
opacity: 0;
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transform: translateY(100%);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
span, .text:after {
|
||||
transition: transform 275ms $ease-cubic, opacity 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background-color: $color-secondary;
|
||||
|
||||
svg {
|
||||
fill: #fff;
|
||||
}
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
.text {
|
||||
span {
|
||||
opacity: 0;
|
||||
transform: translateY(-75%);
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// Counter
|
||||
.counter {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
font-family: $font-serif-extra;
|
||||
font-size: pxVW(672);
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
// Column
|
||||
&__column {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
line-height: 0.85;
|
||||
text-align: right;
|
||||
margin: 0 0px;
|
||||
transition: transform 0.6s $ease-quart;
|
||||
will-change: transform;
|
||||
|
||||
// Last column
|
||||
&:last-child {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,27 +0,0 @@
|
||||
// SVG Globe icon
|
||||
.icon-svg {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 133.93%; /* 1.33 ratio */
|
||||
}
|
||||
|
||||
// Small size
|
||||
&--small {
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
padding-bottom: 100%; /* 1:1 ratio */
|
||||
}
|
||||
}
|
||||
|
||||
// Animate by default
|
||||
&.is-animated {
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,40 +0,0 @@
|
||||
// Text input
|
||||
.input__text {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
color: #fff;
|
||||
font-size: rem(16px);
|
||||
font-family: $font-sans-light;
|
||||
border: 2px solid rgba($color-secondary, 0.6);
|
||||
border-radius: 50vh;
|
||||
transition: border 300ms $ease-quart;
|
||||
background: none;
|
||||
outline: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(18px);
|
||||
height: 64px;
|
||||
padding: 0 32px;
|
||||
}
|
||||
|
||||
// States
|
||||
&::placeholder {
|
||||
color: #fff;
|
||||
opacity: 0.75;
|
||||
transition: all 300ms $ease-quart;
|
||||
}
|
||||
&:focus {
|
||||
@extend %input__text--active;
|
||||
}
|
||||
}
|
||||
|
||||
%input__text--active {
|
||||
border-color: $color-secondary;
|
||||
|
||||
&::placeholder {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@@ -1,116 +0,0 @@
|
||||
/*
|
||||
** Link: Change location
|
||||
*/
|
||||
.link-change {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
padding: 0 4px;
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: color 200ms $ease-cubic;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: rgba($color-secondary, 0.22);
|
||||
width: 100%;
|
||||
height: 8px;
|
||||
bottom: 3px;
|
||||
left: 0;
|
||||
border-radius: 50vh;
|
||||
transition: all 200ms $ease-cubic;
|
||||
transition-delay: 50ms;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 14px;
|
||||
bottom: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
top: -3px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
margin-left: 6px;
|
||||
background-color: #fff;
|
||||
border-radius: 50%;
|
||||
|
||||
svg {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-text;
|
||||
|
||||
&:after {
|
||||
background-color: rgba($color-secondary, 0.4);
|
||||
}
|
||||
svg * {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Link: Translation effect
|
||||
*/
|
||||
.link-translate {
|
||||
display: inline-block;
|
||||
|
||||
.text {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
&:after {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
transform: translateY(-50%);
|
||||
opacity: 1;
|
||||
transition: all 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
transform: translateY(100%);
|
||||
opacity: 0;
|
||||
transition: all 275ms $ease-cubic;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
// States
|
||||
&:hover {
|
||||
.text {
|
||||
&:after {
|
||||
transform: translateY(-75%);
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
span {
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,92 +0,0 @@
|
||||
// Switcher
|
||||
.switcher {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
a {
|
||||
color: #C78FEC;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Text
|
||||
&__text {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(30px);
|
||||
line-height: 1;
|
||||
text-align: right;
|
||||
|
||||
em {
|
||||
margin-left: -2px;
|
||||
margin-right: 16px;
|
||||
font-size: rem(14px);
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
letter-spacing: 1px;
|
||||
|
||||
&.same-line {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: block;
|
||||
color: $color-secondary;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
&.empty {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
// Icon
|
||||
&__icon {
|
||||
width: 52px;
|
||||
height: 52px;
|
||||
margin-top: 4px;
|
||||
margin-left: -8px;
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Side version (smaller)
|
||||
*/
|
||||
&--side {
|
||||
.switcher {
|
||||
&__text {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #F4EDFB;
|
||||
|
||||
circle {
|
||||
stroke: #F4EDFB;
|
||||
}
|
||||
img, svg[fill] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#F4EDFB, 7);
|
||||
|
||||
circle {
|
||||
stroke: darken(#F4EDFB, 7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
color: $color-primary;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,93 +0,0 @@
|
||||
// Toggle Button
|
||||
.toggle {
|
||||
position: relative;
|
||||
margin-top: 58px;
|
||||
background-color: rgba($color-secondary, 0.25);
|
||||
display: inline-flex;
|
||||
border-radius: 50vh;
|
||||
|
||||
button, .pill {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
color: $color-secondary;
|
||||
border-radius: 50vh;
|
||||
padding: 12px 24px;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(18px);
|
||||
line-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
outline: none;
|
||||
transition: color 100ms;
|
||||
will-change: color;
|
||||
}
|
||||
button {
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
svg {
|
||||
fill: $color-secondary;
|
||||
* {
|
||||
transition: fill 100ms;
|
||||
transition-delay: 0ms;
|
||||
will-change: fill;
|
||||
}
|
||||
}
|
||||
|
||||
// Active button
|
||||
&.active {
|
||||
color: #fff;
|
||||
|
||||
svg * {
|
||||
fill: #C78FEC;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover:not(.active) {
|
||||
color: $color-secondary-bright;
|
||||
|
||||
svg {
|
||||
fill: $color-secondary-bright;
|
||||
}
|
||||
}
|
||||
// List icon
|
||||
&[data-layout="list"]:hover {
|
||||
rect:nth-of-type(even) {
|
||||
animation: layoutListEven 600ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
rect:nth-of-type(odd) {
|
||||
animation: layoutListOdd 600ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
}
|
||||
// Grid icon
|
||||
&[data-layout="grid"]:hover {
|
||||
rect:nth-of-type(even) {
|
||||
animation: layoutGridEven 600ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
rect:nth-of-type(odd) {
|
||||
animation: layoutGridOdd 600ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pill (active)
|
||||
.pill {
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: auto;
|
||||
height: 100%;
|
||||
background-color: $color-primary;
|
||||
transition: all 500ms $ease-quart;
|
||||
will-change: width, left;
|
||||
|
||||
span {
|
||||
content: attr(data-text);
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
14
src/style/layout/_grid.scss
Normal file
14
src/style/layout/_grid.scss
Normal file
@@ -0,0 +1,14 @@
|
||||
/*
|
||||
** Grid
|
||||
*/
|
||||
.grid {
|
||||
--columns: #{$cols-m};
|
||||
display: grid;
|
||||
grid-template-columns: repeat(var(--columns), 1fr);
|
||||
grid-column: 1 / span var(--columns);
|
||||
align-items: start;
|
||||
|
||||
@include bp (sm) {
|
||||
--columns: #{$cols-d};
|
||||
}
|
||||
}
|
||||
@@ -1,25 +0,0 @@
|
||||
.explore {
|
||||
// Description
|
||||
&__description {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
max-width: 312px;
|
||||
margin: 0 auto 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 472px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
// Globe
|
||||
// .globe {
|
||||
// }
|
||||
|
||||
// Browse
|
||||
.browse {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
// Main page
|
||||
.housesof {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
transition: opacity 0.3s $ease-quart;
|
||||
will-change: opacity;
|
||||
|
||||
&.is-transitioning {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
@@ -1,50 +0,0 @@
|
||||
// Form
|
||||
.form {
|
||||
label {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Group item
|
||||
// &__group {
|
||||
// }
|
||||
|
||||
// Input group
|
||||
&__inputgroup {
|
||||
position: relative;
|
||||
|
||||
button {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 10px;
|
||||
transform: translateY(-50%);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
right: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
.input__text {
|
||||
@extend %input__text--active;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Variants
|
||||
*/
|
||||
// Light version
|
||||
&--light {
|
||||
// Text input
|
||||
.input__text {
|
||||
&, &::placeholder {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,191 +0,0 @@
|
||||
// Globe
|
||||
.globe {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
width: 100vw;
|
||||
height: 180vw;
|
||||
min-height: 700px;
|
||||
max-height: 1472px;
|
||||
overflow: hidden;
|
||||
cursor: grab;
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 130vw;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
height: 112vw;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
height: 100vw;
|
||||
}
|
||||
|
||||
// DEBUG //
|
||||
// background: rgba(red, 0.2);
|
||||
// &:after {
|
||||
// content: "";
|
||||
// display: block;
|
||||
// position: absolute;
|
||||
// top: 50%;
|
||||
// left: 0;
|
||||
// background: blue;
|
||||
// width: 100%;
|
||||
// height: 2px;
|
||||
// margin-top: -1px;
|
||||
// }
|
||||
// END DEBUG //
|
||||
|
||||
/*
|
||||
** Partial globe
|
||||
*/
|
||||
&--part {
|
||||
overflow: hidden;
|
||||
height: 30vw;
|
||||
min-height: 300px;
|
||||
max-height: 500px;
|
||||
}
|
||||
|
||||
/*
|
||||
** Markers
|
||||
*/
|
||||
&__markers {
|
||||
z-index: 210;
|
||||
|
||||
// When dragging
|
||||
&.is-grabbing {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
// Marker
|
||||
.marker {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
cursor: pointer;
|
||||
display: block;
|
||||
top: -4px;
|
||||
left: -4px;
|
||||
padding: 4px;
|
||||
opacity: 1;
|
||||
will-change: transform;
|
||||
|
||||
// Dot
|
||||
&:before {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background: $color-secondary;
|
||||
border-radius: 100%;
|
||||
}
|
||||
|
||||
span {
|
||||
transition: color 0.4s $ease-quart, opacity 0.3s $ease-inout;
|
||||
}
|
||||
|
||||
// Hover glow effect
|
||||
&.hover {
|
||||
&:before {
|
||||
animation: globeMarkerPulse 1s;
|
||||
}
|
||||
}
|
||||
|
||||
// Label
|
||||
&__label {
|
||||
position: absolute;
|
||||
bottom: -16px;
|
||||
left: 16px;
|
||||
color: transparent;
|
||||
}
|
||||
// Location city
|
||||
&__city {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(18px);
|
||||
line-height: 1;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(24px);
|
||||
}
|
||||
}
|
||||
// Location country
|
||||
&__country {
|
||||
display: block;
|
||||
opacity: 0.8;
|
||||
font-family: $font-sans;
|
||||
font-size: rem(8px);
|
||||
line-height: 1;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(10px);
|
||||
}
|
||||
}
|
||||
|
||||
// Active
|
||||
&.is-active {
|
||||
&, span {
|
||||
opacity: 1;
|
||||
}
|
||||
.marker {
|
||||
&__city {
|
||||
color: $color-secondary;
|
||||
}
|
||||
&__country {
|
||||
color: $color-text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Is light
|
||||
&.is-light {
|
||||
&.is-active {
|
||||
.marker {
|
||||
&__city {
|
||||
color: #fff;
|
||||
}
|
||||
&__country {
|
||||
color: #d2b7e4;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Left positioned
|
||||
&.is-left {
|
||||
.marker {
|
||||
&__label {
|
||||
left: auto;
|
||||
right: 32px;
|
||||
}
|
||||
&__country {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Marker is close to another one
|
||||
// Show the marker infos only on hover
|
||||
&.is-close {
|
||||
// Dot
|
||||
&:before {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
}
|
||||
// Label
|
||||
.marker__label {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
// Show labels on hover
|
||||
&:hover {
|
||||
.marker__label {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,98 +0,0 @@
|
||||
// Location
|
||||
.location {
|
||||
position: relative;
|
||||
margin-bottom: 48px;
|
||||
|
||||
&, a * {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
align-items: center;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
// Flag image
|
||||
img {
|
||||
display: block;
|
||||
width: 32px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
// City
|
||||
&__city {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(32px);
|
||||
color: $color-secondary;
|
||||
|
||||
@include breakpoint (md) {
|
||||
font-size: rem(48px);
|
||||
}
|
||||
}
|
||||
|
||||
// Masks
|
||||
.mask-city {
|
||||
height: 40px;
|
||||
margin: 16px 0 12px;
|
||||
|
||||
@include breakpoint (md) {
|
||||
height: 64px;
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
.mask-country {
|
||||
height: 16px;
|
||||
}
|
||||
|
||||
// Badge
|
||||
.badge {
|
||||
margin-top: 16px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
.location__city {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: scale(1) translate(-50%, -50%);
|
||||
}
|
||||
}
|
||||
|
||||
// Shape on hover
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: scale(0.85) translate(-50%, -50%) translateZ(0);
|
||||
transform-origin: 0 0;
|
||||
display: block;
|
||||
width: 184px;
|
||||
height: 184px;
|
||||
background: rgba($color-lightpurple, 0.3);
|
||||
border-radius: 50%;
|
||||
transition: transform 0.3s $ease-quart, opacity 0.3s $ease-quart;
|
||||
will-change: transform;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,113 +0,0 @@
|
||||
// Newsletter
|
||||
.newsletter {
|
||||
background-color: $color-primary-dark;
|
||||
padding: 56px 0;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 96px 0;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
@include breakpoint (md) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
}
|
||||
|
||||
h2 {
|
||||
color: $color-secondary;
|
||||
}
|
||||
|
||||
// Text
|
||||
&__text {
|
||||
max-width: 400px;
|
||||
margin: 0 auto 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
margin-left: 0;
|
||||
margin-right: 48px;
|
||||
margin-bottom: 0;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin-bottom: 16px;
|
||||
|
||||
@include breakpoint (md) {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Form
|
||||
.form {
|
||||
min-width: 270px;
|
||||
max-width: 320px;
|
||||
margin: 0 auto;
|
||||
|
||||
@include breakpoint (md) {
|
||||
min-width: 320px;
|
||||
max-width: 440px;
|
||||
margin: 48px 0 0;
|
||||
}
|
||||
|
||||
// Title (if existing)
|
||||
h2 {
|
||||
margin-bottom: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Notice
|
||||
&__notice {
|
||||
margin-top: 16px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Variants
|
||||
*/
|
||||
// Centered column mode
|
||||
&--column {
|
||||
max-width: 360px;
|
||||
margin: 0 auto;
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 444px;
|
||||
}
|
||||
|
||||
// Text
|
||||
.newsletter__text {
|
||||
max-width: 440px;
|
||||
margin: 0 0 48px;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
margin-bottom: 96px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Light version
|
||||
&--light {
|
||||
background: none;
|
||||
|
||||
.newsletter__notice {
|
||||
p {
|
||||
color: rgba($color-text, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,188 +0,0 @@
|
||||
.photo {
|
||||
/*
|
||||
** Location
|
||||
*/
|
||||
&__location {
|
||||
margin-bottom: 32px;
|
||||
|
||||
@media (max-width: $screen-md) {
|
||||
padding: 0;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
// Street name
|
||||
h2 {
|
||||
text-align: left;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
.line {
|
||||
overflow: hidden;
|
||||
margin: -12px 0 -16px;
|
||||
padding: 12px 0;
|
||||
display: block;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-lightgray;
|
||||
margin-top: 16px;
|
||||
will-change: opacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Image
|
||||
*/
|
||||
&__image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Alignment (left or right for list view)
|
||||
.align {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
max-width: 1180px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@media (min-aspect-ratio: 16/8) {
|
||||
max-width: 976px;
|
||||
}
|
||||
@media (min-aspect-ratio: 16/10) {
|
||||
max-width: 1024px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Image itself
|
||||
&__picture {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
display: block;
|
||||
width: 100%;
|
||||
border-radius: 0;
|
||||
background-color: #fff;
|
||||
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
width: 100%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: $color-primary;
|
||||
pointer-events: none;
|
||||
transition: opacity 150ms $ease-inout;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
cursor: zoom-in;
|
||||
|
||||
&:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Date (on the side)
|
||||
&__date {
|
||||
display: block;
|
||||
margin-top: 16px;
|
||||
padding: 0 pxVW(128);
|
||||
font-size: rem(14px);
|
||||
color: $color-lightgray;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
left: calc(100% + 30px);
|
||||
bottom: 0;
|
||||
transform: rotate(270deg);
|
||||
transform-origin: 0 0;
|
||||
white-space: nowrap;
|
||||
line-height: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo number
|
||||
&__number {
|
||||
position: absolute;
|
||||
bottom: -80px;
|
||||
right: 24px;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
font-size: rem(124px);
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
span {
|
||||
position: relative;
|
||||
display: block;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
right: 8%;
|
||||
transform: translate(0, -25%);
|
||||
font-size: pxVW(300);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
top: 50%;
|
||||
right: 0;
|
||||
bottom: auto;
|
||||
transform: translate(26.5vw, -50%);
|
||||
width: 50%;
|
||||
text-align: center;
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
transform: translate(28vw, -50%);
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
font-size: rem(300px);
|
||||
transform: translate(70%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,352 +0,0 @@
|
||||
// Carousel
|
||||
.carousel {
|
||||
background-color: $color-primary;
|
||||
will-change: transform, opacity;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
max-width: 1280px;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 80%;
|
||||
}
|
||||
@include breakpoint (1680px) {
|
||||
max-width: 1424px;
|
||||
}
|
||||
@media (min-aspect-ratio: 16/10) {
|
||||
max-width: 70%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Gallery
|
||||
*/
|
||||
.gallery {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0 auto;
|
||||
cursor: grab;
|
||||
|
||||
&:active {
|
||||
cursor: grabbing;
|
||||
}
|
||||
|
||||
@include breakpoint (xl) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Variables
|
||||
$scale: 0.9;
|
||||
$angle: 1deg;
|
||||
$angleHover: 1.25deg;
|
||||
$distance: 9%;
|
||||
$distanceHover: 10%;
|
||||
$radius: 8px;
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: calc(100% / 1.5); // Ratio 3.2
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
// Photo
|
||||
&__photo {
|
||||
$duration: 1s;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
transform: scale($scale) translateZ(0);
|
||||
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
|
||||
pointer-events: none;
|
||||
@extend %willchange;
|
||||
|
||||
// Visible photos
|
||||
&.is-active, &.is-prev, &.is-next {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
|
||||
picture {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Active photo
|
||||
&.is-active {
|
||||
z-index: 10;
|
||||
transform: scale(1) translateZ(0);
|
||||
}
|
||||
|
||||
// Previous & next photo
|
||||
&.is-prev, &.is-next {
|
||||
picture:before {
|
||||
@include breakpoint (sm) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Previous photo
|
||||
&.is-prev {
|
||||
z-index: 9;
|
||||
transform: translate(-40%, 0) scale(0.85) translateZ(0);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
z-index: 8;
|
||||
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale) translateZ(0);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Next photo
|
||||
&.is-next {
|
||||
z-index: 8;
|
||||
transform: translate(40%, 0) scale(0.85) translateZ(0);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
z-index: 9;
|
||||
transform: translate($distance, -1%) rotate($angle) scale($scale) translateZ(0);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale) translateZ(0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Picture
|
||||
&__picture {
|
||||
opacity: 0;
|
||||
position: relative;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
|
||||
transition: opacity 1s $ease-quart;
|
||||
will-change: opacity;
|
||||
@extend %willchange;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: $radius;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
&:before {
|
||||
opacity: 0;
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: $color-primary;
|
||||
}
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Performance
|
||||
%willchange {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Controls (arrows)
|
||||
*/
|
||||
&__controls {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: absolute;
|
||||
z-index: 11;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
button {
|
||||
box-shadow: 0 2px 20px rgba(#000, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
// Hover and clicking area
|
||||
&__area {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 12%;
|
||||
height: 100%;
|
||||
cursor: pointer;
|
||||
|
||||
&--prev {
|
||||
margin-left: -6%;
|
||||
}
|
||||
&--next {
|
||||
margin-right: -6%;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Informations
|
||||
*/
|
||||
&__infos {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
// Locations
|
||||
&__locations {
|
||||
position: relative;
|
||||
min-height: 80px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
min-height: 128px;
|
||||
}
|
||||
}
|
||||
|
||||
// Location
|
||||
&__location {
|
||||
$distance: 40%;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
opacity: 0;
|
||||
margin-top: 32px;
|
||||
padding-bottom: 4px;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
|
||||
will-change: transform, opacity;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: pxVW(80);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
|
||||
a {
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
text-decoration: none;
|
||||
transition: color 150ms $ease-inout;
|
||||
|
||||
&:hover {
|
||||
color: rgba($color-tertiary, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
// State
|
||||
.state {
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
// States
|
||||
&.is-prev {
|
||||
transform: translateY(-$distance) translateZ(0);
|
||||
}
|
||||
&.is-active {
|
||||
transform: translateY(0) translateZ(0);
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
&.is-next {
|
||||
transform: translateY($distance) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Dots for slider (mobile)
|
||||
*/
|
||||
&__dots {
|
||||
display: none;
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 32px;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&, button {
|
||||
transition: all 0.6s $ease-quart;
|
||||
will-change: transform, width, height, padding;
|
||||
}
|
||||
|
||||
// Active
|
||||
&.active button {
|
||||
background-color: $color-secondary;
|
||||
transform: scale(1.25) translateZ(0);
|
||||
}
|
||||
|
||||
// Small dot
|
||||
&.small button {
|
||||
transform: scale(0.6) translateZ(0);
|
||||
opacity: 0.5;
|
||||
}
|
||||
// Hidden
|
||||
&.hidden {
|
||||
padding: 0;
|
||||
transform: scale(0) translateZ(0);
|
||||
opacity: 0;
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover:not(.active) {
|
||||
button {
|
||||
background-color: lighten($color-lightpurple, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
background-color: $color-lightpurple;
|
||||
border-radius: 50%;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,132 +0,0 @@
|
||||
/* ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== */
|
||||
.footer {
|
||||
background-color: $color-primary-darker;
|
||||
|
||||
.wrap {
|
||||
display: block;
|
||||
padding-top: 48px;
|
||||
padding-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 120px;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Left part
|
||||
&__left {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right part
|
||||
&__right {
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
|
||||
& > ul {
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding-top: 6px;
|
||||
}
|
||||
}
|
||||
|
||||
li {
|
||||
display: block;
|
||||
text-align: center;
|
||||
height: 100%;
|
||||
|
||||
& > ul {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 32px;
|
||||
margin-top: 3px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 0;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
li {
|
||||
margin-right: 20px;
|
||||
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
transition: color 85ms $ease-inout;
|
||||
|
||||
img, svg {
|
||||
margin-right: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-right: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover, &.is-active {
|
||||
color: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Instagram
|
||||
.instagram {
|
||||
a {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
svg {
|
||||
display: block;
|
||||
transition: fill 275ms $ease-cubic;
|
||||
}
|
||||
|
||||
// Hover
|
||||
a:hover svg {
|
||||
fill: $color-secondary;
|
||||
}
|
||||
}
|
||||
|
||||
// Made by
|
||||
.by {
|
||||
text-align: center;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 22px;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
transition: transform 400ms $ease-quart;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
// Hover
|
||||
a:hover img {
|
||||
transform: scale(1.05);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,87 +0,0 @@
|
||||
.fullscreen {
|
||||
position: fixed;
|
||||
z-index: 200;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
&, * {
|
||||
will-change: transform, opacity;
|
||||
}
|
||||
|
||||
// Photo
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow-x: auto;
|
||||
opacity: 0;
|
||||
transform: scale(1.1);
|
||||
background: $color-primary;
|
||||
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
|
||||
|
||||
img {
|
||||
position: relative;
|
||||
z-index: 200;
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
// Open
|
||||
&.is-open {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
pointer-events: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Controls
|
||||
&__close {
|
||||
position: fixed;
|
||||
z-index: 201;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transform: scale(1.1) translateY(24px) translateZ(0);
|
||||
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
|
||||
|
||||
// Visible state
|
||||
&.is-visible {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0) translateZ(0);
|
||||
}
|
||||
}
|
||||
|
||||
// Loading
|
||||
&__loading {
|
||||
position: absolute;
|
||||
z-index: 202;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) translateZ(0);
|
||||
transform-origin: 50% 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
background-color: $color-primary;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
|
||||
|
||||
// Hidden state
|
||||
&.is-hidden {
|
||||
transform: scale(1.05) translate(-50%, -50%) translateZ(0);
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,73 +0,0 @@
|
||||
.browse {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
margin-bottom: 56px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
}
|
||||
|
||||
// Description
|
||||
&__description {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
// Continents
|
||||
&__continents {
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
justify-content: center;
|
||||
margin-bottom: 8px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 4px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Locations
|
||||
&__locations {
|
||||
min-height: 120px;
|
||||
margin-top: 72px;
|
||||
|
||||
@include breakpoint (600px) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-column-gap: pxVW(96);
|
||||
grid-row-gap: pxVW(96);
|
||||
min-height: 200px;
|
||||
margin-top: 112px;
|
||||
margin-bottom: pxVW(72);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
grid-column-gap: 96px;
|
||||
grid-row-gap: 96px;
|
||||
// max-width: 1024px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 72px;
|
||||
|
||||
// To apply when having 4 locations:
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
max-width: 1200px;
|
||||
// grid-column-gap: 120px;
|
||||
// grid-row-gap: 120px;
|
||||
// Works well but fucks with the FLIP animations
|
||||
// grid-auto-flow: column;
|
||||
// grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,121 +0,0 @@
|
||||
// Pagination
|
||||
.pagination {
|
||||
position: relative;
|
||||
padding: 64px 0 72px;
|
||||
background-color: $color-tertiary;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding-top: pxVW(120);
|
||||
padding-bottom: pxVW(120);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 120px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
|
||||
// Pages
|
||||
&__page {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin: 0 auto;
|
||||
font-family: $font-serif-extra;
|
||||
font-size: rem(72px);
|
||||
color: rgba($color-text, 0.15);
|
||||
line-height: 1;
|
||||
cursor: pointer;
|
||||
transition: color 250ms $ease-cubic;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(120px);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
font-size: rem(160px);
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: rgba($color-text, 0.25);
|
||||
}
|
||||
}
|
||||
|
||||
// Numbers
|
||||
&__numbers {
|
||||
overflow: hidden;
|
||||
height: 62px;
|
||||
margin-right: 4px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 102px;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
height: 136px;
|
||||
}
|
||||
|
||||
.scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transform: translate(0, 0) translateZ(0);
|
||||
text-align: right;
|
||||
line-height: 0.85;
|
||||
transition: transform 325ms $ease-cubic;
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
&__info {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -72%) translateZ(0);
|
||||
font-family: $font-serif;
|
||||
font-size: rem(18px);
|
||||
color: $color-secondary-bright;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(32px);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
|
||||
// Caption
|
||||
&__caption {
|
||||
max-width: 420px;
|
||||
margin: 0 auto;
|
||||
font-size: 10px;
|
||||
color: $color-lightgray;
|
||||
letter-spacing: 2px;
|
||||
line-height: 1.6;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// Message
|
||||
&__message {
|
||||
// Newsletter
|
||||
.newsletter {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 24px 0 0;
|
||||
}
|
||||
|
||||
// Title
|
||||
h2 {
|
||||
font-size: rem(32px);
|
||||
|
||||
@include breakpoint (md) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,248 +0,0 @@
|
||||
.photos {
|
||||
position: relative;
|
||||
margin-top: -22px;
|
||||
background-color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -128px;
|
||||
padding-top: 88px;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 72px;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
&__side {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (md) {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
left: 24px;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
transform-origin: left top;
|
||||
transform: rotate(-90deg) translateX(-100%);
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
color: $color-lightgray;
|
||||
margin-right: 24px;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Container
|
||||
&__sidewrap {
|
||||
@include breakpoint (md) {
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
top: 32px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
// Each photo
|
||||
.photo {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** List view
|
||||
*/
|
||||
&--list {
|
||||
.photos__view {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
padding-bottom: 80px;
|
||||
overflow: hidden;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding-bottom: 120px;
|
||||
|
||||
&:last-child {
|
||||
padding-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Title
|
||||
h2 {
|
||||
@include breakpoint (sm) {
|
||||
max-width: 840px;
|
||||
}
|
||||
}
|
||||
|
||||
// Even photos
|
||||
&:nth-child(even) {
|
||||
@include breakpoint (sm) {
|
||||
// Location
|
||||
.photo__location, h2 {
|
||||
text-align: right;
|
||||
}
|
||||
h2 {
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo {
|
||||
&__image {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&__date {
|
||||
right: 100%;
|
||||
left: -30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Number
|
||||
.photo__number {
|
||||
@include breakpoint (sm) {
|
||||
right: auto;
|
||||
left: 8%;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
right: auto;
|
||||
left: 0;
|
||||
transform: translate(-23vw, -50%);
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
transform: translate(-26vw, -50%);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
transform: translate(-66%, -50%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Number
|
||||
&__number {
|
||||
@include breakpoint (sm) {
|
||||
will-change: transform;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -64px;
|
||||
padding-top: pxVW(240);
|
||||
padding-bottom: pxVW(120);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
padding-top: pxVW(200);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 200px;
|
||||
padding-bottom: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
/*
|
||||
** Grid view
|
||||
*/
|
||||
&--grid {
|
||||
.photos__view {
|
||||
@include breakpoint (md) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 48px;
|
||||
grid-row-gap: 72px;
|
||||
padding-left: 192px;
|
||||
padding-right: 64px;
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
padding-left: 192px;
|
||||
}
|
||||
@include breakpoint (1776px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include breakpoint (mob) {
|
||||
margin-bottom: pxVW(176);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Every second (on column 2)
|
||||
&--odd {
|
||||
@include breakpoint (md) {
|
||||
transform: translateY(-64px);
|
||||
}
|
||||
}
|
||||
|
||||
.wrap, .wrapper {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Location
|
||||
&__location {
|
||||
text-align: left;
|
||||
|
||||
h2 {
|
||||
font-size: rem(28px);
|
||||
margin-top: 24px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Image informations
|
||||
&__img {
|
||||
border-radius: 8px;
|
||||
}
|
||||
&__number {
|
||||
font-size: rem(96px);
|
||||
bottom: -88px;
|
||||
right: 24px;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
top: auto;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
&__date {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,54 +1,36 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Dependencies
|
||||
@import "sanitize.css/sanitize";
|
||||
|
||||
// Tools
|
||||
@import "variables";
|
||||
@import "tools/mixins";
|
||||
@import "tools/functions";
|
||||
@import "tools/helpers";
|
||||
|
||||
// Dependencies
|
||||
@import "normalize.css/normalize";
|
||||
|
||||
// Base
|
||||
@import "base";
|
||||
@import "fonts";
|
||||
@import "typography";
|
||||
|
||||
// Layout
|
||||
@import "layout/grid";
|
||||
|
||||
|
||||
// Atomic Design System
|
||||
// Atoms
|
||||
@import "atoms/button";
|
||||
@import "atoms/button-outline";
|
||||
@import "atoms/button-control";
|
||||
@import "atoms/icon-globe";
|
||||
@import "atoms/toggle";
|
||||
@import "atoms/link";
|
||||
@import "atoms/switcher";
|
||||
@import "atoms/counter";
|
||||
@import "atoms/badge";
|
||||
@import "atoms/inputs";
|
||||
// @import "atoms/atom";
|
||||
|
||||
// Molecules
|
||||
@import "molecules/location";
|
||||
@import "molecules/photo";
|
||||
@import "molecules/globe";
|
||||
@import "molecules/newsletter";
|
||||
@import "molecules/form";
|
||||
// @import "molecules/molecule";
|
||||
|
||||
// Organisms
|
||||
@import "organisms/carousel";
|
||||
@import "organisms/photos";
|
||||
@import "organisms/fullscreen";
|
||||
@import "organisms/locations";
|
||||
@import "organisms/pagination";
|
||||
@import "organisms/footer";
|
||||
// @import "organisms/organism";
|
||||
|
||||
// Layouts
|
||||
@import "layouts/main";
|
||||
@import "layouts/explore";
|
||||
|
||||
// Pages
|
||||
@import "pages/page";
|
||||
@import "pages/homepage";
|
||||
@import "pages/viewer";
|
||||
@import "pages/place";
|
||||
// @import "pages/page";
|
||||
|
||||
// Animations
|
||||
@import "animations";
|
||||
// Misc
|
||||
// @import "animations";
|
||||
@@ -1,34 +1,43 @@
|
||||
@use "sass:math";
|
||||
|
||||
/* PX to REM
|
||||
========================================================================== */
|
||||
@function rem ($target, $context: $base-font-size) {
|
||||
@function rem($target, $context: $base-font-size) {
|
||||
@if $target == 0 { @return 0 }
|
||||
$size: $target / $context;
|
||||
@return round($size * 1000) / 1000 + rem;
|
||||
$size: math.div($target, $context);
|
||||
@return math.div(round($size * 1000), 1000) + rem;
|
||||
}
|
||||
|
||||
|
||||
/* PX to VW
|
||||
========================================================================== */
|
||||
@function pxVW ($value, $base: $base-width) {
|
||||
@if $value == 0 { @return 0; }
|
||||
@return ($value / $base) * 100 + vw;
|
||||
@function pxVW($value, $base: $base-width) {
|
||||
@if $value == 0 { @return 0 }
|
||||
@return math.div($value, $base) * 100 + vw;
|
||||
}
|
||||
|
||||
|
||||
/* VW to PX
|
||||
========================================================================== */
|
||||
@function vwPX ($value, $base: $base-width) {
|
||||
@function vwPX($value, $base: $base-width) {
|
||||
@if $value == 0 { @return 0; }
|
||||
@return ($value * $base) / 100 + px;
|
||||
@return math.div(($value * $base), 100) + px;
|
||||
}
|
||||
|
||||
|
||||
/* Headings
|
||||
========================================================================== */
|
||||
@function headings ($from: 1, $to: 6) {
|
||||
@function headings($from: 1, $to: 6) {
|
||||
@if $from == $to {
|
||||
@return "h#{$from}";
|
||||
} @else {
|
||||
@return "h#{$from}," + headings($from + 1, $to);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/* HEX color to RGB
|
||||
========================================================================== */
|
||||
@function hexToRGB($color) {
|
||||
@return red($color), green($color), blue($color);
|
||||
}
|
||||
@@ -27,13 +27,13 @@
|
||||
margin: 0 auto;
|
||||
padding: 0 16px;
|
||||
|
||||
@include breakpoint (mob) {
|
||||
@include bp (mob) {
|
||||
padding: 0 24px;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
@include bp (sm) {
|
||||
padding: 0 60px;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
@include bp (md) {
|
||||
padding: 0 128px;
|
||||
}
|
||||
}
|
||||
@@ -44,10 +44,10 @@
|
||||
margin: 0 auto;
|
||||
padding: 0 pxVW(128);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
@include bp (sm) {
|
||||
padding: 0 pxVW(224);
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
@include bp (xxl) {
|
||||
padding: 0 224px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
@use "sass:math";
|
||||
|
||||
// Hide text
|
||||
%hide-text {
|
||||
overflow: hidden;
|
||||
@@ -16,8 +18,8 @@
|
||||
|
||||
// Get REM font-size and line-height
|
||||
@mixin fs-lh ($fontSize, $lineHeight) {
|
||||
line-height: round(($fontSize / $lineHeight) * 1000) / 1000;
|
||||
font-size: rem($fontSize);
|
||||
line-height: math.div(round(math.div($lineHeight, $fontSize) * 1000), 1000);
|
||||
}
|
||||
|
||||
// Top-right-bottom-left
|
||||
@@ -25,67 +27,60 @@
|
||||
top: $value; right: $value; bottom: $value; left: $value;
|
||||
}
|
||||
|
||||
// Center vertically
|
||||
@mixin center-y {
|
||||
top: 50%;
|
||||
transform: translate(0, -50%);
|
||||
}
|
||||
|
||||
// Center horizontally
|
||||
@mixin center-x {
|
||||
left: 50%;
|
||||
transform: translate(-50%, 0);
|
||||
}
|
||||
|
||||
// Center vertically and horizontally
|
||||
@mixin center-xy {
|
||||
top: 50%; left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
// Smooth fonts
|
||||
@mixin font-smooth {
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
// Reponsive breakpoints
|
||||
@mixin breakpoint ($size) {
|
||||
@if ($size == mob) {
|
||||
@media (min-width: $screen-mob) { @content; }
|
||||
// Font-face
|
||||
@mixin font-face ($family, $variant, $weight: normal, $style: normal, $display: swap) {
|
||||
@font-face {
|
||||
font-family: "#{$family}";
|
||||
font-style: $style;
|
||||
font-weight: $weight;
|
||||
font-display: $display;
|
||||
src: local("#{$variant}"),
|
||||
url("#{$dir-fonts}/#{$variant}.woff2") format("woff2"),
|
||||
url("#{$dir-fonts}/#{$variant}.woff") format("woff");
|
||||
}
|
||||
@else if ($size == xs) {
|
||||
@media (max-width: $screen-xs) { @content; }
|
||||
}
|
||||
@else if ($size == sm) {
|
||||
@media (min-width: $screen-sm) { @content; }
|
||||
}
|
||||
@else if ($size == md) {
|
||||
@media (min-width: $screen-md) { @content; }
|
||||
}
|
||||
@else if ($size == lg) {
|
||||
@media (min-width: $screen-lg) { @content; }
|
||||
}
|
||||
@else if ($size == xl) {
|
||||
@media (min-width: $screen-xl) { @content; }
|
||||
}
|
||||
@else if ($size == xxl) {
|
||||
@media (min-width: $screen-xxl) { @content; }
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Reponsive breakpoint
|
||||
*/
|
||||
// Based on Width
|
||||
@mixin bp ($size, $to: min, $sizes: $breakpoints) {
|
||||
// Size is in map
|
||||
@if map-has-key($sizes, $size) {
|
||||
$size: map-get($sizes, $size);
|
||||
|
||||
@if ($to == max) {
|
||||
@media (max-width: #{$size}) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@media (min-width: #{$size}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
// Not in the map
|
||||
@else {
|
||||
@media (min-width: $size) { @content; }
|
||||
}
|
||||
}
|
||||
|
||||
// Font-face
|
||||
@mixin font-face ($family) {
|
||||
@font-face {
|
||||
font-family: "#{$family}";
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-display: swap;
|
||||
src: local("#{$family}"),
|
||||
url("#{$dir-fonts}/#{$family}.woff2") format("woff2"),
|
||||
url("#{$dir-fonts}/#{$family}.woff") format("woff");
|
||||
// Based on Height
|
||||
@mixin bph ($size, $to: min, $sizes: $breakpoints) {
|
||||
@if ($to == max) {
|
||||
@media (max-height: #{$size}) {
|
||||
@content;
|
||||
}
|
||||
} @else {
|
||||
@media (min-height: #{$size}) {
|
||||
@content;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user