css cleanup

static/papermod/index.html

@@ -4,24 +4,30 @@
     <meta charset="utf-8">
     <title>Nycki's Papermod</title>
     <style>
-        html {
+        :root {
+            --card-width: 74mm;
+            --card-height: 105mm;
+            --m: 2mm;
+            --m2: calc(2 * var(--m));
+            --m4: calc(4 * var(--m));
             background-color: #929591; /*xkcd-grey*/
             font-family: Arial, Helvetica, sans-serif;
         }
+        @page { size: 74mm 105mm; }
         body {
             margin: 0;
             /* break after fourth page on large monitors */
-            max-width: calc((74mm + 8mm) * 4);
+            max-width: calc(4 * (var(--card-width) + var(--m4)));
         }
 
         #settings {
-            width: calc(100% - 12mm);
-            margin: 4mm;
-            padding: 4mm;
+            max-width: fit-content;
+            margin: var(--m2);
+            padding: var(--m2);
             background-color: white;
         }
         #settings * {
-            margin: 2mm 0;
+            margin: var(--m) 0;
         }
         #settings :first-child {
             margin: 0;
@@ -34,10 +40,10 @@
         .page {
             background-color: white;
             box-sizing: border-box;
-            width: 74mm;
-            height: 105mm;
-            margin: 4mm;
-            padding: 4mm;
+            width: var(--card-width);
+            height: var(--card-height);
+            margin: var(--m2);
+            padding: var(--m2);
             position: relative;
             text-align: center;
             display: flex;
@@ -60,36 +66,33 @@
                 break-after: page;
             }
         }
-        @page {
-            size: 74mm 105mm;
-        }
 
         /* page 1 */
         .week {
             font-weight: bold;
-            font-size: 14mm;
+            font-size: calc(7 * var(--m));
         }
         .date {
-            font-size: 8mm;
+            font-size: calc(4 * var(--m));
         }
         .return-addr {
             font-weight: bold;
-            margin: 8mm;
+            margin: var(--m4);
         }
         .footer {
             font-style: italic;
             font-size: smaller;
             position: absolute;
             left: 0;
-            bottom: 4mm;
+            bottom: var(--m2);
             width: 100%;
         }
 
         /* page 2-3 */
         .month .landscape {
-            width: calc(105mm - 8mm);
-            height: calc(74mm - 8mm);
-            transform-origin: 0mm 0mm;
+            width: calc(var(--card-height) - var(--m4));
+            height: calc(var(--card-width) - var(--m4));
+            transform-origin: 0 0;
             transform: rotate(-90deg) translateX(-100%);
         }
         .month table {
@@ -122,9 +125,9 @@
         }
         .week tr:nth-child(odd) td {
             text-align: left;
-            padding-left: 2mm;
-            font-size: 4mm;
-            height: 4mm;
+            padding-left: var(--m);
+            font-size: var(--m2);
+            height: var(--m2);
         }
         
         /* page 6-7 */
@@ -136,15 +139,15 @@
         .sudoku table:has(table) {
             width: fit-content;
             margin: auto;
-            padding-top: 12mm;
+            padding-top: calc(6 * var(--m));
             border-collapse: separate;
         }
         .sudoku table table {
             border-collapse: collapse;
         }
         .sudoku table table td {
-            width: 5mm;
-            height: 5mm;
+            width: calc(3 * var(--m));
+            height: calc(3 * var(--m));
             border: thin solid black;
         }
     </style>