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

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