Removed hardcoded background settings

Alexander Bilz

27.29.2020 82852b4bc73c0bc98ec50a1474183158a4f3588d

Removed hardcoded background settings

 assets/css/medium-zoom.css

File was deleted

 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;
}

 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'
});
mediumZoom(document.querySelectorAll('div.post-content img'));

 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">
<script type="text/javascript" src="{{ $secureJS.Permalink }}" integrity="{{ $secureJS.Data.Integrity }}"></script>