jekyll-theme-ethereal 0.5.0 → 0.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: '0538aea84f31c26de9427c683131e533d10a48fcd2ba27f57b71a9a378b77cc4'
-  data.tar.gz: d524d247a7d8fd95041613f43aa3db2c35862345aabea82845718fc12e778eea
+  metadata.gz: 3db3f8ca287a279a5d02be6dd29b109e809cb5b62c344c83543e662545b436c4
+  data.tar.gz: 9a2fceee9e20f9f7f57c5cc322143b0e969d1e3c82dbf789d9a687818c28696b
 SHA512:
-  metadata.gz: 6dd5bfe81371dd59d541508a218712f6e0aa3d5e99245b1055c56424461bcea706dec112f9f90b1e7e0a2c09f82c754f2142b1e0b7b37915fefeff5c6689684b
-  data.tar.gz: 96d4ebf5ad61645991ff0557827f2f12bf07cca96af5bce2d96d71311ff122262ef3c6073efdbd6be1ebca6ea4a6e0c9ec6c60c68671a64339156b5b0fc19319
+  metadata.gz: 32a8394414ec9f6adc30821131a40902520200440f5e16eb4aa3fda0263f8f881e3e00ce3bb59fa8a788c3b19ee30b13fb72e21b467ce937410f7972a55155a1
+  data.tar.gz: cee3582b33ff070e3325ce2fd04b2aea2278cb1a69df9470af33cec87f8a349f82cab0173662b1e4e9b316899a43e6252573b26376739f93102520f200f69007

data/README.md

@@ -4,7 +4,7 @@
 
 You can preview the theme [here](https://moodule.github.io/jekyll-theme-ethereal)
 
-![Ethereal Theme](assets/images/screenshot.jpg "Ethereal Theme")
+![Ethereal Theme](assets/images/screenshot.webp "Ethereal Theme")
 
 # Features
 
@@ -24,6 +24,8 @@ You can preview the theme [here](https://moodule.github.io/jekyll-theme-ethereal
 
 > **Light**: svg images, thumbs and lazy loading for raster images, few libraries
 
+> **Performant**: parallel loading & execution of assets, support lazy-loading, minified assets, compressed critical path
+
 > **Hardened**: form validation, recaptcha, verified libraries
 
 # Installation
@@ -80,6 +82,57 @@ The contact form is validated using [google's recaptcha plugin][recaptcha-docume
 First, you need to [sign your website up] to enable the plugin.
 Google will provide you with a **client-side integration key**: copy it to `_config.yml` under `recaptcha.sitekey`.
 
+## Images
+
+### Lazy-Loading
+
+Images downloading & rendering can be defered until they enter the viewport.
+This shortens the loading of the webpage, with no consequence on the displayed content since the images are off-screen.
+
+There are 2 possibilities:
+1) using the scripts bundled with the gem
+2) depending on the browser
+
+Browser support for lazy-loading is varying, so it is recommanded to opt for the first solution.
+
+#### Using the gem functionality
+
+- add `class="lazy-loading"`
+- fill the attribute `src` with the path to the placeholder file
+- fill the attribute `data-src` with the path to the content file
+
+Before:
+```html
+<img src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+After:
+```html
+<img class="lazy-loading" src="{{ 'assets/images/placeholder.jpg' | absolute_url }}" data-src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+#### Using the browser functionality
+
+- add `loading="lazy"`
+
+Before:
+```html
+<img src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+After:
+```html
+<img loading="lazy" src="{{ 'assets/images/content.jpg' | absolute_url }}" />
+```
+
+> This functionality is not supported by all the browsers!
+
+### Compression and file formats
+
+It is recommanded to use the `webp` format.
+
+At a given dimension and compression level (quality) the webp files are at least half the size with a smoother feel.
+
 ## Publication
 
 ### On Github Pages

data/_includes/contact_form.html

@@ -1,21 +1,25 @@
-<form method="post" id="{{ include.form_id | 'contact-form' }}" action="#" onsubmit="{{ include.onsubmit_callback | 'sendContactMessage' }}()" onreset="{{ include.onreset_callback | 'resetContactForm' }}()" >
+<form method="post" id="{{ include.form_id | default: 'contact-form' }}" action="javascript:void(0);" onsubmit="{{ include.onsubmit_callback | default: 'processContactRequest' }}()" onreset="{{ include.onreset_callback | default: 'resetContactForm' }}()" >
     <div class="fields">
         <div class="field half">
             <label for="name">Name</label>
-            <input type="text" name="{{ include.name_input_id | 'contact-name' }}" id="{{ include.name_input_id | 'contact-name' }}" required minlength="4" maxlength="64" />
+            <input type="text" name="{{ include.name_input_id | default: 'contact-name' }}" id="{{ include.name_input_id | default: 'contact-name' }}" placeholder="John Doe" required minlength="4" maxlength="64" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" />
         </div>
         <div class="field half">
             <label for="email">Email</label>
-            <input type="email" name="{{ include.email_input_id | 'contact-email' }}" id="{{ include.email_input_id | 'contact-email' }}" required minlength="8" maxlength="64" />
+            <input type="email" name="{{ include.email_input_id | default: 'contact-email' }}" id="{{ include.email_input_id | default: 'contact-email' }}" placeholder="john.doe@example.com" required minlength="8" maxlength="64" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" />
         </div>
         <div class="field">
             <label for="message">Message</label>
-            <textarea name="{{ include.message_input_id | 'contact-message' }}" id="{{ include.message_input_id | 'contact-message' }}" rows="4"vrequired minlength="16" maxlength="256" ></textarea>
+            <textarea name="{{ include.message_input_id | default: 'contact-message' }}" id="{{ include.message_input_id | default: 'contact-message' }}" placeholder="Please reach out!" rows="4" required minlength="16" maxlength="256" onfocusout="{{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }}()" ></textarea>
         </div>
     </div>
     <ul class="actions">
-        <li><div id="{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}" ></div></li>
-        <li><input type="submit" id="{{ include.submit_input_id | 'contact-submit-button' }}" value="Send Message" class="button primary fa-envelope" disabled /></li>
-        <li><input type="reset" id="{{ include.reset_input_id | 'contact-reset-button' }}" value="Reset" class="icon button fa-undo" /></li>
+        <li><input type="submit" id="{{ include.submit_input_id | default: 'contact-submit-button' }}" value="Send Message" class="button primary fa-envelope" disabled /></li>
+        <li><input type="reset" id="{{ include.reset_input_id | default: 'contact-reset-button' }}" value="Reset" class="icon button fa-undo" /></li>
     </ul>
+    <div id="modal-recaptcha-window" class="modal" tabIndex="-1">
+        <div class="inner">
+            <div id="{{ include.recaptcha_widget_id | default: 'recaptcha-checkbox' }}" ></div>
+        </div>
+    </div>
 </form>

data/_includes/contact_script.html

@@ -4,6 +4,7 @@
     const emailInputElement = document.getElementById("{{ include.email_input_id | default: 'contact-email' }}");
     const messageInputElement = document.getElementById("{{ include.message_input_id | default: 'contact-message' }}");
     const submitInputElement = document.getElementById("{{ include.submit_input_id | default: 'contact-submit-button' }}");
+    const modalWindowElement = document.getElementById("{{ include.modal_window_id | default: 'modal-recaptcha-window' }}");
     var recaptchaWidget;
 
     const isInputValid = function() {
@@ -11,42 +12,79 @@
             && emailInputElement.checkValidity()
             && messageInputElement.checkValidity())
     };
-    
-    const isRecaptchaValid = function() {
-        var responseToken = grecaptcha.getResponse(recaptchaWidget);
-        return true;
-    };
 
     const disableSubmitInputElement = function (disabled = true) {
         submitInputElement.disabled = disabled;
     }
 
-    const {{ include.onreset_callback | 'resetContactForm' }} = function() {
+    const {{ include.onfocusout_callback | default: 'toggleSubmitInputElement' }} = function() {
+        if (isInputValid()) {
+            disableSubmitInputElement(false);
+        } else {
+            disableSubmitInputElement();
+        }
+    };
+
+    const showModalWindow = function() {
+        modalWindowElement.classList.add('visible');
+        modalWindowElement.classList.add('loaded');
+        modalWindowElement.focus();
+    }
+
+    const hideModalWindow = function() {
+        modalWindowElement.classList.remove('loaded');
+        modalWindowElement.classList.remove('visible');
+        contactFormElement.focus();
+    }
+
+    const {{ include.onsubmit_callback | default: 'processContactRequest' }} = function() {
+        if (grecaptcha.getResponse(recaptchaWidget).length > 0) {
+            sendContactMessage();
+            hideModalWindow();
+            resetContactForm();
+            grecaptcha.reset();
+        } else {
+            showModalWindow();
+        }
+    };
+
+    const {{ include.onreset_callback | default: 'resetContactForm' }} = function() {
         contactFormElement.reset();
         disableSubmitInputElement();
     };
     
-    const {{ include.onsubmit_callback | 'sendContactMessage()' }} = function() {
-        encodeURIComponent(nameInputElement.value);
-        encodeURIComponent(emailInputElement.value);
-        encodeURIComponent(messageInputElement.value);
+    const sendContactMessage = function() {
+        const data = {
+            name: encodeURIComponent(nameInputElement.value),
+            email: encodeURIComponent(emailInputElement.value),
+            message: encodeURIComponent(messageInputElement),
+            token: grecaptcha.getResponse(recaptchaWidget)
+        };
+        
+        fetch("{{ '/contact' | absolute_url }}", {
+            method: 'POST',
+            mode: 'same-origin',
+            headers: {'Content-Type': 'application/json',},
+            body: JSON.stringify(data),
+        })
+        .then((response) => {
+            alert('Message sent!');
+        })
+        .catch((error) => {
+            console.error('Error:', error);
+        });
     };
     
     var onloadCallback = function() {
-        var verifyForm = function(response) {
-            if (isInputValid() && isRecaptchaValid()) {
-                disableSubmitInputElement(false);
-            } else {
-                disableSubmitInputElement();
-            }
-        };
-        recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | 'recaptcha-checkbox' }}', {
+        recaptchaWidget = grecaptcha.render('{{ include.recaptcha_widget_id | default: 'recaptcha-checkbox' }}', {
             'sitekey' : '{{ site.recaptcha.sitekey }}',
             'theme' : 'dark',
-            'callback' : verifyForm,
-            'expired-callback': disableSubmitInputElement,
-            'size' : 'compact'
+            'size' : 'compact',
+            'callback' : processContactRequest
         });
     };
+
+    modalWindowElement.addEventListener('click', hideModalWindow);
+    modalWindowElement.addEventListener('keyup', hideModalWindow);
 </script>
-<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" defer></script>
+<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit" async defer></script>

data/_includes/head.html

@@ -5,13 +5,13 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
     <link rel="stylesheet" href="{{ 'assets/css/main.css' | absolute_url }}" media="all" />
-    <link rel="stylesheet" href="{{ 'assets/css/large.css' | absolute_url }}" media="screen and (min-width: 981px) and (max-width:1680px)" />
+    <link rel="stylesheet" href="{{ 'assets/css/large.css' | absolute_url }}" media="screen and (min-width: 981px)" />
     <link rel="stylesheet" href="{{ 'assets/css/medium.css' | absolute_url }}" media="screen and (min-width: 737px) and (max-width:980px)" />
     <link rel="stylesheet" href="{{ 'assets/css/small.css' | absolute_url }}" media="screen and (max-width:736px)" />
     <link rel="stylesheet" href="{{ 'assets/css/short.css' | absolute_url }}" media="screen and (min-aspect-ratio:16/7)" />
     <link rel="preload" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i&display=swap" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
     <link rel="preload" href="{{ 'assets/css/fontawesome-all.min.css' | absolute_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
-    <link rel="preload" href="{{ 'assets/css/cookieconsent.css' | absolute_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
+    <link rel="preload" href="{{ 'assets/css/cookieconsent.min.css' | absolute_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
     {%- if include.stylesheets -%}
     {%- for file in include.stylesheets -%}
     <link rel="stylesheet" href="{{ file.url | absolute_url }}" />
@@ -24,5 +24,8 @@
     <link rel="icon" href="{{ site.favicon | absolute_url }}" />
     {%- endif -%}
     <noscript><link rel="stylesheet" href="{{ 'assets/css/noscript.css' | absolute_url }}" /></noscript>
+    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,300i,400i&display=swap" /></noscript>
+    <noscript><link rel="stylesheet" href="{{ 'assets/css/fontawesome-all.min.css' | absolute_url }}" /></noscript>
+    <noscript><link rel="stylesheet" href="{{ 'assets/css/cookieconsent.min.css' | absolute_url }}" /></noscript>
     {% seo %}
 </head>

data/_includes/panel_contact.html

@@ -5,19 +5,19 @@
 {%- assign submit_input_id="contact-submit-button" -%}
 {%- assign reset_input_id="contact-reset-button" -%}
 {%- assign recaptcha_widget_id="recaptcha-checkbox" -%}
-{%- assign onsubmit_callback="sendContactMessage" -%}
+{%- assign onsubmit_callback="processContactRequest" -%}
 {%- assign onreset_callback="resetContactForm" -%}
-
+{%- assign onfocusout_callback="toggleSubmitInputElement" -%}
 <div class="intro {{ include.style.header.color | default: 'color4' }}">
     <h2 class="major">{{ include.header.title | default: 'Contact'}}</h2>
     <p>{{ include.header.description }}</p>
 </div>
 <div class="inner columns divided">
     <div class="span-3-25">
-        {% include contact_form.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback %}
+        {% include contact_form.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback onfocusout_callback=onfocusout_callback %}
     </div>
     <div class="span-1-5">
         {% include social.html color=include.style.icons.color %}
     </div>
 </div>
-{% include contact_script.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback %}
+{% include contact_script.html form_id=form_id name_input_id=name_input_id email_input_id=email_input_id message_input_id=message_input_id submit_input_id=submit_input_id reset_input_id=reset_input_id recaptcha_widget_id=recaptcha_widget_id onsubmit_callback=onsubmit_callback onreset_callback=onreset_callback onfocusout_callback=onfocusout_callback %}

data/_includes/panel_map.html

@@ -1,5 +1,5 @@
-<link rel="stylesheet" href="{{ 'assets/css/mapbox-gl.css' | absolute_url }}" />
-<link rel="stylesheet" href="{{ 'assets/css/mapbox-gl.panel.css' | absolute_url }}" />
+<link rel="preload" href="{{ 'assets/css/mapbox-gl.min.css' | absolute_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
+<link rel="preload" href="{{ 'assets/css/mapbox-gl.panel.min.css' | absolute_url }}" as="style" onload="this.onload=null;this.rel='stylesheet';this.media='all'">
 <div class="intro {{ include.style.header.joined }} {{ include.style.header.color }}">
     <h2 class="major">{{ include.header.title }}</h2>
     <p>{{ include.header.description }}</p>
@@ -10,7 +10,7 @@ var data_points;
 
 function fillMapContainer() {
     fetch("{{ include.data.file | absolute_url }}")
-        .then(response => data_points = response.json())
+        .then(response => response.json())
         .then(json => data_points = json);
     
     mapboxgl.accessToken = "{{ include.data.token }}";

data/_includes/scripts.html

@@ -2,8 +2,8 @@
 <script src="{{ 'assets/js/jquery.min.js' | absolute_url }}" type="text/javascript" defer ></script>
 <script src="{{ 'assets/js/browser.min.js' | absolute_url }}" type="text/javascript" defer ></script>
 <script src="{{ 'assets/js/breakpoints.min.js' | absolute_url }}" type="text/javascript" defer ></script>
-<script src="{{ 'assets/js/lazy-loading.js' | absolute_url }}" type="text/javascript" defer ></script>
-<script src="{{ 'assets/js/main.js' | absolute_url }}" type="text/javascript" defer ></script>
+<script src="{{ 'assets/js/lazy-loading.min.js' | absolute_url }}" type="text/javascript" defer ></script>
+<script src="{{ 'assets/js/main.min.js' | absolute_url }}" type="text/javascript" defer ></script>
 <script src="{{ 'assets/js/cookieconsent.min.js' | absolute_url }}" data-cfasync="false" type="text/javascript" defer ></script>
 <script src="{{ 'assets/js/cookieconsent.style.min.js' | absolute_url }}" type="text/javascript" defer ></script>
 {%- if include.scripts -%}

data/_layouts/default.html

@@ -20,22 +20,22 @@
 
     <body class="is-preload">
 
+        {% include language.html %}
+
         <!-- Page Wrapper -->
         <div id="page-wrapper">
 
             <!-- Wrapper -->
             <div id="wrapper">
 
-                {% include language.html %}
-
                 {{ content }}
 
-                {% include footer.html %}
-
             </div>
 
         </div>
 
+        {% include footer.html %}
+
         {% include scripts.html scripts=scripts %}
 
     </body>

data/_sass/main/components/_gallery.scss

@@ -63,105 +63,106 @@ $pad-small-lr: _size(pad-small-lr);
             height: 50%;
         }
     }
+}
 
-    .modal {
-        @include vendor('display', 'flex');
-        @include vendor('align-items', 'center');
-        @include vendor('justify-content', 'center');
-        @include vendor('pointer-events', 'none');
-        @include vendor('user-select', 'none');
+
+.modal {
+    @include vendor('display', 'flex');
+    @include vendor('align-items', 'center');
+    @include vendor('justify-content', 'center');
+    @include vendor('pointer-events', 'none');
+    @include vendor('user-select', 'none');
+    @include vendor('transition', (
+        'opacity #{_duration(gallery-lightbox-fadein)} ease',
+        'visibility #{_duration(gallery-lightbox-fadein)}',
+        'z-index #{_duration(gallery-lightbox-fadein)}'
+    ));
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity));
+    opacity: 0;
+    outline: 0;
+    visibility: none;
+    z-index: 0;
+
+    &:before {
+        @include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
+        @include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease');
+        @include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}');
+        content: '';
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 4rem;
+        height: 4rem;
+        margin: -2rem 0 0 -2rem;
+        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 4rem;
+        opacity: 0;
+    }
+
+    &:after {
+        content: '';
+        display: block;
+        position: absolute;
+        top: 0.5rem;
+        right: 0.5rem;
+        width: 4rem;
+        height: 4rem;
+        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
+        background-position: center;
+        background-repeat: no-repeat;
+        background-size: 3rem;
+        cursor: pointer;
+    }
+
+    .inner {
+        @include vendor('transform', 'translateY(0.75rem)');
         @include vendor('transition', (
-            'opacity #{_duration(gallery-lightbox-fadein)} ease',
-            'visibility #{_duration(gallery-lightbox-fadein)}',
-            'z-index #{_duration(gallery-lightbox-fadein)}'
+            'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease',
+            'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease'
         ));
-        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-        position: fixed;
-        top: 0;
-        left: 0;
-        width: 100%;
-        height: 100%;
-        background-color: transparentize(_palette(bg), 1 - _misc(gallery-lightbox-opacity));
         opacity: 0;
-        outline: 0;
-        visibility: none;
-        z-index: 0;
 
-        &:before {
-            @include vendor('animation', 'gallery-modal-spinner 1s infinite linear');
-            @include vendor('transition', 'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease');
-            @include vendor('transition-delay', '#{_duration(gallery-lightbox-fadein)}');
-            content: '';
+        img {
             display: block;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            width: 4rem;
-            height: 4rem;
-            margin: -2rem 0 0 -2rem;
-            background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="96px" height="96px" viewBox="0 0 96 96" zoomAndPan="disable"><style>circle {fill: transparent; stroke: #{_palette(fg-bold)}; stroke-width: 1.5px; }</style><defs><clipPath id="corner"><polygon points="0,0 48,0 48,48 96,48 96,96 0,96" /></clipPath></defs><g clip-path="url(#corner)"><circle cx="48" cy="48" r="32"/></g></svg>');
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: 4rem;
-            opacity: 0;
+            max-width: 90vw;
+            max-height: 85vh;
+            box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
         }
+    }
 
-        &:after {
-            content: '';
-            display: block;
-            position: absolute;
-            top: 0.5rem;
-            right: 0.5rem;
-            width: 4rem;
-            height: 4rem;
-            background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="64px" height="64px" viewBox="0 0 64 64" zoomAndPan="disable"><style>line {stroke: #{_palette(fg-bold)};stroke-width: 1.5px;}</style><line x1="20" y1="20" x2="44" y2="44" /><line x1="20" y1="44" x2="44" y2="20" /></svg>');
-            background-position: center;
-            background-repeat: no-repeat;
-            background-size: 3rem;
-            cursor: pointer;
+    &.visible {
+        @include vendor('pointer-events', 'auto');
+        opacity: 1;
+        visibility: visible;
+        z-index: _misc(z-index-base) + 1000;
+
+        &:before {
+            opacity: 1;
         }
+    }
 
+    &.loaded {
         .inner {
-            @include vendor('transform', 'translateY(0.75rem)');
+            @include vendor('transform', 'translateY(0)');
             @include vendor('transition', (
-                'opacity #{_duration(gallery-lightbox-fadein) * 0.5} ease',
-                'transform #{_duration(gallery-lightbox-fadein) * 0.5} ease'
+                'opacity #{_duration(gallery-lightbox-fadein)} ease',
+                'transform #{_duration(gallery-lightbox-fadein)} ease'
             ));
-            opacity: 0;
-
-            img {
-                display: block;
-                max-width: 90vw;
-                max-height: 85vh;
-                box-shadow: 0 1rem 3rem 0 rgba(0, 0, 0, 0.35);
-            }
-        }
-
-        &.visible {
-            @include vendor('pointer-events', 'auto');
             opacity: 1;
-            visibility: visible;
-            z-index: _misc(z-index-base) + 1000;
-
-            &:before {
-                opacity: 1;
-            }
         }
 
-        &.loaded {
-            .inner {
-                @include vendor('transform', 'translateY(0)');
-                @include vendor('transition', (
-                    'opacity #{_duration(gallery-lightbox-fadein)} ease',
-                    'transform #{_duration(gallery-lightbox-fadein)} ease'
-                ));
-                opacity: 1;
-            }
-
-            &:before {
-                @include vendor('transition-delay', '0s');
-                opacity: 0;
-            }
+        &:before {
+            @include vendor('transition-delay', '0s');
+            opacity: 0;
         }
     }
 }