From a80f849dddd6a70b843d5322d03a7d525c8f8909 Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Fri, 7 Jun 2024 09:44:59 -0700
Subject: [PATCH 1/7] drop post-apocalyptic

---
 src/assets/text/text.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/assets/text/text.js b/src/assets/text/text.js
index 3e85dc2..ffb4c66 100644
--- a/src/assets/text/text.js
+++ b/src/assets/text/text.js
@@ -5,7 +5,7 @@ export default {
       title: "",
       paragraph1: `Imagine, for example, that you live in a big house in the suburbs where clean water flows out of every faucet. There’s enough water for you and your family to grow a nice garden every year. The public water supplier treats the water and maintains the distribution system regularly, so you know the water is safe for you to drink. A small, clean stream flows through town, offering a cool place to swim and play during the hot summer months.`,
       paragraph2: `Now imagine you live in a small rural community on the outskirts of town. You have your own well, but in recent years, you and your neighbors have had to dig deeper and deeper to reach water. Dangerous metals are leaching into the water belowground, but you have no way of treating your water before your family drinks it. Because of an ongoing drought, the sparse vegetation surrounding your house has turned a crispy brown. A nearby pond shrinks each summer and acquires a ghastly green hue as it’s choked by harmful algae blooms.`,
-      paragraph3: `This dreadful scene may sound like the backdrop of a post-apocalyptic movie, but this nightmare is the unfortunate reality for many Americans. More than 2.2 million Americans lack running water and basic plumbing in their home <a href='https://www.digdeep.org/draining' target='_blank'>(DigDeep, 2022)</a>, and roughly 3% of community water systems have severe issues with water quality <a href='https://www.nature.com/articles/s41467-021-23898-z' target='_blank'>(Mueller and Gasteyer, 2021)</a>.Limited access to clean water may be triggered by a single event, like the <a href='storymaps target='_blank'>derailing of the train carrying hazardous chemicals in East Palestine, Ohio,</a>, or may be the long-term result of aging infrastructure, as was the case with the <a href='https://www.npr.org/sections/thetwo-way/2016/04/20/465545378/lead-laced-water-in-flint-a-step-by-step-look-at-the-makings-of-a-crisis' target='_blank'>dangerously high levels of lead in the drinking water of Flint, Michigan.</a>`,
+      paragraph3: `This dreadful scene may sound unimaginable, but this nightmare is the unfortunate reality for many Americans. More than 2.2 million Americans lack running water and basic plumbing in their home <a href='https://www.digdeep.org/draining' target='_blank'>(DigDeep, 2022)</a>, and roughly 3% of community water systems have severe issues with water quality <a href='https://www.nature.com/articles/s41467-021-23898-z' target='_blank'>(Mueller and Gasteyer, 2021)</a>.Limited access to clean water may be triggered by a single event, like the <a href='storymaps target='_blank'>derailing of the train carrying hazardous chemicals in East Palestine, Ohio,</a> or may be the long-term result of aging infrastructure, as was the case with the <a href='https://www.npr.org/sections/thetwo-way/2016/04/20/465545378/lead-laced-water-in-flint-a-step-by-step-look-at-the-makings-of-a-crisis' target='_blank'>dangerously high levels of lead in the drinking water of Flint, Michigan.</a>`,
       paragraph4: `Marginalized populations in these communities are often disproportionately affected. Communities of color and individuals living below the poverty line are frequently the hardest hit by these environmental disasters, lacking the means to safeguard themselves adequately. They may face barriers to relocation, struggle to take time off work, cope with lost wages, or afford medical expenses. In the case of the Flint, Michigan water crisis, black and low-income communities, who made up <a href='https://apnews.com/general-news-7b2bcfdcc8d74ece9e0cb167a2239745' target='_blank'>57% and 42%</a>, respectively, are some of the socio-economically disadvantaged communities who were affected when the water crisis began. Regardless of the cause, the risk of experiencing water insecurity is closely related to the level of social vulnerability.`,
     },
     agVersusMunicipalText: {
-- 
GitLab


From cadc8ef0ed6fd2090efd97fb9f24f10d8a721b14 Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Fri, 7 Jun 2024 09:45:11 -0700
Subject: [PATCH 2/7] add grid

---
 src/components/NarrativeIntro.vue | 87 +++++++++++++++++++++++++++----
 1 file changed, 78 insertions(+), 9 deletions(-)

diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index 72352fa..b05b3ee 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -1,12 +1,14 @@
 <template>
   <section id="narrativeIntro">
-    <img src="@/assets/images/water_security_less-stylized.png" class="img" />
-    <div id="text2" class="text-container">
-      <p v-html="introText.paragraph1"></p>
-    </div>
-    <img src="@/assets/images/water_insecurity_less-stylized.png" class="img" />
-    <div id="text3" class="text-container quote">
-      <p v-html="introText.paragraph2"></p>
+    <div id="grid-container">
+      <div id="text2" class="text-container">
+        <p v-html="introText.paragraph1"></p>
+      </div>
+      <img src="@/assets/images/water_security_less-stylized.png" class="img" alt = "Stylized city-scape image with buildings in background and lush green grass surrouding pond in foreground."/>
+      <img src="@/assets/images/water_insecurity_less-stylized.png" class="img right-align" alt = "Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
+      <div id="text3" class="text-container quote">
+        <p v-html="introText.paragraph2"></p>
+      </div>
     </div>
     <div id="text4" class="text-container">
       <p v-html="introText.paragraph3"></p>
@@ -21,7 +23,6 @@
 import text from './../assets/text/text.js';
 
 const introText = text.components.introNarrative;
-
 </script>
 
 <style scoped>
@@ -58,7 +59,75 @@ const introText = text.components.introNarrative;
 }
 
 #narrativeIntro img {
+  width: 45%; /* Reduce the size of the images */
+}
+
+#grid-container {
+  display: grid;
+  max-width: 1600px;
+  margin: auto;
+  height: auto;
+  vertical-align: middle;
+  overflow: hidden;
+  grid-template-columns: 1fr;
+  grid-template-areas:
+    "text2"
+    "image1"
+    "image2"
+    "text3";
+}
+
+@media screen and (min-width: 551px) {
+  #grid-container {
+    grid-template-columns: 1fr 1fr;
+    grid-template-areas:
+      "text2 image1"
+      "image2 text3";
+  }
+
+  #text2 {
+    grid-area: text2;
+  }
+
+  #text3 {
+    grid-area: text3;
+  }
+
+  #grid-container .img:nth-of-type(1) {
+    grid-area: image1;
+  }
+
+  #grid-container .img:nth-of-type(2) {
+    grid-area: image2;
+  }
+}
+
+@media screen and (max-width: 700px) {
+  #grid-container {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "image1"
+      "text2"
+      "image2"
+      "text3";
+  }
+
+  #text2 {
+    grid-area: text2;
+  }
+
+  #text3 {
+    grid-area: text3;
+  }
+
+  #grid-container .img:nth-of-type(1),
+  #grid-container .img:nth-of-type(2) {
+    width: 100%;
+  }
+}
+
+.right-align {
   display: block;
-  margin: 20px auto; /* Center the images and add space around them */
+  margin-left: auto;
 }
 </style>
-- 
GitLab


From 543f729e8ceb565c26e839c962d645f033bb22c2 Mon Sep 17 00:00:00 2001
From: Cee Nell <cnell@usgs.gov>
Date: Thu, 13 Jun 2024 16:37:30 +0000
Subject: [PATCH 3/7] edit max-width

---
 src/components/NarrativeIntro.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index b05b3ee..606130e 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -64,7 +64,7 @@ const introText = text.components.introNarrative;
 
 #grid-container {
   display: grid;
-  max-width: 1600px;
+  max-width: 700px;
   margin: auto;
   height: auto;
   vertical-align: middle;
-- 
GitLab


From 2a4e29dd3e27d43d8768e1dccb87c9e1a87fe9bb Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Thu, 13 Jun 2024 10:03:53 -0700
Subject: [PATCH 4/7] apply suggested edits

---
 src/components/NarrativeIntro.vue | 57 ++++++++++++-------------------
 1 file changed, 22 insertions(+), 35 deletions(-)

diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index 606130e..57d6cc7 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -4,8 +4,8 @@
       <div id="text2" class="text-container">
         <p v-html="introText.paragraph1"></p>
       </div>
-      <img src="@/assets/images/water_security_less-stylized.png" class="img" alt = "Stylized city-scape image with buildings in background and lush green grass surrouding pond in foreground."/>
-      <img src="@/assets/images/water_insecurity_less-stylized.png" class="img right-align" alt = "Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
+      <img id="image1" src="@/assets/images/water_security_less-stylized.png" class="img" alt="Stylized city-scape image with buildings in background and lush green grass surrouding pond in foreground."/>
+      <img id="image2" src="@/assets/images/water_insecurity_less-stylized.png" class="img right-align" alt="Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
       <div id="text3" class="text-container quote">
         <p v-html="introText.paragraph2"></p>
       </div>
@@ -59,7 +59,7 @@ const introText = text.components.introNarrative;
 }
 
 #narrativeIntro img {
-  width: 45%; /* Reduce the size of the images */
+  width: 100%;
 }
 
 #grid-container {
@@ -69,12 +69,23 @@ const introText = text.components.introNarrative;
   height: auto;
   vertical-align: middle;
   overflow: hidden;
-  grid-template-columns: 1fr;
-  grid-template-areas:
-    "text2"
-    "image1"
-    "image2"
-    "text3";
+  gap: 10px;
+}
+
+#text2 {
+  grid-area: text2;
+}
+
+#text3 {
+  grid-area: text3;
+}
+
+#image1 {
+  grid-area: image1;
+}
+
+#image2 {
+  grid-area: image2;
 }
 
 @media screen and (min-width: 551px) {
@@ -84,22 +95,6 @@ const introText = text.components.introNarrative;
       "text2 image1"
       "image2 text3";
   }
-
-  #text2 {
-    grid-area: text2;
-  }
-
-  #text3 {
-    grid-area: text3;
-  }
-
-  #grid-container .img:nth-of-type(1) {
-    grid-area: image1;
-  }
-
-  #grid-container .img:nth-of-type(2) {
-    grid-area: image2;
-  }
 }
 
 @media screen and (max-width: 700px) {
@@ -112,16 +107,8 @@ const introText = text.components.introNarrative;
       "text3";
   }
 
-  #text2 {
-    grid-area: text2;
-  }
-
-  #text3 {
-    grid-area: text3;
-  }
-
-  #grid-container .img:nth-of-type(1),
-  #grid-container .img:nth-of-type(2) {
+  #image1,
+  #image2 {
     width: 100%;
   }
 }
-- 
GitLab


From 14996e6eae885ab50fb643e7b57f92707e47b0db Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Thu, 13 Jun 2024 12:13:51 -0700
Subject: [PATCH 5/7] grid container edits

---
 src/components/NarrativeIntro.vue | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index 57d6cc7..e286702 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -5,7 +5,7 @@
         <p v-html="introText.paragraph1"></p>
       </div>
       <img id="image1" src="@/assets/images/water_security_less-stylized.png" class="img" alt="Stylized city-scape image with buildings in background and lush green grass surrouding pond in foreground."/>
-      <img id="image2" src="@/assets/images/water_insecurity_less-stylized.png" class="img right-align" alt="Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
+      <img id="image2" src="@/assets/images/water_insecurity_less-stylized.png" class="img" alt="Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
       <div id="text3" class="text-container quote">
         <p v-html="introText.paragraph2"></p>
       </div>
@@ -70,6 +70,10 @@ const introText = text.components.introNarrative;
   vertical-align: middle;
   overflow: hidden;
   gap: 10px;
+  grid-template-columns: 1fr 1fr;
+  grid-template-areas:
+  "text2 image1"
+  "image2 text3";
 }
 
 #text2 {
@@ -88,15 +92,6 @@ const introText = text.components.introNarrative;
   grid-area: image2;
 }
 
-@media screen and (min-width: 551px) {
-  #grid-container {
-    grid-template-columns: 1fr 1fr;
-    grid-template-areas:
-      "text2 image1"
-      "image2 text3";
-  }
-}
-
 @media screen and (max-width: 700px) {
   #grid-container {
     grid-template-columns: 1fr;
@@ -113,8 +108,4 @@ const introText = text.components.introNarrative;
   }
 }
 
-.right-align {
-  display: block;
-  margin-left: auto;
-}
 </style>
-- 
GitLab


From 81f1811d416f60e79ee405e022631d45a96e5d17 Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Fri, 14 Jun 2024 10:57:00 -0700
Subject: [PATCH 6/7] box-sizing edit

---
 src/components/NarrativeIntro.vue | 28 ++++++++++++----------------
 1 file changed, 12 insertions(+), 16 deletions(-)

diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index e286702..a0f2388 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -4,7 +4,7 @@
       <div id="text2" class="text-container">
         <p v-html="introText.paragraph1"></p>
       </div>
-      <img id="image1" src="@/assets/images/water_security_less-stylized.png" class="img" alt="Stylized city-scape image with buildings in background and lush green grass surrouding pond in foreground."/>
+      <img id="image1" src="@/assets/images/water_security_less-stylized.png" class="img" alt="Stylized city-scape image with buildings in background and lush green grass surrounding pond in foreground."/>
       <img id="image2" src="@/assets/images/water_insecurity_less-stylized.png" class="img" alt="Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
       <div id="text3" class="text-container quote">
         <p v-html="introText.paragraph2"></p>
@@ -42,7 +42,7 @@ const introText = text.components.introNarrative;
   padding: 5px;
   position: absolute;
   z-index: 1;
-  bottom: 100%; /* Position the tooltip above the text */
+  bottom: 100%;
   left: 50%;
   transform: translateX(-50%);
   opacity: 0;
@@ -55,11 +55,7 @@ const introText = text.components.introNarrative;
 }
 
 .text-container {
-  margin-bottom: 20px; /* Add some space between text containers */
-}
-
-#narrativeIntro img {
-  width: 100%;
+  margin-bottom: 20px;
 }
 
 #grid-container {
@@ -71,9 +67,10 @@ const introText = text.components.introNarrative;
   overflow: hidden;
   gap: 10px;
   grid-template-columns: 1fr 1fr;
-  grid-template-areas:
-  "text2 image1"
-  "image2 text3";
+    grid-template-areas:
+    "text2 image1"
+    "image2 text3";
+    box-sizing: border-box; 
 }
 
 #text2 {
@@ -92,6 +89,11 @@ const introText = text.components.introNarrative;
   grid-area: image2;
 }
 
+#image1,
+#image2 {
+  width: 100%;
+}
+
 @media screen and (max-width: 700px) {
   #grid-container {
     grid-template-columns: 1fr;
@@ -101,11 +103,5 @@ const introText = text.components.introNarrative;
       "image2"
       "text3";
   }
-
-  #image1,
-  #image2 {
-    width: 100%;
-  }
 }
-
 </style>
-- 
GitLab


From ab4fb2a8fe3a86aa2810445bebf2298d32b0b3ef Mon Sep 17 00:00:00 2001
From: elmeraa <eazadpour@usgs.gov>
Date: Tue, 18 Jun 2024 12:01:10 -0700
Subject: [PATCH 7/7] figured out grid issue

---
 src/components/NarrativeIntro.vue | 15 +++++++--------
 1 file changed, 7 insertions(+), 8 deletions(-)

diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index a0f2388..7812633 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -1,12 +1,12 @@
 <template>
   <section id="narrativeIntro">
-    <div id="grid-container">
-      <div id="text2" class="text-container">
+    <div id="grid-container" class= "text-container">
+      <div id="text2" >
         <p v-html="introText.paragraph1"></p>
       </div>
       <img id="image1" src="@/assets/images/water_security_less-stylized.png" class="img" alt="Stylized city-scape image with buildings in background and lush green grass surrounding pond in foreground."/>
       <img id="image2" src="@/assets/images/water_insecurity_less-stylized.png" class="img" alt="Stylized image with an orange hue displaying a home surrounded by sagebrush, barren land, and a nearby road."/>
-      <div id="text3" class="text-container quote">
+      <div id="text3">
         <p v-html="introText.paragraph2"></p>
       </div>
     </div>
@@ -60,17 +60,14 @@ const introText = text.components.introNarrative;
 
 #grid-container {
   display: grid;
-  max-width: 700px;
-  margin: auto;
-  height: auto;
   vertical-align: middle;
-  overflow: hidden;
   gap: 10px;
-  grid-template-columns: 1fr 1fr;
+  grid-template-columns: 50% 50%;
     grid-template-areas:
     "text2 image1"
     "image2 text3";
     box-sizing: border-box; 
+
 }
 
 #text2 {
@@ -79,6 +76,8 @@ const introText = text.components.introNarrative;
 
 #text3 {
   grid-area: text3;
+  padding: 0rem 1rem 0rem 1rem;   
+
 }
 
 #image1 {
-- 
GitLab