gallery layout items

centered page caption position, adjusted button sizes and colours

vue-theme/src/components/gallery.vue

@@ -1,15 +1,15 @@
 <template lang="pug">
 .gallery.active.f-col.center
-    button(@click="hideGallery").hide hide
+    button(@click="hideGallery").hide hide gallery &#x2593
 
     figure.f-col.center
         img(v-if="Object.values(images).length > 0" :src="Object.values(images)[selected]['large']")
-        p active: {{ selected }}
+        p Title/Description goes here,&nbsp active: {{ selected }}
 
     .controls.f-row
-        button(v-if="selected > 0" @click="prev") previous
-        .f-grow
-        button(v-if="selected < Object.values(images).length - 1" @click="next") next
+        button(v-if="selected > 0" @click="prev") &#x25C0prev
+        .f-grow 
+        button(v-if="selected < Object.values(images).length - 1" @click="next") next &#x25B6
 </template>
 
 <script>
@@ -66,6 +66,8 @@ export default {
 </script>
 
 <style lang="postcss">
+@import '../sss/variables.sss'
+
 .gallery
     .wrap
         width: 60vw
@@ -75,19 +77,22 @@ export default {
         left: 0
         width: 100%
         height: 100%
-        background-color: black
+        background-color: rgba(34, 12, 64, 0.8)
         z-index: 1001
+        p
+            color: #fff
         > *
             opacity: 100%
             position: relative
             z-index: 1011
         button.hide
+            color: $cia_red
             z-index: 1100
 
         .controls
             position: absolute
             width: 100vw
             button
-                height: 100vw
+                height: 10vw
                 padding: 1vw
 </style>