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

185
src/style/organisms/_poster-product.scss
View File

@@ -1,185 +0,0 @@
.poster-product {
background-color: $color-cream;
@include bp (sm) {
display: grid
}
// Title Location
h2 {
grid-column: 1 / span var(--columns);
font-size: clamp(200px, 20vw, 340px);
color: $color-secondary;
margin-bottom: 40px;
@include bp (sm) {
grid-column: 2 / span calc(var(--columns) - 1);
text-align: center;
margin-bottom: 48px;
}
}
// Poster Product
// Poster Display
&__buy {
grid-column: 1 / span var(--columns);
margin: 0 20px 48px;
@include bp (sm) {
grid-column: 2 / span 10;
margin: 0;
}
// Product Info
.info {
display: flex;
justify-content: space-between;
margin-bottom: 32px;
@include bp (sm) {
margin-bottom: 72px;
}
}
// Title
dt {
color: $color-secondary;
font-family: $font-serif;
font-size: rem(36px);
line-height: 1.3;
}
// Text
dd {
font-size: rem(16px);
color: $color-gray;
margin-top: 8px;
max-width: 140px;
@include bp (sm) {
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 {
border-radius: 6px;
img {
display: block;
width: 100%;
height: auto;
}
}
// Image 1
.image--first {
grid-column: 1 / span 7;
}
// Image 2
.image--second {
grid-column: 2 / span 5;
margin: 32px 0;
@include bp (sm) {
margin: 48px 0;
}
}
// Image 3
.image--third {
grid-column: 4 / span 5;
z-index: 10;
margin-bottom: -64px;
@include bp (sm) {
grid-column: 5 / span 5;
margin-bottom: 0;
}
}
}
// About
&__about {
background-color: #fff;
padding: 144px 0 72px;
margin: -100px 0 -120;
font-size: rem(36px);
font-weight: 300;
color: $color-primary-tertiary20;
line-height: 1.4;
@include bp (sm) {
padding: 148px 0 260px;
margin: -120px 0;
}
.text {
grid-column: 1 / span 8;
font-size: rem(28px);
@include bp (sm) {
grid-column: 4 / span 12;
font-size: rem(32px);
}
}
.details {
color: $color-gray;
font-size: rem(16px);
margin-top: 32px;
line-height: 1.5;
@include bp (sm) {
margin-top: 56px;
font-size: rem(18px);
}
}
}
// 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;
}
}
}
}