From bbf8848e9cf307963eaee9c595dbf1b5bff2a394 Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 01:17:56 -0500
Subject: [PATCH 1/6] use composition api

---
 src/components/VizTitle.vue | 94 +++++++++++++++----------------------
 1 file changed, 37 insertions(+), 57 deletions(-)

diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index 07c422d..e5345cf 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -1,101 +1,81 @@
 <template>
   <header id="grid-container">
-    <div 
-      id="title-container"
-      :class="{ mobile: mobileView}"
-    >
+    <div id="title-container" :class="{ mobile: mobileView }">
       <img
         id="title-image"
-        :class="{ mobile: mobileView}"
+        :class="{ mobile: mobileView }"
         src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
         alt="Social vulnerability and water insecurity"
-      >
+      />
       <div id="image-caption">
-        <p style="font-size: 60px;"><strong>Unequal access to water</strong></p>
-        <p style="font-size: 38px; margin-top: 10px">How societal factors shape exposure to water-related hazards,<br>likelihood to suffer harm, and ability to cope and recover from losses</p>
+        <p class="title"><strong>Unequal access to water</strong></p>
+        <p class="subtitle">
+          How societal factors shape exposure to water-related hazards,<br />
+          likelihood to suffer harm, and ability to cope and recover from losses
+        </p>
       </div>
     </div>
-    <div 
-      id="intro-container"
-      :class="{ mobile: mobileView}"
-    > 
-    </div>
+    <div id="intro-container" :class="{ mobile: mobileView }"></div>
   </header>
 </template>
 
-<script>
-  import { isMobile } from 'mobile-device-detect';
+<script setup>
+import { ref } from 'vue';
+import { isMobile } from 'mobile-device-detect';
 
-  export default {
-    name: "VizTitle",
-    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; 
-    }
-  }
+const mobileView = ref(isMobile);
 </script>
 
 <style lang="scss" scoped>
 #grid-container {
   display: grid;
-  padding: 20px 0 20px 0;
+  padding: 20px 0;
   gap: 5px;
-  grid-template-columns: 65vw 25vw;
-  grid-template-rows: max-content max-content max-content max-content;
-  grid-template-areas:
-    "title title"
-    "intro intro";
+  grid-template-columns: 1fr;
+  grid-template-areas: 
+    "title"
+    "intro";
+  width: 100vw;
   justify-content: center;
   margin: auto;
-  max-width: 90vw;
-  min-width: 90vw;
   @media screen and (max-width: 600px) {
-    padding: 0px 0 20px 0;
+    padding: 0 0 20px;
     grid-template-columns: 100%;
-    grid-template-rows: max-content max-content max-content max-content max-content;
-    grid-template-areas:
-      "title"
-      "intro"
+    grid-template-rows: max-content max-content;
   }
 }
+
 #title-container {
   grid-area: title;
-  text-align: center; /* Center the content horizontally */
+  text-align: center;
 }
 
 #title-image {
-  max-width: 100%; /* Ensure the image doesn't exceed the width of its container */
-  margin: auto; /* Center the image horizontally */
+  width: 100vw;
+  max-width: 100%;
+  margin: auto;
 }
 
-#title-image.mobile {
-  width: 100%; /* Ensure the image takes up the full width on mobile */
+#image-caption {
+  font-family: 'Source Sans Pro', sans-serif;
+  margin-top: -10px;
 }
 
-#image-caption {
-  font-family: 'Source Sans Pro', sans-serif; /* Set the font family */
-  margin-top: -10px; /* Add space between the image and the caption */
+.title {
+  font-size: 60px;
+  font-weight: bold;
 }
 
-#image-caption strong {
-  font-weight: bold; /* Set the text to bold */
+.subtitle {
+  font-size: 38px;
+  margin-top: 10px;
 }
 
 #intro-container {
   grid-area: intro;
-  padding: 5px 0px 0px 5px;
+  padding: 5px 0 0 5px;
   @media screen and (max-width: 600px) {
-    padding: 1px 0px 0px 5px;
+    padding: 1px 0 0 5px;
   }
 }
 </style>
-- 
GitLab


From b2d96b65db416c45cd3c9950fd415f0031fed39a Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 01:20:53 -0500
Subject: [PATCH 2/6] use mobile class to set width

---
 src/components/VizTitle.vue | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index e5345cf..2c44142 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -10,8 +10,7 @@
       <div id="image-caption">
         <p class="title"><strong>Unequal access to water</strong></p>
         <p class="subtitle">
-          How societal factors shape exposure to water-related hazards,<br />
-          likelihood to suffer harm, and ability to cope and recover from losses
+          How societal factors shape exposure to water-related hazards, likelihood to suffer harm, and ability to cope and recover from losses
         </p>
       </div>
     </div>
@@ -78,4 +77,12 @@ const mobileView = ref(isMobile);
     padding: 1px 0 0 5px;
   }
 }
+
+#title-image.mobile {
+  width: 100vw; /* Ensure the image takes up the full width on mobile */
+}
+
+#intro-container.mobile {
+  padding: 1px 0 0 5px; /* Specific padding for mobile view */
+}
 </style>
-- 
GitLab


From e6aba124c28f6c68058e75b56ffbe4f66c625924 Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 01:25:15 -0500
Subject: [PATCH 3/6] remove spacing around image

---
 src/components/VizTitle.vue     | 1 +
 src/views/VisualizationView.vue | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index 2c44142..64c6be9 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -26,6 +26,7 @@ const mobileView = ref(isMobile);
 </script>
 
 <style lang="scss" scoped>
+
 #grid-container {
   display: grid;
   padding: 20px 0;
diff --git a/src/views/VisualizationView.vue b/src/views/VisualizationView.vue
index d7a97e5..aa410e3 100644
--- a/src/views/VisualizationView.vue
+++ b/src/views/VisualizationView.vue
@@ -24,7 +24,7 @@
 
 <style lang="scss" scoped>
   #visualization{
-    padding: 6rem 0rem 5rem 0rem;
+    padding: 0rem 0rem 0rem 0rem;
 
   }
 </style>
-- 
GitLab


From 2abce68c9351f17cb6c9811aac035a31e6480313 Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 01:27:44 -0500
Subject: [PATCH 4/6] drop padding

---
 src/components/VizTitle.vue | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index 64c6be9..8c8a579 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -29,7 +29,7 @@ const mobileView = ref(isMobile);
 
 #grid-container {
   display: grid;
-  padding: 20px 0;
+  padding: 0px 0;
   gap: 5px;
   grid-template-columns: 1fr;
   grid-template-areas: 
@@ -81,6 +81,7 @@ const mobileView = ref(isMobile);
 
 #title-image.mobile {
   width: 100vw; /* Ensure the image takes up the full width on mobile */
+  padding: 0px 0 0 0px;
 }
 
 #intro-container.mobile {
-- 
GitLab


From 7cca32fbbbfa4f40e5224d5130845a685864bde6 Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 01:40:50 -0500
Subject: [PATCH 5/6] adjust text scaling

---
 src/App.vue                 | 10 +++++-----
 src/components/VizTitle.vue | 40 +++----------------------------------
 2 files changed, 8 insertions(+), 42 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 4dd7250..95e0fcd 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -110,8 +110,8 @@ body {
       }
   }
 h1{
-  font-size: 4.5rem;
-  font-weight: 500;
+  font-size: 6rem;
+  font-weight: 700;
   font-family: $SourceSans;
   line-height: 1;
   text-align: left;
@@ -125,7 +125,7 @@ h2{
   font-weight: 700;
   text-align: left;
   font-family: $SourceSans;
-  font-size: 6rem;
+  font-size: 4.5rem;
   margin-top: 5px;
   line-height: 1.2;
   color: $textcolor;
@@ -135,11 +135,11 @@ h2{
   }
 }
 h3{
-  font-size: 3.5rem;
+  font-size: 3rem;
   padding-top: 1em;
   padding-bottom: .25em;
   font-family: $SourceSans;
-  font-weight: 700;
+  font-weight: 600;
   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 8c8a579..fda5a00 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -7,14 +7,11 @@
         src="@/assets/images/hero_img_cutout_less-stylized_feather.png"
         alt="Social vulnerability and water insecurity"
       />
-      <div id="image-caption">
-        <p class="title"><strong>Unequal access to water</strong></p>
-        <p class="subtitle">
+        <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
-        </p>
-      </div>
+        </h3>
     </div>
-    <div id="intro-container" :class="{ mobile: mobileView }"></div>
   </header>
 </template>
 
@@ -56,35 +53,4 @@ const mobileView = ref(isMobile);
   margin: auto;
 }
 
-#image-caption {
-  font-family: 'Source Sans Pro', sans-serif;
-  margin-top: -10px;
-}
-
-.title {
-  font-size: 60px;
-  font-weight: bold;
-}
-
-.subtitle {
-  font-size: 38px;
-  margin-top: 10px;
-}
-
-#intro-container {
-  grid-area: intro;
-  padding: 5px 0 0 5px;
-  @media screen and (max-width: 600px) {
-    padding: 1px 0 0 5px;
-  }
-}
-
-#title-image.mobile {
-  width: 100vw; /* Ensure the image takes up the full width on mobile */
-  padding: 0px 0 0 0px;
-}
-
-#intro-container.mobile {
-  padding: 1px 0 0 5px; /* Specific padding for mobile view */
-}
 </style>
-- 
GitLab


From d3162c3686b9cfe09ab447fca3d1a6b7edd7223d Mon Sep 17 00:00:00 2001
From: Cee <cnell@usgs.gov>
Date: Sun, 19 May 2024 14:40:08 -0500
Subject: [PATCH 6/6] adjust alignment

---
 src/App.vue                       |  2 +-
 src/components/NarrativeIntro.vue | 12 +++++-------
 src/components/VizTitle.vue       | 14 ++++++++++----
 3 files changed, 16 insertions(+), 12 deletions(-)

diff --git a/src/App.vue b/src/App.vue
index 95e0fcd..7286728 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -100,7 +100,7 @@ body {
       margin: 0;
       padding: 0;
       line-height: 1.2;
-      font-size: 1.95rem;
+      font-size: 1.75rem;
       font-weight: 400;
       -webkit-font-smoothing: antialiased;
       -moz-osx-font-smoothing: grayscale;
diff --git a/src/components/NarrativeIntro.vue b/src/components/NarrativeIntro.vue
index 5bd1cdb..a2d9e89 100644
--- a/src/components/NarrativeIntro.vue
+++ b/src/components/NarrativeIntro.vue
@@ -84,9 +84,9 @@
       const self = this; 
     }
   }
-  </script>
+</script>
   
-  <style lang="scss" scoped>
+<style lang="scss" scoped>
   #grid-container {
     display: grid;
     padding: 20px 0 20px 0;
@@ -98,17 +98,15 @@
     min-width: 90vw;
   }
   
-  #title-container {
+#title-container {
     display: flex;
     align-items: flex-start;
     justify-content: flex-start;
     width: 100%;
-  }
-  
-  #image-container-col {
 }
+  
 
-  .tooltip-span {
+.tooltip-span {
   position: relative;
   display: inline-block;
   border-bottom: 1px dotted blue;
diff --git a/src/components/VizTitle.vue b/src/components/VizTitle.vue
index fda5a00..f4a734c 100644
--- a/src/components/VizTitle.vue
+++ b/src/components/VizTitle.vue
@@ -27,11 +27,10 @@ const mobileView = ref(isMobile);
 #grid-container {
   display: grid;
   padding: 0px 0;
-  gap: 5px;
+  gap: 0px;
   grid-template-columns: 1fr;
   grid-template-areas: 
-    "title"
-    "intro";
+    "title";
   width: 100vw;
   justify-content: center;
   margin: auto;
@@ -42,7 +41,7 @@ const mobileView = ref(isMobile);
   }
 }
 
-#title-container {
+#title-container  {
   grid-area: title;
   text-align: center;
 }
@@ -53,4 +52,11 @@ const mobileView = ref(isMobile);
   margin: auto;
 }
 
+h1, h3 {
+  margin-left: 50px; 
+  margin-right: 50px; 
+  margin-top: 20px;
+  text-align: left;  
+}
+
 </style>
-- 
GitLab