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

🔥 Create Photos grid for mobile and desktop

Browse Source
This commit is contained in:
Félix Péault
2021-10-05 21:05:42 +02:00
parent 26e3492c5e
commit 9c36b2dbf6
2 changed files with 109 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/molecules/PostCard.svelte
View File

@@ -9,7 +9,7 @@
<div class="frame">
<img src="/images/icons/stamp.svg" width="32" height="42" alt="">
</div>
<Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} />
<Image class="flag" id="5a5bc9a1-9401-4e2f-88f2-ffd6c05acefb" width={32} height={32} alt="country" />
</div>
<h3 class="post-card__country">
<span>Houses of <br></span>

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

@@ -80,9 +80,10 @@
margin: 0 2px;
}
}
img {
color: #fff;
.icon {
fill: #fff;
margin-right: 12px;
transition: fill 0.2s;
@include bp (sm) {
margin-right: 16px;
@@ -107,8 +108,14 @@
height: 100%;
cursor: pointer;
}
}
&:hover {
// Hover
li:hover {
.icon {
fill: $color-secondary-light;
}
.select {
background-color: $color-primary-tertiary20;
}
}
@@ -142,6 +149,10 @@
// Reset link
.reset {
padding: 0;
color: rgba($color-tertiary, 0.6);
font-weight: 900;
font-size: rem(14px);
transition: color 0.3s;
&:hover {
@@ -166,18 +177,38 @@
// Content Block
&__content {
background-color: $color-tertiary;
width: 100%;
// margin: 0 12px;
padding: 64px 0;
padding: 20px 0;
border-radius: 6px;
@include bp (sm) {
padding: 64px 0;
border-radius: 8px;
}
}
// Photo Grid
&__grid {
grid-column: 2 / span 22;
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-gap: 40px;
grid-column: span var(--columns);
// Template: 2 / 1-1
grid-template-columns: repeat(2, 1fr);
grid-gap: 16px;
@include bp (mob-lg) {
grid-gap: 20px;
}
@include bp (sm) {
// Swich to template: 2-1-1 / 1-1-2 / 4
grid-column: 2 / span 22;
grid-template-columns: repeat(4, 1fr);
grid-gap: 24px;
}
@include bp (sd) {
grid-gap: 40px;
}
// Photo
.photo {
overflow: hidden;
border-radius: 6px;
@@ -188,7 +219,6 @@
height: 100%;
& > picture {
width: 100%;
height: 100%;
img {
@@ -196,25 +226,81 @@
width: 100%;
height: 100%;
object-fit: cover;
pointer-events: none;
user-select: none;
}
}
}
/**
* Photo sizes
*/
// MOBILE
// 1st photo = 2 columns
&:nth-child(5n + 1) {
@include bp (sm, max) {
grid-column: span 2;
grid-row: span 2;
margin-bottom: 8px;
}
}
// 4 next photos = 1 column each
&:nth-child(5n + 4),
&:nth-child(5n + 5) {
@include bp (sm, max) {
margin-bottom: 8px;
}
}
// DESKTOP
// 1st photo = left 2 columns, 2 rows
&:nth-child(11n + 1){
@include bp (sm) {
grid-column: span 2;
grid-row: span 2;
}
}
// 8th photo = right 2 columns, 2 rows
&:nth-child(11n + 8){
@include bp (sm) {
grid-column: 3 / span 2;
grid-row: span 2;
}
}
// 11th photo = 4 columns
&:nth-child(11n){
@include bp (sm) {
grid-column: span 4;
}
}
// Additional spacing between grid patterns
&:nth-child(11n + 11){
@include bp (sm) {
margin-top: 12px;
}
@include bp (sd) {
margin-top: 16px;
}
}
&:nth-child(11n),
&:nth-child(11n + 1),
&:nth-child(11n + 4),
&:nth-child(11n + 5){
@include bp (sm) {
margin-bottom: 12px;
}
@include bp (sd) {
margin-bottom: 16px;
}
}
// Postcard
.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;
display: none;
}
}
}
@@ -223,7 +309,7 @@
* Controls
*/
.controls {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
display: grid;
margin: 48px auto;
align-items: center;
@@ -293,7 +379,7 @@
// Modules
.grid-modules {
grid-column: 1 / span var(--columns);
grid-column: span var(--columns);
margin-bottom: 0;
@include bp (sm) {