reverting main and adjusting mobile styles

Author: dcnb

_data/river-poem.yml

@@ -23,16 +23,16 @@
 sections:
 
   - id: "line-2"
-    scroll_position: 2000
-    scroll_position_mobile: 3000
+    scroll_position: 2500
+    scroll_position_mobile: 3200
     side: "middle"
     content: "you are silt"
     padding_left:
     font_size: 19
 
   - id: "line-3"
     scroll_position: 2750
-    scroll_position_mobile: 3300
+    scroll_position_mobile: 3400
     side: "middle"
     content: "you may be embedded in the strata"
     max_width: 420
@@ -111,7 +111,7 @@ sections:
 
   - id: "line-12"
     scroll_position: 5500
-    scroll_position_mobile: 5700
+    scroll_position_mobile: 5570
     side: "middle"
     content: "or the river might cut you from your bed and carry you away"
     max_width: 500
@@ -120,7 +120,7 @@ sections:
 
   - id: "line-13"
     scroll_position: 5800
-    scroll_position_mobile: 6000
+    scroll_position_mobile: 5800
     side: "left"
     content: "the water takes you fast or slow all the way to the ocean" 
     padding_left: 300
@@ -129,7 +129,7 @@ sections:
 
   - id: "line-14"
     scroll_position: 6100
-    scroll_position_mobile: 6300
+    scroll_position_mobile: 6100
     side: "middle"
     content: "perhaps you wash up on a beach"
     max_width: 500
@@ -138,7 +138,7 @@ sections:
 
   - id: "line-15"
     scroll_position: 6750
-    scroll_position_mobile: 6600
+    scroll_position_mobile: 6400
     side: "middle"
     content: "there is so much of you you tune the water's temperature" 
     max_width: 500
@@ -147,23 +147,23 @@ sections:
 
   - id: "line-16"
     scroll_position: 7350
-    scroll_position_mobile: 6900
+    scroll_position_mobile: 6600
     side: "middle"
     content: "algae blossoms in your nooks"
     icon: "microbes"
     trib: "biota"
 
   - id: "line-17"
     scroll_position: 7600
-    scroll_position_mobile: 7200
+    scroll_position_mobile: 6900
     side: "middle"
     content: "endemic fish proliferate"
     icon: "biota"
     trib: "biota"
 
   - id: "line-18"
     scroll_position: 7850
-    scroll_position_mobile: 7500
+    scroll_position_mobile: 7200
     side: "middle"
     content: "you hold magnesium, potassium, and calcium" 
     max_width: 500
@@ -173,7 +173,7 @@ sections:
 
   - id: "line-19"
     scroll_position: 8100
-    scroll_position_mobile: 7800
+    scroll_position_mobile: 7500
     side: "middle"
     content: "plants take root in your fertile shores"
     icon: "vegetation"
@@ -182,7 +182,7 @@ sections:
 
   - id: "line-21"
     scroll_position: 8500
-    scroll_position_mobile: 8100
+    scroll_position_mobile: 7800
     side: "right"
     content: "when enough of you gathers you alter the river's course"
     max_width: 500
@@ -192,7 +192,7 @@ sections:
 
   - id: "line-22"
     scroll_position: 8900
-    scroll_position_mobile: 8400
+    scroll_position_mobile: 8100
     side: "middle"
     content: "some of you stream over an abandoned uranium mine"
     padding_right: 80
@@ -203,7 +203,7 @@ sections:
   -
   - id: "line-23"
     scroll_position: 9200
-    scroll_position_mobile: 8700
+    scroll_position_mobile: 8300
     side: "right"
     content: "you are radioactive"
     padding_right: 100
@@ -213,7 +213,7 @@ sections:
 
   - id: "line-24"
     scroll_position: 9600
-    scroll_position_mobile: 9000
+    scroll_position_mobile: 8600
     side: "middle"
     content: "humans gather you in handfuls to make art and homes"
     max_width: 500
@@ -222,7 +222,7 @@ sections:
 
   - id: "line-25"
     scroll_position: 9850
-    scroll_position_mobile: 9300
+    scroll_position_mobile: 8900
     side: "right"
     content: "much of you heaps up behind concrete dams"
     padding_right: 100
@@ -232,15 +232,15 @@ sections:
 
   - id: "line-26"
     scroll_position: 10100
-    scroll_position_mobile: 9600
+    scroll_position_mobile: 9200
     side: "middle"
     content: "not so much of you flows to the sea now"
     icon: "water"
     trib: "water"
 
   - id: "line-27"
     scroll_position: 10350
-    scroll_position_mobile: 9900
+    scroll_position_mobile: 9500
     side: "right"
     content: "there is not so much room left for the water anymore"
     padding_right: 200
@@ -250,7 +250,7 @@ sections:
 
   - id: "line-28"
     scroll_position: 11400
-    scroll_position_mobile: 11200
+    scroll_position_mobile: 9800
     side: "middle"
     content: "still, maybe you are embedded in the rock strata maybe you are deep underground or clinging to the outer dermis of a canyon wall or maybe you arrived recently, from somewhere else, delivered by bird wing, on shoe, from mountain or through fish gut you might stay here for another day, century, millennia, or billion years or the river might cut you from your bed and carry you away"
     max_width: 1000

_includes/intro.md

@@ -4,7 +4,7 @@
 <div class="row gx-0 intro-tight"><div class="col-md pe-0">
 
 <div class="intro-tight-image">
-{% include feature/image-gallery.html objectid="sediment212" caption=false width="75" %}
+{% include feature/image.html objectid="sediment212" caption=false width="75" %}
 </div>
 
 </div><div class="col-md ps-0 ps-md-1 pe-5 pe-md-5" style="padding-right: 3.75rem;">

_includes/navigation-cards.html

@@ -333,12 +333,25 @@ <h3>COLLECTION</h3>
 
 /* Responsive */
 @media (max-width: 768px) {
+  .navigation-cards-container {
+    max-width: 100%;
+    overflow-x: hidden;
+  }
+
   .navigation-cards {
     grid-template-columns: 1fr;
     grid-template-rows: auto;
     gap: 30px;
   }
 
+  .nav-card {
+    box-sizing: border-box;
+    max-width: 100%;
+    overflow: hidden;
+    word-wrap: break-word;
+    overflow-wrap: break-word;
+  }
+
   .tributary-card,
   .map-card,
   .eddies-card,
@@ -348,16 +361,22 @@ <h3>COLLECTION</h3>
     grid-row: span 1;
   }
 
+  .tributary-select {
+    box-sizing: border-box;
+    max-width: 100%;
+  }
+
+  #nav-mini-map {
+    height: 200px;
+    max-width: 100%;
+  }
+
   .scroll-card {
     border-right: none;
     border-top: 4px solid #DEB887;
     padding-right: 0;
     padding-top: 15px;
   }
-
-  #nav-mini-map {
-    height: 200px;
-  }
 }
 </style>
 

_includes/river-poem.html

@@ -80,20 +80,18 @@
 }
 
 .poem-content-box {
-  background: transparent;
-  box-shadow: none;
   border: none;
 }
 
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .poem-section {
     /* Keep absolute positioning but center horizontally */
-    left: calc(50% + 100px) !important;
+    left: 50% !important;
     right: auto !important;
     transform: translateX(-50%);
-    width: 92%;
-    max-width: 380px;
+    width: 90%;
+    max-width: 320px;
   }
 
   .poem-content-wrapper {
@@ -104,8 +102,6 @@
   .poem-content-box {
     max-width: 100% !important;
     padding: 15px !important;
-    background: transparent !important;
-    padding: 14px;
   }
 
   .poem-text {

main.html

@@ -1,6 +1,6 @@
 ---
 layout: default
-title: "Sedimentation"
+title: "The Colorado River Journey"
 river_path: "M190,-10 Q105,0 100,0 T65,15 50,23 Q45,25 30,35 Q20,45 19,65 Q42,75 50,85 Q53,95 67,105 Q80,115 93,125 Q92,135 80,145 Q74,155 60,165 Q57,175 59,185 Q52,195 50,205 Q47,215 49,225 Q42,235 40,245 Q47,255 59,265 Q72,275 70,285 Q67,295 59,305 Q52,310 50,320 Q47,330 39,340 Q32,350 30,360 Q35,370 45,380 Q55,390 65,400 Q75,410 85,420 Q95,430 98,440 Q92,450 85,460 Q78,470 75,480 Q72,490 78,500 Q84,510 90,520 Q96,530 98,540 Q95,550 88,560 Q81,570 75,580 Q69,590 72,600 Q75,610 82,620 Q89,630 95,640 Q98,650 95,660 Q92,670 85,680 Q78,690 72,700 Q66,710 70,720 Q74,730 82,740 Q90,750 96,760 Q98,770 94,780 Q90,790 83,800 Q76,810 70,820 Q64,830 68,840 Q72,850 80,860 Q88,870 94,880 Q98,890 95,900"
 ---
 
@@ -99,6 +99,8 @@ <h3>{{ tributary.title }}</h3>
   width: 85%;
   background: rgb(255 255 255 / 92%);
   padding: 30px;
+  box-sizing: border-box;
+  overflow-x: hidden;
   z-index: 200;
   animation: fadeInUp 1s cubic-bezier(0.23, 1, 0.32, 1);
 }
@@ -161,12 +163,9 @@ <h3>{{ tributary.title }}</h3>
     to { opacity: 1; }
   }
 }
-.poem-content-box {
-  background: transparent !important;
-  box-shadow: none !important;
-  border: none !important;
-  padding: 14px;
-}
+.poem-content-box{
+background: rgb(255 255 255 / 65%);
+    padding: 14px;}
 
 .tributary-scroll-container {
   position: relative;
@@ -301,14 +300,14 @@ <h3>{{ tributary.title }}</h3>
 /* Responsive adjustments */
 @media (max-width: 768px) {
   .river-container {
-    min-height: 12000px; /* Keep mobile page long enough for spread-out poem sections */
+    min-height: 12000px; /* Increased height for mobile to accommodate spread-out poem sections */
   }
 
   .intro-content-box {
     position: relative;
     top: 40px;
     right: auto;
-    width: calc(100% - 30px);
+    width: calc(100% - 40px);
     margin: 20px;
     background: white;
   border-radius: 15px;
@@ -356,7 +355,7 @@ <h3>{{ tributary.title }}</h3>
   // Set up canvas responsively
   function resizeCanvas() {
     canvas.width = window.innerWidth;
-    canvas.height = 5500;
+    canvas.height = 7300;
   }
 
   resizeCanvas();
@@ -371,38 +370,21 @@ <h3>{{ tributary.title }}</h3>
 
     // Original SVG bounds
     const originalBounds = { minX: 0, maxX: 200, minY: -10, maxY: 400 };
-    const minRiverX = canvas.width * 0.08;
-    const maxRiverX = canvas.width * 0.35;
     const mapRiverX = (xVal, yVal) => {
-      const channelCenterX = (minRiverX + maxRiverX) / 2;
-      const channelHalfWidth = (maxRiverX - minRiverX) / 2;
-      const xNorm = (xVal / originalBounds.maxX) * 2 - 1;
+      // Natural full-width mapping
+      let scaledX = (xVal / originalBounds.maxX) * canvas.width;
       const yNorm = (yVal - originalBounds.minY) / (originalBounds.maxY - originalBounds.minY);
 
-      // Blend original bends with two y-driven wave components for extra twists.
-      let bend = xNorm * 0.95;
-      bend += Math.sin(yNorm * Math.PI * 6) * 0.18;
-      bend += Math.sin(yNorm * Math.PI * 13 + 0.7) * 0.08;
-
-      // Hard clamp: never exceed configured channel bounds.
-      bend = Math.max(-1, Math.min(1, bend));
-
-      let dynamicCenterX = channelCenterX;
-
       // Near the end, arc smoothly right and exit the screen.
       if (yNorm > 0.82) {
         const t = (yNorm - 0.82) / 0.18;
         const clampedT = Math.max(0, Math.min(1, t));
         const ease = clampedT * clampedT * clampedT * (clampedT * (clampedT * 6 - 15) + 10);
-        const controlCenterX = canvas.width * 0.46;
-        const exitCenterX = canvas.width * 1.08;
-        const oneMinus = 1 - ease;
-        dynamicCenterX = oneMinus * oneMinus * channelCenterX + 2 * oneMinus * ease * controlCenterX + ease * ease * exitCenterX;
+        const exitX = canvas.width * 1.08;
+        scaledX = scaledX * (1 - ease) + exitX * ease;
       }
 
-      const mappedX = dynamicCenterX + bend * channelHalfWidth;
-
-      return mappedX;
+      return scaledX;
     };
 
     commands.forEach(command => {