em/kocandaci
1
0
Fork 0
Code Issues Pull Requests Actions Activity

Add options for responsive grid gap

Browse Source
This commit is contained in:
Emil Miler 2024-01-12 16:36:05 +01:00
parent 6b63e34d64
commit cef1e48d14
3 changed files with 3 additions and 6 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
sass/_grid.scss
View File

@ -16,4 +16,6 @@
.grid-mobile-1 { grid-template-columns: 1fr } .grid-mobile-1 { grid-template-columns: 1fr }
.grid-mobile-2 { grid-template-columns: 1fr 1fr } .grid-mobile-2 { grid-template-columns: 1fr 1fr }
.grid-mobile-3 { grid-template-columns: 1fr 1fr 1fr } .grid-mobile-3 { grid-template-columns: 1fr 1fr 1fr }
.grid-mobile-gap-1 { gap: 1em }
} }

5
sass/_personnel.scss
View File

@ -52,11 +52,6 @@
} }
@media only screen and (max-width: $width-mobile) { @media only screen and (max-width: $width-mobile) {
.personnel .grid {
grid-template-columns: 1fr 1fr;
gap: 1em;
}
.personnel .person img { .personnel .person img {
margin-bottom: .5em; margin-bottom: .5em;
} }

2
templates/personnel.html
View File

@ -10,7 +10,7 @@
<div id="1" class="button" data-value="1">1. Běh</div> <div id="1" class="button" data-value="1">1. Běh</div>
<div id="3" class="button" data-value="3">3. Běh</div> <div id="3" class="button" data-value="3">3. Běh</div>
</div> </div>
<div class="grid grid-5 gap-3"> <div class="grid grid-5 gap-3 grid-mobile-2 grid-mobile-gap-1">
{{ macros::personnel() }} {{ macros::personnel() }}
</div> </div>
</section> </section>