Image Gallery

added title description area, positioning adjustment

vue-theme/src/components/gallery.vue

@@ -1,12 +1,12 @@
 <template lang="pug">
 .gallery.active.f-col.center
-    button(@click="hideGallery").hide hide gallery &#x2593
+    button(@click="hideGallery").hide hide gallery &#x25B2
     figure.f-col.center
         img(v-if="Object.values(images).length > 0" :src="Object.values(images)[selected]['large']")
         p active: {{ selected }}        
         .titledesc.t-left
             h2 Title goes here: create responsive designs that fit different screen sizes
-            p Description goes here: London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. Create responsive designs that fit different screen size. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+            p Description goes here: London. Michaelmas term lately over, and the Lord Chancellor sitting in Lincoln's Inn Hall. Implacable November weather. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
 
     .controls.f-row
         button(v-if="selected > 0" @click="prev") &#x25C0prev
@@ -72,14 +72,14 @@ export default {
 
 .gallery
     .wrap
-        width: 60vw
+        /* width: 60vw */
     &.active
         position: fixed
         top: 0
         left: 0
         width: 100%
         height: 100%
-        background-color: rgba(200, 0, 0, 0.6)
+        background-color: rgba(255, 0, 0, 0.8)
         z-index: 1001
 
         > * /* select for all direct children  */
@@ -90,20 +90,21 @@ export default {
         button.hide
             position: fixed
             top: 0
+            padding: 4px
             color: $cia_red
             z-index: 1100
         figure
             img
+                background-size: contain
                 max-width: 90vw
-                max-height: 82vh
+                max-height: 80vh
             .titledesc
                 position: fixed
-                max-width: 85vw
-                bottom: 10px
+                max-width: 80vw
+                bottom: 1vh
                 background-color: rgba(255, 255, 255, 0.6)
-                padding: 5px 
+                padding: 4px 
                 text-align: left 
-                /* column-width: auto */
                 h2, p
                     color: $cia_black
         .controls
@@ -112,5 +113,5 @@ export default {
             button
                 background-color: rgba(255, 255, 255, 0.1)
                 height: 100vh
-                padding: 1vh
+                padding: 4px
 </style>