From 61889809e990efaedb03a96328cb5fa582c11333 Mon Sep 17 00:00:00 2001
From: Jonas Leder <jonas@jonasled.de>
Date: Mon, 17 Jan 2022 19:56:52 +0100
Subject: [PATCH] fix basiclightbox

---
 styl/lib/_basicLightbox.styl | 73 ++++++++++++++++++++++++++++++++++++
 styl/style.styl              |  3 +-
 2 files changed, 74 insertions(+), 2 deletions(-)
 create mode 100644 styl/lib/_basicLightbox.styl

diff --git a/styl/lib/_basicLightbox.styl b/styl/lib/_basicLightbox.styl
new file mode 100644
index 0000000..5035fd3
--- /dev/null
+++ b/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);
+	}
+
+}
\ No newline at end of file
diff --git a/styl/style.styl b/styl/style.styl
index 93d3a88..d31d4da 100644
--- a/styl/style.styl
+++ b/styl/style.styl
@@ -16,5 +16,4 @@
 @import "lib/_prism";
 @import "lib/_sellingTable";
 @import "lib/_skills";
-
-@import "../node_modules/basiclightbox/dist/basicLightbox.min.css";
+@import "lib/_basicLightbox"
\ No newline at end of file