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

WIP

Browse Source
This commit is contained in:
Félix Péault
2020-02-13 22:24:28 +01:00
parent 9b0c154f61
commit ef23d90eb6
60 changed files with 1665 additions and 930 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/style/pages/_explore.scss
View File

@@ -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;
}
}

75
src/style/pages/_homepage.scss
View File

@@ -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;
}
}
}

50
src/style/pages/_place.scss
View File

@@ -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;
}
}
}

45
src/style/pages/_viewer.scss
View File

@@ -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