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

Fix Photos page responsive

Browse Source
This commit is contained in:
Félix Péault
2021-10-23 23:20:00 +02:00
parent 74ff618c23
commit c2f7ad108a
1 changed files with 42 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -3,18 +3,18 @@
// Intro Section
&__intro {
overflow: hidden;
margin-bottom: 72px;
margin-bottom: clamp(32px, 7.5vw, 96px);
color: $color-text;
text-align: center;
// Title
h1 {
margin-top: -20px;
margin: -20px 0 48px;
color: $color-secondary;
line-height: 1;
@include bp (sm) {
margin-top: -100px;
margin: -100px 0 0;
}
}
// Text
@@ -59,7 +59,7 @@
justify-content: center;
align-items: center;
min-height: 64px;
margin: 20px 0;
margin-top: 20px;
padding: 0 12px;
background: $color-primary-darker;
border-radius: 50vh;
@@ -69,6 +69,7 @@
}
@include bp (sm) {
height: 72px;
margin-top: 0;
padding: 28px 32px;
}
@@ -145,12 +146,14 @@
display: flex;
align-items: center;
justify-content: center;
margin-top: 20px;
@include bp (sm) {
position: absolute;
top: 50%;
right: 56px;
transform: translateY(-50%);
margin-top: 0;
}
a {
@@ -202,7 +205,7 @@
@include bp (sm) {
margin: 0 30px;
padding: 64px 0;
padding: clamp(40px, 5vw, 64px) 0;
}
&:before, &:after {
@@ -241,11 +244,11 @@
}
@include bp (sm) {
// Swich to template: 2-1-1 / 1-1-2 / 4
grid-column: 2 / span 22;
grid-template-columns: repeat(4, 1fr);
grid-gap: 24px;
}
@include bp (sd) {
grid-column: 2 / span 22;
grid-gap: 40px;
}
@@ -366,10 +369,12 @@
justify-content: center;
@include bp (sm) {
justify-content: space-between;
margin: clamp(56px, 4.5vw, 80px) 0;
}
@include bp (sd) {
--columns: 22;
grid-column: 2 / span var(--columns);
justify-content: space-between;
margin: 80px 0;
}
// Updated Date
@@ -381,6 +386,7 @@
font-weight: 300;
text-align: center;
margin: 24px 0 48px;
line-height: 1.35;
@include bp (sm) {
grid-column: span 5;
@@ -388,6 +394,14 @@
text-align: left;
margin: 0;
}
time {
display: block;
@include bp (sd) {
display: inline;
}
}
}
// See More Photos
@@ -397,7 +411,10 @@
margin: 0 auto;
@include bp (sm) {
grid-column: 6 / span 12;
grid-column: 7 / span 12;
}
@include bp (sd) {
grid-column-start: 6;
}
}
@@ -406,18 +423,31 @@
grid-column: span var(--columns);
grid-row: 3;
text-align: center;
color: rgba($color-gray, 0.3);
color: rgba($color-text, 0.3);
font-family: $font-serif;
font-size: rem(64px);
font-weight: 200;
line-height: 1;
letter-spacing: -0.05em;
@include bp (sm) {
grid-column: 16 / span 7;
grid-column: 18 / span 7;
grid-row: 1;
margin-left: auto;
text-align: right;
}
@include bp (sd) {
grid-column-start: 16;
}
span {
display: inline-block;
margin: 0 -6px;
&:last-child {
margin-right: 0;
}
}
}
}
@@ -426,7 +456,7 @@
grid-column: span var(--columns);
margin-bottom: 0;
@include bp (sm) {
@include bp (sd) {
grid-column: 2 / span 22;
}
}