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

Shop WIP

Browse Source
This commit is contained in:
Shelby Kay
2021-10-29 21:48:08 +02:00
parent 79125b0065
commit 141f9c6723
5 changed files with 286 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
src/components/molecules/Poster.svelte
View File

@@ -1,7 +1,19 @@
<script lang="ts">
import Button from '$components/atoms/Button.svelte';
</script>
<div class="poster">
<img src="https://picsum.photos/326/475" width={326} height={475} alt="blob">
<div class="buttons">
<Button
text="View poster"
size="xsmall"
/>
<Button
text="Add to cart"
color="pink"
size="xsmall"
/>
</div>
</div>

14
src/components/organisms/PosterProduct.svelte
View File

@@ -7,20 +7,20 @@
<h2 class="title-huge">Melbourne</h2>
<div class="poster-product__buy">
<img src="/images/poster-display.jpg" alt="">
<div class="info">
<dl>
<dt>Houses Of <br /> Melbourne</dt>
<dd>Poster - 30€</dd>
<dt>Poster</dt>
<dd>Houses Of Melbourne – 30€</dd>
</dl>
<Button
text="Add to cart"
color="beige"
color="pink"
/>
</div>
<img src="/images/poster-display.jpg" alt="">
</div>
<div class="poster-product__images grid">
<div class="poster-product__images grid container">
<picture class="image image--first photo shadow-box-light">
<img src="https://picsum.photos/656/493" width={656} height={493} alt="blob">
</picture>
@@ -33,7 +33,7 @@
</div>
<div class="poster-product__about grid">
<div class="text">
<div class="text container">
<p>This poster will bring you to straight to Melbourne, Australia with its unique Victorian architectural style, wrought iron and colorful fronts.</p>
<p class="details">
Format: 40cm x 60cm (16” x 24”)<br>Printed on Recycled offset paper, 150gm/m2.<br>Frame not included.
@@ -41,7 +41,7 @@
</div>
</div>
<div class="poster-product__image grid">
<div class="poster-product__image grid container">
<picture class="image image--fourth photo shadow-box-light">
<img src="https://picsum.photos/854/588" width={854} height={588} alt="blob">
</picture>

45
src/style/molecules/_poster.scss
View File

@@ -1,7 +1,52 @@
.poster {
position: relative;
border-radius: 6px;
max-width: 326px;
@include bp (sm) {
background-color: $color-primary-tertiary20;
max-width: 600px;
}
img {
display: block;
width: 100%;
height: auto;
}
.buttons {
display: flex;
margin-top: 40px;
justify-content: center;
@include bp (sm) {
position: absolute;
align-items: center;
justify-content: space-between;
bottom: 14px;
left: 10%;
right: 10%;
// margin: 0 10% 28px;
white-space: nowrap;
}
a {
margin-right: 8px;
margin-left: 8px;
@include bp (sm) {
margin: 0;
}
}
}
&:hover {
img {
transform: scale(0.8) translate3d(0, -5%, 0);
}
.buttons {
display: flex;
}
}
}

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

@@ -1,30 +1,45 @@
.poster-product {
background-color: $color-cream;
@include bp (sm) {
display: grid
}
// Title Location
h2 {
grid-column: 2 / span calc(var(--columns) - 1);
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
&__buy {
grid-column: 2 / span 10;
img {
display: block;
width: 100%;
height: auto;
// 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-top: 36px;
margin-bottom: 32px;
@include bp (sm) {
margin-bottom: 72px;
}
}
// Title
@@ -40,15 +55,31 @@
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;
grid-column: 14 / span var(--columns);
position: relative;
z-index: 2;
grid-column: 14 / span var(--columns);
}
.image {
border-radius: 6px;
@@ -62,44 +93,75 @@
// Image 1
.image--first {
grid-column: 1 / span 10;
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: 148px 0 260px;
margin: -80px 0 -120px;
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: 4 / span 13;
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(18px);
margin-top: 56px;
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;
@@ -113,7 +175,11 @@
// Image 4
.image--fourth {
grid-column: 1 / span 8;
@include bp (sm) {
grid-column: 8 / span 13;
}
}
}
}

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

@@ -2,56 +2,102 @@
// Header
header {
// display: flex;
display: none;
position: fixed;
// display: flex;
// display: none;
z-index: 20;
bottom: 0;
width: 100%;
justify-content: center;
align-items: center;
background: linear-gradient(180deg, rgba(45, 4, 88, 0) 84.2%, #1E0538 100%);
@include bp (sm) {
display: flex;
}
// Shop
p {
position: absolute;
left: 0;
bottom: 0;
left: 50%;
transform: translateX(-50%);
bottom: 64px;
}
// Navigation
ul {
position: absolute;
display: flex;
bottom: 24px;
left: 0;
right: 0;
li {
display: block;
}
a {
text-decoration: none;
font-size: rem(24px);
font-size: rem(22px);
font-family: $font-serif;
color: $color-tertiary;
margin: 0 10px;
&:hover {
color: $color-secondary;
}
@include bp (sm) {
font-size: rem(24px);
margin: 0 12px;
}
}
// Cart
span {
position: absolute;
right: 0;
bottom: 0;
}
}
// Intro
&__intro {
position: relative;
height: 80vh;
height: 100vh;
min-height: 800px;
overflow: hidden;
background-color: $color-primary-darker;
// Top Menu
// Back
.back {
position: absolute;
left: 32px;
top: 32px;
color: #fff;
text-decoration: none;
font-size: rem(14px);
color: $color-cream;
max-width: 76px;
@include bp (sm) {
max-width: none;
font-size: rem(18px);
}
}
// Shop
.shop-title {
position: absolute;
top: 32px;
left: 50%;
transform: translateX(-50%);
font-size: rem(14px);
color: $color-cream;
@include bp (sm) {
font-size: rem(18px);
}
}
// Background Image
picture {
width: 100%;
height: 100%;
opacity: 0.55;
img {
display: block;
@@ -61,7 +107,6 @@
}
}
// Site Title
h1 {
font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)});
@@ -80,36 +125,72 @@
// About
&__about {
display: flex;
background-color: $color-cream;
color: $color-text;
padding: 100px 0 56px;
@include bp (sm) {
display: grid;
padding: 120px 0;
}
.description {
font-weight: 300;
max-width: 450px;
margin-left: 20px;
padding-right: 20px;
font-size: rem(18px);
@include bp (sm) {
grid-column: 3 / span 12;
max-width: 560px;
font-weight: 300;
margin-left: 0;
padding: 0;
font-size: rem(22px);
}
}
}
// Posters
&__posters {
background-color: $color-primary-darker;
padding: 56px 20px 72px;
border-bottom: solid 1px $color-primary-tertiary20 ;
@include bp (sm) {
padding: 120px 0;
}
// Title
h3 {
grid-column: 3 / span 7;
grid-column: 2 / span 6;
font-family: $font-serif;
color: $color-cream;
font-size: rem(48px);
font-size: rem(32px);
line-height: 1.1;
text-align: center;
margin-bottom: 24px;
@include bp (sm) {
grid-column: 3 / span 14;
font-size: rem(48px);
text-align: left;
max-width: 360px;
margin-bottom: 0;
}
}
// Posters Set
.set {
--gap: 24px;
grid-column: 2 / span 22;
grid-column: 1 / span 8;
display: block;
@include bp (sm) {
grid-column: 2 / span 22;
}
@include bp (mob-lg) {
--gap: 32px;
display: grid;
@@ -124,7 +205,10 @@
grid-template-columns: repeat(4, 1fr);
}
// Poster
.poster {
margin: 0 auto auto;
// 2 columns
&:nth-child(2n + 1) {
@include bp (sm, max) {
@@ -165,15 +249,38 @@
// Subscribe
.subscribe {
grid-column: 14 / span 7;
grid-column: 1 / span var(--columns);
margin-top: 72px;
text-align: center;
@include bp (sm) {
grid-column: 14 / span 8;
margin-top: 0;
text-align: left;
}
p {
font-size: rem(22px);
font-size: rem(18px);
color: $color-cream;
font-weight: 300;
line-height: 1.5;
margin-bottom: 24px;
@include bp (sm) {
font-size: rem(22px);
margin-bottom: 30px;
}
}
.newsletter-form {
padding: 0;
margin: 0 auto;
@include bp (sm) {
margin: 0;
min-width: 368px;
}
}
.newsletter-form__bottom {
display: none;