From 68f9743f1760248c1275088f68d6f416cf6abf5a Mon Sep 17 00:00:00 2001 From: Shelby Kay Date: Wed, 27 Oct 2021 22:48:31 +0200 Subject: [PATCH] Create shop page Make components: poster, poster product --- src/components/molecules/Poster.svelte | 7 + src/components/organisms/PosterProduct.svelte | 49 +++++ src/routes/shop.svelte | 1 - src/routes/shop/index.svelte | 120 ++++++++++++ src/style/atoms/_site-title.scss | 11 +- src/style/molecules/_poster.scss | 7 + src/style/organisms/_poster-product.scss | 119 ++++++++++++ src/style/pages/_shop.scss | 183 ++++++++++++++++++ src/style/style.scss | 3 + 9 files changed, 492 insertions(+), 8 deletions(-) create mode 100644 src/components/molecules/Poster.svelte create mode 100644 src/components/organisms/PosterProduct.svelte delete mode 100644 src/routes/shop.svelte create mode 100644 src/routes/shop/index.svelte create mode 100644 src/style/molecules/_poster.scss create mode 100644 src/style/organisms/_poster-product.scss create mode 100644 src/style/pages/_shop.scss diff --git a/src/components/molecules/Poster.svelte b/src/components/molecules/Poster.svelte new file mode 100644 index 0000000..bd942c0 --- /dev/null +++ b/src/components/molecules/Poster.svelte @@ -0,0 +1,7 @@ + + +
+ blob +
\ No newline at end of file diff --git a/src/components/organisms/PosterProduct.svelte b/src/components/organisms/PosterProduct.svelte new file mode 100644 index 0000000..14a7633 --- /dev/null +++ b/src/components/organisms/PosterProduct.svelte @@ -0,0 +1,49 @@ + + +
+

Melbourne

+ +
+ +
+
+
Houses Of
Melbourne
+
Poster - 30€
+
+
+
+ +
+ + blob + + + blob + + + blob + +
+ +
+
+

This poster will bring you to straight to Melbourne, Australia with its unique Victorian architectural style, wrought iron and colorful fronts.

+

+ Format: 40cm x 60cm (16” x 24”)
Printed on Recycled offset paper, 150gm/m2.
Frame not included. +

+
+
+ +
+ + blob + +
+
\ No newline at end of file diff --git a/src/routes/shop.svelte b/src/routes/shop.svelte deleted file mode 100644 index 01417aa..0000000 --- a/src/routes/shop.svelte +++ /dev/null @@ -1 +0,0 @@ -

Let's sell shit

\ No newline at end of file diff --git a/src/routes/shop/index.svelte b/src/routes/shop/index.svelte new file mode 100644 index 0000000..0527b67 --- /dev/null +++ b/src/routes/shop/index.svelte @@ -0,0 +1,120 @@ + + + + +
+
+

Shop your city

+ +
+ 2 items +
+
+ +
+ photo + +
+ +
+

Welcome to our shop!
We wanted to create a physical expression to share theses unique places and let the architecture transport you while inside of your own home.

+
+ + +
+

View all of our available posters

+
+ + + + + + +
+ +
+
+ + + diff --git a/src/style/atoms/_site-title.scss b/src/style/atoms/_site-title.scss index 3b35385..7205639 100644 --- a/src/style/atoms/_site-title.scss +++ b/src/style/atoms/_site-title.scss @@ -56,28 +56,25 @@ align-items: baseline; color: $color-lightpurple; justify-content: center; + font-size: rem(64px); @include bp (sm) { display: flex; + font-size: rem(96px); } strong { color: $color-secondary; - font-size: rem(64px); - - @include bp (sm) { - font-size: rem(96px); - } } span { display: block; top: 0; margin: 10px 0; - font-size: rem(20px); + font-size: 0.3125em; @include bp (sm) { - font-size: rem(32px); + font-size: 0.333em; margin: 0 16px 0 20px; } } diff --git a/src/style/molecules/_poster.scss b/src/style/molecules/_poster.scss new file mode 100644 index 0000000..fd94ef5 --- /dev/null +++ b/src/style/molecules/_poster.scss @@ -0,0 +1,7 @@ +.poster { + img { + display: block; + width: 100%; + height: auto; + } +} \ No newline at end of file diff --git a/src/style/organisms/_poster-product.scss b/src/style/organisms/_poster-product.scss new file mode 100644 index 0000000..d71de62 --- /dev/null +++ b/src/style/organisms/_poster-product.scss @@ -0,0 +1,119 @@ +.poster-product { + background-color: $color-cream; + + // Title Location + h2 { + grid-column: 2 / span calc(var(--columns) - 1); + font-size: clamp(200px, 20vw, 340px); + color: $color-secondary; + text-align: center; + margin-bottom: 48px; + } + + // Poster Product + &__buy { + grid-column: 2 / span 10; + + img { + display: block; + width: 100%; + height: auto; + } + + // Product Info + .info { + display: flex; + justify-content: space-between; + margin-top: 36px; + } + + // 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; + } + } + + // Images set + &__images { + --columns: 10; + grid-column: 14 / span var(--columns); + position: relative; + z-index: 2; + + .image { + border-radius: 6px; + + img { + display: block; + width: 100%; + height: auto; + } + } + + // Image 1 + .image--first { + grid-column: 1 / span 10; + } + // Image 2 + .image--second { + grid-column: 2 / span 5; + margin: 48px 0; + } + // Image 3 + .image--third { + grid-column: 5 / span 5; + } + } + + // About + &__about { + background-color: #fff; + padding: 148px 0 260px; + margin: -80px 0 -120px; + font-size: rem(36px); + font-weight: 300; + color: $color-primary-tertiary20; + line-height: 1.4; + + .text { + grid-column: 4 / span 13; + } + + .details { + color: $color-gray; + font-size: rem(18px); + margin-top: 56px; + line-height: 1.5; + } + } + + // Single Image + &__image { + margin-bottom: 120px; + + .image { + border-radius: 6px; + + img { + display: block; + width: 100%; + height: auto; + } + } + + // Image 4 + .image--fourth { + grid-column: 8 / span 13; + } + } +} \ No newline at end of file diff --git a/src/style/pages/_shop.scss b/src/style/pages/_shop.scss new file mode 100644 index 0000000..5e2f06c --- /dev/null +++ b/src/style/pages/_shop.scss @@ -0,0 +1,183 @@ +.shop-page { + + // Header + header { + // display: flex; + display: none; + position: fixed; + bottom: 0; + width: 100%; + justify-content: center; + align-items: center; + + // Shop + p { + position: absolute; + left: 0; + bottom: 0; + } + + // Navigation + ul { + display: flex; + + li { + display: block; + } + a { + text-decoration: none; + font-size: rem(24px); + font-family: $font-serif; + color: $color-tertiary; + margin: 0 12px; + } + } + + // Cart + span { + position: absolute; + right: 0; + bottom: 0; + } + } + + // Intro + &__intro { + position: relative; + height: 80vh; + min-height: 800px; + overflow: hidden; + + // Background Image + picture { + width: 100%; + height: 100%; + + img { + display: block; + object-fit: cover; + width: 100%; + height: 100%; + } + } + + + // Site Title + h1 { + font-size: clamp(#{rem(88px)}, 10vw, #{rem(140px)}); + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + width: 100%; + text-align: center; + + span, strong { + color: #fff; + } + } + } + + // About + &__about { + background-color: $color-cream; + color: $color-text; + padding: 120px 0; + + .description { + grid-column: 3 / span 12; + max-width: 560px; + font-weight: 300; + } + } + + // Posters + &__posters { + padding: 120px 0; + + // Title + h3 { + grid-column: 3 / span 7; + font-family: $font-serif; + color: $color-cream; + font-size: rem(48px); + line-height: 1.1; + } + + // Posters Set + .set { + --gap: 24px; + grid-column: 2 / span 22; + display: block; + + @include bp (mob-lg) { + --gap: 32px; + display: grid; + grid-template-columns: repeat(2, 1fr); + gap: var(--gap); + } + @include bp (md) { + grid-template-columns: repeat(3, 1fr); + } + @include bp (sd) { + --gap: 48px; + grid-template-columns: repeat(4, 1fr); + } + + .poster { + // 2 columns + &:nth-child(2n + 1) { + @include bp (sm, max) { + margin-top: calc(var(--gap) * 2); + } + } + + // 3 columns + &:nth-child(3n + 1) { + @include bp (sd, max) { + margin-top: calc(var(--gap) * 2); + } + } + &:nth-child(3n + 2) { + @include bp (sd, max) { + margin-top: var(--gap); + } + } + + // 4 columns + &:nth-child(4n + 1) { + @include bp (sd) { + margin-top: 64px * 3; + } + } + &:nth-child(4n + 2) { + @include bp (sd) { + margin-top: 64px * 2; + } + } + &:nth-child(4n + 3) { + @include bp (sd) { + margin-top: 64px; + } + } + } + } + + // Subscribe + .subscribe { + grid-column: 14 / span 7; + + p { + font-size: rem(22px); + color: $color-cream; + font-weight: 300; + line-height: 1.5; + margin-bottom: 30px; + } + + .newsletter-form__bottom { + display: none; + } + } + } +} \ No newline at end of file diff --git a/src/style/style.scss b/src/style/style.scss index 81ee3f7..9642901 100644 --- a/src/style/style.scss +++ b/src/style/style.scss @@ -26,6 +26,7 @@ @import "pages/credits"; @import "pages/subscribe"; @import "pages/location"; +@import "pages/shop"; // Modules @import "modules/globe"; @@ -50,12 +51,14 @@ @import "molecules/heading"; @import "molecules/issue"; @import "molecules/newsletter-form"; +@import "molecules/poster"; // Organisms @import "organisms/locations"; @import "organisms/house"; @import "organisms/newsletter"; @import "organisms/shop"; +@import "organisms/poster-product"; @import "organisms/footer";