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

9
src/style/_typography.scss
View File

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

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

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

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

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

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

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