fix basiclightbox

styl/lib/_basicLightbox.styl

@@ -0,0 +1,73 @@
+// Vars ---------------------------------------------------------------- //
+$basicLightbox__background= rgba(0, 0, 0, .8);
+$basicLightbox__zIndex= 1000 !default;
+$basicLightbox__duration= .4s !default;
+$basicLightbox__timing= ease !default;
+
+// basicLightbox ------------------------------------------------------- //
+.basicLightbox {
+
+	position: fixed;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100vh;
+	background: $basicLightbox__background;
+	opacity: .01; // Start with .01 to avoid the repaint that happens from 0 to .01
+	transition: opacity $basicLightbox__duration $basicLightbox__timing;
+	z-index: $basicLightbox__zIndex;
+	will-change: opacity;
+
+	&--visible {
+		opacity: 1;
+	}
+
+	&__placeholder {
+		max-width: 100%;
+		transform: scale(.9);
+		transition: transform $basicLightbox__duration $basicLightbox__timing;
+		z-index: 1;
+		will-change: transform;
+
+		> img:first-child:last-child,
+		> video:first-child:last-child,
+		> iframe:first-child:last-child {
+			display: block;
+			position: absolute;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			margin: auto;
+			max-width: 95%;
+			max-height: 95%;
+		}
+
+		> video:first-child:last-child,
+		> iframe:first-child:last-child {
+			pointer-events: auto;
+		}
+
+		> img:first-child:last-child,
+		> video:first-child:last-child {
+			width: auto;
+			height: auto;
+		}
+	}
+
+	&--img &__placeholder,
+	&--video &__placeholder,
+	&--iframe &__placeholder {
+		width: 100%;
+		height: 100%;
+		pointer-events: none;
+	}
+
+	&--visible &__placeholder {
+		transform: scale(1);
+	}
+
+}

styl/style.styl

@@ -16,5 +16,4 @@
 @import "lib/_prism";
 @import "lib/_sellingTable";
 @import "lib/_skills";
-
+@import "lib/_basicLightbox"
-@import "../node_modules/basiclightbox/dist/basicLightbox.min.css";