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

Add responsive style to About page

Browse Source
This commit is contained in:
Shelby Kay
2022-09-09 15:01:36 +02:00
parent 4442f268f9
commit 35b1e27e7c
6 changed files with 159 additions and 61 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/molecules/ProcessStep.svelte
View File

@@ -55,7 +55,7 @@
</div> </div>
{/if} {/if}
<div class="text text-small"> <div class="text text-normal">
{@html text} {@html text}
</div> </div>
</div> </div>

10
src/routes/about/+page.svelte
View File

@@ -169,9 +169,8 @@
<div class="text text-small"> <div class="text text-small">
{@html about.creation_text} {@html about.creation_text}
</div> </div>
<figure class="portrait-photo">
<Image <Image
class="shadow-box-dark" class="portrait-photo shadow-box-dark"
id={about.creation_portrait.id} id={about.creation_portrait.id}
alt={about.creation_portrait.title} alt={about.creation_portrait.title}
sizeKey="photo-list" sizeKey="photo-list"
@@ -181,10 +180,9 @@
}} }}
ratio={1.425} ratio={1.425}
/> />
<figcaption class="text-info"> <span class="portrait-photo__caption text-info">
{about.creation_portrait_caption} {about.creation_portrait_caption}
</figcaption> </span>
</figure>
</div> </div>
</section> </section>
@@ -282,7 +280,7 @@
</div> </div>
</section> </section>
<section class="about__interest grid"> <section class="about__interest container grid">
<div class="container grid"> <div class="container grid">
<h2 class="title-xl">{about.contact_title}</h2> <h2 class="title-xl">{about.contact_title}</h2>
<div class="blocks"> <div class="blocks">

9
src/style/_typography.scss
View File

@@ -4,7 +4,7 @@
// Huge // Huge
.title-huge { .title-huge {
font-family: $font-serif; font-family: $font-serif;
font-size: clamp(200px, 38vw, 700px); font-size: clamp(#{rem(200px)}, 38vw, #{rem(700px)});
font-weight: 200; font-weight: 200;
line-height: 1; line-height: 1;
letter-spacing: -0.04em; letter-spacing: -0.04em;
@@ -99,7 +99,7 @@
========================================================================== */ ========================================================================== */
// Huge // Huge
.text-huge { .text-huge {
font-size: rem(72px); font-size: clamp(#{rem(34px)}, 7vw, #{rem(72px)});
font-weight: 300; font-weight: 300;
line-height: 1.25; line-height: 1.25;
@@ -164,13 +164,12 @@
// Small // Small
.text-small { .text-small {
font-size: rem(18px); font-size: rem(16px);
font-weight: 400; font-weight: 400;
line-height: 1.4; line-height: 1.5;
@include bp (sd) { @include bp (sd) {
font-size: rem(20px); font-size: rem(20px);
line-height: 1.5;
} }
} }

5
src/style/molecules/_process-step.scss
View File

@@ -3,7 +3,7 @@
position: relative; position: relative;
display: block; display: block;
overflow: hidden; overflow: hidden;
padding: 56px 32px 32px; padding: 32px;
background: $color-primary-darker; background: $color-primary-darker;
border-radius: 12px; border-radius: 12px;
transform: translateZ(0); transform: translateZ(0);
@@ -25,7 +25,7 @@
overflow: hidden; overflow: hidden;
width: 70%; width: 70%;
max-height: 550px; max-height: 550px;
margin-bottom: 48px; margin-bottom: 28px;
border-radius: 6px; border-radius: 6px;
@include bp (sm) { @include bp (sm) {
@@ -33,6 +33,7 @@
grid-row: 1 / -1; grid-row: 1 / -1;
width: 100%; width: 100%;
height: auto; height: auto;
margin-bottom: 48px;
} }
:global(.image) { :global(.image) {

8
src/style/organisms/_banner.scss
View File

@@ -1,12 +1,12 @@
.banner { .banner {
position: relative; position: relative;
z-index: 30; z-index: 30;
height: 24vw; height: 70vw;
min-height: 200px; max-height: 428px;
overflow: hidden; overflow: hidden;
@include bp (lg) { @include bp (sm) {
max-height: 400px; max-height: 320px;
min-height: 275px; min-height: 275px;
} }

152
src/style/pages/_about.scss
View File

@@ -3,7 +3,7 @@
** Introduction ** Introduction
*/ */
&__introduction { &__introduction {
padding: clamp(48px, 10vw, 80px) 0; padding: clamp(48px, 10vw, 80px) 0 138px;
@include bp (sm) { @include bp (sm) {
padding: clamp(80px, 7vw, 128px) 0 clamp(200px, 20vw, 360px); padding: clamp(80px, 7vw, 128px) 0 clamp(200px, 20vw, 360px);
@@ -11,6 +11,9 @@
// Section title // Section title
h2 { h2 {
grid-column: 1 / -1;
margin-bottom: 16px;
@include bp (sm) { @include bp (sm) {
grid-column: 3 / span 12; grid-column: 3 / span 12;
grid-row: 1; grid-row: 1;
@@ -20,11 +23,15 @@
// Heading text // Heading text
.heading { .heading {
grid-column: 1 / -1;
margin-bottom: 48px;
@include bp (sm) { @include bp (sm) {
grid-column: 3 / span 12; grid-column: 3 / span 12;
grid-row: 2; grid-row: 2;
align-self: baseline; align-self: baseline;
max-width: 788px; max-width: 788px;
margin-bottom: 0;
} }
:global(strong) { :global(strong) {
@@ -35,6 +42,7 @@
// Right text // Right text
.text { .text {
grid-column: 1 / -2;
color: $color-tertiary; color: $color-tertiary;
@include bp (sm) { @include bp (sm) {
@@ -63,14 +71,22 @@
*/ */
&__creation { &__creation {
background: #fff; background: #fff;
padding-bottom: 160px;
@include bp (sm) {
padding-bottom: 240px; padding-bottom: 240px;
}
// Figures // Figures
:global(picture) { :global(picture) {
width: 100%; width: 100%;
border-radius: 16px; border-radius: 8px;
overflow: hidden; overflow: hidden;
@include bp (md) {
border-radius: 16px;
}
:global(img) { :global(img) {
display: block; display: block;
width: 100%; width: 100%;
@@ -80,18 +96,23 @@
figcaption { figcaption {
margin-left: auto; margin-left: auto;
margin-top: 16px;
color: $color-gray; color: $color-gray;
text-align: right; text-align: right;
font-size: rem(12px);
@include bp (sm) { @include bp (sm) {
margin-top: 24px; margin-top: 24px;
font-size: rem(14px);
} }
} }
// First photo // First photo
.first-photo { .first-photo {
grid-column: 1 / -1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
margin: -74px 0 96px;
@include bp (sm) { @include bp (sm) {
grid-column: 8 / -2; grid-column: 8 / -2;
@@ -100,6 +121,11 @@
} }
figcaption { figcaption {
br {
@include bp (sm, max) {
display: none;
}
}
a { a {
color: inherit; color: inherit;
text-decoration: none; text-decoration: none;
@@ -130,41 +156,70 @@
// Text content // Text content
h2 { h2 {
grid-column: 3 / span 10; grid-column: 1 / -2;
max-width: 240px; max-width: 240px;
line-height: 1.2; line-height: 1.2;
margin-bottom: 16px;
@include bp (sm) {
grid-column: 3 / span 10;
margin-bottom: 48px; margin-bottom: 48px;
} }
}
// Large text // Large text
.heading { .heading {
grid-column: 3 / -3; grid-column: 1 / -1;
color: $color-primary-tertiary20; color: $color-primary-tertiary20;
margin-bottom: 112px; margin-bottom: 72px;
:global(strong) { :global(strong) {
color: $color-lilas-bright; color: $color-lilas-bright;
font-weight: inherit; font-weight: inherit;
} }
@include bp (sm) {
grid-column: 3 / -3;
margin-bottom: 112px;
}
} }
// Small paragraph // Small paragraph
.text { .text {
color: $color-text; color: $color-text;
grid-column: 9 / span 6; grid-column: 1 / -3;
align-self: center; align-self: center;
@include bp (sm) {
grid-column: 9 / span 6;
}
} }
// Portrait // Portrait
.portrait-photo { :global(.portrait-photo) {
position: relative; grid-column: 3 / -1;
grid-column: 16 / span 7;
align-self: center; align-self: center;
grid-row: 4;
figcaption { @include bp (sm) {
position: absolute; grid-column: 16 / span 7;
bottom: -40px; }
right: 0; }
.portrait-photo__caption {
grid-column: 3 / -1;
grid-row: 5;
color: $color-gray;
margin-bottom: 40px;
text-align: right;
font-size: rem(12px);
margin-top: 16px;
@include bp (md) {
grid-column: 16 / span 7;
margin: 0;
font-size: rem(16px);
margin-top: 24px;
} }
} }
} }
@@ -180,26 +235,45 @@
:global(picture) { :global(picture) {
height: auto; height: auto;
overflow: hidden; overflow: hidden;
border-radius: 12px; border-radius: 8px;
grid-column: 1 / -1;
margin-top: -64px;
height: 486px;
@include bp (sm) {
grid-column: 3 / -6; grid-column: 3 / -6;
margin-top: -100px; margin-top: -100px;
height: auto;
}
@include bp (md) {
border-radius: 12px;
}
:global(img) { :global(img) {
display: block; display: block;
width: 100%; width: 100%;
height: auto; height: 100%;
object-fit: cover;
} }
} }
h2 { h2 {
grid-column: 3 / 7; grid-column: 1 / -1;
line-height: 1; line-height: 1;
margin-top: 72px;
@include bp (sm) {
grid-column: 3 / 7;
margin-top: 88px; margin-top: 88px;
} }
}
:global(p) { :global(p) {
color: $color-text; color: $color-text;
} }
.text { .text {
grid-column: 1 / -2;
margin-top: 16px;
@include bp (sm) { @include bp (sm) {
grid-column: 3 / span 6; grid-column: 3 / span 6;
align-self: baseline; align-self: baseline;
@@ -207,6 +281,9 @@
} }
} }
.conclusion { .conclusion {
grid-column: 1 / -2;
margin-bottom: 72px;
@include bp (sm) { @include bp (sm) {
grid-column: 11 / span 8; grid-column: 11 / span 8;
margin: 96px 0 144px; margin: 96px 0 144px;
@@ -214,8 +291,14 @@
} }
.heading { .heading {
grid-column: 11 / -2; grid-column: 1 / -1;
align-self: baseline; align-self: baseline;
margin: 64px 0 48px;
@include bp (sm) {
grid-column: 11 / -2;
margin: 0;
}
:global(p) { :global(p) {
max-width: 800px; max-width: 800px;
@@ -244,7 +327,7 @@
&__process { &__process {
position: relative; position: relative;
z-index: 2; z-index: 2;
margin-top: 72px; margin-top: 48px;
@include bp (sm) { @include bp (sm) {
margin: 96px 0 0; margin: 96px 0 0;
@@ -255,6 +338,8 @@
} }
aside { aside {
grid-column: 1 / -1;
@include bp (sm) { @include bp (sm) {
grid-column: 3 / span 9; grid-column: 3 / span 9;
} }
@@ -262,25 +347,29 @@
// Heading text // Heading text
.heading { .heading {
max-width: 400px; max-width: 400px;
margin-bottom: 48px; margin-bottom: 40px;
text-align: center;
@include bp (sm) { @include bp (sm) {
margin-bottom: 80px; margin-bottom: 80px;
text-align: left;
} }
h2 { h2 {
margin-bottom: 16px; margin-bottom: 12px;
color: $color-secondary; color: $color-secondary;
@include bp (sm) { @include bp (sm) {
margin-bottom: 16px;
margin-bottom: .5em; margin-bottom: .5em;
} }
} }
p { p {
color: $color-tertiary; color: $color-tertiary;
font-weight: 300; font-weight: 300;
max-width: 320px;
@include bp (sm) {
max-width: none;
}
} }
} }
@@ -288,7 +377,11 @@
ol { ol {
li { li {
display: block; display: block;
margin: 4px 0;
@include bp (sm) {
margin: 6px 0; margin: 6px 0;
}
&:first-child { &:first-child {
margin-top: 0; margin-top: 0;
@@ -319,11 +412,14 @@
// Steps grid // Steps grid
.steps { .steps {
position: relative; position: relative;
grid-column: 1 / -1;
margin-top: 32px;
@include bp (sm) { @include bp (sm) {
display: grid; display: grid;
grid-template-rows: auto; grid-template-rows: auto;
grid-column: 13 / span 11; grid-column: 13 / span 11;
margin-top: 0;
} }
& > :global(*) { & > :global(*) {
@@ -343,7 +439,7 @@
&__photos { &__photos {
position: relative; position: relative;
z-index: 1; z-index: 1;
margin-top: clamp(48px, 10vw, 80px); margin-top: clamp(32px, 9vw, 80px);
@include bp (sm) { @include bp (sm) {
margin-bottom: clamp(80px, 10vw, 128px); margin-bottom: clamp(80px, 10vw, 128px);
@@ -385,7 +481,7 @@
cursor: pointer; cursor: pointer;
transition: opacity 1s var(--ease-quart); transition: opacity 1s var(--ease-quart);
@include bp (sm) { @include bp (md) {
border-radius: 8px; border-radius: 8px;
} }
@@ -431,13 +527,14 @@
margin-top: calc(-1 * clamp(160px, 14vw, 256px)); margin-top: calc(-1 * clamp(160px, 14vw, 256px));
& > .container { & > .container {
grid-column: 1 / -1;
position: relative; position: relative;
z-index: 2; z-index: 2;
display: block; display: block;
margin-bottom: 20px; margin-bottom: 36px;
padding: 72px 32px; padding: 72px 32px;
background: $color-primary-tertiary20; background: $color-primary-tertiary20;
border-radius: 12px; border-radius: 8px;
box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8); box-shadow: 0px -24px 120px rgba($color-primary-darker, 0.8);
@include bp (sm) { @include bp (sm) {
@@ -447,6 +544,9 @@
margin-bottom: 64px; margin-bottom: 64px;
padding: clamp(72px, 8vw, 160px) 0; padding: clamp(72px, 8vw, 160px) 0;
} }
@include bp (md) {
border-radius: 12px;
}
} }
h2 { h2 {