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

Change Photos page grid

Browse Source 
Remove large size and keep [2-1-1] [1-1-2] alternating
This commit is contained in:
Félix Péault
2022-09-13 13:23:42 +02:00
parent 3f55e178ff
commit 44959462ee
1 changed files with 7 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -110,7 +110,7 @@
grid-gap: 20px;
}
@include bp (sm) {
// Swich to template: 2-1-1 / 1-1-2 / 4
// Swich to template: 2-1-1 / 1-1-2
grid-template-columns: repeat(4, 1fr);
grid-gap: 24px;
}
@@ -161,27 +161,21 @@
// DESKTOP
// 1st photo = left 2 columns, 2 rows
&:nth-child(11n + 1){
&:nth-child(10n + 1){
@include bp (sm) {
grid-column: span 2;
grid-row: span 2;
}
}
// 8th photo = right 2 columns, 2 rows
&:nth-child(11n + 8){
&:nth-child(10n + 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){
&:nth-child(10n + 10){
@include bp (sm) {
margin-top: 12px;
}
@@ -189,10 +183,9 @@
margin-top: clamp(8px, 1vw, 16px);
}
}
&:nth-child(11n),
&:nth-child(11n + 1),
&:nth-child(11n + 4),
&:nth-child(11n + 5){
&:nth-child(10n + 1),
&:nth-child(10n + 4),
&:nth-child(10n + 5){
@include bp (sm) {
margin-bottom: 12px;
}