pathways: replace small circle nav buttons with big free-floating edge chevrons (option 1); whole edge band is the hover + click target

1 files changed, 19 insertions, 26 deletions

diff --git a/public/app.css b/public/app.css
index 11b24a0..ea00f29 100644
--- a/public/app.css
+++ b/public/app.css
@@ -70,37 +70,30 @@ html, body {
   position: absolute;
   pointer-events: auto;
 }
-.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-zone-N { top: 0; left: 0; width: 100%; height: 30%; }
+.nav-zone-S { bottom: 0; left: 0; width: 100%; height: 30%; }
+.nav-zone-E { top: 30%; right: 0; width: 30%; height: 40%; }
+.nav-zone-W { top: 30%; left: 0; width: 30%; height: 40%; }
 
-.nav-btn {
+.nav-chev {
   position: absolute;
-  width: 40px;
-  height: 40px;
-  border-radius: 50%;
-  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 12px rgba(0, 0, 0, .35);
-  opacity: .18;
-  transition: opacity .15s, background .15s, color .15s, box-shadow .15s;
+  width: 56px;
+  height: 56px;
+  color: rgba(255, 255, 255, .9);
+  opacity: .42;
+  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .65));
+  pointer-events: none;
+  transition: opacity .15s, filter .15s, color .15s;
 }
-.nav-btn svg { width: 18px; height: 18px; display: block; }
-.nav-zone-N .nav-btn { top: 10px; left: 50%; translate: -50% 0; }
-.nav-zone-E .nav-btn { top: 50%; right: 10px; translate: 0 -50%; }
-.nav-zone-S .nav-btn { bottom: 10px; left: 50%; translate: -50% 0; }
-.nav-zone-W .nav-btn { top: 50%; left: 10px; translate: 0 -50%; }
-.nav-zone:hover .nav-btn {
+.nav-chev svg { width: 100%; height: 100%; display: block; }
+.nav-zone-N .nav-chev { top: 0; left: 50%; translate: -50% -50%; }
+.nav-zone-E .nav-chev { top: 50%; right: 0; translate: 50% -50%; }
+.nav-zone-S .nav-chev { bottom: 0; left: 50%; translate: -50% 50%; }
+.nav-zone-W .nav-chev { top: 50%; left: 0; translate: -50% -50%; }
+.nav-zone:hover .nav-chev {
   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);
+  filter: drop-shadow(0 0 9px rgba(125, 211, 252, .6));
 }
 
 #splash {