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

Viewer: Fix responsive and positioning

Browse Source
This commit is contained in:
Félix Péault
2020-04-08 19:31:24 +02:00
parent 240c92c6f6
commit e0abb558d8
6 changed files with 136 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/style/_base.scss
View File

@@ -170,11 +170,18 @@ button {
========================================================================== */
.style-location {
font-family: $font-serif;
font-size: rem(24px);
font-size: 6vw;
color: #fff;
line-height: 1.15;
text-align: center;
@include breakpoint (m) {
font-size: rem(24px);
}
@include breakpoint (sm) {
font-size: rem(28px);
}
a {
color: #fff;
text-decoration: none;
@@ -184,9 +191,6 @@ button {
}
}
@include breakpoint (sm) {
font-size: rem(28px);
}
.street {
margin-bottom: 8px;

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

@@ -3,14 +3,12 @@
position: relative;
height: 100vh;
min-height: 560px;
padding-top: 16px;
overflow-x: hidden;
display: flex;
flex-direction: column;
justify-content: space-between;
@include breakpoint (sm) {
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 24px;
}
@@ -19,7 +17,9 @@
** Top part
*/
&__top {
position: relative;
z-index: 10;
margin-top: 16px;
padding-left: 24px;
padding-right: 16px;
display: flex;
@@ -65,27 +65,37 @@
** Carousel
*/
.carousel {
width: 100%;
@include breakpoint (xs) {
position: absolute;
top: 50%;
left: 0;
right: 0;
transform: translateY(-37%);
margin-top: 20%;
}
@include breakpoint (sm) {
width: 100%;
margin: auto;
}
// Landscape
@media screen and (max-width: $screen-lg) and (orientation: landscape) {
@media screen and (min-width: $screen-sm) and (max-width: $screen-lg) and (orientation: landscape) {
width: 95%;
}
// Wrap
.wrap {
@include breakpoint (xs) {
width: 100%;
}
}
// Gallery
.gallery {
left: 0;
right: 0;
&__images {
@include breakpoint (xs) {
overflow: hidden;
}
}
// Specific box shadow for images
&__photo {
box-shadow: 0 pxVW(16px) pxVW(40) rgba(#2E025C, 0.4);
@@ -95,6 +105,7 @@
// Informations
&__infos {
margin-top: 32px;
margin-bottom: 16px;
padding: 0 24px;
@include breakpoint (sm) {
@@ -120,13 +131,11 @@
// Date
&__date {
margin-top: 16px;
font-size: rem(12px);
color: rgba($color-tertiary, 0.5);
text-align: center;
@include breakpoint (sm) {
margin: 0;
font-size: rem(14px);
text-align: left;
}
@@ -161,11 +170,10 @@
// Dots
&__dots {
position: absolute;
bottom: 24px;
left: 0;
right: 0;
position: relative;
z-index: 20;
margin-top: 24px;
margin-bottom: 24px;
}
}
}