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

14
src/routes/shop/__layout.svelte
View File

@@ -62,10 +62,16 @@
<Cart />
<section class="shop-page__intro" bind:this={introEl}>
<a href="/" class="back">
Back to Houses Of
</a>
<span class="shop-title">Shop</span>
<div class="top container">
<a href="/" class="back">
<svg width="5" height="8" viewBox="0 0 5 8" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 1 1 4l3 3" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<span>Back to Houses Of</span>
</a>
<span class="shop-title">Shop</span>
</div>
<SiteTitle
variant="inline"

2
src/style/atoms/_site-title.scss
View File

@@ -75,7 +75,7 @@
@include bp (sm) {
font-size: 0.333em;
margin: 0 16px 0 20px;
margin: 0 10px 0 20px;
}
}
}

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