flayks/housesof
2
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

☠️ RESET for v2

Browse Source
This commit is contained in:
Félix Péault
2021-09-14 13:00:12 +02:00
parent 511b0c85e5
commit bdbf511a75
124 changed files with 1612 additions and 11094 deletions
Download Patch File Download Diff File Expand all files Collapse all files

352
src/style/organisms/_carousel.scss
View File

@@ -1,352 +0,0 @@
// Carousel
.carousel {
background-color: $color-primary;
will-change: transform, opacity;
@include breakpoint (sm) {
overflow: visible;
}
.wrap {
max-width: 1280px;
padding: 0;
@include breakpoint (sm) {
max-width: 80%;
}
@include breakpoint (1680px) {
max-width: 1424px;
}
@media (min-aspect-ratio: 16/10) {
max-width: 70%;
}
}
/*
** Gallery
*/
.gallery {
position: relative;
z-index: 2;
margin: 0 auto;
cursor: grab;
&:active {
cursor: grabbing;
}
@include breakpoint (xl) {
max-width: 100%;
}
// Variables
$scale: 0.9;
$angle: 1deg;
$angleHover: 1.25deg;
$distance: 9%;
$distanceHover: 10%;
$radius: 8px;
// Images
&__images {
position: relative;
height: 0;
padding-bottom: calc(100% / 1.5); // Ratio 3.2
user-select: none;
}
// Photo
&__photo {
$duration: 1s;
opacity: 0;
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: scale($scale) translateZ(0);
transition: transform $duration $ease-quart, opacity ($duration / 2) $ease-quart;
pointer-events: none;
@extend %willchange;
// Visible photos
&.is-active, &.is-prev, &.is-next {
opacity: 1;
pointer-events: auto;
picture {
opacity: 1;
}
}
// Active photo
&.is-active {
z-index: 10;
transform: scale(1) translateZ(0);
}
// Previous & next photo
&.is-prev, &.is-next {
picture:before {
@include breakpoint (sm) {
opacity: 0.4;
}
}
}
// Previous photo
&.is-prev {
z-index: 9;
transform: translate(-40%, 0) scale(0.85) translateZ(0);
@include breakpoint (sm) {
z-index: 8;
transform: translate(-$distance, -1%) rotate(-$angle) scale($scale) translateZ(0);
}
// Hover
&.hover {
transform: translate(-$distanceHover, -1%) rotate(-$angleHover) scale($scale) translateZ(0);
}
}
// Next photo
&.is-next {
z-index: 8;
transform: translate(40%, 0) scale(0.85) translateZ(0);
@include breakpoint (sm) {
z-index: 9;
transform: translate($distance, -1%) rotate($angle) scale($scale) translateZ(0);
}
// Hover
&.hover {
transform: translate($distanceHover, -1%) rotate($angleHover) scale($scale) translateZ(0);
}
}
}
// Picture
&__picture {
opacity: 0;
position: relative;
display: block;
overflow: hidden;
width: 100%;
height: 100%;
box-shadow: 0 pxVW(15) pxVW(60) rgba(#000, 0.3);
transition: opacity 1s $ease-quart;
will-change: opacity;
@extend %willchange;
@include breakpoint (sm) {
border-radius: $radius;
}
// Overlay
&:before {
opacity: 0;
content: "";
display: block;
position: absolute;
z-index: 2;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: $color-primary;
}
img {
position: relative;
z-index: 1;
display: block;
width: 100%;
height: auto;
}
}
// Performance
%willchange {
will-change: transform, opacity;
}
}
/*
** Controls (arrows)
*/
&__controls {
display: none;
@include breakpoint (sm) {
position: absolute;
z-index: 11;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: flex;
justify-content: space-between;
}
button {
box-shadow: 0 2px 20px rgba(#000, 0.15);
}
}
// Hover and clicking area
&__area {
display: flex;
align-items: center;
justify-content: center;
width: 12%;
height: 100%;
cursor: pointer;
&--prev {
margin-left: -6%;
}
&--next {
margin-right: -6%;
}
}
/*
** Informations
*/
&__infos {
position: relative;
z-index: 2;
}
// Locations
&__locations {
position: relative;
min-height: 80px;
@include breakpoint (sm) {
min-height: 128px;
}
}
// Location
&__location {
$distance: 40%;
position: absolute;
top: 0;
left: 0;
width: 100%;
opacity: 0;
margin-top: 32px;
padding-bottom: 4px;
text-align: center;
pointer-events: none;
transition: transform 0.9s $ease-quart, opacity 0.9s $ease-quart;
will-change: transform, opacity;
@include breakpoint (sm) {
margin-top: pxVW(80);
}
@include breakpoint (xl) {
margin-top: 72px;
}
a {
color: rgba($color-tertiary, 0.5);
text-decoration: none;
transition: color 150ms $ease-inout;
&:hover {
color: rgba($color-tertiary, 0.8);
}
}
// State
.state {
margin-top: 6px;
}
// States
&.is-prev {
transform: translateY(-$distance) translateZ(0);
}
&.is-active {
transform: translateY(0) translateZ(0);
opacity: 1;
pointer-events: auto;
}
&.is-next {
transform: translateY($distance) translateZ(0);
}
}
/*
** Dots for slider (mobile)
*/
&__dots {
display: none;
position: relative;
z-index: 3;
@include breakpoint (xs) {
display: flex;
justify-content: center;
margin-top: 32px;
li {
display: flex;
align-items: center;
padding: 4px;
cursor: pointer;
&, button {
transition: all 0.6s $ease-quart;
will-change: transform, width, height, padding;
}
// Active
&.active button {
background-color: $color-secondary;
transform: scale(1.25) translateZ(0);
}
// Small dot
&.small button {
transform: scale(0.6) translateZ(0);
opacity: 0.5;
}
// Hidden
&.hidden {
padding: 0;
transform: scale(0) translateZ(0);
opacity: 0;
width: 0;
height: 0;
}
// Hover
&:hover:not(.active) {
button {
background-color: lighten($color-lightpurple, 10);
}
}
}
button {
display: block;
width: 8px;
height: 8px;
padding: 0;
background-color: $color-lightpurple;
border-radius: 50%;
text-decoration: none;
}
}
}
}

132
src/style/organisms/_footer.scss
View File

@@ -1,132 +0,0 @@
/* ==========================================================================
FOOTER
========================================================================== */
.footer {
background-color: $color-primary-darker;
.wrap {
display: block;
padding-top: 48px;
padding-bottom: 32px;
@include breakpoint (sm) {
display: flex;
justify-content: space-between;
align-items: center;
height: 120px;
padding-top: 0;
padding-bottom: 0;
}
}
// Left part
&__left {
display: flex;
justify-content: center;
margin-bottom: 40px;
@include breakpoint (sm) {
margin: 0;
}
}
// Right part
&__right {
font-size: 14px;
text-align: center;
& > ul {
@include breakpoint (sm) {
display: flex;
align-items: center;
padding-top: 6px;
}
}
li {
display: block;
text-align: center;
height: 100%;
& > ul {
display: flex;
justify-content: center;
margin-bottom: 32px;
margin-top: 3px;
@include breakpoint (sm) {
margin-bottom: 0;
margin-right: 24px;
}
li {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
a {
display: block;
}
}
}
a {
position: relative;
color: #fff;
text-decoration: none;
transition: color 85ms $ease-inout;
img, svg {
margin-right: 8px;
@include breakpoint (sm) {
margin-right: 16px;
}
}
// Hover
&:hover, &.is-active {
color: $color-secondary;
}
}
// Instagram
.instagram {
a {
display: inline-flex;
align-items: center;
justify-content: center;
}
svg {
display: block;
transition: fill 275ms $ease-cubic;
}
// Hover
a:hover svg {
fill: $color-secondary;
}
}
// Made by
.by {
text-align: center;
img {
display: block;
height: 22px;
width: auto;
margin: 0 auto;
transition: transform 400ms $ease-quart;
will-change: transform;
}
// Hover
a:hover img {
transform: scale(1.05);
}
}
}
}

87
src/style/organisms/_fullscreen.scss
View File

@@ -1,87 +0,0 @@
.fullscreen {
position: fixed;
z-index: 200;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
pointer-events: none;
user-select: none;
&, * {
will-change: transform, opacity;
}
// Photo
&__image {
width: 100%;
height: 100%;
overflow-x: auto;
opacity: 0;
transform: scale(1.1);
background: $color-primary;
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
img {
position: relative;
z-index: 200;
display: block;
height: 100%;
width: auto;
margin: 0 auto;
}
// Open
&.is-open {
opacity: 1;
transform: scale(1);
pointer-events: auto;
}
}
// Controls
&__close {
position: fixed;
z-index: 201;
bottom: 24px;
left: 0;
width: 100%;
display: flex;
justify-content: center;
opacity: 0;
transform: scale(1.1) translateY(24px) translateZ(0);
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
// Visible state
&.is-visible {
opacity: 1;
transform: scale(1) translateY(0) translateZ(0);
}
}
// Loading
&__loading {
position: absolute;
z-index: 202;
top: 50%;
left: 50%;
opacity: 1;
transform: translate(-50%, -50%) translateZ(0);
transform-origin: 50% 50%;
display: flex;
align-items: center;
justify-content: center;
width: 80px;
height: 80px;
background-color: $color-primary;
border-radius: 50%;
transition: transform 0.8s $ease-quart, opacity 0.8s $ease-quart;
// Hidden state
&.is-hidden {
transform: scale(1.05) translate(-50%, -50%) translateZ(0);
opacity: 0;
}
}
}

73
src/style/organisms/_locations.scss
View File

@@ -1,73 +0,0 @@
.browse {
width: 100%;
overflow: hidden;
margin-bottom: 56px;
@include breakpoint (sm) {
margin-top: 120px;
}
// Description
&__description {
margin-left: auto;
margin-right: auto;
margin-bottom: 32px;
@include breakpoint (sm) {
margin-bottom: 40px;
}
}
// Continents
&__continents {
display: flex;
flex-flow: row wrap;
justify-content: center;
margin-bottom: 8px;
li {
display: block;
margin: 0 4px;
@include breakpoint (sm) {
margin: 0 8px;
}
}
}
// Locations
&__locations {
min-height: 120px;
margin-top: 72px;
@include breakpoint (600px) {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
@include breakpoint (sm) {
grid-template-columns: repeat(3, 1fr);
grid-column-gap: pxVW(96);
grid-row-gap: pxVW(96);
min-height: 200px;
margin-top: 112px;
margin-bottom: pxVW(72);
}
@include breakpoint (xl) {
grid-column-gap: 96px;
grid-row-gap: 96px;
// max-width: 1024px;
margin-left: auto;
margin-right: auto;
margin-bottom: 72px;
// To apply when having 4 locations:
grid-template-columns: repeat(4, 1fr);
max-width: 1200px;
// grid-column-gap: 120px;
// grid-row-gap: 120px;
// Works well but fucks with the FLIP animations
// grid-auto-flow: column;
// grid-template-columns: repeat(auto-fit, minmax(min-content, 1fr));
}
}
}

121
src/style/organisms/_pagination.scss
View File

@@ -1,121 +0,0 @@
// Pagination
.pagination {
position: relative;
padding: 64px 0 72px;
background-color: $color-tertiary;
text-align: center;
@include breakpoint (sm) {
padding-top: pxVW(120);
padding-bottom: pxVW(120);
}
@include breakpoint (xl) {
padding-top: 120px;
padding-bottom: 120px;
}
// Pages
&__page {
position: relative;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 auto;
font-family: $font-serif-extra;
font-size: rem(72px);
color: rgba($color-text, 0.15);
line-height: 1;
cursor: pointer;
transition: color 250ms $ease-cubic;
@include breakpoint (sm) {
font-size: rem(120px);
}
@include breakpoint (md) {
font-size: rem(160px);
}
// Hover
&:hover {
color: rgba($color-text, 0.25);
}
}
// Numbers
&__numbers {
overflow: hidden;
height: 62px;
margin-right: 4px;
@include breakpoint (sm) {
height: 102px;
}
@include breakpoint (md) {
height: 136px;
}
.scroll {
display: flex;
flex-direction: column;
transform: translate(0, 0) translateZ(0);
text-align: right;
line-height: 0.85;
transition: transform 325ms $ease-cubic;
will-change: transform;
}
}
// Info
&__info {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -72%) translateZ(0);
font-family: $font-serif;
font-size: rem(18px);
color: $color-secondary-bright;
@include breakpoint (sm) {
font-size: rem(32px);
}
@include breakpoint (md) {
font-size: rem(40px);
}
}
// Caption
&__caption {
max-width: 420px;
margin: 0 auto;
font-size: 10px;
color: $color-lightgray;
letter-spacing: 2px;
line-height: 1.6;
@include breakpoint (sm) {
font-size: 14px;
}
}
// Message
&__message {
// Newsletter
.newsletter {
margin: 0;
padding: 0;
@include breakpoint (sm) {
padding: 24px 0 0;
}
// Title
h2 {
font-size: rem(32px);
@include breakpoint (md) {
font-size: rem(40px);
}
}
}
}
}

248
src/style/organisms/_photos.scss
View File

@@ -1,248 +0,0 @@
.photos {
position: relative;
margin-top: -22px;
background-color: #fff;
@include breakpoint (sm) {
margin-top: -128px;
padding-top: 88px;
}
@include breakpoint (xl) {
padding-top: 72px;
}
// Sidebar
&__side {
display: none;
@include breakpoint (md) {
display: flex;
position: absolute;
z-index: 5;
left: 24px;
flex-direction: row-reverse;
align-items: flex-end;
transform-origin: left top;
transform: rotate(-90deg) translateX(-100%);
}
p {
font-size: rem(12px);
color: $color-lightgray;
margin-right: 24px;
strong {
font-weight: 600;
display: block;
text-align: right;
}
}
}
// Container
&__sidewrap {
@include breakpoint (md) {
position: sticky;
z-index: 10;
top: 32px;
width: 100%;
}
}
// Each photo
.photo {
position: relative;
z-index: 4;
}
/*
** List view
*/
&--list {
.photos__view {
max-width: 100%;
margin: 0;
padding: 0;
}
// Photo
.photo {
padding-bottom: 80px;
overflow: hidden;
@include breakpoint (sm) {
padding-bottom: 120px;
&:last-child {
padding-bottom: 0;
}
}
// Title
h2 {
@include breakpoint (sm) {
max-width: 840px;
}
}
// Even photos
&:nth-child(even) {
@include breakpoint (sm) {
// Location
.photo__location, h2 {
text-align: right;
}
h2 {
margin-left: auto;
}
// Image
.photo {
&__image {
justify-content: flex-end;
}
&__date {
right: 100%;
left: -30px;
}
}
}
// Number
.photo__number {
@include breakpoint (sm) {
right: auto;
left: 8%;
}
@include breakpoint (md) {
right: auto;
left: 0;
transform: translate(-23vw, -50%);
}
@include breakpoint (lg) {
transform: translate(-26vw, -50%);
}
@include breakpoint (xl) {
transform: translate(-66%, -50%);
}
}
}
// Number
&__number {
@include breakpoint (sm) {
will-change: transform;
}
}
}
// Pagination
.pagination {
margin-top: 24px;
@include breakpoint (sm) {
margin-top: -64px;
padding-top: pxVW(240);
padding-bottom: pxVW(120);
}
@include breakpoint (md) {
padding-top: pxVW(200);
}
@include breakpoint (xl) {
padding-top: 200px;
padding-bottom: 120px;
}
}
}
/*
** Grid view
*/
&--grid {
.photos__view {
@include breakpoint (md) {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 48px;
grid-row-gap: 72px;
padding-left: 192px;
padding-right: 64px;
}
@include breakpoint (xxl) {
padding-left: 192px;
}
@include breakpoint (1776px) {
padding-right: 0;
}
}
// Photo
.photo {
display: flex;
flex-direction: column-reverse;
margin-bottom: 40px;
@include breakpoint (mob) {
margin-bottom: pxVW(176);
}
@include breakpoint (md) {
margin-bottom: 0;
}
// Every second (on column 2)
&--odd {
@include breakpoint (md) {
transform: translateY(-64px);
}
}
.wrap, .wrapper {
padding: 0;
margin: 0;
}
// Location
&__location {
text-align: left;
h2 {
font-size: rem(28px);
margin-top: 24px;
white-space: normal;
}
p {
font-size: rem(12px);
margin-top: 8px;
}
}
// Image informations
&__img {
border-radius: 8px;
}
&__number {
font-size: rem(96px);
bottom: -88px;
right: 24px;
z-index: 1;
transform: none;
top: auto;
left: auto;
text-align: right;
}
&__date {
display: none;
}
}
// Pagination
.pagination {
margin-top: 64px;
}
}
}