diff options
Diffstat (limited to 'radar.brisbane.html')
| -rw-r--r-- | radar.brisbane.html | 28 |
1 files changed, 21 insertions, 7 deletions
diff --git a/radar.brisbane.html b/radar.brisbane.html index d3775d2..d432c72 100644 --- a/radar.brisbane.html +++ b/radar.brisbane.html @@ -2,17 +2,31 @@ <html lang="en"> <head> <meta charset="utf-8"> +<meta name="viewport" content="width=device-width, initial-scale=1"> <title>Radar — Brisbane</title> <style> - body { margin: 0; background: #000; display: flex; justify-content: center; align-items: center; height: 100vh; } - img { max-width: 100%; max-height: 100vh; } - nav { position: fixed; top: 0.5em; right: 0.75em; font-family: sans-serif; } - nav a { color: #888; text-decoration: none; font-size: 0.9em; } - nav a:hover { color: #fff; } + html, body { margin: 0; background: #000; min-height: 100vh; } + body { display: flex; flex-direction: column; min-height: 100vh; } + nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.6em; + padding: 0.6em; font-family: sans-serif; } + nav a { color: #aaa; text-decoration: none; font-size: 0.95em; + padding: 0.35em 0.9em; border: 1px solid #333; border-radius: 0.3em; } + nav a:hover { color: #fff; border-color: #777; } + nav a.current { color: #fff; border-color: #888; background: #1a1a1a; } + main { flex: 1; display: flex; justify-content: center; align-items: center; + min-height: 0; } + img { width: 100%; max-width: 512px; max-height: 100%; height: auto; + display: block; } </style> </head> <body> - <img src="/idr663-loop.apng" alt="Brisbane radar loop"> - <nav><a href="/sydney/">← Sydney</a></nav> + <nav> + <a href="/sydney/">Sydney</a> + <a class="current" href="/brisbane/">Brisbane</a> + <a href="/canberra/">Canberra</a> + <a href="/cairns/">Cairns</a> + <a href="https://pestrel.com/">Synoptic</a> + </nav> + <main><img src="/idr663-loop.apng" alt="Brisbane radar loop"></main> </body> </html> |