WIP
This commit is contained in:
@@ -1,6 +1,54 @@
|
||||
/* ==========================================================================
|
||||
GLOBAL
|
||||
PARALLAX EFFECTS
|
||||
========================================================================== */
|
||||
// Parallax title: Translate X
|
||||
.title-parallax {
|
||||
transform: translate3d(var(--translateX), 0, 0);
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
REVEAL ANIMATIONS
|
||||
========================================================================== */
|
||||
.anim-mask {
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
// Translate each letter from top/bottom
|
||||
[data-aos="letters-translate-top"],
|
||||
[data-aos="letters-translate-bottom"] {
|
||||
white-space: nowrap;
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
transition: all 1000ms $ease-quart;
|
||||
|
||||
@for $i from 1 to 8 {
|
||||
&:nth-child(#{$i}) {
|
||||
transition-delay: $i * 40ms;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.aos-animate {
|
||||
span {
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
[data-aos="letters-translate-top"] {
|
||||
span {
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
}
|
||||
[data-aos="letters-translate-bottom"] {
|
||||
span {
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
@@ -33,19 +81,22 @@
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
// Layout: List
|
||||
@keyframes layoutListOdd {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(4px); }
|
||||
}
|
||||
@keyframes layoutListEven {
|
||||
0% { transform: translateX(0); }
|
||||
100% { transform: translateX(-4px); }
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
HEADER
|
||||
========================================================================== */
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/* ==========================================================================
|
||||
MAIN
|
||||
========================================================================== */
|
||||
// Layout: Grid
|
||||
@keyframes layoutGridOdd {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(3px); }
|
||||
}
|
||||
@keyframes layoutGridEven {
|
||||
0% { transform: translateY(0); }
|
||||
100% { transform: translateY(-3px); }
|
||||
}
|
||||
@@ -1,6 +1,11 @@
|
||||
html {
|
||||
font: #{$base-font-size} $font-sans;
|
||||
color: $color-text;
|
||||
scroll-behavior: smooth;
|
||||
|
||||
@media screen and (prefers-reduced-motion: reduce) {
|
||||
scroll-behavior: auto;
|
||||
}
|
||||
}
|
||||
body {
|
||||
@include font-smooth;
|
||||
@@ -50,30 +55,42 @@ button {
|
||||
|
||||
// Title: Massive
|
||||
.title-massive {
|
||||
font-size: 50.25vw;
|
||||
letter-spacing: -2vw;
|
||||
font-family: $font-serif-extra;
|
||||
color: $color-secondary;
|
||||
font-size: pxVW(800);
|
||||
line-height: 1;
|
||||
color: $color-secondary;
|
||||
letter-spacing: -2vw;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (xxl) {
|
||||
font-size: rem(900px);
|
||||
}
|
||||
}
|
||||
|
||||
// Title: Locations
|
||||
.title-location {
|
||||
font-size: rem(68px);
|
||||
font-family: $font-serif;
|
||||
color: $color-secondary;
|
||||
font-size: rem(68px);
|
||||
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);
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
@@ -101,26 +118,30 @@ button {
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Inline version
|
||||
&--inline {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
justify-content: center;
|
||||
|
||||
em {
|
||||
margin: 0 16px 0 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parallax title: Translate X
|
||||
.title-parallax {
|
||||
transform: translate3d(var(--translateX), 0, 0);
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* Text Styles
|
||||
========================================================================== */
|
||||
.location {
|
||||
.style-location {
|
||||
text-align: center;
|
||||
|
||||
.street {
|
||||
margin-bottom: 8px;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(24px);
|
||||
margin-bottom: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(28px);
|
||||
@@ -130,20 +151,20 @@ button {
|
||||
|
||||
.style-caps {
|
||||
font-size: rem(14px);
|
||||
color: $color-tertiary;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
.description {
|
||||
.style-description {
|
||||
font-family: $font-sans-light;
|
||||
font-size: rem(18px);
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 572px;
|
||||
font-size: rem(28px);
|
||||
line-height: 1.64;
|
||||
max-width: 572px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
// Colors
|
||||
$color-primary: #3C0576;
|
||||
$color-secondary: #FF6C89;
|
||||
$color-secondary-bright: #FF0536;
|
||||
$color-text: #333;
|
||||
$color-tertiary: #FFE0C5;
|
||||
$color-lightpurple: #8B50B2;
|
||||
@@ -37,6 +38,8 @@ $font-serif-extra: "M-Extralight", #{$replacement-serif};
|
||||
|
||||
/* Sizes, margins and spacing
|
||||
====================================================================== */
|
||||
$base-width: 1600;
|
||||
|
||||
// Blocks
|
||||
|
||||
|
||||
@@ -62,3 +65,4 @@ $screen-sm: 768px;
|
||||
$screen-md: 992px;
|
||||
$screen-lg: 1200px;
|
||||
$screen-xl: 1440px;
|
||||
$screen-xxl: 1600px;
|
||||
|
||||
245
src/style/atoms/_button-control.scss
Normal file
245
src/style/atoms/_button-control.scss
Normal file
@@ -0,0 +1,245 @@
|
||||
// Button: Control
|
||||
.button-control {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
padding-top: 2px;
|
||||
pointer-events: auto;
|
||||
border-radius: 50vh;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: background-color 350ms $ease-quart;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
// Icon
|
||||
.icon {
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: auto;
|
||||
transition: transform 500ms $ease-quart, opacity 150ms $ease-inout;
|
||||
overflow: hidden;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Variants
|
||||
*/
|
||||
&--white {
|
||||
background-color: #fff;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
&--pink {
|
||||
background-color: rgba($color-secondary, 0.4);
|
||||
|
||||
&:hover {
|
||||
background-color: rgba($color-secondary, 0.75);
|
||||
}
|
||||
}
|
||||
&--gray {
|
||||
background-color: $color-gray;
|
||||
|
||||
&:hover {
|
||||
background-color: $color-text;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Directions
|
||||
*/
|
||||
// To left
|
||||
&.dir-left {
|
||||
.icon[aria-hidden] {
|
||||
transform: translate3d(100%, -50%, 0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate3d(-100%, 0, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
// To right
|
||||
&.dir-right {
|
||||
.icon[aria-hidden] {
|
||||
transform: translate3d(-150%, -50%, 0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate3d(100%, 0, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
// From top
|
||||
&.dir-top {
|
||||
.icon[aria-hidden] {
|
||||
left: auto;
|
||||
transform: translate3d(0, -150%, 0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
// From bottom
|
||||
&.dir-bottom {
|
||||
.icon[aria-hidden] {
|
||||
left: auto;
|
||||
transform: translate3d(0, 150%, 0);
|
||||
}
|
||||
|
||||
&:hover {
|
||||
.icon:not([aria-hidden]) {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -100%, 0);
|
||||
}
|
||||
.icon[aria-hidden] {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Dashed style
|
||||
*/
|
||||
&--dashed {
|
||||
position: relative;
|
||||
overflow: visible;
|
||||
background-color: rgba($color-lightpurple, 0.5);
|
||||
transition: background-color 150ms $ease-inout;
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: rgba($color-lightpurple, 0.65);
|
||||
|
||||
* {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
/*
|
||||
** Big version
|
||||
*/
|
||||
&--big {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
text-decoration: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
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(6px);
|
||||
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 {
|
||||
@include breakpoint (sm) {
|
||||
circle {
|
||||
stroke-width: 4.5;
|
||||
stroke-dasharray: 20, 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
66
src/style/atoms/_button-outline.scss
Normal file
66
src/style/atoms/_button-outline.scss
Normal file
@@ -0,0 +1,66 @@
|
||||
// Button: Outline
|
||||
.button-outline {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 1px 16px 0;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50vh;
|
||||
overflow: hidden;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 275ms $ease-cubic;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 40px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
// Second text
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
display: block;
|
||||
text-align: center;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translate3d(0, -120%, 0);
|
||||
}
|
||||
|
||||
span, &:after {
|
||||
transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
color: $color-lightpurple;
|
||||
border-color: $color-lightpurple;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
border-color: $color-tertiary;
|
||||
|
||||
span {
|
||||
opacity: 0;
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -4,6 +4,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
font-family: $font-sans-sb;
|
||||
@@ -11,11 +12,10 @@
|
||||
color: $color-gray;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms, color 350ms;
|
||||
transition: background-color 250ms $ease-cubic, color 350ms $ease-cubic;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 48px;
|
||||
@@ -39,37 +39,35 @@
|
||||
}
|
||||
}
|
||||
svg {
|
||||
transition: all 350ms;
|
||||
transition: all 350ms $ease-cubic;
|
||||
|
||||
.anim {
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
}
|
||||
|
||||
// Text
|
||||
&:before {
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
&:after {
|
||||
opacity: 0;
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
display: block;
|
||||
top: 50%;
|
||||
left: calc(50% + 19px);
|
||||
width: 100%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
transition: transform 350ms, opacity 350ms;
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
|
||||
// transition-delay: 75ms;
|
||||
transform: translate3d(-50%, -120%, 0);
|
||||
}
|
||||
span {
|
||||
display: inline-block;
|
||||
transform: translate3d(0, -6px, 0);
|
||||
transition: transform 350ms, opacity 350ms;
|
||||
transition-timing-function: cubic-bezier(0.75, 0, 0.125, 1);
|
||||
opacity: 0;
|
||||
|
||||
@for $i from 1 to 20 {
|
||||
&:nth-child(#{$i}) { transition-delay: $i * 12ms; }
|
||||
}
|
||||
span, &:after {
|
||||
transition: opacity 275ms $ease-cubic, transform 275ms $ease-cubic;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
background-color: $color-secondary;
|
||||
|
||||
svg {
|
||||
fill: #fff !important;
|
||||
@@ -77,260 +75,13 @@
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
&:before {
|
||||
span {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, 75%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
}
|
||||
span {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
// &:after {
|
||||
// opacity: 1;
|
||||
// width: 300px;
|
||||
// height: 300px;
|
||||
// }
|
||||
}
|
||||
// &:after {
|
||||
// content: "";
|
||||
// position: absolute;
|
||||
// z-index: 1;
|
||||
// top: 50%;
|
||||
// left: 50%;
|
||||
// transform: translate3d(-50%, -50%, 0);
|
||||
// width: 200px;
|
||||
// height: 200px;
|
||||
// background: $color-primary;
|
||||
// opacity: 0;
|
||||
// border-radius: 50vh;
|
||||
// transition: all 250ms ease-in-out;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Button: Control
|
||||
.button-control {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
pointer-events: auto;
|
||||
border-radius: 50vh;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 56px;
|
||||
height: 56px;
|
||||
}
|
||||
|
||||
// Icon
|
||||
img {
|
||||
display: block;
|
||||
width: 13px;
|
||||
height: auto;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 20px;
|
||||
}
|
||||
}
|
||||
|
||||
// White variant
|
||||
&--white {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
// Pink variant
|
||||
&--pink {
|
||||
background-color: rgba($color-secondary, .4);
|
||||
}
|
||||
|
||||
// Gray variant
|
||||
&--gray {
|
||||
background-color: $color-gray;
|
||||
}
|
||||
|
||||
// Next direction
|
||||
&.next {
|
||||
img {
|
||||
transform: rotateY(180deg);
|
||||
margin-left: -1px;
|
||||
}
|
||||
}
|
||||
|
||||
// Dashed style
|
||||
&--dashed {
|
||||
position: relative;
|
||||
background-color: rgba($color-lightpurple, .5);
|
||||
transition: background-color 150ms ease-in-out;
|
||||
|
||||
// Icon
|
||||
svg[style] {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Dashed circle
|
||||
svg:not([style]) {
|
||||
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, .35);
|
||||
fill: none;
|
||||
transform-origin: 50% 50%;
|
||||
animation: rotateDashes 5s linear infinite;
|
||||
animation-play-state: paused;
|
||||
animation-delay: 100ms;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: rgba($color-lightpurple, .65);
|
||||
|
||||
* {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Big
|
||||
&--big {
|
||||
width: 72px;
|
||||
height: 72px;
|
||||
text-decoration: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
width: 152px;
|
||||
height: 152px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
margin-top: 8px;
|
||||
color: rgba(#fff, .3);
|
||||
text-transform: uppercase;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(6px);
|
||||
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 {
|
||||
@include breakpoint (sm) {
|
||||
circle {
|
||||
stroke-width: 4.5;
|
||||
stroke-dasharray: 20, 8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Button: Outline
|
||||
.button-outline {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 32px;
|
||||
padding: 0 16px;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: #fff;
|
||||
background: none;
|
||||
border: 2px solid #fff;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
transition: all 150ms ease;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 40px;
|
||||
font-size: rem(18px);
|
||||
}
|
||||
|
||||
// Disabled
|
||||
&.disabled {
|
||||
color: $color-lightpurple;
|
||||
border-color: $color-lightpurple;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-tertiary;
|
||||
border-color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Toggle Button
|
||||
.toggle {
|
||||
margin-top: 58px;
|
||||
background-color: rgba($color-secondary, .25);
|
||||
display: inline-flex;
|
||||
border-radius: 50vh;
|
||||
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
color: $color-secondary;
|
||||
border-radius: 50vw;
|
||||
padding: 12px 24px;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(18px);
|
||||
line-height: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
// Active button
|
||||
&.active {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
|
||||
svg * {
|
||||
fill: #C78FEC;
|
||||
}
|
||||
|
||||
& + button {
|
||||
padding-left: 16px;
|
||||
}
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +0,0 @@
|
||||
// Zoom cursor
|
||||
.cursor-zoom {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
background: url(#{$dir-img}/icons/zoom.svg) 0 0 no-repeat;
|
||||
background-size: cover;
|
||||
transition: opacity 300ms ease, transform 300ms ease;
|
||||
filter: drop-shadow(1px 1px 4px rgba(#000, .7));
|
||||
|
||||
// By default
|
||||
&[aria-hidden="true"] {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transform: scale3d(0.7, 0.7, 0.7);
|
||||
}
|
||||
}
|
||||
@@ -6,20 +6,21 @@
|
||||
padding: 0 8px;
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: color 200ms ease;
|
||||
transition: color 200ms $ease-cubic;
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: rgba($color-secondary, .22);
|
||||
background-color: rgba($color-secondary, 0.22);
|
||||
height: 14px;
|
||||
width: 100%;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
border-radius: 50vh;
|
||||
transition: all 200ms ease;
|
||||
transition: all 200ms $ease-cubic;
|
||||
transition-delay: 50ms;
|
||||
}
|
||||
|
||||
// Icon
|
||||
@@ -46,7 +47,7 @@
|
||||
color: $color-text;
|
||||
|
||||
&:after {
|
||||
background-color: rgba($color-secondary, .4);
|
||||
background-color: rgba($color-secondary, 0.4);
|
||||
}
|
||||
svg * {
|
||||
animation-play-state: running;
|
||||
|
||||
@@ -29,6 +29,7 @@
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.bottom {
|
||||
display: block;
|
||||
color: $color-secondary;
|
||||
@@ -46,26 +47,17 @@
|
||||
height: 52px;
|
||||
margin-top: 4px;
|
||||
margin-left: -8px;
|
||||
|
||||
// Image
|
||||
// svg {
|
||||
// height: 28px;
|
||||
// width: auto;
|
||||
// }
|
||||
|
||||
// Dashed circle
|
||||
// svg {
|
||||
// width: 64px;
|
||||
// height: 64px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Side version (smaller)
|
||||
/*
|
||||
** Side version (smaller)
|
||||
*/
|
||||
&--side {
|
||||
.switcher {
|
||||
&__text {
|
||||
font-size: rem(22px);
|
||||
pointer-events: none;
|
||||
}
|
||||
&__icon {
|
||||
width: 40px;
|
||||
@@ -75,16 +67,20 @@
|
||||
circle {
|
||||
stroke: #F4EDFB;
|
||||
}
|
||||
img, svg[fill] {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#F4EDFB, 7);
|
||||
|
||||
circle {
|
||||
stroke: darken(#F4EDFB, 7);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
color: $color-primary;
|
||||
}
|
||||
img, svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
90
src/style/atoms/_toggle.scss
Normal file
90
src/style/atoms/_toggle.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
// 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 150ms $ease-inout;
|
||||
}
|
||||
button {
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
svg {
|
||||
fill: $color-secondary;
|
||||
* {
|
||||
transition: fill 150ms $ease-inout;
|
||||
transition-delay: 0ms;
|
||||
}
|
||||
}
|
||||
|
||||
// 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 400ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
rect:nth-of-type(odd) {
|
||||
animation: layoutListOdd 400ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
}
|
||||
// Grid icon
|
||||
&[data-layout="grid"]:hover {
|
||||
rect:nth-of-type(even) {
|
||||
animation: layoutGridEven 400ms $ease-cubic infinite alternate forwards;
|
||||
}
|
||||
rect:nth-of-type(odd) {
|
||||
animation: layoutGridOdd 400ms $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;
|
||||
|
||||
span {
|
||||
content: attr(data-text);
|
||||
display: block;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -31,7 +31,7 @@
|
||||
}
|
||||
|
||||
// Right part
|
||||
&__right{
|
||||
&__right {
|
||||
font-size: 14px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
@@ -67,7 +67,7 @@
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
color: rgba(#fff, .4)
|
||||
color: rgba(#fff, 0.4)
|
||||
}
|
||||
|
||||
img {
|
||||
|
||||
@@ -1,42 +1,75 @@
|
||||
// Pagination
|
||||
.pagination {
|
||||
position: relative;
|
||||
padding: 64px 0 72px;
|
||||
background-color: $color-tertiary;
|
||||
text-align: center;
|
||||
padding: 64px 0 72px;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 16vw 0 7.5vw;
|
||||
margin-top: -64px;
|
||||
padding: pxVW(176) 0 pxVW(120);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 200px;
|
||||
padding: 176px 0 120px;
|
||||
}
|
||||
|
||||
// Pages
|
||||
&__page {
|
||||
p {
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-text, .15);
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
font-size: rem(72px);
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 auto;
|
||||
padding-left: 72px;
|
||||
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(160px);
|
||||
}
|
||||
|
||||
// Numbers
|
||||
&--numbers {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -32px;
|
||||
height: 136px;
|
||||
overflow: hidden;
|
||||
|
||||
.scroll {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
height: 100%;
|
||||
text-align: right;
|
||||
line-height: 0.85;
|
||||
transform: translate3d(0, -190%, 0);
|
||||
transition: transform 250ms $ease-cubic;
|
||||
}
|
||||
}
|
||||
|
||||
// Info
|
||||
&--info {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -72%);
|
||||
font-family: $font-serif;
|
||||
font-size: 18px;
|
||||
color: $color-secondary-bright;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(160px);
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-serif;
|
||||
color: #FF0536;
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -65%);
|
||||
// Hover
|
||||
&:hover {
|
||||
color: rgba($color-text, 0.25);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(40px);
|
||||
.pagination__page--numbers {
|
||||
.scroll {
|
||||
transform: translate3d(0, -135%, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,13 +1,14 @@
|
||||
.photo {
|
||||
|
||||
// Location
|
||||
/*
|
||||
** Location
|
||||
*/
|
||||
&__location {
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
@@ -26,7 +27,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Image container
|
||||
|
||||
/*
|
||||
** Image
|
||||
*/
|
||||
&__image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
@@ -40,17 +44,18 @@
|
||||
.align {
|
||||
position: relative;
|
||||
max-width: 1180px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Image container
|
||||
&--img {
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 8px 18px rgba(#715E4E, .2);
|
||||
box-shadow: 0 8px 18px rgba(#715E4E, 0.2);
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
@@ -62,14 +67,6 @@
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Cursor
|
||||
.cursor {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
&:after {
|
||||
content: "";
|
||||
@@ -84,7 +81,7 @@
|
||||
background-color: $color-primary;
|
||||
display: block;
|
||||
z-index: 3;
|
||||
transition: all 200ms ease-in-out;
|
||||
transition: all 150ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -94,7 +91,7 @@
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
cursor: none;
|
||||
cursor: url(#{$dir-img}/icons/zoom.svg) 0 0, pointer;
|
||||
|
||||
.photo__image--img:after {
|
||||
opacity: 0.6;
|
||||
@@ -105,10 +102,10 @@
|
||||
// Date (on the side)
|
||||
&--date {
|
||||
display: block;
|
||||
color: $color-lightgray;
|
||||
font-size: rem(14px);
|
||||
margin-top: 16px;
|
||||
padding: 0 8vw;
|
||||
padding: 0 pxVW(128);
|
||||
font-size: rem(14px);
|
||||
color: $color-lightgray;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: absolute;
|
||||
@@ -126,20 +123,23 @@
|
||||
// Photo number
|
||||
&--number {
|
||||
position: absolute;
|
||||
pointer-events: none;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, .5);
|
||||
font-size: rem(124px);
|
||||
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;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 18.75vw;
|
||||
font-size: pxVW(300);
|
||||
left: 92%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
font-size: rem(300px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -11,11 +11,19 @@
|
||||
max-width: 1424px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
margin: 0 auto;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 85%;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
@@ -26,43 +34,80 @@
|
||||
// Photo
|
||||
&--photo {
|
||||
position: absolute;
|
||||
background-color: $color-secondary;
|
||||
background-color: $color-primary;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 60px rgba(#000, .3);
|
||||
box-shadow: 0 16px 56px rgba(#2E025C, 0.7);
|
||||
transition: transform 600ms $ease-quart;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
opacity: 0.55;
|
||||
transition: opacity 600ms $ease-quart;
|
||||
}
|
||||
|
||||
// Temp hiding
|
||||
&:nth-of-type(4), &:nth-of-type(5) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Specific
|
||||
.front {
|
||||
// Active photo
|
||||
.active {
|
||||
z-index: 10;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 100%;
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// Variables
|
||||
$hoverAngle: 1.25deg;
|
||||
$hoverDistance: 7%;
|
||||
|
||||
// Previous photo
|
||||
.prev {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(-5%, -50%) rotate(-1deg);
|
||||
transform: translate3d(-6%, -50%, 0) rotate(-1deg);
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate3d(-$hoverDistance, -50%, 0) rotate(-$hoverAngle);
|
||||
|
||||
img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Next photo
|
||||
.next {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(5%, -50%) rotate(1deg);
|
||||
width: 85%;
|
||||
right: 0;
|
||||
transform: translate3d(6%, -50%, 0) rotate(1deg);
|
||||
width: 85%;
|
||||
}
|
||||
|
||||
// Hover
|
||||
&.hover {
|
||||
transform: translate3d($hoverDistance, -50%, 0) rotate($hoverAngle);
|
||||
|
||||
img {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -82,16 +127,16 @@
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
|
||||
.prev {
|
||||
.dir-left {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.next {
|
||||
.dir-right {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: 0 2px 21px rgba(#000, .15);
|
||||
box-shadow: 0 2px 21px rgba(#000, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -105,16 +150,17 @@
|
||||
.street {
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 5vw;
|
||||
margin-top: pxVW(80);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
color: rgba($color-tertiary, .5);
|
||||
margin-top: 4px;
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -131,16 +177,24 @@
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 3px;
|
||||
padding: 0 4px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active a {
|
||||
&.active button {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
button {
|
||||
background-color: lighten($color-lightpurple, 10);
|
||||
}
|
||||
}
|
||||
}
|
||||
a {
|
||||
button {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
padding: 0;
|
||||
background-color: $color-lightpurple;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
@@ -149,7 +203,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Zoomer
|
||||
|
||||
/*
|
||||
** Zoomer
|
||||
*/
|
||||
.zoomer {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
|
||||
@@ -8,7 +8,9 @@
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
&__description {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
@@ -41,9 +43,12 @@
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-column-gap: 120px;
|
||||
grid-row-gap: 7.5vw;
|
||||
grid-row-gap: pxVW(120);
|
||||
justify-content: center;
|
||||
margin-bottom: 14.5vw;
|
||||
margin-bottom: pxVW(232);
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-bottom: 232px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -101,7 +106,7 @@
|
||||
display: block;
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
background: rgba($color-lightpurple, .3);
|
||||
background: rgba($color-lightpurple, 0.3);
|
||||
border-radius: 50vh;
|
||||
transition: all 85ms ease-in-out;
|
||||
}
|
||||
|
||||
@@ -1,35 +1,44 @@
|
||||
.photos {
|
||||
position: relative;
|
||||
margin-top: -22px;
|
||||
padding-bottom: 102px;
|
||||
background-color: #fff;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -128px;
|
||||
padding-top: 88px;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 72px;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Sidebar
|
||||
&__side {
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 40px;
|
||||
left: 24px;
|
||||
height: 96%;
|
||||
pointer-events: none;
|
||||
|
||||
// Sticky
|
||||
.sticky {
|
||||
position: sticky;
|
||||
top: 16px;
|
||||
display: none;
|
||||
|
||||
@include breakpoint (md) {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
left: 24px;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
transform: rotate(270deg) translate(-46%,-240%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
// Container
|
||||
&--wrap {
|
||||
@include breakpoint (md) {
|
||||
position: sticky;
|
||||
z-index: 10;
|
||||
top: 16px;
|
||||
height: 100%;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
top: 32px;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
color: $color-lightgray;
|
||||
@@ -43,13 +52,12 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Each photo
|
||||
.photo {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
margin-bottom: 102px;
|
||||
|
||||
margin-bottom: 104px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
@@ -60,59 +68,92 @@
|
||||
}
|
||||
}
|
||||
|
||||
// List view
|
||||
|
||||
/*
|
||||
** List view
|
||||
*/
|
||||
&--list {
|
||||
& > .wrap {
|
||||
.photos__view {
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
// Even photos
|
||||
&:nth-child(even) {
|
||||
// Location
|
||||
.photo__location, h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo__image {
|
||||
justify-content: flex-end;
|
||||
|
||||
&--date {
|
||||
right: 100%;
|
||||
left: -30px;
|
||||
}
|
||||
&--number {
|
||||
right: 77%;
|
||||
left: auto;
|
||||
@include breakpoint (sm) {
|
||||
.photo {
|
||||
// Even photos
|
||||
&:nth-child(even) {
|
||||
// Location
|
||||
.photo__location, h2 {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
// Image
|
||||
.photo__image {
|
||||
justify-content: flex-end;
|
||||
|
||||
&--date {
|
||||
right: 100%;
|
||||
left: -30px;
|
||||
}
|
||||
&--number {
|
||||
right: 77%;
|
||||
left: auto;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: 104px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Grid view
|
||||
|
||||
/*
|
||||
** Grid view
|
||||
*/
|
||||
&--grid {
|
||||
& > .wrap {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
grid-column-gap: 48px;
|
||||
grid-row-gap: 72px;
|
||||
padding-left: 192px;
|
||||
padding-right: 64px;
|
||||
.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 (1648px) {
|
||||
padding-right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (md) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
// Every second (on column 2)
|
||||
&:nth-child(2n+2) {
|
||||
transform: translateY(-64px);
|
||||
@include breakpoint (md) {
|
||||
transform: translateY(-64px);
|
||||
}
|
||||
}
|
||||
|
||||
.wrap, .wrapper {
|
||||
@@ -123,7 +164,7 @@
|
||||
// Location
|
||||
&__location {
|
||||
text-align: left;
|
||||
|
||||
|
||||
h2 {
|
||||
font-size: rem(28px);
|
||||
margin-top: 28px;
|
||||
@@ -152,5 +193,10 @@
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Pagination
|
||||
.pagination {
|
||||
margin-top: 64px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,15 +1,6 @@
|
||||
.explore {
|
||||
background-color: $color-primary;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Explore section on the Homepage
|
||||
&--homepage {
|
||||
margin-top: 15.5vw;
|
||||
|
||||
.browse {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Top part
|
||||
&__top {
|
||||
@@ -19,7 +10,7 @@
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
position: relative;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 96px;
|
||||
@@ -28,7 +19,7 @@
|
||||
a {
|
||||
position: absolute;
|
||||
top: -64px;
|
||||
|
||||
|
||||
@include breakpoint (sm){
|
||||
top: 50%;
|
||||
left: 0;
|
||||
@@ -37,34 +28,16 @@
|
||||
}
|
||||
}
|
||||
|
||||
// Homepage: Of text
|
||||
.of {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-bottom: 14vw;
|
||||
font-family: $font-serif-extra;
|
||||
font-size: 15.5vw;
|
||||
line-height: 1;
|
||||
color: $color-lightpurple;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
&__description {
|
||||
max-width: 312px;
|
||||
margin: 0 auto;
|
||||
margin-bottom: 72px;
|
||||
color: $color-tertiary;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
max-width: 472px;
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
}
|
||||
|
||||
// Massive title
|
||||
.title-massive {
|
||||
margin-top: -22vw;
|
||||
margin-left: -60px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,18 +1,18 @@
|
||||
// Introduction
|
||||
.intro {
|
||||
background-color: $color-tertiary;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Title
|
||||
.title-massive {
|
||||
margin-top: -10vw;
|
||||
margin-left: -10vw;
|
||||
.title-parallax {
|
||||
margin-top: -#{pxVW(160)};
|
||||
margin-left: -#{pxVW(160)};
|
||||
}
|
||||
|
||||
|
||||
// Description
|
||||
.description {
|
||||
&__description {
|
||||
margin-bottom: 72px;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 auto 120px;
|
||||
}
|
||||
@@ -26,6 +26,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: relative;
|
||||
@@ -39,8 +40,68 @@
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48vw;
|
||||
height: pxVW(768);
|
||||
background-color: $color-tertiary;
|
||||
|
||||
@include breakpoint (xxl) {
|
||||
height: 820px;
|
||||
}
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
&__images--photo {
|
||||
background-color: $color-secondary;
|
||||
box-shadow: 0 15px 60px rgba(#000, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Explore
|
||||
.explore--homepage {
|
||||
margin-top: pxVW(248);
|
||||
|
||||
@include breakpoint (lg) {
|
||||
margin-top: 248px;
|
||||
}
|
||||
|
||||
.style-description {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
// Browse
|
||||
.browse {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
|
||||
// Massive title
|
||||
.anim-title {
|
||||
margin-top: -#{pxVW(352)};
|
||||
margin-left: -60px;
|
||||
|
||||
span:nth-of-type(1) {
|
||||
letter-spacing: -6vw;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,11 +6,16 @@
|
||||
|
||||
// Title
|
||||
&__title {
|
||||
padding: 14vw 0 15vw;
|
||||
padding: pxVW(224) 0 pxVW(240);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
@include breakpoint (xxl) {
|
||||
padding-top: 240px;
|
||||
padding-bottom: 280px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
@@ -22,7 +27,7 @@
|
||||
}
|
||||
.bottom {
|
||||
text-align: right;
|
||||
margin-left: 8vw;
|
||||
margin-left: pxVW(128);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -38,17 +43,27 @@
|
||||
&__description {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: 12.5vw;
|
||||
padding-top: pxVW(200);
|
||||
padding-bottom: 72px;
|
||||
background-color: $color-tertiary;
|
||||
border-radius: none;
|
||||
|
||||
|
||||
@include breakpoint (m) {
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
padding-bottom: pxVW(240);
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
border-radius: 8px 0 0 8px;
|
||||
padding-bottom: 15vw;
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
padding-top: 200px;
|
||||
padding-bottom: 240px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
margin: 0;
|
||||
max-width: 1280px;
|
||||
}
|
||||
|
||||
p {
|
||||
@@ -58,6 +73,9 @@
|
||||
color: $color-text;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
@include breakpoint (lg) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
@@ -69,23 +87,22 @@
|
||||
|
||||
strong {
|
||||
font-family: $font-sans-sb;
|
||||
color: rgba($color-text, .4);
|
||||
color: rgba($color-text, 0.4);
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;;
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle
|
||||
.toggle {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: inline-flex;
|
||||
@include breakpoint (xs) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Right side background completion
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
@@ -97,9 +114,12 @@
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
|
||||
// Wrap
|
||||
&--wrap {
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (md) {
|
||||
padding-left: 128px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -5,9 +5,18 @@
|
||||
min-height: 560px;
|
||||
padding-top: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
// Top part
|
||||
&__top {
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
@@ -22,7 +31,7 @@
|
||||
@include breakpoint (sm) {
|
||||
position: static;
|
||||
justify-content: center;
|
||||
margin: 24px 0 48px;
|
||||
margin: 24px 0 0;
|
||||
}
|
||||
|
||||
// Tip message
|
||||
@@ -30,7 +39,7 @@
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(10px);
|
||||
text-transform: uppercase;
|
||||
color: rgba($color-tertiary, .4);
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
@@ -55,13 +64,17 @@
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translate3d(0, -37%, 0);
|
||||
margin: 0;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: static;
|
||||
transform: none;
|
||||
margin-bottom: 88px;
|
||||
margin-top: auto;
|
||||
margin-bottom: auto;
|
||||
width: 85%;
|
||||
min-height: 500px;
|
||||
}
|
||||
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
left: 0;
|
||||
@@ -72,7 +85,7 @@
|
||||
&__information {
|
||||
margin-top: 24px;
|
||||
padding: 0 24px;
|
||||
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
@@ -90,7 +103,7 @@
|
||||
|
||||
// Date
|
||||
&--date {
|
||||
color: rgba($color-tertiary, .5);
|
||||
color: rgba($color-tertiary, 0.5);
|
||||
font-size: rem(12px);
|
||||
margin-top: 16px;
|
||||
|
||||
@@ -103,27 +116,31 @@
|
||||
|
||||
// Photo number
|
||||
&__number {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
transform: translate3d(0, 0%, 0);
|
||||
left: 0;
|
||||
top: -33.5vw;
|
||||
width: 100%;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, .4);
|
||||
font-size: 42vw;
|
||||
font-size: pxVW(672);
|
||||
color: rgba($color-tertiary, 0.4);
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: block;
|
||||
top: auto;
|
||||
right: 250px;
|
||||
bottom: -19vw;
|
||||
right: 112px;
|
||||
bottom: -240px;
|
||||
width: auto;
|
||||
font-size: rem(300px);
|
||||
font-size: rem(250px);
|
||||
text-align: right;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
bottom: -288px;
|
||||
font-size: rem(300px);
|
||||
}
|
||||
}
|
||||
|
||||
// Dots
|
||||
|
||||
@@ -15,9 +15,11 @@
|
||||
|
||||
// Atoms
|
||||
@import "atoms/button";
|
||||
@import "atoms/button-outline";
|
||||
@import "atoms/button-control";
|
||||
@import "atoms/toggle";
|
||||
@import "atoms/link";
|
||||
@import "atoms/switcher";
|
||||
@import "atoms/cursor";
|
||||
|
||||
// Molecules
|
||||
@import "molecules/photo";
|
||||
|
||||
@@ -7,6 +7,22 @@
|
||||
}
|
||||
|
||||
|
||||
/* PX to VW
|
||||
========================================================================== */
|
||||
@function pxVW ($value, $base: $base-width) {
|
||||
@if $value == 0 { @return 0; }
|
||||
@return ($value / $base) * 100 + vw;
|
||||
}
|
||||
|
||||
|
||||
/* VW to PX
|
||||
========================================================================== */
|
||||
@function vwPX ($value, $base: $base-width) {
|
||||
@if $value == 0 { @return 0; }
|
||||
@return ($value * $base) / 100 + px;
|
||||
}
|
||||
|
||||
|
||||
/* Headings
|
||||
========================================================================== */
|
||||
@function headings ($from: 1, $to: 6) {
|
||||
|
||||
@@ -22,7 +22,7 @@
|
||||
========================================================================== */
|
||||
// Wrap (global)
|
||||
.wrap {
|
||||
max-width: 1424px;
|
||||
max-width: 1648px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
|
||||
@@ -32,18 +32,21 @@
|
||||
@include breakpoint (md) {
|
||||
padding: 0 128px;
|
||||
}
|
||||
@include breakpoint (1600px) {
|
||||
padding: 0 48px;
|
||||
@include breakpoint (xxl) {
|
||||
// padding: 0 48px;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper (inside and more spaced)
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: calc(892px + 28vw);
|
||||
padding: 0 8vw;
|
||||
|
||||
margin: 0 auto;
|
||||
padding: 0 pxVW(128);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 0 14vw;
|
||||
padding: 0 pxVW(224);
|
||||
}
|
||||
@include breakpoint (xxl) {
|
||||
padding: 0 224px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -69,6 +69,9 @@
|
||||
@else if ($size == xl) {
|
||||
@media (min-width: $screen-xl) { @content; }
|
||||
}
|
||||
@else if ($size == xxl) {
|
||||
@media (min-width: $screen-xxl) { @content; }
|
||||
}
|
||||
@else {
|
||||
@media (min-width: $size) { @content; }
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user