diff --git a/src/App.vue b/src/App.vue
index 3e51eb0158b7666b5353e4ea0d48bc5194a8d329..b37282dad9b22e06e7ad6a9fb1005e34c5a45f37 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -42,6 +42,8 @@
/* Fonts */
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;500;600;700;800&display=swap');
$SourceSans: 'Source Sans Pro', sans-serif;
+@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@200..800&family=Inter+Tight:ital,wght@0,100..900;1,100..900&display=swap');
+$Dosis: 'Inter Tight', sans-serif;
$textcolor: #000000;
$linkcolor: #d66853;
@@ -87,28 +89,29 @@ iframe, video {
}
body {
- height: 100%;
- background-color: white;
- margin: 0;
- padding: 0;
- line-height: 1.35;
- font-size: 1.9rem;
- font-weight: 400;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- width: 100%;
- @media screen and (max-width: 600px) {
- font-size: 1.6rem;
- }
+ height: 100%;
+ background-color: white;
+ margin: 0;
+ padding: 0;
+ line-height: 1.2;
+ font-size: 1.75rem;
+ font-weight: 400;
+ -webkit-font-smoothing: antialiased;
+ -moz-osx-font-smoothing: grayscale;
+ width: 100%;
+ @media screen and (max-width: 600px) {
+ font-size: 1.6rem;
}
+}
h1{
- font-size: 6rem;
+ font-size: 9rem;
font-weight: 700;
- font-family: $SourceSans;
+ font-family: $Dosis;
line-height: 1;
+ padding-top: 0.25em;
text-align: left;
- //text-shadow: 1px 1px 1px rgba(0,0,0,.8);
- color: $textcolor;
+ //text-shadow: 2px 2px 2px rgba(0,0,0,.1);
+ color: $textcolor;
@media screen and (max-width: 600px) {
font-size: 4.75rem;
}
@@ -128,10 +131,10 @@ h2{
}
h3{
font-size: 3rem;
- padding-top: 1em;
+ padding-top: 0.5em;
padding-bottom: .25em;
- font-family: $SourceSans;
- font-weight: 600;
+ font-family: $Dosis;
+ font-weight: 400;
color: $textcolor;
@media screen and (max-width: 600px) {
font-size: 3.2rem;
diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index f4a734c1be16894e01785b890958a66b48125323..6110669f9fae4be6729d68d122ded1c092f0bb96 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -1,62 +1,141 @@
<template>
<header id="grid-container">
- <div id="title-container" :class="{ mobile: mobileView }">
+ <div id="image-container">
<img
+ ref="heroImage"
id="title-image"
:class="{ mobile: mobileView }"
src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
alt="Social vulnerability and water insecurity"
+ @load="updateSvgDimensions"
/>
+ <img
+ ref="bwHeroImage"
+ id="bw-title-image"
+ :class="{ mobile: mobileView }"
+ src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
+ alt="Social vulnerability and water insecurity (grayscale)"
+ />
+ <!-- Using svg masks with a circle shape to reveal color image where circles are on top of bw -->
+ <svg ref="overlay" id="overlay" xmlns="http://www.w3.org/2000/svg">
+ <defs>
+ <mask id="circleMask">
+ <rect width="100%" height="100%" fill="white" />
+ <circle cx="100" cy="100" r="50" fill="black" />
+ <circle cx="200" cy="150" r="30" fill="black" />
+ <circle cx="300" cy="250" r="90" fill="black" />
+ <circle cx="600" cy="200" r="50" fill="black" />
+ <circle cx="700" cy="550" r="100" fill="black" />
+ <circle cx="800" cy="200" r="70" fill="black" />
+ <circle cx="70" cy="310" r="50" fill="black" />
+ <circle cx="500" cy="450" r="130" fill="black" />
+ <circle cx="420" cy="180" r="40" fill="black" />
+ <circle cx="600" cy="200" r="75" fill="black" />
+ <circle cx="700" cy="350" r="130" fill="black" />
+ <circle cx="800" cy="20" r="110" fill="black" />
+ </mask>
+ </defs>
+ </svg>
+ </div>
+ <div id="text-container">
<h1>Unequal access to water</h1>
<h3>
- How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses
+ How societal factors shape vulnerability to water insecurity
</h3>
- </div>
+ </div>
</header>
</template>
<script setup>
-import { ref } from 'vue';
+import { ref, onMounted, watch } from 'vue';
import { isMobile } from 'mobile-device-detect';
const mobileView = ref(isMobile);
+const heroImage = ref(null);
+const bwHeroImage = ref(null);
+const overlay = ref(null);
+
+const updateSvgDimensions = () => {
+ if (heroImage.value && bwHeroImage.value && overlay.value) {
+ const { width, height } = heroImage.value.getBoundingClientRect();
+ overlay.value.setAttribute('width', width);
+ overlay.value.setAttribute('height', height);
+ bwHeroImage.value.style.width = `${width}px`;
+ bwHeroImage.value.style.height = `${height}px`;
+ bwHeroImage.value.style.top = '0';
+ bwHeroImage.value.style.left = '0';
+ }
+};
+
+onMounted(() => {
+ updateSvgDimensions();
+ window.addEventListener('resize', updateSvgDimensions);
+});
+
+watch(mobileView, () => {
+ updateSvgDimensions();
+});
</script>
<style lang="scss" scoped>
-
#grid-container {
display: grid;
- padding: 0px 0;
- gap: 0px;
- grid-template-columns: 1fr;
- grid-template-areas:
- "title";
+ grid-template-rows: auto auto;
width: 100vw;
- justify-content: center;
margin: auto;
- @media screen and (max-width: 600px) {
- padding: 0 0 20px;
- grid-template-columns: 100%;
- grid-template-rows: max-content max-content;
- }
}
-#title-container {
- grid-area: title;
- text-align: center;
+#image-container {
+ position: relative;
+ width: 100%;
+}
+
+#title-image,
+#bw-title-image {
+ width: 100%;
}
#title-image {
- width: 100vw;
- max-width: 100%;
- margin: auto;
+ display: block;
+}
+
+#bw-title-image {
+ filter: grayscale(100%);
+ position: absolute;
+ top: 0;
+ left: 0;
+ pointer-events: none; /* Ensure the grayscale image doesn't interfere with other interactions */
+ mask: url(#circleMask); /* Apply the SVG mask */
}
-h1, h3 {
- margin-left: 50px;
- margin-right: 50px;
- margin-top: 20px;
- text-align: left;
+#overlay {
+ position: absolute;
+ top: 0;
+ left: 0;
+ pointer-events: none; /* Ensure the SVG overlay doesn't interfere with other interactions */
+}
+
+#text-container {
+ width: 100%;
+ background: rgba(0, 0, 0, 0.95);
+ color: black;
+ padding: 20px;
+ box-sizing: border-box;
+}
+#image-container {
+ color: black;
+ background: rgba(0, 0, 0, 0.95);
+}
+
+h1 {
+ margin: -20px 20px;
+ color: white;
+ text-align: left; /* Optional: Align text to the left */
+}
+h3 {
+ margin: 20px 20px 0px 20px;
+ color: white;
+ text-align: left; /* Optional: Align text to the left */
}
</style>