diff --git a/src/style/molecules/_poster.scss b/src/style/molecules/_poster.scss
index fd94ef5..98e5c3d 100644
--- a/src/style/molecules/_poster.scss
+++ b/src/style/molecules/_poster.scss
@@ -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;
+ }
+ }
+
}
\ No newline at end of file
diff --git a/src/style/organisms/_poster-product.scss b/src/style/organisms/_poster-product.scss
index d71de62..165190e 100644
--- a/src/style/organisms/_poster-product.scss
+++ b/src/style/organisms/_poster-product.scss
@@ -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;
- text-align: center;
- margin-bottom: 48px;
+ 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 {
- --columns: 10;
- grid-column: 14 / span var(--columns);
- position: relative;
- z-index: 2;
+
+ @include bp (sm) {
+ --columns: 10;
+ 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: 48px 0;
+ margin: 32px 0;
+
+ @include bp (sm) {
+ margin: 48px 0;
+ }
}
// Image 3
.image--third {
- grid-column: 5 / span 5;
+ 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: 120px;
+ margin-bottom: 56px;
+
+ @include bp (sm) {
+ margin-bottom: 120px;
+ }
.image {
border-radius: 6px;
@@ -113,7 +175,11 @@
// Image 4
.image--fourth {
- grid-column: 8 / span 13;
+ grid-column: 1 / span 8;
+
+ @include bp (sm) {
+ 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
index 5e2f06c..9755743 100644
--- a/src/style/pages/_shop.scss
+++ b/src/style/pages/_shop.scss
@@ -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 12px;
- }
- }
+ margin: 0 10px;
- // Cart
- span {
- position: absolute;
- right: 0;
- bottom: 0;
+ &:hover {
+ color: $color-secondary;
+ }
+
+ @include bp (sm) {
+ font-size: rem(24px);
+ margin: 0 12px;
+ }
+ }
}
}
// 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: 120px 0;
+ padding: 100px 0 56px;
+
+ @include bp (sm) {
+ display: grid;
+ padding: 120px 0;
+ }
.description {
- grid-column: 3 / span 12;
- max-width: 560px;
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;
+ margin-left: 0;
+ padding: 0;
+ font-size: rem(22px);
+ }
}
}
// Posters
&__posters {
- padding: 120px 0;
+ 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,14 +249,37 @@
// 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: 30px;
+ 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 {
