gitea_admin/fabiennefoehn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix mobile privacy modal

Browse Source
This commit is contained in:
Mathias Gläser
2026-03-25 17:08:12 +01:00
parent e73b49e18d
commit fabf25ac3f
2 changed files with 24 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
index.html
View File

@@ -214,9 +214,6 @@
<div class="footer__contact"> <div class="footer__contact">
<a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a> <a href="mailto:fabienne@fabiennefoehn.ch">fabienne@fabiennefoehn.ch</a>
<a href="tel:+41786001411">+41 78 600 14 11</a> <a href="tel:+41786001411">+41 78 600 14 11</a>
<button class="footer__privacy-button" type="button" data-open-privacy>
Datenschutz
</button>
</div> </div>
</div> </div>
@@ -231,6 +228,10 @@
<span>© 2026 Naurua GmbH</span> <span>© 2026 Naurua GmbH</span>
</div> </div>
</div> </div>
<button class="footer__privacy-button" type="button" data-open-privacy>
Datenschutz
</button>
</div> </div>
</footer> </footer>
</main> </main>

22
styles.css
View File

@@ -498,6 +498,9 @@ button {
.footer__inner { .footer__inner {
display: grid; display: grid;
grid-template-columns: minmax(240px, 0.95fr) minmax(420px, 1.15fr); grid-template-columns: minmax(240px, 0.95fr) minmax(420px, 1.15fr);
grid-template-areas:
"left right"
"privacy right";
align-items: end; align-items: end;
gap: clamp(2rem, 7vw, 6rem); gap: clamp(2rem, 7vw, 6rem);
min-height: 325px; min-height: 325px;
@@ -510,12 +513,14 @@ button {
} }
.footer__column--left { .footer__column--left {
grid-area: left;
flex-direction: column; flex-direction: column;
justify-content: space-between; justify-content: space-between;
min-height: 100%; min-height: 100%;
} }
.footer__column--right { .footer__column--right {
grid-area: right;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
justify-content: space-between; justify-content: space-between;
@@ -544,8 +549,10 @@ button {
} }
.footer__privacy-button { .footer__privacy-button {
grid-area: privacy;
justify-self: start;
align-self: end;
width: fit-content; width: fit-content;
margin-top: 0.9rem;
padding: 0.45rem 0.85rem; padding: 0.45rem 0.85rem;
border: 1px solid rgba(47, 58, 24, 0.2); border: 1px solid rgba(47, 58, 24, 0.2);
border-radius: 999px; border-radius: 999px;
@@ -974,6 +981,10 @@ button {
.footer__inner { .footer__inner {
grid-template-columns: 1fr; grid-template-columns: 1fr;
grid-template-areas:
"left"
"right"
"privacy";
gap: 2rem; gap: 2rem;
min-height: auto; min-height: auto;
padding-top: 2.6rem; padding-top: 2.6rem;
@@ -994,8 +1005,9 @@ button {
} }
.footer__privacy-button { .footer__privacy-button {
margin-top: 0.35rem; margin-top: 0;
font-size: 0.78rem; font-size: 0.78rem;
order: 3;
} }
.footer__claim-meta { .footer__claim-meta {
@@ -1082,9 +1094,15 @@ button {
font-size: 0.95rem; font-size: 0.95rem;
} }
.privacy-flyover {
align-items: flex-end;
padding: 1.25rem;
}
.privacy-flyover__panel { .privacy-flyover__panel {
width: calc(100vw - 2.5rem); width: calc(100vw - 2.5rem);
max-height: calc(100dvh - 2.5rem); max-height: calc(100dvh - 2.5rem);
margin: 0;
padding: 1.2rem; padding: 1.2rem;
border-radius: 2rem; border-radius: 2rem;
} }