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

Create photo grid for photos page

Browse Source 
with control bar
This commit is contained in:
Shelby Kay
2021-10-04 18:21:14 +02:00
parent 7dbc7cdf73
commit 4fb2f6da07
3 changed files with 166 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

27
src/routes/photos.svelte
View File

@@ -10,6 +10,8 @@
import Locations from '$components/organisms/Locations.svelte'
import Shop from '$components/organisms/Shop.svelte'
import Newsletter from '$components/organisms/Newsletter.svelte'
import Image from '$components/atoms/Image.svelte';
import PostCard from '$components/molecules/PostCard.svelte';
export let photos: any
@@ -66,6 +68,31 @@
</div>
</div>
</section>
<section class="photos__content">
<div class="grid container">
<div class="photos__grid">
{#each Array(21) as _}
<div class="photo shadow-photo">
<a href="/country/location/photo-slug">
<Image id="5a45ba18-7b78-48e0-a299-302b1ea9b77b" width={1200} height={800} alt="image" />
<PostCard />
</a>
</div>
{/each}
</div>
<div class="controls grid">
<p class="controls__date">Last updated: 4 days ago</p>
<Button url="#" text="See more photos" />
<div class="controls__count">
<span class="current">21/</span>
<span class="total">129</span>
</div>
</div>
</div>
</section>
</main>

11
src/style/_effects.scss
View File

@@ -16,3 +16,14 @@
0 12px 12px rgba(#736356, 0.05),
0 24px 24px rgba(#736356, 0.05);
}
// Box: Photo
.shadow-photo {
$shadow-color: rgba(122, 93, 68, 0.075);
box-shadow:
0 1px 1px $shadow-color,
0 2px 2px $shadow-color,
0 4px 4px $shadow-color,
0 8px 8px $shadow-color,
0 16px 16px $shadow-color;
}

130
src/style/pages/_photos.scss
View File

@@ -2,10 +2,10 @@
.photos {
// Intro Section
&__intro {
overflow: hidden;
margin-bottom: 72px;
color: $color-text;
text-align: center;
overflow: hidden;
padding-bottom: clamp(250px, 27vw, 600px);
// Title
h1 {
@@ -141,4 +141,130 @@
}
}
}
// Content Block
&__content {
background-color: $color-tertiary;
width: 100%;
// margin: 0 12px;
padding: 64px 0;
}
// Photo Grid
&__grid {
grid-column: 2 / span 22;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 40px;
.photo {
overflow: hidden;
border-radius: 6px;
a {
position: relative;
display: block;
height: 100%;
& > picture {
width: 100%;
height: 100%;
img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
}
}
.post-card {
position: absolute;
bottom: 0;
right: 0;
}
// Photo sizes
&:nth-child(11n+1) {
grid-column: 1 / span 2;
}
&:nth-child(11n+8) {
grid-column: 3 / span 2;
}
&:nth-child(11n) {
grid-column: 1 / span 4;
}
}
}
// Controls
.controls {
grid-column: 1 / span var(--columns);
display: grid;
margin: 48px auto;
align-items: center;
justify-content: center;
@include bp (sm) {
--columns: 22;
grid-column: 2 / span var(--columns);
justify-content: space-between;
margin: 80px auto;
}
// Updated Date
&__date {
grid-column: span var(--columns);
grid-row: 2;
font-size: rem(18px);
color: rgba($color-gray, 0.6);
font-weight: 300;
text-align: center;
margin: 24px 0 48px;
@include bp (sm) {
grid-column: span 4;
grid-row: 1;
text-align: left;
margin: 0;
}
}
// See More Photos
.button {
grid-column: span var(--columns);
grid-row: 1;
margin: 0 auto;
height: 56px;
background-color: #F2D3B8;
font-size: rem(16px);
@include bp (sm) {
grid-column: 6 / span 12;
height: 72px;
padding: 0 40px;
font-size: rem(18px);
}
}
// Photo Count
&__count {
grid-column: span var(--columns);
grid-row: 3;
text-align: center;
color: rgba($color-gray, 0.3);
font-family: $font-serif;
font-size: rem(64px);
line-height: 1;
letter-spacing: -0.05em;
@include bp (sm) {
grid-column: 16 / span 7;
grid-row: 1;
margin-left: auto;
text-align: right;
}
}
}
}