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

Add and edit responsive style on homepage

Browse Source
This commit is contained in:
Shelby Kay
2021-10-03 19:14:24 +02:00
parent f6da3c4b55
commit 54afac2ed5
11 changed files with 203 additions and 55 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/organisms/Newsletter.svelte
View File

@@ -41,7 +41,7 @@
<img src="/images/icons/form.svg" alt="newsletter icon"> <img src="/images/icons/form.svg" alt="newsletter icon">
<span>See past issues</span> <span>See past issues</span>
</a> </a>
<span>No spam, we promise!</span> <p>No spam, we promise!</p>
</div> </div>
</div> </div>
</div> </div>

1
src/routes/index.svelte
View File

@@ -54,6 +54,7 @@
</div> </div>
<InteractiveGlobe /> <InteractiveGlobe />
<h1 class="title-huge title-world">World</h1>
<Locations <Locations
locations={location} locations={location}

7
src/style/_typography.scss
View File

@@ -7,14 +7,19 @@
font-family: $font-serif; font-family: $font-serif;
font-weight: 200; font-weight: 200;
letter-spacing: -0.04em; letter-spacing: -0.04em;
line-height: 1;
} }
// Medium // Medium
.title-medium { .title-medium {
font-family: $font-serif; font-family: $font-serif;
font-size: rem(32px); font-size: rem(26px);
line-height: 1.3; line-height: 1.3;
font-weight: 400; font-weight: 400;
@include bp (sm) {
font-size: rem(32px);
}
} }
// Small // Small

1
src/style/_variables.scss
View File

@@ -16,6 +16,7 @@ $color-shadow-brown: #7A5D44;
$color-cream: #FEF6EF; $color-cream: #FEF6EF;
// CSS Variables // CSS Variables
:root { :root {
// Sizes // Sizes

17
src/style/layout/_modules.scss
View File

@@ -1,5 +1,9 @@
.grid-modules { .grid-modules {
margin-bottom: 72px; margin-bottom: 40px;
@include bp (sm) {
margin-bottom: 72px;
}
.wrap { .wrap {
@include bp (sd) { @include bp (sd) {
@@ -7,14 +11,21 @@
} }
display: block; display: block;
grid-column: 2 / span 22; grid-column: 1 / span var(--columns);
grid-template-columns: 1fr 40%; grid-template-columns: 1fr 40%;
grid-column-gap: 48px; grid-column-gap: 48px;
padding: 0; padding: 0;
@include bp (sm) {
grid-column: 2 / span 22;
}
& > *:first-child { & > *:first-child {
@include bp (sd, max) { @include bp (sd, max) {
margin-bottom: 32px; margin-bottom: 20px;
}
@include bp (sd) {
margin-bottom: 0;
} }
} }
&:last-child { &:last-child {

52
src/style/organisms/_footer.scss
View File

@@ -1,6 +1,10 @@
.footer { .footer {
height: 120px;
background-color: $color-primary-darker; background-color: $color-primary-darker;
padding: 40px 0;
@include bp (sm) {
height: 120px;
}
.container { .container {
align-items: center; align-items: center;
@@ -9,21 +13,44 @@
} }
.site-title { .site-title {
grid-column: 2 / span 3; grid-column: 1 / span var(--columns);
grid-row: 1; grid-row: 1;
margin-bottom: 40px;
@include bp (sm) {
grid-column: 2 / span 5;
grid-row: 1;
margin: 0;
}
} }
&__links { &__links {
grid-column: 5 / span 16; grid-column: 1 / span var(--columns);
grid-row: 1; grid-row: 2;
@include bp (sm) {
grid-column: 5 / span 16;
grid-row: 1;
}
ul { ul {
display: flex;
justify-content: center; @include bp (sm) {
display: flex;
justify-content: center;
}
} }
li { li {
display: block; display: block;
margin: 0 16px; margin-bottom: 16px;
@include bp (sm) {
margin: 0 16px;
}
&:last-child {
margin-bottom: 0;
}
} }
a { a {
display: block; display: block;
@@ -38,9 +65,16 @@
} }
&__ctf { &__ctf {
grid-column: 19 / span 5; grid-column: 1 / span var(--columns);
grid-row: 1; grid-row: 2;
margin-left: auto; margin-left: auto;
margin-top: auto;
@include bp (sm) {
grid-column: 19 / span 5;
grid-row: 1;
margin-top: 0;
}
span { span {
font-size: rem(12px); font-size: rem(12px);

7
src/style/organisms/_locations.scss
View File

@@ -1,5 +1,9 @@
.browse { .browse {
margin: 96px 0 128px; margin: 96px 0;
@include bp (sm) {
margin-bottom: 128px;
}
// Description // Description
&__description { &__description {
@@ -7,6 +11,7 @@
margin: 0 auto 32px; margin: 0 auto 32px;
max-width: 230px; max-width: 230px;
text-align: center; text-align: center;
color: $color-tertiary;
@include bp (sm) { @include bp (sm) {
font-size: rem(28px); font-size: rem(28px);

80
src/style/organisms/_newsletter.scss
View File

@@ -14,33 +14,23 @@
--columns: 18; --columns: 18;
grid-column: 4 / span var(--columns); grid-column: 4 / span var(--columns);
} }
}
h3 { h3 {
color: $color-secondary; color: $color-secondary;
margin-bottom: 16px; margin-bottom: 8px;
}
p {
margin-bottom: 40px;
color: $color-text;
font-weight: 300;
}
span {
font-size: rem(16px);
line-height: 1.2;
color: rgba($color-text, 0.6);
}
// Past issues @include bp (sm) {
a { margin-bottom: 16px;
text-decoration: none; }
color: $color-text; }
font-size: rem(14px); p {
margin-bottom: 32px;
span {
color: $color-text; color: $color-text;
margin-left: 12px; font-weight: 300;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-bottom: 40px;
}
} }
} }
@@ -49,11 +39,12 @@
position: relative; position: relative;
display: flex; display: flex;
width: 100%; width: 100%;
max-width: 600px;
height: 64px; height: 64px;
margin-bottom: 20px; margin-bottom: 20px;
padding: 0 30px; padding: 0 30px;
border-radius: 100vh; border-radius: 100vh;
box-shadow: inset 0 0 0 3px $color-secondary; box-shadow: inset 0 0 0 2px $color-secondary;
transition: box-shadow 0.6s var(--ease-quart); transition: box-shadow 0.6s var(--ease-quart);
input { input {
@@ -95,8 +86,43 @@
// Past Issues // Past Issues
.past-issues { .past-issues {
display: flex; display: block;
justify-content: space-between; text-align: center;
font-size: rem(14px);
max-width: 600px;
@include bp (sm) {
display: flex;
justify-content: space-between;
font-size: rem(16px);
}
a {
text-decoration: none;
color: $color-text;
}
span {
font-size: rem(14px);
color: $color-text;
margin-left: 8px;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-left: 16px;
}
}
p {
color: $color-gray;
line-height: 1.3;
margin-top: 16px;
margin-bottom: 0;
@include bp (sm) {
margin-top: 0;
}
}
} }
// Variants // Variants

47
src/style/organisms/_shop.scss
View File

@@ -5,10 +5,12 @@
border-radius: 12px; border-radius: 12px;
.content { .content {
display: grid; @include bp (sm) {
grid-template-columns: 40% 1fr; display: grid;
grid-template-rows: 1fr; grid-template-columns: 40% 1fr;
height: 100%; grid-template-rows: 1fr;
height: 100%;
}
} }
// Image // Image
@@ -17,13 +19,18 @@
overflow: hidden; overflow: hidden;
img { img {
position: absolute;
top: 0;
left: 0;
display: block; display: block;
width: 100%; width: 100%;
height: 100%; height: 216px;
object-fit: cover; object-fit: cover;
@include bp (sm) {
position: absolute;
top: 0;
left: 0;
height: 100%;
}
} }
} }
@@ -31,9 +38,13 @@
&__info { &__info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 64px 72px 40px 64px; padding: 32px 40px;
border-radius: 12px; border-radius: 12px;
@include bp (sm) {
padding: 64px 72px 40px 64px;
}
.button { .button {
margin-right: auto; margin-right: auto;
} }
@@ -42,19 +53,31 @@
// Title // Title
.title-medium { .title-medium {
color: $color-lightpurple; color: $color-lightpurple;
margin-bottom: 16px; margin-bottom: 8px;
@include bp (sm) {
margin-bottom: 16px;
}
} }
p { p {
font-weight: 300; font-weight: 300;
margin-bottom: 24px; margin-bottom: 20px;
@include bp (sm) {
margin-bottom: 24px;
}
} }
.detail { .detail {
margin: auto 0 0; margin: auto 0 0;
padding-top: 24px; padding-top: 32px;
color: $color-gray; color: $color-gray;
line-height: 1.4; line-height: 1.4;
font-size: rem(14px); font-size: rem(14px);
@include bp (sm) {
padding-top: 24px;
}
} }
} }

39
src/style/pages/_homepage.scss
View File

@@ -64,11 +64,16 @@
// First row // First row
&:nth-child(1) { &:nth-child(1) {
display: none;
--rotation: -10.5deg; --rotation: -10.5deg;
z-index: 11; z-index: 11;
grid-column-start: 2; grid-column-start: 2;
grid-row: 1; grid-row: 1;
top: clamp(24px, 8vw, 128px); top: clamp(24px, 8vw, 128px);
@include bp (sm) {
display: block;
}
} }
&:nth-child(2) { &:nth-child(2) {
--rotation: 3deg; --rotation: 3deg;
@@ -91,26 +96,42 @@
top: clamp(16px, 3vw, 48px); top: clamp(16px, 3vw, 48px);
} }
&:nth-child(5) { &:nth-child(5) {
display: none;
--rotation: 10.5deg; --rotation: 10.5deg;
z-index: 1; z-index: 1;
grid-column-start: 24; grid-column-start: 24;
grid-row: 1; grid-row: 1;
top: clamp(24px, 8vw, 128px); top: clamp(24px, 8vw, 128px);
@include bp (sm) {
display:block;
}
} }
// Second row // Second row
&:nth-child(6) { &:nth-child(6) {
display: none;
--rotation: -5.5deg; --rotation: -5.5deg;
z-index: 10; z-index: 10;
grid-column-start: 1; grid-column-start: 1;
grid-row: 2; grid-row: 2;
top: clamp(24px, 5.5vw, 132px); top: clamp(24px, 5.5vw, 132px);
@include bp (sm) {
display:block
}
} }
&:nth-child(7) { &:nth-child(7) {
--rotation: -8deg; --rotation: -8deg;
grid-column-start: 5; grid-column-start: 5;
z-index: 9; z-index: 9;
grid-row: 2; grid-row: 1;
top: clamp(24px, 5.5vw, 132px);
@include bp (sm) {
display:block;
grid-row: 2;
}
} }
&:nth-child(8) { &:nth-child(8) {
--rotation: 8deg; --rotation: 8deg;
@@ -127,18 +148,28 @@
top: calc(-1 * clamp(20px, 3vw, 48px)); top: calc(-1 * clamp(20px, 3vw, 48px));
} }
&:nth-child(10) { &:nth-child(10) {
display: none;
--rotation: 8deg; --rotation: 8deg;
z-index: 3; z-index: 3;
grid-column-start: 21; grid-column-start: 21;
grid-row: 2; grid-row: 2;
@include bp (sm) {
display:block
}
} }
&:nth-child(11) { &:nth-child(11) {
display: none;
--rotation: 5.5deg; --rotation: 5.5deg;
z-index: 2; z-index: 2;
grid-column-start: 25; grid-column-start: 25;
grid-row: 2; grid-row: 2;
top: clamp(24px, 5.5vw, 132px); top: clamp(24px, 5.5vw, 132px);
margin-right: 0; margin-right: 0;
@include bp (sm) {
display:block
}
} }
} }
} }
@@ -188,4 +219,10 @@
} }
} }
} }
// World title
.title-world {
color: rgba($color-tertiary, 0.3);
margin-top: -60px;
}
} }

5
src/style/tools/_helpers.scss
View File

@@ -25,6 +25,11 @@
width: 100%; width: 100%;
max-width: var(--container-width); max-width: var(--container-width);
margin: 0 auto; margin: 0 auto;
padding: 0 20px;
@include bp (sm) {
padding: 0;
}
} }
// Wrapper (inside and more spaced) // Wrapper (inside and more spaced)