diff --git a/src/components/BeeswarmChart.vue b/src/components/BeeswarmChart.vue index 4c7b23537ee95d4f1882b0269103f6eff294b293..59c1833166ac4ad3c137ddb62359caa8f6c09d5b 100644 --- a/src/components/BeeswarmChart.vue +++ b/src/components/BeeswarmChart.vue @@ -2,7 +2,7 @@ <section id="beeswarm"> <div id="text1" class="text-container"> <p> - Everyone needs access to clean water. The gap between water security and <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><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></span> can be the difference between a daydream and a nightmare. People may be more or less vulnerable to water insecurity due to + Everyone needs access to clean water. The gap between water security and <span class="tooltip-group"><span class="tooltip-span"> water insecurity </span><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></span> can be the difference between a daydream and a nightmare. People may be more or less vulnerable to water insecurity due to <span :class="['highlight', 'Demographiccharacteristics', { checked: isChecked.Demographiccharacteristics }]" @click="toggleCategory('Demographiccharacteristics')" @@ -483,8 +483,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95); pointer-events: none; width: 100%; height: 70px; - text-align: center; - + text-align: center } .hidden { @@ -568,7 +567,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95); .tooltiptext { visibility: hidden; - width: 200px; + width: 100px; background-color: #555; color: #fff; text-align: center; @@ -576,7 +575,7 @@ $ThemeGrey: rgba(217, 217, 217, 0.95); padding: 5px; position: absolute; z-index: 1; - margin-left: -170px; + margin-left: -120px; margin-top: 2rem; opacity: 0; transition: opacity 0.3s; diff --git a/src/components/Conclusion.vue b/src/components/Conclusion.vue index 2d7db48d5d4ca695c0cf6372bcba39109fb0e909..8700abc2ceb9f224a4d3e250f5762d75756358ff 100644 --- a/src/components/Conclusion.vue +++ b/src/components/Conclusion.vue @@ -61,18 +61,15 @@ padding: 5px; position: absolute; z-index: 1; - // bottom: 100%; - // left: 50%; - // transform: translateX(-50%); - margin-left: -170px; + margin-left: -120px; margin-top: 2rem; opacity: 0; transition: opacity 0.3s; } .meta-analysis { - width: 400px; - margin-left: -270px; + width: 200px; + margin-left: -80px; } .tooltip:hover .tooltiptext { diff --git a/src/components/Maps.vue b/src/components/Maps.vue index 6be89ba6d3972adf736b2b642df5071c5cfe29c5..d0f6a222a922dcb9d52db6b54873b96aa20e3917 100644 --- a/src/components/Maps.vue +++ b/src/components/Maps.vue @@ -11,7 +11,7 @@ <div class="panel households-panel"> <p v-html="mapText.paragraph1"></p> <img src="@/assets/images/avg_household_size_2022.png" alt="Choropleth map of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest percent of average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) (U.S. Census Bureau, 2022)."> - <figcaption><span class="tooltip"><span class="tooltip-span">Choropleth map</span><span class="tooltiptext">Type of map that displays divided geographical areas or regions that are coloured, shaded or patterned in relation to a data variable. This provides a way to visualise values over a geographical area, which can show variation or patterns across the displayed location.</span></span> of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest percent of average housing size were in Oglala Lakota County, South Dakota (5), Madison County, Idaho (3.9) and Todd County, South Dakota (3.8) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022).</a></figcaption> + <figcaption><span class="tooltip"><span class="tooltip-span">Choropleth map</span><span class="tooltiptext">Type of map that displays divided geographical areas or regions that are coloured, shaded or patterned in relation to a data variable. This provides a way to visualise values over a geographical area, which can show variation or patterns across the displayed location.</span></span> of average household size, of occupied housing units, at the county-level across the contiguous U.S.. The greatest percent of occupied housing units were in Dakota County, Minnesota (97.3%), Lincoln County, South Dakota (97.3%) and Scott County, Minnesota (97%) <a href='https://www.census.gov/data/developers/data-sets/acs-5year.html' target='_blank'>(U.S. Census Bureau, 2022).</a></figcaption> </div> <button class="accordion latino-accordion">Hispanic populations<span class="symbol">+</span></button>