flex layout

components/GalleryPage.vue

@@ -1,13 +1,16 @@
 <template>
   <div class="gallery-page">
     <div class="gallery-container">
-      <ul class="featured-images">
+      <div class="featured-images">
+        <div class="featured-images__spacer"></div>
+        <ul class="featured-images__list">
           <li v-for="(gallery, index) in galleries"
               class="featured-image image-container"
               :key="index">
             <span>{{ gallery.title }}</span>
           </li>
         </ul>
+      </div>
       <ul class="gallery-thumbs">
         <li v-for="(gallery, index) in galleries"
             :key="index">
@@ -79,6 +82,10 @@ export default {
     width: 100vw;
   }
 
+    .featured-images__spacer {
+      display: none;
+    }
+
   .gallery-thumbs {
     position: absolute;
     top: 0;
@@ -110,7 +117,9 @@ export default {
   }
 
   .gallery-container {
-    // display: flex;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     position: relative;
     height: 100%;
     width: 100%;
@@ -118,20 +127,32 @@ export default {
   }
 
   .featured-images {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    overflow-y: auto;
+  }
+
+    .featured-images__list {
+    }
+
+    .featured-images__spacer {
+      pointer-events: none;
+    }
+
+  .featured-image {
+    width: 10rem;
+    height: 10rem;
+  }
+
+  .image-viewer {
     position: absolute;
-    width: 33%;
-    max-width: 20rem;
-    height: 100%;
     top: 0;
-    right: 0;
+    left: 0;
   }
 
   .gallery-thumbs {
-    position: absolute;
-    width: 100%;
-    height: $thumbs-height;
-    bottom: 0;
-    left: 0;
+    flex: 0 0 $thumbs-height;
 
     overflow: hidden;
     overflow: auto; // TEMP