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

Edit responsive on Browse/Locations page

Browse Source
This commit is contained in:
Shelby Kay
2021-10-05 15:23:23 +02:00
parent 7f5c74086f
commit 04188ab7be
7 changed files with 53 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/atoms/SiteTitle.svelte
View File

@@ -3,8 +3,8 @@
console.log(variant)
</script>
<h2 class="site-title {variant ? `site-title--${variant}` : ''}">
<h1 class="site-title {variant ? `site-title--${variant}` : ''}">
<strong>Houses</strong>
<span>Of The</span>
<strong>World</strong>
</h2>
</h1>

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

@@ -38,7 +38,9 @@
<div class="past-issues">
<a href="/subscribe">
<img src="/images/icons/form.svg" alt="newsletter icon">
<svg width="20" height="16" viewBox="0 0 20 16" fill="#333" xmlns="http://www.w3.org/2000/svg" aria-label="Newsletter icon">
<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2.346H2a.5.5 0 0 0-.5.5v11.102a.5.5 0 0 0 .5.5h16a.5.5 0 0 0 .5-.5V2.846a.5.5 0 0 0-.5-.5ZM2 .846a2 2 0 0 0-2 2v11.102a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V2.846a2 2 0 0 0-2-2H2Zm13.75 4.25h-2v3h2v-3Zm-2-1a1 1 0 0 0-1 1v3a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1v-3a1 1 0 0 0-1-1h-2ZM3.5 6.5a.5.5 0 0 0 0 1h6a.5.5 0 0 0 0-1h-6Zm.25 3a.5.5 0 0 1 .5-.5h6a.5.5 0 0 1 0 1h-6a.5.5 0 0 1-.5-.5Zm1.25 2a.5.5 0 0 0 0 1h6a.5.5 0 1 0 0-1H5Z" />
</svg>
<span>See past issues</span>
</a>
<p>No spam, we promise!</p>

3
src/routes/locations.svelte
View File

@@ -6,6 +6,7 @@
import Locations from '$components/organisms/Locations.svelte'
import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
import SiteTitle from '$components/atoms/SiteTitle.svelte'
export let photos: any
@@ -20,7 +21,7 @@
<main class="explore">
<section class="explore__intro">
<h1 class="title-huge">Houses</h1>
<SiteTitle variant="inline" />
<p class="text-medium">Explore the globe to discover unique locations across the world</p>
</section>

33
src/style/atoms/_site-title.scss
View File

@@ -50,4 +50,37 @@
font-size: rem(32px);
}
}
// Inline Variant
&--inline {
display: block;
align-items: baseline;
color: $color-lightpurple;
justify-content: center;
@include bp (sm) {
display: flex;
}
strong {
color: $color-secondary !important;
font-size: rem(64px);
@include bp (sm) {
font-size: rem(96px);
}
}
span {
display: block;
top: 0;
margin: 8px 0 6px;
font-size: rem(20px);
@include bp (sm) {
font-size: rem(32px);
margin: 0 16px 0 20px;
}
}
}
}

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

@@ -12,6 +12,7 @@
max-width: 230px;
text-align: center;
color: $color-tertiary;
line-height: 1.4;
@include bp (sm) {
font-size: rem(28px);

20
src/style/pages/_explore.scss
View File

@@ -3,7 +3,6 @@
// Intro Section
&__intro {
overflow: hidden;
margin-bottom: 72px;
color: $color-tertiary;
text-align: center;
@@ -11,23 +10,27 @@
h1 {
color: $color-secondary;
line-height: 1;
margin-top: -20px;
margin-top: 56px;
@include bp (sm) {
margin-top: -100px;
margin-top: 160px;
}
}
// Text
p {
max-width: 350px;
margin: 20px auto 56px;
max-width: 260px;
margin: 40px auto 0;
font-weight: 400;
@include bp (sm) {
margin: 50px auto 72px;
max-width: 524px;
margin: 72px auto 130px;
max-width: 500px;
}
}
}
.globe {
margin-top: 72px;
}
// Locations
&__locations {
@@ -39,7 +42,8 @@
// Modules
.grid-modules {
grid-column: 1 / span var(--columns);
margin-bottom: 0;
margin: 96px 20px 0;
padding-bottom: 40px;
@include bp (sm) {
grid-column: 2 / span 22;