applied basic style to gallery function

vue-theme/src/components/gallery.vue

@@ -2,10 +2,10 @@
 .gallery.f-col.center(v-if="fullscreengallery")
     button(@click="hideGallery") hide
     ul
-        li
-            h1 hello world
-        li
-            h1 hello world again
+        li(v-for="image of images")
+                div
+                    h1 {{ image }}
+
     .controls.f-row
         button(@click="hideGallery") <<<
         button(@click="hideGallery") >>>
@@ -14,6 +14,7 @@
 <script>
 export default {
     props: {
+        images: { type: Array },
         fullscreengallery: { type: Boolean }
     },
     methods: {
@@ -30,7 +31,7 @@ export default {
     top: 0
     left: 0
     width: 100%
-    height: 100vw
+    height: 100vh
     background-color: blue
     opacity: 75%
     z-index: 1001
@@ -40,6 +41,17 @@ export default {
         z-index: 1011
     ul
         list-style: none
+        div
+            position: inherit
+            width: 90vw
+            height: 80vh        
+            background: #00FF0A
+            border: 15px solid #e2e2e2
+            padding: 5px
+            box-sizing: border-box
         h1
+            text-box:right
+            text-align: inherit
             color: green
+            position: inherit
 </style>

vue-theme/src/pages/single.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 .page--single.f-row.between
-    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false")
+    gallery(:fullscreengallery="fullscreengallery" v-on:close="fullscreengallery = false" :images="['hi','hello','it works']")
     article.f-grow.shadow
         header
             h1 {{ type }}:{{ $route.params.slug }} single