diff --git a/components/GalleryPage.vue b/components/GalleryPage.vue index 898b877..cf4f816 100644 --- a/components/GalleryPage.vue +++ b/components/GalleryPage.vue @@ -1,9 +1,9 @@ @@ -66,9 +67,10 @@ export default { padding-top: $site-menu__header-height; } - .container { + .gallery-container { position: relative; height: 100%; + width: 100%; overflow-x: hidden; overflow-y: auto; } @@ -86,7 +88,7 @@ export default { .gallery-thumbs__row { } - .gallery-thumb-blank { + .featured-image { height: 50vh; width: 100vw; flex: 0 0 100vw; @@ -95,15 +97,54 @@ export default { .image-container { height: 50vh; } + } @media (min-width: $bp__layout) { + $thumbs-height: 8rem; + .gallery-page { padding-left: $site-menu__header-width; } + .gallery-container { + // display: flex; + position: relative; + height: 100%; + width: 100%; + overflow: hidden; + } + .featured-images { + position: absolute; + width: 33%; + max-width: 20rem; + height: 100%; + top: 0; + right: 0; + } + + .gallery-thumbs { + position: absolute; + width: 100%; + height: $thumbs-height; + bottom: 0; + left: 0; + + overflow: hidden; + overflow: auto; // TEMP + } + + .gallery-thumbs__row { + height: $thumbs-height; + } + + .featured-image { + &--mobile-only { + display: none; + } + } }