nfp/nfp_sites
1
0
Fork 0
Code Issues Pull requests Projects Releases 53 Wiki Activity Actions

filadelfia_archive: Fix mobile experience a bit, make it at least usable.
All checks were successful
/ deploy (push) Successful in -22h5m43s
Details

Browse source
This commit is contained in:
Jonatan Nilsson 2023-12-06 04:54:37 +00:00
parent ab2e7b93c4
commit 14a3bc3123
2 changed files with 13 additions and 3 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
filadelfia_archive/package.json
View file

@ -1,6 +1,6 @@
{ {
"name": "filadelfia_archive", "name": "filadelfia_archive",
"version": "1.0.6", "version": "1.0.7",
"port": 4130, "port": 4130,
"description": "Filadelfia archive", "description": "Filadelfia archive",
"main": "index.js", "main": "index.js",

14
filadelfia_archive/public/index.html
View file

@ -84,7 +84,7 @@ form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom:
#header { background: var(--bg-component); } #header { background: var(--bg-component); }
#header nav, #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 a,
#header nav button { margin-left: 1rem; } #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-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-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; }
.gallery .group { display: flex; flex-wrap: wrap; } .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; } .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%; } } @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); }
}
</style> </style>
</head> </head>
<body> <body>