Newer
Older
<template>
<header id="grid-container">
<div
id="title-container"
:class="{ mobile: mobileView}"
class="flex-container"
>
<div class="narrative-text-container">
<div id="narrative-text-par">
<p>
Imagine 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.
</p>
<div class="row">
<div class="col-6">
<img src="@/assets/images/water_security_less-stylized.png" class="img-fluid" style="max-width: 25%; margin-top:20px" />
<br> <!-- Add line break here -->
<div id="narrative-text-par">
<p>
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.
</p>
<div class="row">
<div class="col-6">
<img src="@/assets/images/water_insecurity_less-stylized.png" class="img-fluid" style="max-width: 25%; margin-top:20px" />
</div>
</div>
</div>
<br> <!-- Add line break here -->
<div id="narrative-text-par">
<p>
This nightmarish 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 homes (<a href="https://www.digdeep.org/draining" style="color: blue; text-decoration: underline;" target="_blank">DigDeep 2022</a>), and millions more experience other elements of <span class="tooltip-span">water insecurity</span>, or insufficient access to clean water for livelihoods, development, and human and ecosystem health.
<span class="tooltiptext">Populations cannot maintain access to adequate quantities of water at an acceptable quality to sustain livelihoods, development, and human and ecosystem health.</span>
</div>
<br> <!-- Add line break here -->
<div id="narrative-text-par">
<p>
Though everyone needs and deserves sufficient access to clean water, some people are more likely to experience water insecurity than others. Certain social factors, like demographic characteristics, living conditions, socioeconomic status, and exposure to stressors like drought or pollution, have strong influences on access to clean water. These factors are called “dimensions of <span class="tooltip-span">social vulnerability</span>
<span class="tooltiptext">
Conditions in which societal factors shape exposure to hazards, susceptibility to suffer harm, and ability to cope and recover from losses".
</span>
to water insecurity,” and some closely related aspects, <span class="tooltip-span">or determinants,</span> of these dimensions, like age, family structure, and ethnicity, are better understood than others.
<span class="tooltiptext">
Group of related indicators such as "age" or "family structure".
</span>
</p>
<br> <!-- Add line break here -->
<div id="narrative-text-par">
<p>
How much do we know about the influence of these social determinants on water insecurity? Which determinants do we understand well, and which do we need to understand better? Thanks to recent work by a team of researchers at the U.S. Geological Survey (USGS), we can begin answering these questions, taking us one step closer to equitable water access for all.
</p>
</div>
</div>
</div>
<div
id="intro-container"
:class="{ mobile: mobileView}"
>
</div>
</header>
</template>
<script>
import { isMobile } from 'mobile-device-detect';
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
export default {
name: "NarrativeIntro",
components: {
},
props: {
data: Object
},
data() {
return {
publicPath: import.meta.env.BASE_URL, // find the files when on different deployment roots
mobileView: isMobile, // test for mobile
}
},
mounted(){
const self = this;
}
}
</script>
<style lang="scss" scoped>
#grid-container {
display: grid;
padding: 20px 0 20px 0;
gap: 5px;
grid-template-rows: max-content;
justify-content: center;
margin: auto;
max-width: 90vw;
min-width: 90vw;
}
#title-container {
display: flex;
align-items: flex-start;
justify-content: flex-start;
width: 100%;
}
#image-container-col {
}
.tooltip-span {
position: relative;
display: inline-block;
border-bottom: 1px dotted blue;
}
.tooltiptext {
visibility: hidden;
position: absolute;
z-index: 1;
left: 25%; /* Adjust this value as needed */
right: 15%;
width: 450px;
background-color: rgba(54, 54, 54, 0.95);
color: #fff;
text-align: center;
border-radius: 6px;
padding: 10px;
overflow: visible;
font-size: 16px !important; /* Increase font size */
}
.tooltip-span:hover + .tooltiptext {
visibility: visible;
}
#water-security {
max-width: 340px;
}
#water-insecurity {
max-width: 340px;
}
#water-security.mobile, #water-insecurity.mobile {
width: 100%;
}
.narrative-text-container {
}
.narrative-text-par {
font-size: 12px;
margin-top: 80px;
text-align: left;
margin-left: 80px;
}
#intro-container {
padding: 5px 0px 0px 5px;
}
@media screen and (max-width: 600px) {
#title-container {
flex-direction: column;
align-items: center;
}
#water-security, #water-insecurity {
max-width: 100%;