From d684af2a26ee8a4cec454397fa1b52827987e82a Mon Sep 17 00:00:00 2001
From: Alexander Bilz <mail@alexbilz.com>
Date: Wed, 27 May 2020 15:43:17 +0000
Subject: [PATCH] Merge pull request #25 from lxndrblz/Medium-Zoom-Darkmode
---
/dev/null | 41 --------------------
assets/js/medium-zoom.js | 13 +-----
assets/css/style.css | 45 ++++++++++++++++++++++
layouts/partials/medium-zoom.html | 4 -
4 files changed, 49 insertions(+), 54 deletions(-)
diff --git a/assets/css/medium-zoom.css b/assets/css/medium-zoom.css
deleted file mode 100644
index 46929c7..0000000
--- a/assets/css/medium-zoom.css
+++ /dev/null
@@ -1,41 +0,0 @@
-.medium-zoom-overlay {
- position: fixed;
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- opacity: 0;
- transition: opacity 300ms;
- will-change: opacity;
- }
-
- .medium-zoom--opened .medium-zoom-overlay {
- cursor: pointer;
- cursor: zoom-out;
- opacity: 1;
- }
-
- .medium-zoom-image {
- cursor: pointer;
- cursor: zoom-in;
- /*
- The `transition` is marked as "!important" for the animation to happen
- even though it's overriden by another inline `transition` style attribute.
- This is problematic with frameworks that generate inline styles on their
- images (e.g. Gatsby).
- See https://github.com/francoischalifour/medium-zoom/issues/110
- */
- transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
- z-index: 100;
- }
-
- .medium-zoom-image--hidden {
- visibility: hidden;
- }
-
- .medium-zoom-image--opened {
- position: relative;
- cursor: pointer;
- cursor: zoom-out;
- will-change: transform;
- }
\ No newline at end of file
diff --git a/assets/css/style.css b/assets/css/style.css
index a5ee80f..5079229 100644
--- a/assets/css/style.css
+++ b/assets/css/style.css
@@ -757,3 +757,48 @@
display: grid;
}
}
+
+
+/* Medium zoom */
+.medium-zoom-overlay {
+ position: fixed;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ opacity: 0;
+ transition: opacity 300ms;
+ will-change: opacity;
+ background: var(--bg-color);
+}
+
+.medium-zoom--opened .medium-zoom-overlay {
+ cursor: pointer;
+ cursor: zoom-out;
+ opacity: 1;
+}
+
+.medium-zoom-image {
+ cursor: pointer;
+ cursor: zoom-in;
+ /*
+ The `transition` is marked as "!important" for the animation to happen
+ even though it's overriden by another inline `transition` style attribute.
+ This is problematic with frameworks that generate inline styles on their
+ images (e.g. Gatsby).
+ See https://github.com/francoischalifour/medium-zoom/issues/110
+ */
+ transition: transform 300ms cubic-bezier(0.2, 0, 0.2, 1) !important;
+ z-index: 100;
+}
+
+.medium-zoom-image--hidden {
+ visibility: hidden;
+}
+
+.medium-zoom-image--opened {
+ position: relative;
+ cursor: pointer;
+ cursor: zoom-out;
+ will-change: transform;
+}
\ No newline at end of file
diff --git a/assets/js/medium-zoom.js b/assets/js/medium-zoom.js
index 3834b0c..c1c0238 100644
--- a/assets/js/medium-zoom.js
+++ b/assets/js/medium-zoom.js
@@ -47,10 +47,9 @@
throw new TypeError("The provided selector is invalid.\n" + "Expects a CSS selector, a Node element, a NodeList or an array.\n" + "See: https://github.com/francoischalifour/medium-zoom");
}
};
- var createOverlay = function createOverlay(background) {
+ var createOverlay = function createOverlay() {
var overlay = document.createElement("div");
overlay.classList.add("medium-zoom-overlay");
- overlay.style.background = background;
return overlay;
};
var cloneTarget = function cloneTarget(template) {
@@ -117,9 +116,6 @@
var update = function update() {
var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
var newOptions = options;
- if (options.background) {
- overlay.style.background = options.background;
- }
if (options.container && options.container instanceof Object) {
newOptions.container = _extends({}, zoomOptions.container, options.container);
}
@@ -423,12 +419,11 @@
}
zoomOptions = _extends({
margin: 0,
- background: "#fff",
scrollOffset: 40,
container: null,
template: null
}, zoomOptions);
- var overlay = createOverlay(zoomOptions.background);
+ var overlay = createOverlay();
document.addEventListener("click", _handleClick);
document.addEventListener("keyup", _handleKeyUp);
document.addEventListener("scroll", _handleScroll);
@@ -452,6 +447,4 @@
return mediumZoom;
});
-mediumZoom(document.querySelectorAll('div.post-content img'), {
- background: '#fff'
-});
\ No newline at end of file
+mediumZoom(document.querySelectorAll('div.post-content img'));
\ No newline at end of file
diff --git a/layouts/partials/medium-zoom.html b/layouts/partials/medium-zoom.html
index 97e6128..3aae0e0 100644
--- a/layouts/partials/medium-zoom.html
+++ b/layouts/partials/medium-zoom.html
@@ -1,5 +1,3 @@
{{ $js := resources.Get "js/medium-zoom.js" }}
{{ $secureJS := $js | resources.Minify | resources.Fingerprint }}
-<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
-{{ $style := resources.Get "css/medium-zoom.css" | resources.Minify | resources.Fingerprint }}
-<link rel="stylesheet" href="{{ $style.Permalink }}" integrity="{{ $style.Data.Integrity }}" type="text/css">
\ No newline at end of file
+<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>
\ No newline at end of file
--
Gitblit v1.10.0