From 01652678b2e5234f05d6745e589ba2b0b4a08cef Mon Sep 17 00:00:00 2001
From: Alistair Lynn <arplynn@gmail.com>
Date: Sun, 4 Aug 2024 17:07:59 +0000
Subject: [PATCH] Cleanups to layout/CSS

- Move all the dimensions into the CSS
- Logical properties over geometric
- Zoom-independent
- Plain CSS rather than SCSS
---
 src/{index.scss => index.css} | 66 ++++++++++++++++++++++-------------
 src/index.html                |  8 ++---
 2 files changed, 45 insertions(+), 29 deletions(-)
 rename src/{index.scss => index.css} (52%)

diff --git a/src/index.scss b/src/index.css
similarity index 52%
rename from src/index.scss
rename to src/index.css
index 7a45af7..98171c2 100644
--- a/src/index.scss
+++ b/src/index.css
@@ -1,21 +1,29 @@
-$primary: #02A6F2;
-$content-width: 900px;
+:root {
+    --col-primary: #02A6F2;
+    --content-inline-size: 50rem;
+}
 
-html, body {
+html {
     font-family: "Open Sans", Arial, sans-serif;
     margin: 0;
     padding: 0;
-    line-height: initial !important; // Override normalize.css
+    line-height: initial !important; /* Override normalize.css */
 
-    // Increase the font size slightly on desktop, but leaving it as-is for print
+    /* Increase the font size slightly on desktop, but leaving it as-is for print */
     @media screen {
         font-size: 18px;
     }
 }
 
+body {
+    padding: 0;
+    margin: 0;
+}
+
 header {
-    padding: 1em 0;
-    background-color: $primary;
+    padding-block: 1em;
+
+    background-color: var(--col-primary);
     color: white;
     display: flex;
     align-items: center;
@@ -33,14 +41,18 @@ header {
 
     @media print {
         img {
-            // Invert colour so it appears nicely on a white background
+            /* Invert colour so it appears nicely on a white background */
             filter: invert(1);
 
-            height: 100px;
+            block-size: 5.5rem;
         }
     }
 }
 
+.hero-logo {
+    inline-size: min(16rem, 90vi);
+}
+
 section#logos {
     display: grid;
 
@@ -53,12 +65,12 @@ section#logos {
 
     img {
         display: block;
-        width: 100%;
-        max-height: 100px;
+        inline-size: 100%;
+        max-block-size: 5.5rem;
         object-fit: contain;
 
         @media print {
-            height: 75px;
+            block-size: 2cm;
         }
     }
 
@@ -66,13 +78,15 @@ section#logos {
         grid-auto-flow: row;
 
         img {
-            max-height: 8vh;
+            max-block-size: 8vb;
         }
     }
 }
 
 section {
-    padding: 0.75em max(calc((100vw - $content-width) / 2), 1rem);
+    padding-block: 0.75em;
+    padding-inline: max(calc((100vi - var(--content-inline-size)) / 2), 1rem);
+
     background-color: white;
     display: flex;
     flex-direction: column;
@@ -83,27 +97,25 @@ section {
 }
 
 h2, h3, h4, h5, h6 {
-    color: $primary;
-    margin: 12px 0;
+    color: var(--col-primary);
+    margin-block: 0.65em;
 }
 
 a {
-    color: $primary;
-
+    color: var(--col-primary);
 }
 
 table {
     margin: 0;
     padding: 0;
-    width: 100%;
 
     thead {
-        color: $primary;
+        color: var(--col-primary);
     }
 
     th {
-        border-bottom: 2px solid $primary;
-        text-align: left;
+        border-block-end: 2px solid var(--col-primary);
+        text-align: start;
     }
 
     th, td {
@@ -111,9 +123,13 @@ table {
     }
 }
 
-img {
-    margin-left: auto;
-    margin-right: auto;
+.figure {
+    margin-inline: auto;
+    max-inline-size: calc(var(--figure-scale, 1.0) * min(var(--content-inline-size), 90vi));
+}
+
+.figure-medium {
+    --figure-scale: 0.5;
 }
 
 .no-print {
diff --git a/src/index.html b/src/index.html
index 89b42f1..97600b1 100644
--- a/src/index.html
+++ b/src/index.html
@@ -5,7 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Rules 2024 &mdash; Tin Can Rally | SRO</title>
-    <link rel="stylesheet" href="./index.scss">
+    <link rel="stylesheet" href="./index.css">
     <link rel="stylesheet" href="../node_modules/normalize.css/normalize.css">
     <link rel="shortcut icon" href="https://roboticsoutreach.org/favicon.ico">
   </head>
@@ -13,7 +13,7 @@
     <header>
       <a class="anchor" id="top"></a>
       <a href="https://roboticsoutreach.org/">
-        <img width="300" src="https://raw.githubusercontent.com/roboticsoutreach/art/master/sro_logo_arm.svg" alt="SRO Logo">
+        <img class="hero-logo" src="https://raw.githubusercontent.com/roboticsoutreach/art/master/sro_logo_arm.svg" alt="SRO Logo">
       </a>
       <h1 id="header">
         <a href="#top">TIN CAN RALLY</a>
@@ -152,7 +152,7 @@ <h3><a class="anchor" id="marker-specification"></a>Markers</h3>
         Wall markers are placed such that the bottom of the marker is 20±5mm from the arena floor.
       </p>
       <h3><a class="anchor" id="arena-specification"></a>Arena</h3>
-      <img src="./fig-arena.svg" alt="Arena diagram" width="90%" height="auto">
+      <img class="figure" src="./fig-arena.svg" alt="Arena diagram">
       <ol>
         <li>
           The above figure represents, to scale, a birds eye view of the arena. The arena is a square with side length <strong>5400mm</strong>.
@@ -170,7 +170,7 @@ <h3><a class="anchor" id="arena-specification"></a>Arena</h3>
           SRO reserves the right to have match officials in the arena during games.
       </ol>
       <h3><a class="anchor" id="flag-specification"></a>Robot flags</h3>
-      <img src="./fig-flag.svg" alt="A small red flag, attached to a flag pole" width="40%" height="auto">
+      <img class="figure figure-medium" src="./fig-flag.svg" alt="A small red flag, attached to a flag pole">
       <ol>
         <li>
           A "robot flag" is a removable identifier that will be attached to a robot throughout a match. It allows spectators to easily associate a robot with its starting area.