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

Edit and WIP on Location page

Browse Source 
Create house component
This commit is contained in:
Shelby Kay
2021-10-07 22:10:08 +02:00
parent d397fdb00f
commit eb6762b240
6 changed files with 377 additions and 56 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
src/style/_typography.scss
View File

@@ -10,6 +10,25 @@
line-height: 1;
}
// House Name
.title-image {
font-size: rem(88px);
font-family: $font-serif;
line-height: 1;
color: $color-secondary;
}
// House Number
.title-index {
font-size: rem(280px);
font-family: $font-serif;
letter-spacing: -0.05em;
font-weight: 200;
line-height: 1;
color: rgba($color-tertiary, 0.6);
}
// Medium
.title-medium {
font-family: $font-serif;
@@ -71,10 +90,17 @@
line-height: 1.5;
}
// Photo date
.text-date {
font-size: rem(16px);
line-height: 1.4;
}
// Label
.text-label {
font-size: rem(12px);
line-height: 1.4;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 500;
}

3
src/style/atoms/_button.scss
View File

@@ -11,7 +11,7 @@
text-decoration: none;
// Icon
img {
img, svg {
display: block;
margin-right: 12px;
}
@@ -27,5 +27,6 @@
// Pink
&--pink {
background: $color-secondary-light;
}
}

51
src/style/organisms/_house.scss Normal file
View File

@@ -0,0 +1,51 @@
.house {
--columns: 20;
grid-column-start: 3;
position: relative;
a {
text-decoration: none;
}
// Information
&__info {
grid-column: 4 / span 14;
margin-bottom: 56px;
max-width: 800px;
time {
display: block;
margin-top: 24px;
color: $color-lightgray;
}
}
// Photo
&__photo {
position: relative;
display: block;
grid-column: 1 / span 17;
picture {
position: relative;
z-index: 3;
border-radius: 8px;
overflow: hidden;
}
img {
display: block;
width: 100%;
height: auto;
object-fit: contain;
}
}
// Photo number
&__index {
position: absolute;
right: -250px;
top: 50%;
transform: translateY(-50%);
z-index: 1;
}
}

219
src/style/pages/_location.scss
View File

@@ -1,38 +1,199 @@
// Location Page
.location {
// Houses Of Title
&__title {
max-width: 1164px;
margin: 0 auto;
padding: 0 32px;
font-family: $font-serif;
line-height: 1;
text-transform: uppercase;
color: $color-lightpurple;
font-size: rem(56px);
.location-page {
background: #fff;
strong {
display: block;
font-size: clamp(48px, 16vw, 160px);
color: $color-secondary;
font-weight: 300;
text-transform: none;
}
// Intro
.location-page__intro {
position: relative;
// height: 85vh;
background: $color-primary;
.housesof {
grid-column: span var(--columns);
display: flex;
align-items: baseline;
// margin-left: -10vw;
// Houses Of Title
.title {
grid-column: 1 / span var(--columns);
position: relative;
z-index: 2;
max-width: 1164px;
margin: clamp(80px, 10vw, 240px) auto clamp(60px, 6vw, 120px);
padding: 0 32px;
font-family: $font-serif;
line-height: 1;
text-transform: uppercase;
color: $color-lightpurple;
font-size: rem(56px);
span {
margin-left: 24px;
strong {
display: block;
font-size: clamp(48px, 16vw, 160px);
color: $color-secondary;
font-weight: 300;
text-transform: none;
}
.housesof {
grid-column: span var(--columns);
display: flex;
align-items: baseline;
// margin-left: -10vw;
span {
margin-left: 24px;
}
}
.city {
grid-row: 2;
// grid-column: 4 / span 13;
text-align: center;
}
}
.city {
grid-row: 2;
// grid-column: 4 / span 13;
text-align: center;
}
// Illustration
&__illustration {
pointer-events: none;
position: absolute;
z-index: 1;
top: 0;
left: 50%;
width: clamp(320px, 100vw, 1920px);
height: 100%;
background: 0 0 var(--illus-mobile) no-repeat;
background-size: 100% auto;
transform: translate3d(-50%, 0, 0);
@include bp (sm) {
background-image: var(--illus-desktop);
}
@include bp (xl) {
background-image: var(--illus-desktop-2x);
}
}
// Description
&__description {
--columns: 19;
grid-column: 6 / span 19;
position: relative;
z-index: 2;
margin-bottom: calc(-1 * clamp(60px, 6vw, 120px));
background-color: $color-tertiary;
color: $color-text;
border-radius: 8px 0 0 8px;
.wrap {
grid-column: 3 / span 13;
max-width: 800px;
padding: 128px 0;
}
.info {
$text-color: rgba($color-text, 0.5);
margin: 40px 0 64px;
color: $text-color;
a {
color: $text-color;
&:hover {
color: $color-secondary;
}
}
& > * {
display: inline-block;
vertical-align: middle;
}
}
.ctas {
display: flex;
flex-wrap: wrap;
.button {
margin-right: 16px;
}
}
}
// Houses
&__houses {
background-color: #fff;
padding-top: 240px;
}
// House
.house {
&:not(:last-child) {
margin-bottom: 120px;
}
&:nth-child(even) {
.house {
&__photo {
grid-column-start: 4;
}
&__info {
margin-left: auto;
text-align: right;
}
&__index {
right: auto;
left: -250px;
}
}
}
}
&__next {
margin-top: -120px;
padding: 240px 0 104px;
background-color: $color-tertiary;
text-align: center;
.pagination {
position: relative;
display: block;
margin: auto 0;
cursor: pointer;
&__progress {
position: relative;
display: inline-block;
font-size: rem(160px);
color: rgba($color-text, 0.15);
font-family: $font-serif;
font-weight: 200;
line-height: 1;
letter-spacing: -0.05em;
span {
display: inline-block;
margin: 0 -10px;
}
}
&__page {
position: absolute;
color: $color-secondary-bright;
font-size: rem(40px);
font-family: $font-serif;
top: 50%;
left: 8%;
display: block;
width: 100%;
transform: translateY(-50%);
text-align: center;
letter-spacing: normal;
font-weight: 400;
}
&__more {
display: block;
margin-top: 16px;
color: $color-gray;
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 300;
font-size: rem(14px);
}
}
}
}

1
src/style/style.scss
View File

@@ -47,6 +47,7 @@
// Organisms
@import "organisms/locations";
@import "organisms/house";
@import "organisms/newsletter";
@import "organisms/shop";
@import "organisms/footer";