Improve layout on short and narrow viewports

build.sh

@@ -1,7 +1,7 @@
 #!/bin/sh
 set -eu
 
-VERSION=1.0.0
+VERSION=1.1.0
 GIT_SHA=$(git rev-parse --short HEAD)
 IMAGE="docker.sdal.tech/beam:$VERSION-$GIT_SHA"
 IMAGE_LATEST="docker.sdal.tech/beam:latest"

index.html.tmpl

@@ -91,6 +91,25 @@
             color: #999;
             font-size: 0.75em;
         }
+
+        @media (max-height: 800px) {
+            body { margin: 15px auto; padding: 15px; }
+            h1 { margin-bottom: 15px; font-size: 1.6em; }
+            h2 { margin: 15px 0 10px 0; }
+            .section { padding: 12px; margin: 12px 0; }
+            code { padding: 10px; margin: 8px 0; }
+            .upload-area { padding: 20px; }
+        }
+
+        @media (max-width: 480px) {
+            body { padding: 12px; margin: 10px auto; }
+            h1 { font-size: 1.5em; margin-bottom: 15px; }
+            h2 { font-size: 1.15em; margin: 15px 0 10px 0; }
+            .section { padding: 12px; margin: 12px 0; }
+            code { padding: 10px; font-size: 0.85em; }
+            .upload-area { padding: 20px 15px; }
+            button { padding: 12px 20px; }
+        }
     </style>
 </head>
 <body>