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

Fix Shop intro responsive

Browse Source
This commit is contained in:
Félix Péault
2021-11-07 23:12:48 +01:00
parent 5229105e5d
commit 7242027be9
3 changed files with 74 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -74,35 +74,48 @@
overflow: hidden;
// Top Menu
// Back
.back {
.top {
position: absolute;
z-index: 2;
left: 32px;
top: 32px;
color: #fff;
text-decoration: none;
font-size: rem(14px);
color: $color-cream;
max-width: 76px;
z-index: 1;
top: 20px;
left: 0;
padding: 0 20px;
display: flex;
justify-content: space-between;
width: 100%;
margin: 0 auto;
@include bp (sm) {
max-width: none;
font-size: rem(18px);
top: 32px;
padding: 0 32px;
}
}
// Shop
.shop-title {
position: absolute;
z-index: 2;
top: 32px;
left: 50%;
transform: translateX(-50%);
font-size: rem(14px);
color: $color-cream;
@include bp (sm) {
font-size: rem(18px);
// Back
.back {
display: flex;
align-items: center;
color: #fff;
font-size: rem(14px);
color: $color-cream;
text-decoration: none;
@include bp (sm) {
max-width: none;
font-size: rem(18px);
}
svg {
margin-right: 8px;
}
}
// Shop
.shop-title {
font-size: rem(14px);
color: $color-cream;
@include bp (sm) {
font-size: rem(18px);
}
}
}
@@ -114,12 +127,28 @@
left: 50%;
width: 100%;
transform: translate3d(-50%, -50%, 0);
font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
// font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
text-shadow: 0px 8px 12px rgba(#000, 0.25);
text-align: center;
@include bp (sm) {
top: clamp(#{rem(40px)}, 16vw, #{rem(144px)});
left: 0;
font-size: clamp(#{rem(40px)}, 8vw, #{rem(96px)});
transform: none;
}
@include bp (md) {
top: clamp(#{rem(40px)}, 10vw, #{rem(96px)});
font-size: clamp(#{rem(40px)}, 6vw, #{rem(96px)});
}
span, strong {
color: #fff;
}
span {
font-weight: 300;
}
}
// Background Image
@@ -160,6 +189,7 @@
position: absolute;
z-index: 20;
bottom: 0;
left: 0;
width: 100%;
@include bp (md) {
@@ -167,6 +197,8 @@
}
.container {
padding: 0 16px 24px;
@include bp (md) {
display: grid;
grid-template-columns: 15% auto 15%;
@@ -179,7 +211,12 @@
// Shop
p {
margin-right: auto;
text-align: center;
margin-bottom: 8px;
@include bp (md) {
margin-right: auto;
}
}
// Navigation