gallery styling

title description box and img position adjustment

vue-theme/src/components/gallery.vue

@@ -1,10 +1,12 @@
 <template lang="pug">
 .gallery.active.f-col.center
     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 Title/Description goes here,&nbsp active: {{ selected }}
+        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.
 
     .controls.f-row
         button(v-if="selected > 0" @click="prev") &#x25C0prev
@@ -77,22 +79,38 @@ export default {
         left: 0
         width: 100%
         height: 100%
-        background-color: rgba(34, 12, 64, 0.8)
+        background-color: rgba(200, 0, 0, 0.6)
         z-index: 1001
-        p
-            color: #fff
-        > *
+
+        > * /* select for all direct children  */
             opacity: 100%
             position: relative
+            max-height: 95vh
             z-index: 1011
         button.hide
+            position: fixed
+            top: 0
             color: $cia_red
             z-index: 1100
-
+        figure
+            img
+                max-width: 90vw
+                max-height: 82vh
+            .titledesc
+                position: fixed
+                max-width: 85vw
+                bottom: 10px
+                background-color: rgba(255, 255, 255, 0.6)
+                padding: 5px 
+                text-align: left 
+                /* column-width: auto */
+                h2, p
+                    color: $cia_black
         .controls
             position: absolute
             width: 100vw
             button
-                height: 10vw
-                padding: 1vw
+                background-color: rgba(255, 255, 255, 0.1)
+                height: 100vh
+                padding: 1vh
 </style>