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">
<span>See past issues</span>
</a>
<span>No spam, we promise!</span>
<p>No spam, we promise!</p>
</div>
</div>
</div>

1
src/routes/index.svelte
View File

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

7
src/style/_typography.scss
View File

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

1
src/style/_variables.scss
View File

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

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

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

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

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

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

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

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

@@ -14,33 +14,23 @@
--columns: 18;
grid-column: 4 / span var(--columns);
}
}
h3 {
color: $color-secondary;
margin-bottom: 8px;
@include bp (sm) {
margin-bottom: 16px;
}
}
p {
margin-bottom: 40px;
margin-bottom: 32px;
color: $color-text;
font-weight: 300;
}
span {
font-size: rem(16px);
line-height: 1.2;
color: rgba($color-text, 0.6);
}
// Past issues
a {
text-decoration: none;
color: $color-text;
font-size: rem(14px);
span {
color: $color-text;
margin-left: 12px;
border-bottom: 1px solid $color-text;
@include bp (sm) {
margin-bottom: 40px;
}
}
}
@@ -49,11 +39,12 @@
position: relative;
display: flex;
width: 100%;
max-width: 600px;
height: 64px;
margin-bottom: 20px;
padding: 0 30px;
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);
input {
@@ -95,8 +86,43 @@
// Past Issues
.past-issues {
display: block;
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

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

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

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

@@ -64,11 +64,16 @@
// First row
&:nth-child(1) {
display: none;
--rotation: -10.5deg;
z-index: 11;
grid-column-start: 2;
grid-row: 1;
top: clamp(24px, 8vw, 128px);
@include bp (sm) {
display: block;
}
}
&:nth-child(2) {
--rotation: 3deg;
@@ -91,27 +96,43 @@
top: clamp(16px, 3vw, 48px);
}
&:nth-child(5) {
display: none;
--rotation: 10.5deg;
z-index: 1;
grid-column-start: 24;
grid-row: 1;
top: clamp(24px, 8vw, 128px);
@include bp (sm) {
display:block;
}
}
// Second row
&:nth-child(6) {
display: none;
--rotation: -5.5deg;
z-index: 10;
grid-column-start: 1;
grid-row: 2;
top: clamp(24px, 5.5vw, 132px);
@include bp (sm) {
display:block
}
}
&:nth-child(7) {
--rotation: -8deg;
grid-column-start: 5;
z-index: 9;
grid-row: 1;
top: clamp(24px, 5.5vw, 132px);
@include bp (sm) {
display:block;
grid-row: 2;
}
}
&:nth-child(8) {
--rotation: 8deg;
z-index: 5;
@@ -127,18 +148,28 @@
top: calc(-1 * clamp(20px, 3vw, 48px));
}
&:nth-child(10) {
display: none;
--rotation: 8deg;
z-index: 3;
grid-column-start: 21;
grid-row: 2;
@include bp (sm) {
display:block
}
}
&:nth-child(11) {
display: none;
--rotation: 5.5deg;
z-index: 2;
grid-column-start: 25;
grid-row: 2;
top: clamp(24px, 5.5vw, 132px);
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%;
max-width: var(--container-width);
margin: 0 auto;
padding: 0 20px;
@include bp (sm) {
padding: 0;
}
}
// Wrapper (inside and more spaced)