Merge branch 'img-grid' into 'main'

Img grid layout

See merge request !37

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: {

src/components/NarrativeIntro.vue

 <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" 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">
+        <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>
@@ -41,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;
@@ -54,11 +55,52 @@ const introText = text.components.introNarrative;
 }
 
 .text-container {
-  margin-bottom: 20px; /* Add some space between text containers */
+  margin-bottom: 20px;
+}
+
+#grid-container {
+  display: grid;
+  vertical-align: middle;
+  gap: 10px;
+  grid-template-columns: 50% 50%;
+    grid-template-areas:
+    "text2 image1"
+    "image2 text3";
+    box-sizing: border-box; 
+
+}
+
+#text2 {
+  grid-area: text2;
+}
+
+#text3 {
+  grid-area: text3;
+  padding: 0rem 1rem 0rem 1rem;   
+
+}
+
+#image1 {
+  grid-area: image1;
+}
+
+#image2 {
+  grid-area: image2;
+}
+
+#image1,
+#image2 {
+  width: 100%;
 }
 
-#narrativeIntro img {
-  display: block;
-  margin: 20px auto; /* Center the images and add space around them */
+@media screen and (max-width: 700px) {
+  #grid-container {
+    grid-template-columns: 1fr;
+    grid-template-areas:
+      "image1"
+      "text2"
+      "image2"
+      "text3";
+  }
 }
 </style>