Create shop page
Make components: poster, poster product
This commit is contained in:
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
7
src/style/molecules/_poster.scss
Normal file
7
src/style/molecules/_poster.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
.poster {
|
||||
img {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
119
src/style/organisms/_poster-product.scss
Normal file
119
src/style/organisms/_poster-product.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
183
src/style/pages/_shop.scss
Normal file
183
src/style/pages/_shop.scss
Normal file
@@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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";
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user