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

✨ Add data to Shop page

Browse Source
This commit is contained in:
Félix Péault
2021-10-31 19:38:08 +01:00
parent 2c0adcc4e2
commit 99fe09c4fd
9 changed files with 241 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

114
src/style/organisms/_poster-product.scss → src/style/layouts/_poster.scss
View File

@@ -1,4 +1,4 @@
.poster-product {
.poster-layout {
background-color: $color-cream;
@include bp (sm) {
@@ -19,8 +19,11 @@
}
}
// Poster Product
/*
** Product Layout
*/
// Poster Display
&__buy {
grid-column: 1 / span var(--columns);
@@ -28,18 +31,18 @@
@include bp (sm) {
grid-column: 2 / span 10;
margin: 0;
margin: 0 0 104px;
}
}
// Product Info
.info {
display: flex;
justify-content: space-between;
margin-bottom: 32px;
// Product Info
&__info {
display: flex;
justify-content: space-between;
margin-bottom: 32px;
@include bp (sm) {
margin-bottom: 72px;
}
@include bp (sm) {
margin-bottom: 56px;
}
// Title
@@ -61,42 +64,42 @@
max-width: none;
}
}
// Image
img {
display: block;
width: 100%;
height: auto;
border-radius: 6px;
}
}
// Images set
&__images {
@include bp (sm) {
--columns: 10;
position: relative;
z-index: 2;
grid-column: 14 / span var(--columns);
}
}
.image {
position: relative;
border-radius: 6px;
.image {
border-radius: 6px;
img {
display: block;
width: 100%;
height: auto;
}
img {
position: absolute;
top: 0;
left: 0;
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
// Image 1
.image--first {
&:after {
content: "";
display: block;
width: 100%;
padding-bottom: 75%;
}
&--1 {
grid-column: 1 / span 7;
}
// Image 2
.image--second {
&--2 {
grid-column: 2 / span 5;
margin: 32px 0;
@@ -104,8 +107,7 @@
margin: 48px 0;
}
}
// Image 3
.image--third {
&--3 {
grid-column: 4 / span 5;
z-index: 10;
margin-bottom: -64px;
@@ -114,6 +116,19 @@
grid-column: 5 / span 5;
margin-bottom: 0;
}
&:after {
padding-bottom: 128%;
}
}
&--4 {
grid-column: 1 / span 8;
margin-bottom: 56px;
@include bp (sm) {
grid-column: 8 / span 13;
margin-bottom: 120px;
}
}
}
@@ -126,6 +141,7 @@
font-weight: 300;
color: $color-primary-tertiary20;
line-height: 1.4;
white-space: pre-line;
@include bp (sm) {
padding: 148px 0 260px;
@@ -135,6 +151,7 @@
.text {
grid-column: 1 / span 8;
font-size: rem(28px);
font-weight: 200;
@include bp (sm) {
grid-column: 4 / span 12;
@@ -147,6 +164,7 @@
font-size: rem(16px);
margin-top: 32px;
line-height: 1.5;
font-weight: 300;
@include bp (sm) {
margin-top: 56px;
@@ -154,32 +172,4 @@
}
}
}
// Single Image
&__image {
margin-bottom: 56px;
@include bp (sm) {
margin-bottom: 120px;
}
.image {
border-radius: 6px;
img {
display: block;
width: 100%;
height: auto;
}
}
// Image 4
.image--fourth {
grid-column: 1 / span 8;
@include bp (sm) {
grid-column: 8 / span 13;
}
}
}
}

13
src/style/pages/_shop.scss
View File

@@ -131,6 +131,7 @@
font-family: $font-serif;
color: $color-tertiary;
margin: 0 10px;
transition: color 0.3s;
&:hover {
color: $color-secondary;
@@ -141,6 +142,13 @@
margin: 0 12px;
}
}
// Active
.is-active {
a {
color: $color-secondary;
}
}
}
}
}
@@ -163,6 +171,7 @@
margin-left: 20px;
padding-right: 20px;
font-size: rem(18px);
white-space: pre-line;
@include bp (sm) {
grid-column: 3 / span 12;
@@ -272,7 +281,8 @@
// Subscribe
.subscribe {
grid-column: 1 / span var(--columns);
margin-top: 72px;
max-width: 380px;
margin: 72px auto 0;
text-align: center;
@include bp (sm) {
@@ -300,7 +310,6 @@
@include bp (sm) {
margin: 0;
min-width: 368px;
}
}

4
src/style/style.scss
View File

@@ -59,9 +59,11 @@
@import "organisms/newsletter";
@import "organisms/carousel";
@import "organisms/shop";
@import "organisms/poster-product";
@import "organisms/footer";
// Layouts
@import "layouts/poster";
// Pages
@import "pages/viewer-photo";