vans x maps update

tif-calin · Sep 17, 2023 · d070460 · d070460
1 parent 82278b2
commit d070460
Show file tree

Hide file tree

Showing 3 changed files with 53 additions and 14 deletions.
diff --git a/maps/app.js b/maps/app.js
@@ -5,6 +5,9 @@ const TABLE_CONTAINER = document.querySelector('#other > ul');
 // Data
 let MAP;
 const TILES = {
+  positron: {
+    url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
+  },
   stadiaOutdoors: {
     url: 'https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.{ext}',
     options: {
@@ -21,15 +24,16 @@ const OTHER_MAPS = [
   { label: 'NYTimes 2020 election vote precinct map', url: 'https://www.nytimes.com/interactive/2021/upshot/2020-election-map.html' },
   { label: 'NYTimes 2016 election vote precinct map', url: 'https://www.nytimes.com/interactive/2018/upshot/election-2016-voting-precinct-maps.html#10.95/%LAT%/%LNG%/4069' },
   { label: 'co-op grocery stores map', url: 'https://grocerystory.coop/food-co-op-directory' },
-  { label: 'free air pumps', url: 'https://www.freeairpump.com/map/' }
+  { label: 'free air pumps', url: 'https://www.freeairpump.com/map/' },
+  { label: 'coffee', url: 'https://www.findmecoffee.com/' }
 ];
 
 // Logic
 console.table(OTHER_MAPS);
 
 const leaflet = ({ latitude, longitude }) => {
   MAP = L.map('map').setView([latitude, longitude], 13);
-  L.tileLayer(TILES.stadiaOutdoors.url, TILES.stadiaOutdoors.options).addTo(MAP);
+  L.tileLayer(TILES.positron.url, TILES.positron.options).addTo(MAP);
   L.marker([latitude, longitude]).addTo(MAP);
 
   return MAP;

diff --git a/maps/index.html b/maps/index.html
@@ -21,22 +21,25 @@
   <div class="page wrapper">
     <header>
       <h1 class="title">
-        Maps Maps Maps
+        vans &times; maps
       </h1>
     </header>
 
     <main>
       <div id="map"></div>
-      <table id="table">
-        <thead>
-          <tr>
-            <td>info</td> <!-- name, 3 icons, upvotes -->
-            <td>address</td>
-            <td>distance</td>
-          </tr>
-        </thead>
-        <tbody></tbody>
-      </table>
+
+      <section>
+        <table id="table">
+          <thead>
+            <tr>
+              <td>info</td> <!-- name, 3 icons, upvotes -->
+              <td>address</td>
+              <td>distance</td>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </section>
 
       <div id="other">
         <h2>Other Maps</h2>

diff --git a/maps/style.css b/maps/style.css
@@ -7,6 +7,7 @@
   --color-oc-orange-4: #ffa94d;
   --dimensions-gap: 1rem;
   --font-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
+  --font-geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
   --font-handwritten: 'Segoe Print', 'Bradley Hand', Chilanka, TSCu_Comic, casual, cursive;
   --font-rounded-sans: ui-rounded, 'Hiragino Maru Gothic ProN', Quicksand, Comfortaa, Manjari, 'Arial Rounded MT Bold', Calibri, source-sans-pro, sans-serif;
 
@@ -15,16 +16,43 @@
   --clr-text: var(--color-oc-gray-9);
   --clr-text-sub: var(--color-oc-gray-7);
   --dim-gap: var(--dimensions-gap);
-  --fnt-sans: var(--font-rounded-sans);
+  --fnt-sans: var(--font-geometric-humanist);
   --fnt-script: var(--font-handwritten);
   --fnt-serif: var(--font-didone);
 
+  box-sizing: border-box;
   min-height: 100vh;
   background: var(--clr-bg);
   color: var(--clr-text);
   font-family: var(--fnt-sans);
 }
 
+header, main {
+  display: flex;
+  justify-content: center;
+}
+
+main {
+  flex-direction: column;
+  align-items: center;
+  gap: 0.75rem;
+
+  & :where(h2, h3, h4) {
+    margin: unset;
+  }
+
+  & > * {
+    background: var(--clr-fg);
+    border: 1.5px solid var(--clr-text-sub);
+    border-radius: 0.15rem;
+    box-shadow: 0 0 4px #3333, inset 0 0 8px #fff;
+    padding: 0.5rem;
+    width: max(250px, min(95vw, 200px + 60vw));
+
+    & > * { width: 100%; }
+  }
+}
+
 #map {
   min-height: 500px;
   min-width: 500px;
@@ -95,4 +123,8 @@
   & tr:has(td:target) {
     outline: 2px solid var(--clr-text);
   }
+
+  & tbody tr:nth-of-type(odd) {
+    backdrop-filter: brightness(0.9);
+  }
 }