WIP React > Svelte
Put most of the developed design into Svelte
This commit is contained in:
@@ -7,11 +7,31 @@
|
||||
/* ==========================================================================
|
||||
KEYFRAMES ANIMATIONS
|
||||
========================================================================== */
|
||||
// Keyframe
|
||||
// @keyframes name {
|
||||
// from {}
|
||||
// to {}
|
||||
// }
|
||||
// Rotate button dashes
|
||||
@keyframes rotateDashes {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
// Spinning globe (small)
|
||||
@keyframes moveContinentsSmall {
|
||||
0% { transform: translate3d(0,0,0); }
|
||||
100% { transform: translate3d(-96.95px, 0, 0); }
|
||||
}
|
||||
.anim-spinGlobeSmall {
|
||||
animation: moveContinentsSmall 1.5s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
// Spinning globe
|
||||
@keyframes moveContinents {
|
||||
0% { transform: translate3d(0,0,0); }
|
||||
100% { transform: translate3d(-80.26px, 28.2px, 0); }
|
||||
}
|
||||
.anim-spinGlobe {
|
||||
animation: moveContinents 1.7s linear infinite;
|
||||
animation-play-state: paused;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -1,34 +1,39 @@
|
||||
html {
|
||||
font: #{$base-font-size}/24px "$font-text";
|
||||
font: #{$base-font-size} $font-sans;
|
||||
color: $color-text;
|
||||
}
|
||||
body {
|
||||
@include font-smooth;
|
||||
background: #fff;
|
||||
background: $color-primary;
|
||||
cursor: default;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
*, *:before, *:after {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
strong {
|
||||
font-family: "$font-bold";
|
||||
font-weight: normal;
|
||||
}
|
||||
em {
|
||||
font-family: "$font-text_it";
|
||||
font-style: normal;
|
||||
}
|
||||
figure, p, dl, dt, dd, ul, li {
|
||||
figure, p, dl, dt, dd, ul, ol, li {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
figure img {
|
||||
display: block;
|
||||
}
|
||||
button {
|
||||
background: none;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Selection
|
||||
::selection { color: #fff; background: $color-primary; }
|
||||
::-moz-selection { color: #fff; background: $color-primary; }
|
||||
::selection { color: #fff; background: $color-secondary; }
|
||||
::-moz-selection { color: #fff; background: $color-secondary; }
|
||||
|
||||
// Images glitches fix
|
||||
// img {backface-visibility: hidden;}
|
||||
@@ -42,3 +47,103 @@ figure img {
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
// Title: Massive
|
||||
.title-massive {
|
||||
font-size: 50.25vw;
|
||||
letter-spacing: -2vw;
|
||||
font-family: $font-serif-extra;
|
||||
color: $color-secondary;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
// Title: Locations
|
||||
.title-location {
|
||||
font-size: rem(68px);
|
||||
font-family: $font-serif;
|
||||
color: $color-secondary;
|
||||
line-height: 1;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(96px);
|
||||
}
|
||||
|
||||
em {
|
||||
display: block;
|
||||
font-size: rem(18px);
|
||||
text-transform: uppercase;
|
||||
color: $color-lightpurple;
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: inline-block;
|
||||
font-size: rem(32px);
|
||||
margin-right: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Bigger version
|
||||
&--big {
|
||||
font-size: rem(56px);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(160px);
|
||||
}
|
||||
|
||||
em {
|
||||
display: inline-block;
|
||||
font-size: rem(20px);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-left: -8px;
|
||||
font-size: rem(56px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Parallax title: Translate X
|
||||
.title-parallax {
|
||||
transform: translate3d(var(--translateX), 0, 0);
|
||||
will-change: transform;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
/* Text Styles
|
||||
========================================================================== */
|
||||
.location {
|
||||
text-align: center;
|
||||
|
||||
.street {
|
||||
font-family: $font-serif;
|
||||
font-size: rem(24px);
|
||||
margin-bottom: 8px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(28px);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.style-caps {
|
||||
font-size: rem(14px);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
.description {
|
||||
font-family: $font-sans-light;
|
||||
font-size: rem(18px);
|
||||
line-height: 1.55;
|
||||
text-align: center;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(28px);
|
||||
line-height: 1.64;
|
||||
max-width: 572px;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
/* Fonts list
|
||||
========================================================================== */
|
||||
$fonts: (
|
||||
// "font1",
|
||||
// "font2",
|
||||
// "font3"
|
||||
"G-Light",
|
||||
"G-Regular",
|
||||
"G-Semibold",
|
||||
"M-Extralight",
|
||||
"M-Light"
|
||||
);
|
||||
@each $font in $fonts {
|
||||
@include font-face($font);
|
||||
|
||||
@@ -1,24 +1,38 @@
|
||||
// Colors
|
||||
$color-primary: pink;
|
||||
$color-secondary: #000;
|
||||
$color-primary: #3C0576;
|
||||
$color-secondary: #FF6C89;
|
||||
$color-text: #333;
|
||||
$color-tertiary: #FFE0C5;
|
||||
$color-lightpurple: #8B50B2;
|
||||
$color-gray: #666;
|
||||
$color-lightgray: #999;
|
||||
|
||||
// CSS Variables
|
||||
:root {
|
||||
// Colors
|
||||
--primary: #{$color-primary};
|
||||
--secondary: #{$color-secondary};
|
||||
--text: #{$color-text};
|
||||
--color-primary: #{$color-primary};
|
||||
--color-secondary: #{$color-secondary};
|
||||
--color-text: #{$color-text};
|
||||
--color-tertiary: #{$color-tertiary};
|
||||
--color-lightpurple: #{$color-lightpurple};
|
||||
--color-gray: #{$color-gray};
|
||||
--color-lightgray: #{$color-lightgray};
|
||||
}
|
||||
|
||||
|
||||
/* Fonts
|
||||
========================================================================== */
|
||||
$base-font-size: 16px;
|
||||
$base-font-size: 28px;
|
||||
|
||||
// Families
|
||||
$replacement: "Georgia, serif";
|
||||
$font-text: "font", #{$replacement};
|
||||
$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};
|
||||
|
||||
|
||||
|
||||
/* Sizes, margins and spacing
|
||||
@@ -28,16 +42,15 @@ $font-text: "font", #{$replacement};
|
||||
|
||||
/* Directories
|
||||
========================================================================== */
|
||||
$dir-img: "../img";
|
||||
$dir-fonts: "../fonts";
|
||||
$dir-node: "../node-modules";
|
||||
$dir-img: "/img";
|
||||
$dir-fonts: "/fonts";
|
||||
|
||||
|
||||
/* Animation
|
||||
========================================================================== */
|
||||
// Easing
|
||||
$ease-cubic: cubic-bezier(0.785, 0.135, 0.15, 0.86);
|
||||
$ease-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
|
||||
$ease-cubic: cubic-bezier(.785, .135, .15, .86);
|
||||
$ease-quart: cubic-bezier(.165, .84, .44, 1);
|
||||
$ease-inout: ease-in-out;
|
||||
|
||||
|
||||
|
||||
336
src/style/atoms/_button.scss
Normal file
336
src/style/atoms/_button.scss
Normal file
@@ -0,0 +1,336 @@
|
||||
// Default button
|
||||
.button {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
height: 40px;
|
||||
padding: 0 16px;
|
||||
background: #fff;
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(14px);
|
||||
color: $color-gray;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
outline: none;
|
||||
cursor: pointer;
|
||||
transition: background-color 250ms, color 350ms;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
height: 48px;
|
||||
padding: 0 24px;
|
||||
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;
|
||||
}
|
||||
|
||||
// Text
|
||||
&:before {
|
||||
content: attr(data-text);
|
||||
position: absolute;
|
||||
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;
|
||||
}
|
||||
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; }
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
background-color: $color-primary;
|
||||
color: #fff;
|
||||
|
||||
svg {
|
||||
fill: #fff !important;
|
||||
}
|
||||
.anim {
|
||||
animation-play-state: running;
|
||||
}
|
||||
&:before {
|
||||
opacity: 0;
|
||||
transform: translate3d(-50%, 75%, 0);
|
||||
}
|
||||
span {
|
||||
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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
18
src/style/atoms/_cursor.scss
Normal file
18
src/style/atoms/_cursor.scss
Normal file
@@ -0,0 +1,18 @@
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
55
src/style/atoms/_link.scss
Normal file
55
src/style/atoms/_link.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// Change link
|
||||
.link-change {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
margin: 0 6px;
|
||||
padding: 0 8px;
|
||||
color: $color-secondary;
|
||||
text-decoration: none;
|
||||
transition: color 200ms ease;
|
||||
|
||||
// Line
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
background-color: rgba($color-secondary, .22);
|
||||
height: 14px;
|
||||
width: 100%;
|
||||
bottom: 5px;
|
||||
left: 0;
|
||||
border-radius: 50vh;
|
||||
transition: all 200ms ease;
|
||||
}
|
||||
|
||||
// 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: 50vh;
|
||||
|
||||
svg {
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
color: $color-text;
|
||||
|
||||
&:after {
|
||||
background-color: rgba($color-secondary, .4);
|
||||
}
|
||||
svg * {
|
||||
animation-play-state: running;
|
||||
}
|
||||
}
|
||||
}
|
||||
90
src/style/atoms/_switcher.scss
Normal file
90
src/style/atoms/_switcher.scss
Normal file
@@ -0,0 +1,90 @@
|
||||
// Switcher
|
||||
.switcher {
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
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;
|
||||
|
||||
// Image
|
||||
// svg {
|
||||
// height: 28px;
|
||||
// width: auto;
|
||||
// }
|
||||
|
||||
// Dashed circle
|
||||
// svg {
|
||||
// width: 64px;
|
||||
// height: 64px;
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
// Side version (smaller)
|
||||
&--side {
|
||||
.switcher {
|
||||
&__text {
|
||||
font-size: rem(22px);
|
||||
}
|
||||
&__icon {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background-color: #F4EDFB;
|
||||
|
||||
circle {
|
||||
stroke: #F4EDFB;
|
||||
}
|
||||
&:hover {
|
||||
background-color: darken(#F4EDFB, 7);
|
||||
}
|
||||
}
|
||||
}
|
||||
.top {
|
||||
color: $color-primary;
|
||||
}
|
||||
img, svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== */
|
||||
.footer {
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
HEADER
|
||||
========================================================================== */
|
||||
.header {
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
MAIN
|
||||
========================================================================== */
|
||||
.main {
|
||||
|
||||
}
|
||||
@@ -1,6 +0,0 @@
|
||||
/* ==========================================================================
|
||||
NAVIGATION
|
||||
========================================================================== */
|
||||
.nav {
|
||||
|
||||
}
|
||||
@@ -1,5 +0,0 @@
|
||||
/* RULE
|
||||
========================================================================== */
|
||||
// @media only screen and (max-width: $screen-tab-port) {
|
||||
|
||||
// }
|
||||
83
src/style/molecules/_footer.scss
Normal file
83
src/style/molecules/_footer.scss
Normal file
@@ -0,0 +1,83 @@
|
||||
/* ==========================================================================
|
||||
FOOTER
|
||||
========================================================================== */
|
||||
.footer {
|
||||
background-color: #2D0458;
|
||||
|
||||
.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: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Right part
|
||||
&__right{
|
||||
font-size: 14px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// Instagram
|
||||
.instagram {
|
||||
margin-bottom: 20px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 40px 0 0;
|
||||
}
|
||||
|
||||
a {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
|
||||
span {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Collective
|
||||
.cetrucflotte {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
|
||||
span {
|
||||
color: rgba(#fff, .4)
|
||||
}
|
||||
|
||||
img {
|
||||
display: inline-block;
|
||||
margin: 12px 0 0 12px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
17
src/style/molecules/_globe.scss
Normal file
17
src/style/molecules/_globe.scss
Normal file
@@ -0,0 +1,17 @@
|
||||
// Globe
|
||||
.globe {
|
||||
z-index: 2;
|
||||
position: relative;
|
||||
|
||||
.wrap {
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Image (for now)
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
55
src/style/molecules/_pagination.scss
Normal file
55
src/style/molecules/_pagination.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
// Pagination
|
||||
.pagination {
|
||||
background-color: $color-tertiary;
|
||||
text-align: center;
|
||||
padding: 64px 0 72px;
|
||||
position: relative;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 16vw 0 7.5vw;
|
||||
margin-top: -64px;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
padding-top: 200px;
|
||||
}
|
||||
|
||||
// Pages
|
||||
&__page {
|
||||
p {
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-text, .15);
|
||||
position: relative;
|
||||
line-height: 1;
|
||||
font-size: rem(72px);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(160px);
|
||||
}
|
||||
|
||||
span {
|
||||
font-family: $font-serif;
|
||||
color: #FF0536;
|
||||
position: absolute;
|
||||
font-size: 18px;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -65%);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Caption
|
||||
&__caption {
|
||||
font-size: 10px;
|
||||
color: $color-lightgray;
|
||||
letter-spacing: 2px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
146
src/style/molecules/_photo.scss
Normal file
146
src/style/molecules/_photo.scss
Normal file
@@ -0,0 +1,146 @@
|
||||
.photo {
|
||||
|
||||
// Location
|
||||
&__location {
|
||||
margin-bottom: 32px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 56px;
|
||||
}
|
||||
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
h2 {
|
||||
text-align: left;
|
||||
white-space: pre-line;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
font-size: rem(40px);
|
||||
}
|
||||
}
|
||||
p {
|
||||
color: $color-lightgray;
|
||||
margin-top: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
// Image container
|
||||
&__image {
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Alignment (left or right for list view)
|
||||
.align {
|
||||
position: relative;
|
||||
max-width: 1180px;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Image container
|
||||
&--img {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
overflow: hidden;
|
||||
border-radius: 0;
|
||||
box-shadow: 0 8px 18px rgba(#715E4E, .2);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
// Cursor
|
||||
.cursor {
|
||||
position: absolute;
|
||||
z-index: 4;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
// Overlay
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
top: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: $color-primary;
|
||||
display: block;
|
||||
z-index: 3;
|
||||
transition: all 200ms ease-in-out;
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
|
||||
// Hover
|
||||
&:hover {
|
||||
cursor: none;
|
||||
|
||||
.photo__image--img:after {
|
||||
opacity: 0.6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Date (on the side)
|
||||
&--date {
|
||||
display: block;
|
||||
color: $color-lightgray;
|
||||
font-size: rem(14px);
|
||||
margin-top: 16px;
|
||||
padding: 0 8vw;
|
||||
|
||||
@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;
|
||||
pointer-events: none;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, .5);
|
||||
font-size: rem(124px);
|
||||
bottom: -80px;
|
||||
right: 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 18.75vw;
|
||||
left: 92%;
|
||||
top: 50%;
|
||||
z-index: 1;
|
||||
transform: translate(-50%, -50%);
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
190
src/style/organisms/_carousel.scss
Normal file
190
src/style/organisms/_carousel.scss
Normal file
@@ -0,0 +1,190 @@
|
||||
// Carousel
|
||||
.carousel {
|
||||
background-color: $color-primary;
|
||||
transform: translateZ(0);
|
||||
|
||||
.wrap {
|
||||
max-width: 1280px;
|
||||
padding: 0;
|
||||
|
||||
@include breakpoint (1600px) {
|
||||
max-width: 1424px;
|
||||
}
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
// Images
|
||||
&__images {
|
||||
position: relative;
|
||||
height: 0;
|
||||
padding-bottom: calc(100% / 1.5);
|
||||
|
||||
// Photo
|
||||
&--photo {
|
||||
position: absolute;
|
||||
background-color: $color-secondary;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 15px 60px rgba(#000, .3);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
width: 100%;
|
||||
opacity: 0.55;
|
||||
}
|
||||
}
|
||||
|
||||
// Specific
|
||||
.front {
|
||||
z-index: 10;
|
||||
|
||||
img {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.prev {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(-5%, -50%) rotate(-1deg);
|
||||
width: 85%;
|
||||
}
|
||||
}
|
||||
.next {
|
||||
@include breakpoint (sm) {
|
||||
top: 50%;
|
||||
transform: translate(5%, -50%) rotate(1deg);
|
||||
width: 85%;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Controls (arrows)
|
||||
&__controls {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 100%;
|
||||
z-index: 11;
|
||||
|
||||
.prev {
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
.next {
|
||||
transform: translateX(50%);
|
||||
}
|
||||
}
|
||||
|
||||
a {
|
||||
box-shadow: 0 2px 21px rgba(#000, .15);
|
||||
}
|
||||
}
|
||||
|
||||
// Information
|
||||
&__information {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
// Location
|
||||
&--location {
|
||||
.street {
|
||||
margin-top: 24px;
|
||||
color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 5vw;
|
||||
}
|
||||
@include breakpoint (xl) {
|
||||
margin-top: 72px;
|
||||
}
|
||||
}
|
||||
.state {
|
||||
color: rgba($color-tertiary, .5);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Dots for slider (mobile)
|
||||
&__dots {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (xs) {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
margin-top: 40px;
|
||||
|
||||
li {
|
||||
display: block;
|
||||
margin: 0 3px;
|
||||
|
||||
&.active a {
|
||||
background-color: $color-secondary;
|
||||
}
|
||||
}
|
||||
a {
|
||||
display: block;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
background-color: $color-lightpurple;
|
||||
border-radius: 50vh;
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Zoomer
|
||||
.zoomer {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
z-index: 101;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
|
||||
&.show {
|
||||
opacity: 1;
|
||||
pointer-events: auto;
|
||||
}
|
||||
|
||||
// Image
|
||||
&__image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
// display: flex;
|
||||
// justify-content: center;
|
||||
overflow: auto;
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: 100%;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Button
|
||||
.button-control {
|
||||
position: absolute;
|
||||
bottom: 32px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
}
|
||||
}
|
||||
119
src/style/organisms/_locations.scss
Normal file
119
src/style/organisms/_locations.scss
Normal file
@@ -0,0 +1,119 @@
|
||||
.browse {
|
||||
margin-top: 72px;
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: 120px;
|
||||
margin-bottom: 52px;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
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 {
|
||||
margin-top: 112px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
grid-column-gap: 120px;
|
||||
grid-row-gap: 7.5vw;
|
||||
justify-content: center;
|
||||
margin-bottom: 14.5vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Location
|
||||
.location {
|
||||
position: relative;
|
||||
margin-bottom: 48px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
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: 50vh;
|
||||
}
|
||||
|
||||
// City
|
||||
&__city {
|
||||
margin: 24px 0 16px;
|
||||
font-family: $font-serif;
|
||||
font-size: rem(32px);
|
||||
color: $color-secondary;
|
||||
transition: color 85ms ease-in-out;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(48px);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Shape on hover
|
||||
&:after {
|
||||
content: "";
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%) scale(0.94);
|
||||
display: block;
|
||||
width: 216px;
|
||||
height: 216px;
|
||||
background: rgba($color-lightpurple, .3);
|
||||
border-radius: 50vh;
|
||||
transition: all 85ms ease-in-out;
|
||||
}
|
||||
&:hover {
|
||||
.location__city {
|
||||
color: $color-tertiary;
|
||||
}
|
||||
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: translate(-50%, -50%) scale(1);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
156
src/style/organisms/_photos.scss
Normal file
156
src/style/organisms/_photos.scss
Normal file
@@ -0,0 +1,156 @@
|
||||
.photos {
|
||||
position: relative;
|
||||
margin-top: -22px;
|
||||
padding-bottom: 102px;
|
||||
background-color: #fff;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-top: -128px;
|
||||
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: flex;
|
||||
flex-direction: row-reverse;
|
||||
align-items: flex-end;
|
||||
transform: rotate(270deg) translate(-46%,-240%);
|
||||
transform-origin: 50% 50%;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
color: $color-lightgray;
|
||||
margin-right: 24px;
|
||||
|
||||
strong {
|
||||
font-weight: 600;
|
||||
display: block;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Each photo
|
||||
.photo {
|
||||
position: relative;
|
||||
z-index: 4;
|
||||
margin-bottom: 102px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 120px;
|
||||
}
|
||||
|
||||
// Last photo doesn't need spacing
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// List view
|
||||
&--list {
|
||||
& > .wrap {
|
||||
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;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
// Photo
|
||||
.photo {
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
margin-bottom: 0;
|
||||
|
||||
// Every second (on column 2)
|
||||
&:nth-child(2n+2) {
|
||||
transform: translateY(-64px);
|
||||
}
|
||||
|
||||
.wrap, .wrapper {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
// Location
|
||||
&__location {
|
||||
text-align: left;
|
||||
|
||||
h2 {
|
||||
font-size: rem(28px);
|
||||
margin-top: 28px;
|
||||
white-space: normal;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(12px);
|
||||
margin-top: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
// Image
|
||||
&__image {
|
||||
&--number {
|
||||
font-size: rem(96px);
|
||||
bottom: -88px;
|
||||
right: 24px;
|
||||
z-index: 1;
|
||||
transform: none;
|
||||
top: auto;
|
||||
left: auto;
|
||||
}
|
||||
&--date {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
70
src/style/pages/_explore.scss
Normal file
70
src/style/pages/_explore.scss
Normal file
@@ -0,0 +1,70 @@
|
||||
.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 {
|
||||
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%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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 {
|
||||
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;
|
||||
}
|
||||
}
|
||||
46
src/style/pages/_homepage.scss
Normal file
46
src/style/pages/_homepage.scss
Normal file
@@ -0,0 +1,46 @@
|
||||
// Introduction
|
||||
.intro {
|
||||
background-color: $color-tertiary;
|
||||
overflow-x: hidden;
|
||||
|
||||
// Title
|
||||
.title-massive {
|
||||
margin-top: -10vw;
|
||||
margin-left: -10vw;
|
||||
}
|
||||
|
||||
// Description
|
||||
.description {
|
||||
margin-bottom: 72px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin: 0 auto 120px;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 40px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
margin-bottom: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 48vw;
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
}
|
||||
}
|
||||
106
src/style/pages/_place.scss
Normal file
106
src/style/pages/_place.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
// Place section
|
||||
.place {
|
||||
background-position: 50% 0;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
// Title
|
||||
&__title {
|
||||
padding: 14vw 0 15vw;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
|
||||
h1 {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
text-align: left;
|
||||
pointer-events: none;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
}
|
||||
.bottom {
|
||||
text-align: right;
|
||||
margin-left: 8vw;
|
||||
}
|
||||
}
|
||||
|
||||
// Switcher button
|
||||
.button-control--dashed {
|
||||
z-index: 1;
|
||||
flex-shrink: 0;
|
||||
margin-left: -24px;
|
||||
}
|
||||
}
|
||||
|
||||
// Description
|
||||
&__description {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
padding-top: 12.5vw;
|
||||
padding-bottom: 72px;
|
||||
background-color: $color-tertiary;
|
||||
border-radius: none;
|
||||
|
||||
@include breakpoint (m) {
|
||||
padding-bottom: 96px;
|
||||
}
|
||||
@include breakpoint (sm) {
|
||||
border-radius: 8px 0 0 8px;
|
||||
padding-bottom: 15vw;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: rem(18px);
|
||||
font-family: $font-sans-light;
|
||||
line-height: 1.64;
|
||||
color: $color-text;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Updated notice
|
||||
.updated {
|
||||
font-size: rem(12px);
|
||||
margin-top: 32px;
|
||||
|
||||
strong {
|
||||
font-family: $font-sans-sb;
|
||||
color: rgba($color-text, .4);
|
||||
}
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggle
|
||||
.toggle {
|
||||
display: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: inline-flex;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: -49.9vw;
|
||||
width: 50vw;
|
||||
height: 100%;
|
||||
background-color: $color-tertiary;
|
||||
}
|
||||
|
||||
&--wrap {
|
||||
@include breakpoint (xs) {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
138
src/style/pages/_viewer.scss
Normal file
138
src/style/pages/_viewer.scss
Normal file
@@ -0,0 +1,138 @@
|
||||
// Viewer
|
||||
.viewer {
|
||||
position: relative;
|
||||
height: 100vh;
|
||||
min-height: 560px;
|
||||
padding-top: 24px;
|
||||
|
||||
// Top part
|
||||
&__top {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
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) {
|
||||
position: static;
|
||||
justify-content: center;
|
||||
margin: 24px 0 48px;
|
||||
}
|
||||
|
||||
// Tip message
|
||||
.tip {
|
||||
font-family: $font-sans-sb;
|
||||
font-size: rem(10px);
|
||||
text-transform: uppercase;
|
||||
color: rgba($color-tertiary, .4);
|
||||
letter-spacing: 1px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
// Buttons
|
||||
.buttons {
|
||||
display: flex;
|
||||
|
||||
a {
|
||||
margin-left: 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Carousel
|
||||
.carousel {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
transform: translate3d(0, -37%, 0);
|
||||
|
||||
@include breakpoint (sm) {
|
||||
position: static;
|
||||
transform: none;
|
||||
margin-bottom: 88px;
|
||||
}
|
||||
|
||||
// Gallery
|
||||
.gallery {
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
// Information
|
||||
&__information {
|
||||
margin-top: 24px;
|
||||
padding: 0 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
// Location
|
||||
&--location {
|
||||
text-align: left;
|
||||
|
||||
.street {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Date
|
||||
&--date {
|
||||
color: rgba($color-tertiary, .5);
|
||||
font-size: rem(12px);
|
||||
margin-top: 16px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
font-size: rem(14px);
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Photo number
|
||||
&__number {
|
||||
display: none;
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 50%;
|
||||
transform: translate3d(0, 0%, 0);
|
||||
width: 100%;
|
||||
font-family: $font-serif-extra;
|
||||
color: rgba($color-tertiary, .4);
|
||||
font-size: 42vw;
|
||||
text-align: center;
|
||||
pointer-events: none;
|
||||
user-select: none;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
top: auto;
|
||||
right: 250px;
|
||||
bottom: -19vw;
|
||||
width: auto;
|
||||
font-size: rem(300px);
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
||||
// Dots
|
||||
&__dots {
|
||||
position: absolute;
|
||||
bottom: 24px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 20;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@charset "utf-8";
|
||||
@charset "UTF-8";
|
||||
|
||||
// Tools
|
||||
@import "variables";
|
||||
@@ -8,27 +8,33 @@
|
||||
|
||||
// Dependencies
|
||||
@import "normalize.css/normalize";
|
||||
// @import "bulma/css/bulma.min";
|
||||
// @import "@fortawesome/fontawesome-free/css/all.min";
|
||||
|
||||
// Base
|
||||
@import "base";
|
||||
@import "fonts";
|
||||
|
||||
// Layout
|
||||
@import "layout/header";
|
||||
@import "layout/nav";
|
||||
@import "layout/main";
|
||||
@import "layout/footer";
|
||||
// Atoms
|
||||
@import "atoms/button";
|
||||
@import "atoms/link";
|
||||
@import "atoms/switcher";
|
||||
@import "atoms/cursor";
|
||||
|
||||
// Modules
|
||||
// @import "modules/module";
|
||||
// Molecules
|
||||
@import "molecules/photo";
|
||||
@import "molecules/pagination";
|
||||
@import "molecules/globe";
|
||||
@import "molecules/footer";
|
||||
|
||||
// Components
|
||||
// @import "components/component";
|
||||
// Organisms
|
||||
@import "organisms/locations";
|
||||
@import "organisms/carousel";
|
||||
@import "organisms/photos";
|
||||
|
||||
// Pages
|
||||
@import "pages/homepage";
|
||||
@import "pages/viewer";
|
||||
@import "pages/place";
|
||||
@import "pages/explore";
|
||||
|
||||
// Animations
|
||||
// @import "animations/animation";
|
||||
|
||||
// Responsive
|
||||
// @import "layout/responsive";
|
||||
@import "animations";
|
||||
|
||||
@@ -20,9 +20,30 @@
|
||||
|
||||
/* Containers
|
||||
========================================================================== */
|
||||
.container {
|
||||
|
||||
}
|
||||
// Wrap (global)
|
||||
.wrap {
|
||||
max-width: 1424px;
|
||||
margin: 0 auto;
|
||||
padding: 0 24px;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 0 60px;
|
||||
}
|
||||
@include breakpoint (md) {
|
||||
padding: 0 128px;
|
||||
}
|
||||
@include breakpoint (1600px) {
|
||||
padding: 0 48px;
|
||||
}
|
||||
}
|
||||
|
||||
// Wrapper (inside and more spaced)
|
||||
.wrapper {
|
||||
margin: 0 auto;
|
||||
max-width: calc(892px + 28vw);
|
||||
padding: 0 8vw;
|
||||
|
||||
@include breakpoint (sm) {
|
||||
padding: 0 14vw;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -52,7 +52,7 @@
|
||||
// Reponsive breakpoints
|
||||
@mixin breakpoint ($size) {
|
||||
@if ($size == m) {
|
||||
@media (min-width: $screen-m) { @content; }
|
||||
@media (min-width: $screen-mob) { @content; }
|
||||
}
|
||||
@else if ($size == xs) {
|
||||
@media (max-width: $screen-xs) { @content; }
|
||||
|
||||
Reference in New Issue
Block a user