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

Fix some responsive issues on Photos page

Browse Source
This commit is contained in:
Félix Péault
2021-10-05 23:10:33 +02:00
parent 9c36b2dbf6
commit 4a793b49af
1 changed files with 28 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

38
src/style/pages/_photos.scss
View File

@@ -9,9 +9,9 @@
// Title // Title
h1 { h1 {
margin-top: -20px;
color: $color-secondary; color: $color-secondary;
line-height: 1; line-height: 1;
margin-top: -20px;
@include bp (sm) { @include bp (sm) {
margin-top: -100px; margin-top: -100px;
@@ -19,7 +19,7 @@
} }
// Text // Text
p { p {
max-width: 350px; max-width: 456px;
margin: 20px auto 56px; margin: 20px auto 56px;
@include bp (sm) { @include bp (sm) {
@@ -34,7 +34,11 @@
position: relative; position: relative;
max-width: 982px; max-width: 982px;
margin: 0 auto; margin: 0 auto;
padding: 0 32px; padding: 0 16px;
@include bp (sm) {
padding: 0 32px;
}
// Span // Span
&__label { &__label {
@@ -54,13 +58,17 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
height: 72px; min-height: 64px;
margin: 20px 0; margin: 20px 0;
padding: 0 22px; padding: 0 12px;
background: $color-primary-darker; background: $color-primary-darker;
border-radius: 50vh; border-radius: 50vh;
@include bp (mob-lg) {
padding: 0 16px;
}
@include bp (sm) { @include bp (sm) {
height: 72px;
padding: 28px 32px; padding: 28px 32px;
} }
@@ -72,20 +80,26 @@
} }
li { li {
display: block; display: block;
margin: 8px 10px; margin: 8px 2px;
font-size: rem(16px); font-size: rem(14px);
color: #fff; color: #fff;
@include bp (sm) { @include bp (sm) {
margin: 0 2px; margin: 0 2px;
font-size: rem(16px);
} }
} }
.icon { .icon {
display: block;
width: 20px;
height: 20px;
fill: #fff; fill: #fff;
margin-right: 12px; margin-right: 12px;
transition: fill 0.2s; transition: fill 0.2s;
@include bp (sm) { @include bp (sm) {
width: 26px;
height: 26px;
margin-right: 16px; margin-right: 16px;
} }
} }
@@ -94,11 +108,15 @@
position: relative; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
padding: 8px 16px; padding: 8px 12px 8px 8px;
font-weight: 900; font-weight: 900;
border-radius: 100vh; border-radius: 100vh;
transition: background-color 0.2s; transition: background-color 0.2s;
@include bp (sm) {
padding: 8px 16px;
}
select { select {
opacity: 0; opacity: 0;
position: absolute; position: absolute;
@@ -149,6 +167,7 @@
// Reset link // Reset link
.reset { .reset {
margin-right: 16px;
padding: 0; padding: 0;
color: rgba($color-tertiary, 0.6); color: rgba($color-tertiary, 0.6);
font-weight: 900; font-weight: 900;
@@ -169,7 +188,6 @@
background-color: $color-tertiary; background-color: $color-tertiary;
padding: 0 16px; padding: 0 16px;
border-radius: 50vh; border-radius: 50vh;
margin-left: 16px;
} }
} }
} }
@@ -333,7 +351,7 @@
margin: 24px 0 48px; margin: 24px 0 48px;
@include bp (sm) { @include bp (sm) {
grid-column: span 4; grid-column: span 5;
grid-row: 1; grid-row: 1;
text-align: left; text-align: left;
margin: 0; margin: 0;