Merge branch 'hero-style' into 'main'

Hero style

See merge request !20

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;

src/components/VizTitle.vue

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