Fixed styling bug

rivercharts/templates/rivercharts/river_graph.html

@@ -93,7 +93,7 @@ <h2 id="station-name" style="display: none"></h2>
       </div>
       <div class="loading-image"></div>
       <div class="fun-facts-title">
-        Care to learn some fun facts while you wait?
+        Fun Facts! Did you know?
       </div>
       <div id="fun-facts" class="fun-facts"></div>
       <div class="wave"></div>

static/css/styles.css

@@ -99,7 +99,7 @@ p {
     height: 0;
   }
   100% {
-    height: calc(150px + 75%); /* Used to be 90% - Issue #2 */
+    height: calc(110px + 75%) /* Used to be 90% or calc(150px + 75%) - Issue #2 */
   }
 }
 
@@ -164,7 +164,7 @@ p {
   color: var(--tube-orange-color);
   font-size: 24px;
   text-align: center;
-  margin-top: 20px;
+  margin-top: 10px;
   position: relative;
   z-index: 3;
   order: 1;
@@ -174,7 +174,7 @@ p {
   font-family: var(--main-font-family);
   color: var(--tube-orange-color);
   font-size: 18px;
-  padding: 20px;
+  padding: 10px;
   text-align: center;
   position: relative;
   z-index: 3;
@@ -195,7 +195,7 @@ p {
   color: var(--tube-orange-color);
   font-size: 24px;
   text-align: center;
-  margin-top: 20px;
+  margin-top: 10px;
   position: relative;
   z-index: 3;
   order: 4;
@@ -206,7 +206,7 @@ p {
   color: var(--tube-orange-color);
   font-size: 18px;
   text-align: center;
-  padding: 20px;
+  padding: 10px;
   position: relative;
   z-index: 3;
   order: 5;
@@ -216,6 +216,17 @@ p {
   text-overflow: ellipsis;
 }
 
+@media only screen and (max-width: 600px) { 
+  .loading-image {
+    z-index: 3;
+    background: url("/static/assets/loading_tube.png") no-repeat center center;
+    width: 335px;
+    height: 335px;
+    animation: rotateBackAndForth 1s infinite;
+    order: 3;
+  }
+}
+
 .loading-dots::after {
   content: ".";
   display: inline-block;

static/data/fun_facts.json

@@ -1,22 +1,22 @@
 [
-    "Tubing Origin: Tubing as a recreational activity was first popularized in the 1960s in the United States.",
-    "Longest Tubing River: The Guadalupe River in Texas is one of the most popular and longest rivers for tubing, with stretches spanning over 230 miles.",
-    "Wildlife Encounters: Tubers often encounter diverse wildlife, including fish, turtles, and various bird species.",
-    "Natural Lazy River: The Ichetucknee Springs State Park in Florida offers a natural 'lazy river' experience with crystal-clear waters.",
+    "Tubing as a recreational activity was first popularized in the 1960s in the United States.",
+    "The Guadalupe River in Texas is one of the most popular and longest rivers for tubing, with stretches spanning over 230 miles.",
+    "Tubers often encounter diverse wildlife, including fish, turtles, and various bird species.",
+    "The Ichetucknee Springs State Park in Florida offers a natural 'lazy river' experience with crystal-clear waters.",
     "Temperature Matters: The ideal water temperature for tubing is typically between 70°F and 85°F to ensure comfort.",
-    "Safety First: Wearing a life jacket is recommended, even for strong swimmers, to ensure safety in varying water conditions.",
-    "Environmental Impact: Responsible tubing includes not littering and avoiding harmful substances that can pollute the water and harm wildlife.",
-    "Festival Fun: The 'Float Fest' in Texas is a music festival that combines tubing on the San Marcos River with live music performances.",
-    "International Tubing: Tubing is popular worldwide, with notable spots in places like the Vang Vieng River in Laos and the Cowichan River in Canada.",
-    "Historic Routes: Many tubing rivers have historic significance, having been used by Native American tribes and early settlers for transportation and trade.",
-    "River Rapids: Some tubing routes include mild rapids, providing an exciting and slightly more adventurous experience.",
-    "Tropical Paradise: The Rio Grande in Jamaica offers a scenic tubing experience through lush tropical landscapes.",
-    "Glow Tubing: In some places, nighttime tubing with glow sticks and illuminated tubes is a popular activity.",
-    "Longest River: The Nile River, the longest river in the world, spans over 4,100 miles across northeastern Africa.",
-    "Amazon Adventure: The Amazon River, the second longest river, is known for its diverse ecosystem and significant biodiversity.",
-    "Unique Ecosystems: Rivers like the Congo and Mekong are home to unique ecosystems and endangered species such as freshwater dolphins and giant catfish.",
-    "River Games: Tubers often play games such as 'tube tag' and 'floating frisbee' to add fun to their experience.",
-    "Historical Landmarks: Tubing on the Delaware River in the U.S. offers views of historic landmarks like the Washington Crossing Historic Park.",
-    "Health Benefits: Tubing can provide physical benefits, including low-impact exercise and stress relief from being in nature.",
-    "River Tubing Challenges: Competitive tubing events, like the Great Inflatable Race, feature obstacle courses and races on the water."
+    "Wearing a life jacket is recommended, even for strong swimmers, to ensure safety in varying water conditions.",
+    "Responsible tubing includes not littering and avoiding harmful substances that can pollute the water and harm wildlife.",
+    "The 'Float Fest' in Texas is a music festival that combines tubing on the San Marcos River with live music performances.",
+    "Tubing is popular worldwide, with notable spots in places like the Vang Vieng River in Laos and the Cowichan River in Canada.",
+    "Many tubing rivers have historic significance, having been used by Native American tribes and early settlers for transportation and trade.",
+    "Some tubing routes include mild rapids, providing an exciting and slightly more adventurous experience.",
+    "The Rio Grande in Jamaica offers a scenic tubing experience through lush tropical landscapes.",
+    "In some places, nighttime tubing with glow sticks and illuminated tubes is a popular activity.",
+    "The Nile River, the longest river in the world, spans over 4,100 miles across northeastern Africa.",
+    "The Amazon River, the second longest river, is known for its diverse ecosystem and significant biodiversity.",
+    "Rivers like the Congo and Mekong are home to unique ecosystems and endangered species such as freshwater dolphins and giant catfish.",
+    "Tubers often play games such as 'tube tag' and 'floating frisbee' to add fun to their experience.",
+    "Tubing on the Delaware River in the U.S. offers views of historic landmarks like the Washington Crossing Historic Park.",
+    "Tubing can provide physical benefits, including low-impact exercise and stress relief from being in nature.",
+    "Competitive tubing events, like the Great Inflatable Race, feature obstacle courses and races on the water."
 ]