diff --git a/css/compiled/lookbook.css b/css/compiled/lookbook.css index 0abdd75..01e66e9 100644 --- a/css/compiled/lookbook.css +++ b/css/compiled/lookbook.css @@ -89,6 +89,32 @@ h1 { .cover { object-fit: cover; } +.lightbox-hidden { + display: flex; + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0, 0, 0, 0.8); + /*background-color: $offblack;*/ + top: -100vh; + transition: .5s ease; + /*opacity: 0.8;*/ + z-index: 1; } + +.lightbox { + transform: translate(0, 100vh); + transition: .5s ease; } + +.modal-contain { + display: flex; + margin: auto auto; + width: 90vw; + height: 90vh; } + +.modal-img { + width: 100%; + object-fit: contain; } + .nametag { min-width: 0; color: #fEfefd; diff --git a/css/lookbook.scss b/css/lookbook.scss index 9d51b74..dd5934d 100644 --- a/css/lookbook.scss +++ b/css/lookbook.scss @@ -53,6 +53,39 @@ h1 { object-fit: cover; } + +.lightbox-hidden { + display: flex; + width: 100%; + height: 100%; + position: fixed; + background-color: rgba(0, 0, 0, 0.8); + /*background-color: $offblack;*/ + top: -100vh; + transition: .5s ease; + /*opacity: 0.8;*/ + z-index: 1; +} + +.lightbox { + transform: translate(0, 100vh); + transition: .5s ease; +} + +.modal-contain { + display: flex; + margin: auto auto; + width: 90vw; + height: 90vh; +} + +.modal-img{ + width: 100%; + object-fit: contain; +} + + + .nametag { min-width: 0; color: $offwhite; @@ -87,3 +120,5 @@ h1 { } + + diff --git a/html/lookbook.html b/html/lookbook.html index 8a8dbf8..1d471d5 100644 --- a/html/lookbook.html +++ b/html/lookbook.html @@ -1,34 +1,44 @@ + + + + +
- March 2016 / InnoDxRetreat -
- +
designed by
 somebody's name
- - - - + + + + + +
- - - + + + +
from
 diff --git a/script/modal.js b/script/modal.js new file mode 100644 index 0000000..4edba7e --- /dev/null +++ b/script/modal.js @@ -0,0 +1,26 @@ +$(document).ready(function() { + $(".img-block").click(function() { + $(".lightbox-hidden").addClass("lightbox"); + var src = $(this).attr("src"); + $(".modal-img").attr("src", src); + // scrollLock(); + }); + $("#modal").click(function() { + $("#modal").removeClass("lightbox"); + // scrollLock(); + }); +}); + + +// var locked = false; + +// function scrollLock() { +// if (locked) { +// $('body').css( 'overflow', 'visible' ); +// locked = false; +// } +// else { +// $('body').css( 'overflow', 'hidden' ); +// locked = true; +// } +// };