first commit

style.css

@@ -0,0 +1,148 @@
+:root {
+  --brand-color: #feb300;
+  --bg-color: white;
+  --text-color: black;
+  --link-color: #551a8b;
+}
+
+@font-face {
+  font-family: 'Sanchez';
+  src: local('Calvert'),
+    url('Sanchez-Regular.otf') format('opentype');
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --bg-color: black;
+    --text-color: white;
+    --link-color: #6666ff;
+  }
+
+  #map-container {
+    filter: invert(100%) hue-rotate(180deg);
+  }
+}
+
+input, select {
+  font-family: inherit;
+  font-size: 1em;
+}
+
+html {
+  font-size: min(16px,4svw);
+  font-family: Sanchez, sans-serif;
+}
+
+body {
+  margin: 0;
+  background-color: var(--bg-color);
+  color: var(--text-color);
+  line-height: 1.5;
+}
+
+a {
+  color: var(--link-color);
+}
+
+#controls {
+  display: flex;
+  gap: 0.5em;
+  color: black;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  font-size: 1.5rem;
+  background: var(--brand-color);
+  padding: 0.5em;
+  font-weight: bold;
+
+  & :is(select, input, button) {
+    font-size: 1em;
+  }
+  
+  & select {
+    background: white;
+    border: thin solid black;
+  }
+  
+  & button {
+    background: none;
+    border: none;
+    cursor: pointer;
+    
+    &:active {
+      opacity: 0.2;
+    }
+  }
+
+  & a {
+    color: inherit;
+  }
+}
+
+.platforms {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4em;
+  list-style: none;
+  justify-content: center;
+  
+  & table {
+    width: 36em;
+    max-width: 95svw;
+    font-variant: tabular-nums;
+    border-collapse: collapse;
+
+    & caption {
+      font-size: 1.1em;
+      font-weight: bold;
+      padding-bottom: 0.5rem;
+
+      & .last-checked {
+        margin-left: 1em;
+      }
+    }
+
+    & tr:not(:first-child) {
+      border-top: thin dashed currentColor;
+    }
+  
+    & :is(td,th) {
+      padding: 0.2em 0.5em;
+
+      border: thin dashed currentColor;
+    }
+
+    & td {
+      text-align: end;
+    }
+
+    & th {
+      text-align: center;
+      border-bottom-width: medium;
+      border-bottom-style: solid;
+    }
+  }
+  padding-left: 0;
+}
+
+#map-container {
+  overflow: auto;
+  background: white;
+}
+
+#map {
+  min-width: 1000px;
+}
+
+footer {
+    margin: 5em 1em 0 1em;
+}
+
+@media (max-width: 37em) {
+  #controls {
+    font-size: 1.2rem;
+  }
+  table :is(td,th):is(:nth-child(4),:nth-child(5)) {
+    display: none;
+  }
+}