Small improvements for small screens

index.html

@@ -33,10 +33,6 @@
          margin: 0.6rem 0;
      }
 
-     h1:first-child, h2:first-child {
-         margin-top: 0
-     }
-
      label {
          display: block;
          margin: 0.2rem 0;
@@ -71,6 +67,11 @@
              grid-area: settings;
              align-self: center;
          }
+
+
+         h1:first-child, h2:first-child {
+             margin-top: 0
+         }
      }
 
     </style>

src/main.ts

@@ -8,8 +8,10 @@ import { cycle, comp, range, iterator, map, mapcat, reverse, zip, filter } from
 // initial settings
 
 // available size for a2: 420 * 594
-const width_ = 420
-const height_ = 594
+
+const sqrt2 = Math.sqrt(2)
+const width_ = Math.round(420 / (document.body.clientWidth > 640 ? 1 : sqrt2))
+const height_ = Math.round(594 / (document.body.clientWidth > 640 ? 1 : sqrt2))
 const cellSize_ = 12
 const padding_ = 5 // * cellSize