Merge branch 'main' of code.usgs.gov:wma/vizlab/vulnerability-indicators into vertical-swarm

src/App.vue

@@ -102,8 +102,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;
@@ -117,7 +117,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;
@@ -127,11 +127,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;

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;

src/components/VizTitle.vue

 <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>
-      </div>
-    </div>
-    <div 
-      id="intro-container"
-      :class="{ mobile: mobileView}"
-    > 
+      />
+        <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
+        </h3>
     </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;
-  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";
+  padding: 0px 0;
+  gap: 0px;
+  grid-template-columns: 1fr;
+  grid-template-areas: 
+    "title";
+  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 {
+
+#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 */
-}
-
-#title-image.mobile {
-  width: 100%; /* Ensure the image takes up the full width on mobile */
-}
-
-#image-caption {
-  font-family: 'Source Sans Pro', sans-serif; /* Set the font family */
-  margin-top: -10px; /* Add space between the image and the caption */
+  width: 100vw;
+  max-width: 100%;
+  margin: auto;
 }
 
-#image-caption strong {
-  font-weight: bold; /* Set the text to bold */
+h1, h3 {
+  margin-left: 50px; 
+  margin-right: 50px; 
+  margin-top: 20px;
+  text-align: left;  
 }
 
-#intro-container {
-  grid-area: intro;
-  padding: 5px 0px 0px 5px;
-  @media screen and (max-width: 600px) {
-    padding: 1px 0px 0px 5px;
-  }
-}
 </style>

src/views/VisualizationView.vue

@@ -22,7 +22,7 @@
 
 <style lang="scss" scoped>
   #visualization{
-    padding: 6rem 0rem 5rem 0rem;
+    padding: 0rem 0rem 0rem 0rem;
 
   }
 </style>