From 14a3bc312342ec2efbc75c50d1c450a73a981bb3 Mon Sep 17 00:00:00 2001 From: Jonatan Nilsson Date: Wed, 6 Dec 2023 04:54:37 +0000 Subject: [PATCH] filadelfia_archive: Fix mobile experience a bit, make it at least usable. --- filadelfia_archive/package.json | 2 +- filadelfia_archive/public/index.html | 14 ++++++++++++-- 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/filadelfia_archive/package.json b/filadelfia_archive/package.json index 8a22905..8364097 100644 --- a/filadelfia_archive/package.json +++ b/filadelfia_archive/package.json @@ -1,6 +1,6 @@ { "name": "filadelfia_archive", - "version": "1.0.6", + "version": "1.0.7", "port": 4130, "description": "Filadelfia archive", "main": "index.js", diff --git a/filadelfia_archive/public/index.html b/filadelfia_archive/public/index.html index 61db079..c47e7a7 100644 --- a/filadelfia_archive/public/index.html +++ b/filadelfia_archive/public/index.html @@ -84,7 +84,7 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom: #header { background: var(--bg-component); } #header nav, -#header .nav { display: flex; padding: 0.5rem 1rem 0.5rem 0; } +#header .nav { display: flex; padding: 0.5rem 1rem 0.5rem 0; justify-content: flex-end; flex-wrap: wrap; } #header nav a, #header nav button { margin-left: 1rem; } @@ -131,7 +131,7 @@ footer a { font-size: 0.8rem; } .gallery-year { margin: 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--main); text-align: center; font-size: 2rem; } .gallery-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; } .gallery .group { display: flex; flex-wrap: wrap; } -.gallery .group a { width: 40vw; max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); } +.gallery .group a { width: calc(50vw - 4rem); max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); } .gallery .group a span { align-self: stretch; text-align: center; background: #fffb; } @@ -192,6 +192,16 @@ footer a { font-size: 0.8rem; } @keyframes stripes { to { background-size: 100% 100%; } } +@media (pointer:coarse) { + #header .nav { overflow-x: auto; } +} +@media screen and (max-width: 700px){ + .gallery, .gallery-year { margin: 0.25rem; } + .gallery-month { margin: 0rem 0.25rem 0.25rem; } + .gallery .group a { margin: 0 0.25rem 0.25rem; width: calc(50vw - 1rem); font-size: min(3vw, 1rem); } + +} +