add popup welcome on first visit

src/assets/scss/abstracts/_variables.scss

@@ -86,6 +86,7 @@ $font-family-sans-serif: 'Noto Sans';
 $font-family-text: 'Redaction'; // custom
 
 $font-size-base: 1rem;
+$font-size-base-em: 1em;
 $font-size-sm: $font-size-base * .9;
 
 $line-height-base: 1.5;
@@ -95,6 +96,13 @@ $line-height-sm: $line-height-base;
 // Headings
 $headings-font-weight: 700;
 $headings-line-height: $line-height-base;
+$h1-font-size: $font-size-base-em * 2.5;
+$h2-font-size: $font-size-base-em * 2;
+$h3-font-size: $font-size-base-em * 1.75;
+$h4-font-size: $font-size-base-em * 1.5;
+$h5-font-size: $font-size-base-em * 1.25;
+$h6-font-size: $font-size-base-em;
+
 // Buttons
 $input-btn-padding-y: 0;
 $input-btn-padding-x: .5rem;
@@ -161,7 +169,7 @@ $popover-arrow-outer-color: null;
 
 // HEADER
 $header-spacer-sm: 18px;
-$header-spacer: 35px;
+$header-spacer: 30px;
 $header-height: 86px;
 
 // NODEVIEW

src/assets/scss/base/_bootstrap-overrides.scss

@@ -52,6 +52,6 @@ a:hover {
   @if $color == 'depart' {
     @include text-emphasis-variant(".text-#{$color}", $black, true);
   } @else {
-    @include text-emphasis-variant(".text-#{$color}", darken($value, 30%), true);
+    @include text-emphasis-variant(".text-#{$color}", darken($value, 15%), true);
   }
 }

src/components/layouts/PageView.vue

@@ -1,5 +1,5 @@
 <template lang="html">
-  <div class="page wh-100" :class="'page-' + slug">
+  <div class="page" :class="'page-' + slug">
     <div class="page-wrapper" v-html="page.content" />
   </div>
 </template>
@@ -13,16 +13,9 @@ export default {
     slug: { type: String, required: true }
   },
 
-  data () {
-    return {
-      links: undefined
-    }
-  },
-
   methods: {
     addFootnotes () {
       const links = this.$el.querySelectorAll('.page-wrapper a')
-      console.log('addFootnotes', links)
       links.forEach((link, i) => {
         const number = parseInt(link.hash.replace('#', ''))
         if (!isNaN(number)) {
@@ -38,8 +31,6 @@ export default {
           this.addFootnoteContent(link, i)
         }
       })
-
-      this.links = links
     },
 
     addFootnoteContent (link, i) {
@@ -51,13 +42,14 @@ export default {
     },
 
     onFootnoteLinkClick (e) {
-      document.getElementById(e.target.id + '-content').classList.toggle('show')
-      console.log('onFootnoteLinkClick', e.target.dataset.number, e)
+      const container = document.getElementById(e.target.id + '-content')
+      if (container) {
+        container.classList.toggle('show')
+      }
     }
   },
 
   mounted () {
-    console.log('mounted', this.page.notes)
     if (this.page.notes) this.addFootnotes()
   }
 }
@@ -65,6 +57,12 @@ export default {
 
 <style lang="scss">
 .page {
+  font-size: 1rem;
+
+  @include media-breakpoint-up($size-bp) {
+    font-size: 1.5rem;
+  }
+
   padding: $node-view-spacer-sm-y $node-view-spacer-sm-x;
 
   @include media-breakpoint-up($size-bp) {
@@ -135,7 +133,5 @@ export default {
       margin: 0 0 1em 2em;
     }
   }
-
-
 }
 </style>

src/components/nodes/NodeViewFooter.vue

@@ -2,7 +2,7 @@
   <div
     class="node-view-footer" :class="'node-view-footer-' + mode"
   >
-    <div class="node-view-footer-wrapper d-flex w-100">
+    <div class="node-view-footer-wrapper w-100">
       <div class="tags mb-n2">
         <b-badge
           v-for="tag in node.tags" :key="tag.id"

src/pages/Home.vue

@@ -1,10 +1,21 @@
 <template>
-  <component-debug :component="this">
-  </component-debug>
+  <div class="view-home">
+  </div>
 </template>
 
 <script>
 export default {
-  name: 'Home'
+  name: 'Home',
+
+  data () {
+    return {
+    }
+  },
+
+  created () {
+  }
 }
 </script>
+
+<style lang="scss" scoped>
+</style>

src/pages/Introduction.vue

@@ -1,14 +1,27 @@
 <template>
-  <b-overlay
-    class="intro"
-    :show="page === undefined"
-    z-index="0"
-  >
-    <page-view v-if="page" :page="page" slug="intro" />
-  </b-overlay>
+  <div class="view-introduction" :class="{ 'overflow-hidden': visited === false }">
+    <b-overlay
+      class="intro"
+      :show="page === undefined"
+      z-index="0"
+    >
+      <page-view v-if="page" :page="page" slug="intro" />
+    </b-overlay>
+
+    <div v-if="visited === false" class="page-popup">
+      <div class="page-popup-container h-100">
+        <b-overlay :show="popup === undefined" z-index="0" class="h-100">
+          <button-close @click="onPopupClose()" />
+          <page-view v-if="popup" :page="popup" slug="welcome" />
+        </b-overlay>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 import { PageView } from '@/components/layouts'
 
 
@@ -21,20 +34,42 @@ export default {
 
   data () {
     return {
-      page: undefined
+      page: undefined,
+      popup: undefined
+    }
+  },
+
+  computed: {
+    ...mapGetters(['visited']),
+  },
+
+  methods: {
+    onPopupClose () {
+      this.$store.commit('SET_VISITED', true)
     }
   },
 
   async created () {
+    if (this.visited === false) {
+      this.popup = await this.$store.dispatch('QUERY_PAGE', 'welcome')
+    }
     this.page = await this.$store.dispatch('QUERY_PAGE', 'intro')
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.view-introduction {
+  height: 100%;
+  position: relative;
+
+  &.overflow-hidden {
+    overflow: hidden;
+  }
+}
+
 .intro {
-  min-height: 100%;
-  min-width: 100%;
+  height: 100%;
 
   .page-intro {
     font-family: $font-family-text;
@@ -45,4 +80,43 @@ export default {
     }
   }
 }
+
+.page-popup {
+  border: $line;
+  background-color: $white;
+  position: absolute;
+  width: 100%;
+
+  &-container {
+    height: 100%;
+    width: 100%;
+    overflow-y: auto;
+  }
+
+  @include media-breakpoint-down($size-bp-down) {
+    top: -2px;
+    height: calc(100% + 2px);
+    margin-bottom: -2px;
+  }
+
+  @include media-breakpoint-up($size-bp) {
+    height: 80%;
+    width: 80%;
+    left: 10%;
+    top: 50%;
+    transform: translate(0, -50%);
+  }
+
+  &-container {
+    position: relative;
+
+    .btn-close {
+      position: sticky;
+      z-index: 2;
+      float: right;
+      right: $node-view-spacer-sm-x;
+      top: $node-view-spacer-sm-y;
+    }
+  }
+}
 </style>

src/store/modules/pages.js

@@ -7,14 +7,20 @@ export default {
     welcome: undefined,
     intro: undefined,
     ids: {
-      welcome: 1,
+      welcome: 208,
       intro: 207
-    }
+    },
+    visited: localStorage.getItem('visited') === 'true'
   },
 
   mutations: {
     'SET_PAGE' (state, { slug, page }) {
       state[slug] = page
+    },
+
+    'SET_VISITED' (state, visited) {
+      state.visited = visited
+      localStorage.setItem('visited', visited)
     }
   },
 
@@ -29,5 +35,6 @@ export default {
   },
 
   getters: {
+    visited: state => state.visited
   }
 }