homepage: fix black box below cards on certain screen sizes

This commit is contained in:
Benjamin Yule Bädorf 2024-04-14 15:47:54 +02:00
parent 0481fdcf66
commit c1acb631ff
Signed by: b12f
GPG key ID: 729956E1124F8F26
2 changed files with 11 additions and 1 deletions

View file

@ -33,5 +33,7 @@
<div class="mi-card--text">{{ card.text }}</div> <div class="mi-card--text">{{ card.text }}</div>
</a> </a>
{{ /for }} {{ /for }}
</main> </main>
<div class="mi-page-filler"></div>
{{ /layout }} {{ /layout }}

View file

@ -69,6 +69,13 @@ h4 {
width: 100vw; width: 100vw;
} }
.mi-page-filler {
width: 100%;
padding: 0;
flex-basis: 0;
flex-grow: 1;
}
.mi-border { .mi-border {
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
@ -317,7 +324,7 @@ h4 {
.mi-main { .mi-main {
background: var(--background); background: var(--background);
margin: 0 var(--box-padding); margin: 0 var(--box-padding);
flex-grow: 1; flex-grow: 0;
position: relative; position: relative;
margin-bottom: var(--box-padding); margin-bottom: var(--box-padding);
} }
@ -346,6 +353,7 @@ h4 {
background: var(--foreground); background: var(--foreground);
grid-gap: 1px; grid-gap: 1px;
grid-template-columns: 1fr; grid-template-columns: 1fr;
padding-bottom: 1px;
} }
@media screen and (min-width: 800px) { @media screen and (min-width: 800px) {