Merge branch 'dev' of craft-in-america/vue-wp into master

.drone.yml

 
 # push_deploy_key: id_rsa from DRONE host machine
 
-################
-# Build & Test #
-################
-
+##############
+# Test Theme #
+##############
 kind: pipeline
 name: run_tests
 
           - name: node_cache
             path: /drone/src/vue-theme/node_modules
 
+volumes:
+    - name: node_cache
+      host:
+          path: /tmp/cache/drone/node_modules
+    - name: build
+      host:
+          path: /tmp/cache/drone/build
+---
+#############
+# Run Build #
+#############
+kind: pipeline
+name: run_build
+depends_on:
+    # Must run after the first pipeline
+    - run_tests
+trigger:
+    status:
+        # Only runs if the first pipeline was fully successful
+        - success
+        # Only runs on the master branch
+    branch:
+        - dev
+
+steps:
     - name: build
       image: node
       commands:
 ########################
 # Deploy to Production #
 ########################
-
 kind: pipeline
 name: deploy
 depends_on:
     # Must run after the first pipeline
-    - run_tests
+    - run_build
 trigger:
     status:
         # Only runs if the first pipeline was fully successful

plugins/cia-endpoints/includes/reformat-blocks.php

                 $id = end($class_pieces);
             }
             // Format for lightbox wants an object
+            $title = get_the_title($id) . "\n \n" . get_post($id)->post_content;
             $parse_images[$id] = [
                 'src' => $image->getAttribute('src'),
                 'alt' => $image->getAttribute('alt'),
-                'title' => wp_get_attachment_caption($id),
-                'description' => get_the_excerpt($id)
+                'title' => $title
             ];
         }
         return $parse_images;

vue-theme/src/sss/_lightbox.sss

 @import './variables.sss'
 @import './theme.sss'
 
-.vel-fade
+/* .vel-fade
     &-enter-active, &-active
         transition: all 0.3s ease
     &-enter-from, &-leave-to
-        opacity: 1
+        opacity: 1 */
 
 .vel-img
     &-swiper
         position: absolute
         top: 50%
         transform: translate(-50% -50%)
-        /* transition: 0.3s linear */
-        /* will-change: transform opacity */
-    /* background-color: rgba(0, 0, 0, 0.7) */
     box-shadow: 0.5px 0.5px 0.5px 0px rgb(0 0 0 / 30%)
     display: block
     max-height: 80vh
-    max-width: 80vw
+    max-width: 90vw
     position: relative
     transition: transform 0.3s ease-in-out
 
     right: 0
     top: 0
     z-index: 10003
-    img
+    /* img
         transition: none
         &:hover
-            filter: grayscale(0%) brightness(100%)
+            filter: grayscale(0%) brightness(100%) */
 
 .vel-img, .vel-img-wrapper
     user-select: none
 
 .vel-btns-wrapper
+    display: flex 
+    justify-content: center 
     .btn__close, .btn__next, .btn__prev
         color: $cia_black 
         cursor: pointer
-        font-size: 32px
-        opacity: 0.6
         outline: none
         position: absolute
-        top: 50%
+        top: 3%
         transform: translateY(-50%)
-        transition: 0.15s linear
+        /* transition: 0.15s linear
         user-select: none
         &:hover
             opacity: 1
         &.disable, &.disable:hover
-            cursor: default
-            opacity: 0.2
+            cursor: default */
     .btn__next
-        right: 12px
+        right: $ms-7
     .btn__prev
-        left: 12px
-    .btn__close
-        right: 10px
-        top: 24px
-
-@media (max-width: 750px)
-    .vel-img
-        max-height: 95vh
-        max-width: 85vw
-    .vel-btns-wrapper
-        .btn__next, .btn__prev
-            font-size: 20px
-        .btn__close
-            font-size: 24px
-        .btn__next
-            right: 4px
-        .btn__prev
-            left: 4px
-    .vel-modal.is-rtl .vel-btns-wrapper
-        .btn__next
-            left: 4px
-            right: auto
-        .btn__prev
-            left: auto
-            right: 4px
+        left: $ms-7
 
 .vel-modal.is-rtl
     .vel-btns-wrapper
     top: 50%
     -webkit-transform: translate(-50%, -50%)
     transform: translate(-50%, -50%)
-    .ring
+    /* .ring
         display: inline-block
         height: 64px
         width: 64px
             display: block
             height: 46px
             margin: 1px
-            width: 46px
-
-@-webkit-keyframes ring
-    0%
-        transform: rotate(0deg)
-    to
-        transform: rotate(1turn)
-
-@keyframes ring
-    0%
-        transform: rotate(0deg)
-    to
-        transform: rotate(1turn)
-    
+            width: 46px     */
 
 .vel-on-error
     left: 50%
         font-size: 80px
 
 .vel-img-title
-    bottom: 60px
-    color: #ccc
-    cursor: default
-    font-size: 12px
-    left: 50%
-    line-height: 1
-    max-width: 80%
-    opacity: 0.8
-    overflow: hidden
+    bottom: 3%
+    font-size: $ms-0
+    max-width: 90%
     position: absolute
-    text-align: center
-    text-overflow: ellipsis
-    transform: translate(-50%)
-    transition: opacity 0.15s
-    white-space: nowrap
-    &:hover
-        opacity: 1
+    white-space: pre-line
 
 .vel-icon
     fill: currentColor
-    height: 1em
+    height: 1.5rem
+    width: 1.5rem
     overflow: hidden
     vertical-align: -0.15em
-    width: 1em
 
 .vel-toolbar
     display: none
     padding: 0
     position: absolute
     transform: translate(-50%)
+
+    /* figure out way to stop  toolbar form loading */
     .toolbar-btn
         display: none
-        color: #fff
+        /* color: #fff
         cursor: pointer
         flex-shrink: 0
         font-size: 20px
         outline: none
         padding: 6px 10px
         &:active, &:hover
-            background-color: #3d3d3d
+            background-color: #3d3d3d */
 
 .vel-toolbar, .vel-toolbar .toolbar-btn
     background-color: #2d2d2d
     user-select: none
 
-figcaption
-    position: inherit
-    background: none
-    color: $cia_black
+@media (min-width: $medium)
+    .vel-img-title
+        /* bottom: 3% */
+        margin: 0 10vw 
+
+    .vel-icon
+        height: 2rem
+        width: 2rem
+
+    .vel-btns-wrapper
+        .btn__next, .btn__prev
+            top: 50%
+        .btn__next
+            right: $ms--3
+        .btn__prev
+            left: $ms--3
+
+    .vel-modal.is-rtl .vel-btns-wrapper
+        .btn__next
+            left: $ms--3
+            right: auto
+        .btn__prev
+            left: auto
+            right: $ms--3