<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>c-base visual paging</title> <link rel="stylesheet" href="../theme/c-base.css"> <style type="text/css"> h1 { width: 100vw; text-align: center; position: absolute; font-size: 6vmin; top: 0px; left: 0px; } main { display: block; min-height: 100%; min-width: 100%; text-align: center; width: 100vw; height: 100vh; position: absolute; top: 0px; left: 0px; display: flex; justify-content: center; align-items: center; } p#announcement { margin-left: auto; margin-right: auto; padding-top: 7vmax; padding-bottom: 7vmax; color: #ffffff; font-size: 7vmin; text-align: center; width: 80vw; } p#announcement.tiny { font-size: 15vmin; } p#announcement.short { font-size: 10vmin; } p#announcement.long { font-size: 5vmin; } @media (orientation: portrait) { p#announcement { width: 95vw; padding-bottom: 3vmax; } p#announcement.tiny { font-size: 10vmin; } } </style> </head> <body class="station"> <h1>c-base space station</h1> <main> <p id="announcement"></p> </main> <script> var fallback = 'Security advise. Due to intergalactic regulations, passengers are required to keep their antigravity generators with them at all times.'; document.addEventListener('DOMContentLoaded', function () { var message = fallback; if (window.location.search) { message = decodeURIComponent(window.location.search.substr(1)); } var container = document.getElementById('announcement'); if (message.length < 80) { container.className = 'short'; } if (message.length < 36) { container.className = 'tiny'; } if (message.length > 300) { container.className = 'long'; } container.innerHTML = message; }); </script> </body> </html>