From 4d0d67cefff209d82fad25ce8a44ad310b986ed0 Mon Sep 17 00:00:00 2001 From: Tor Andersson Date: Tue, 17 Oct 2023 18:26:13 +0200 Subject: Mobile phone interface rework. * Redesign responsive layout. * Pan & Zoom with touch (and scroll wheel). Scale main area using transforms and scroll offsets. Toggle zoom button scales map on large screens, full main zoom on small screens. * Automated standard toolbar buttons (remove from play.html files). --- public/style.css | 25 +++++++++++++++++-------- 1 file changed, 17 insertions(+), 8 deletions(-) (limited to 'public/style.css') diff --git a/public/style.css b/public/style.css index 4bbd0bd..15c44ab 100644 --- a/public/style.css +++ b/public/style.css @@ -143,27 +143,38 @@ body { header { display: flex; - align-items: center; + align-items: end; justify-content: space-between; - padding-right: 1em; + padding-right: 12px; background-color: var(--color-head); border-bottom: 2px solid var(--color-accent); } header img { display: block; - margin: 4px 0 -2px 2px; + margin: 0 0 -2px 2px; } -header nav { +nav { display: flex; + align-items: center; flex-wrap: wrap; justify-content: end; + min-height: 42px; + padding: 4px; + gap: 8px; } -header nav > * { +nav a { + padding: 0 4px; display: block; - padding: 0 8px; +} + +@media (pointer: coarse) { + nav { + padding: 8px; + gap: 12px; + } } article { @@ -328,8 +339,6 @@ div.body img { border: var(--thin-border); } -/* LIGHT MODE - GAME BOXES */ - .game_item .game_head { background-color: gainsboro } .game_item .game_main { background-color: whitesmoke } -- cgit v1.2.3