fix grid column spacing mobile

This commit is contained in:
isUnknown 2025-02-21 12:43:48 +01:00
parent 28fc768228
commit 18db74998d
3 changed files with 18 additions and 10 deletions

View file

@ -20,8 +20,12 @@
transform: translateY(-1px); transform: translateY(-1px);
} }
[data-template="home"] .title-wrapper button.open-nav {
display: inline-block !important;
}
@media screen and (max-width: 640px) { @media screen and (max-width: 640px) {
.open-nav { #main-footer .open-nav {
box-sizing: border-box; box-sizing: border-box;
bottom: 0; bottom: 0;
display: flex; display: flex;
@ -60,10 +64,6 @@
display: none !important; display: none !important;
} }
[data-template="home"] button.open-nav {
display: inline-block !important;
}
.open-nav-wrapper { .open-nav-wrapper {
padding: 0; padding: 0;
border: none; border: none;

View file

@ -25,6 +25,12 @@ body.full-width #main-content {
margin-left: inherit; margin-left: inherit;
} }
@media screen and (max-width: 640px) {
.grid .column:not(:last-child) {
margin-bottom: calc(2 * var(--unit--vertical));
}
}
@media screen and (min-width: 640px) { @media screen and (min-width: 640px) {
[data-template="grid"] main #main-content { [data-template="grid"] main #main-content {
margin-left: calc(0px - calc(4 * var(--unit--horizontal))); margin-left: calc(0px - calc(4 * var(--unit--horizontal)));

View file

@ -127,7 +127,7 @@ function subscribe(event) {
const panelNav = document.querySelector(".panel"); const panelNav = document.querySelector(".panel");
const navOverlay = document.querySelector("#nav-overlay"); const navOverlay = document.querySelector("#nav-overlay");
const openNavBtn = document.querySelector("button.open-nav"); const openNavBtns = document.querySelectorAll("button.open-nav");
const closeNavBtn = document.querySelector(".panel-close"); const closeNavBtn = document.querySelector(".panel-close");
function closeNav() { function closeNav() {
panelNav.classList.remove("panel--visible"); panelNav.classList.remove("panel--visible");
@ -193,10 +193,12 @@ document.addEventListener("DOMContentLoaded", () => {
}); });
}); });
openNavBtn.addEventListener("click", () => { openNavBtns.forEach((openNavBtn) => {
panelNav.classList.add("panel--visible"); openNavBtn.addEventListener("click", () => {
navOverlay.classList.add("nav-overlay--visible"); panelNav.classList.add("panel--visible");
document.body.classList.add("no-scroll"); navOverlay.classList.add("nav-overlay--visible");
document.body.classList.add("no-scroll");
});
}); });
closeNavBtn.addEventListener("click", () => { closeNavBtn.addEventListener("click", () => {