update: mobile layout

components/GalleryPage.vue

@@ -0,0 +1,109 @@
+<template>
+  <div class="gallery-page">
+    <div class="container">
+      <ul class="featured-images">
+        <li v-for="(gallery, index) in galleries"
+            class="gallery-thumb-blank image-container"
+            :key="index">
+          <span>{{ gallery.title }}</span>
+        </li>
+      </ul>
+      <ul class="gallery-thumbs">
+        <li v-for="(gallery, index) in galleries"
+            :key="index">
+          <ul class="gallery-thumbs__row">
+            <li class="gallery-thumb-blank"></li>
+            <li v-for="image in gallery.images"
+                class="image-container"
+                :key="image.url">
+              <span>{{ image.thumbUrl }}</span>
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    galleries: {
+      type: Array,
+      required: true
+    }
+  },
+
+  data () {
+    return {
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.gallery-page {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
+.gallery-thumbs__row {
+  display: flex;
+  flex-direction: row;
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+
+
+@media (max-width: $bp__layout) {
+  .gallery-page {
+    padding-top: $site-menu__header-height;
+  }
+
+  .container {
+    position: relative;
+    height: 100%;
+    overflow-x: hidden;
+    overflow-y: auto;
+  }
+
+  .featured-images {
+    width: 100vw;
+  }
+
+  .gallery-thumbs {
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+
+  .gallery-thumbs__row {
+  }
+
+  .gallery-thumb-blank {
+    height: 50vh;
+    width: 100vw;
+    flex: 0 0 100vw;
+  }
+
+  .image-container {
+    height: 50vh;
+  }
+}
+
+
+
+@media (min-width: $bp__layout) {
+  .gallery-page {
+    padding-left: $site-menu__header-width;
+  }
+
+
+}
+</style>