pathways: per-direction hover zones, transparent arrows, bigger start tile, zoom-out as mosaic grows

1 files changed, 29 insertions, 17 deletions

diff --git a/public/app.css b/public/app.css
index 44b7c7f..cdb2226 100644
--- a/public/app.css
+++ b/public/app.css
@@ -58,32 +58,44 @@ html, body {
   position: absolute;
   inset: 0;
   pointer-events: none;
-  opacity: 0;
-  transition: opacity .15s;
 }
-.tile.current:hover .nav { opacity: 1; }
 
-.nav-btn {
+.nav-zone {
   position: absolute;
   pointer-events: auto;
-  width: 44px;
-  height: 44px;
+}
+.nav-zone-N { top: 0; left: 0; width: 100%; height: 26%; }
+.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 26%; }
+.nav-zone-E { top: 26%; right: 0; width: 26%; height: 48%; }
+.nav-zone-W { top: 26%; left: 0; width: 26%; height: 48%; }
+
+.nav-btn {
+  position: absolute;
+  width: 46px;
+  height: 46px;
   border-radius: 50%;
-  border: none;
-  background: rgba(255, 255, 255, .95);
-  color: #17181d;
+  border: 1px solid rgba(255, 255, 255, .28);
+  background: rgba(255, 255, 255, .1);
+  color: rgba(255, 255, 255, .85);
   cursor: pointer;
   display: grid;
   place-items: center;
-  box-shadow: 0 2px 14px rgba(0, 0, 0, .5);
-  transition: transform .12s, background .12s, box-shadow .12s;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
+  opacity: .16;
+  transition: opacity .15s, background .15s, color .15s, box-shadow .15s;
+}
+.nav-btn svg { width: 20px; height: 20px; display: block; }
+.nav-zone-N .nav-btn { top: 0; left: 50%; translate: -50% -50%; }
+.nav-zone-E .nav-btn { top: 50%; right: 0; translate: 50% -50%; }
+.nav-zone-S .nav-btn { bottom: 0; left: 50%; translate: -50% 50%; }
+.nav-zone-W .nav-btn { top: 50%; left: 0; translate: -50% -50%; }
+.nav-zone:hover .nav-btn {
+  opacity: 1;
+  background: rgba(255, 255, 255, .22);
+  color: #fff;
+  border-color: rgba(255, 255, 255, .5);
+  box-shadow: 0 4px 18px rgba(0, 0, 0, .45);
 }
-.nav-btn svg { width: 22px; height: 22px; display: block; }
-.nav-btn:hover { transform: scale(1.15); background: #fff; box-shadow: 0 4px 18px rgba(0, 0, 0, .55); }
-.nav-btn[data-dir="N"] { top: 0; left: 50%; translate: -50% -50%; }
-.nav-btn[data-dir="E"] { top: 50%; right: 0; translate: 50% -50%; }
-.nav-btn[data-dir="S"] { bottom: 0; left: 50%; translate: -50% 50%; }
-.nav-btn[data-dir="W"] { top: 50%; left: 0; translate: -50% -50%; }
 
 .nav-label {
   position: absolute;