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

Add a newsletter subscription form below locations
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source 
- One component used below Locations list and in the Pagination when all photos has been loaded
- Keep the subscribe page with the column display
This commit is contained in:
Félix Péault
2020-05-06 23:06:26 +02:00
parent 2bb568865c
commit 720ca69902
16 changed files with 228 additions and 137 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/style/organisms/_footer.scss
View File

@@ -61,6 +61,10 @@
li {
margin-right: 20px;
&:last-child {
margin-right: 0;
}
}
a {
display: block;

6
src/style/organisms/_locations.scss
View File

@@ -1,10 +1,10 @@
.browse {
width: 100%;
overflow: hidden;
margin-bottom: 56px;
@include breakpoint (sm) {
margin-top: 120px;
margin-bottom: 52px;
}
// Description
@@ -50,7 +50,7 @@
grid-row-gap: pxVW(96);
min-height: 200px;
margin-top: 112px;
margin-bottom: pxVW(120);
margin-bottom: pxVW(72);
}
@include breakpoint (xl) {
grid-column-gap: 96px;
@@ -58,7 +58,7 @@
max-width: 1024px;
margin-left: auto;
margin-right: auto;
margin-bottom: 184px;
margin-bottom: 72px;
// To apply when having 4 locations:
// grid-template-columns: repeat(4, 1fr);

23
src/style/organisms/_pagination.scss
View File

@@ -99,16 +99,23 @@
// Message
&__message {
h3 {
font-family: $font-serif;
font-size: rem(32px);
color: $color-secondary;
margin-bottom: 16px;
// Newsletter
.newsletter {
margin: 0;
padding: 0;
@include breakpoint (sm) {
margin-bottom: 24px;
font-size: rem(40px);
padding: 24px 0 0;
}
// Title
h2 {
font-size: rem(32px);
@include breakpoint (md) {
font-size: rem(40px);
}
}
}
}
}
}

10
src/style/organisms/_photos.scss
View File

@@ -74,6 +74,10 @@
@include breakpoint (sm) {
padding-bottom: 120px;
&:last-child {
padding-bottom: 0;
}
}
// Even photos
@@ -129,14 +133,16 @@
margin-top: 24px;
@include breakpoint (sm) {
margin-top: -184px;
padding-top: pxVW(224);
margin-top: -64px;
padding-top: pxVW(240);
padding-bottom: pxVW(120);
}
@include breakpoint (md) {
padding-top: pxVW(200);
}
@include breakpoint (xl) {
padding-top: 200px;
padding-bottom: 120px;
}
}
}