add text_rebond to NodeViewFooter & style popovers

src/components/nodes/NodeViewBody.vue

@@ -20,7 +20,7 @@
             v-for="link in note.links" :key="link.id"
             :node="link.parents && link.parents.length ? link.parents[0] : link"
             link
-            @open-node="onFootnoteLinkClick(link)"
+            @open-node="onFootnoteLinkClick(link, 'note-' + note.number)"
           >
             <dot-button
               :variant="link.variant"
@@ -67,11 +67,13 @@ export default {
           if (link.parentElement.nodeName === 'SUP') {
             link.parentElement.replaceWith(link)
           }
+          link.setAttribute('href', 'javascript:;')
         }
       })
     },
 
-    onFootnoteLinkClick (node) {
+    onFootnoteLinkClick (node, popoverBtnId) {
+      this.$root.$emit('bv::hide::popover', popoverBtnId)
       if (node.parents && node.parents.length) {
         this.$parent.$emit('open-node', { parentId: node.parents[0].id, childId: node.id })
       } else {
@@ -165,14 +167,30 @@ export default {
   }
 }
 
-.footnote-content,
-.footnote-child-list {
-  > :last-child {
-    margin-bottom: 0;
+.footnote {
+  background-color: $black;
+  color: $white;
+  font-size: 1.25rem;
+
+  @include media-breakpoint-up(sm) {
+    font-size: 1.5rem;
+  }
+
+  h6 {
+    font-size: inherit;
+  }
+
+  &-content,
+  &-child-list {
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &-child-list {
+    margin-top: .5rem;
   }
 }
 
-.footnote-child-list {
-  margin-top: .5rem;
-}
+
 </style>