Skip to content
Snippets Groups Projects
ConclusionSection.vue 1.23 KiB
Newer Older
  • Learn to ignore specific revisions
  • Hayley Corson-Dosch's avatar
    Hayley Corson-Dosch committed
    <template>
      <section id="socialVulnerabilityText">
          <div
        id="title"
        class="text-container title-text"
      >
        <h3><p v-html="conclusionText.title"></p></h3>
        <br>
          <div id="text1" class="text-container">
            <p v-html="conclusionText.paragraph1"></p>
          </div>
          <img src="@/assets/images/intersectionality_alaskan-elders.png" class="img" />
          <div id="text2" class="text-container">
            <p v-html="conclusionText.paragraph2"></p>
          </div>
          <div id="text3" class="text-container">
            <p v-html="conclusionText.paragraph3"></p>
          </div>
        </div> 
      </section>
    </template>
      
    <script setup>
      import text from './../assets/text/text.js';
      
      const conclusionText = text.components.socialVulnerabilityText;
    </script>
      
    <style scoped>
      .text-container {
        margin-bottom: 20px; /* Add some space between text containers */
      }
      
      #socialVulnerabilityText img {
        display: block;
        margin: 20px auto; /* Center the images and add space around them */
      }
    </style>
    
    <style lang="scss">
      #intersectionality-tooltip {
        margin-left: -165px;
      }
      #meta-analysis-tooltip {
        margin-left: -150px;
        z-index: 99;
      }
      #environmental-justice-tooltip {
        margin-left: -180px;
      }
    </style>