minimal-music-project 0.1.1 → 0.1.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: aa8cd09ce3d26bf32238cb8de8f66c639c06ade4efa26357eb9769dd11d5f9cb
-  data.tar.gz: 5ac754a0091a922190440778ee1bc00da35a4dd4ec54dae7d4b3524116e7d961
+  metadata.gz: 334a32cc2e891ee3be31cbab9984f40124737162a2560e2488e9ee09a5266b77
+  data.tar.gz: 2899c01395e630bbec84d11954fdc60a9a4f165564a62eb80b093649cdfd7e23
 SHA512:
-  metadata.gz: fb250ad16b4b75552680eb4c742f4a6df9b472568306cafe74e6391c0446f29d08098ab426cdf877896143b0e0dd2e853af060f7bcfd73690f08f84006473657
-  data.tar.gz: 817c34cfc071f0fcf99f9e0f86c5f88bfd0650573085ee79a92bb1eab5af787593331974b4cf765922e8f67cad036d2e2aa93cbed1b3fbea8a77844823cbac07
+  metadata.gz: f21c18aa93035b0a9e053f0d925ded7b9ebd9e6d9c46065d0da691cc1790320bc46b5cccc2e6d637ba07491f267626ea642c7fe6e46db3d94ea938af8126f53a
+  data.tar.gz: f6371fc973e80a669f0d4d77d0100a2746b025ae1023b5fc07f85b0917e777b59db88bceec44144e5f0180486726f695834376427b47e6b87a98ce16984e6ef1

data/README.md

@@ -69,6 +69,7 @@ Structure of `_data/metaData.yml`:
 * author: Site Author name
 * logo: relative url to the logo
 * clickToEnlargeImages: boolean value to enable/disable "full-screen" images on click
+* lang: lang property of HTML.
 * cookies: customize information about site cookies
   * enabled: determine if should show cookies pop-up
   * message: text on cookie pop-up
@@ -81,6 +82,7 @@ Structure of `_data/metaData.yml`:
     * name: bolded on render
     * description: description of the cookie
     * cookieName: under what name it will be saved in the local storage (selected checkbox as "true", unselected as "false")
+    * alwaysAgree: used for cookies, that cannot be disabled. This will make this consent appear on the "cookies" layout with checked and disabled checkbox. It does not add this cookie under *name* to localStorage
 
 Structure of `_data/customs.yml`:
 

data/_data/metaData.yml

@@ -1,6 +1,7 @@
 author: Site Author
 logo: assets/img/band_logo.png
 clickToEnlargeImages: True
+lang: en
 cookies:
   enabled: True
   message: This site might be using cookies! Customize your message or disable cookies in metaData.yml!

data/_includes/common.js

@@ -1,14 +1,28 @@
 (function () {
     window.toggleExpander = function toggleExpander(x) {
-        document.getElementsByClassName("menu")[0].classList.toggle("expanded");
-    }
+        const menu = document.getElementsByClassName("menu")[0];
+        const navigation = document.getElementsByClassName("navigation")[0];
+        if (menu.classList.contains('expanded--visible')) {
+            menu.classList.toggle('expanded--visible');
+            navigation.addEventListener('transitionend', function(e) {
+                menu.classList.toggle("expanded");
+              }, {
+                capture: false,
+                once: true,
+                passive: false
+              });
+        } else {
+            menu.classList.toggle("expanded");
+            setTimeout(() => menu.classList.toggle('expanded--visible'), 20);
+        }
+    };
     window.addEventListener("load", () => {
         // #region click to enlarge images 
         const imageWrappers = document.querySelectorAll(".click-to-enlarge");
         imageWrappers.forEach(imageWrapper => {
-            const img = imageWrapper.getElementsByTagName("img")[0];
             {% if site.data.metaData.clickToEnlargeImages %}
-            img.addEventListener("click", () => {
+            imageWrapper.addEventListener("click", () => {
+                const img = imageWrapper.getElementsByTagName("img")[0];
                 const src = img.attributes.getNamedItem("src");
                 const modal = document.createElement("div");
                 const removeModal = function() {
@@ -17,9 +31,13 @@
                         document.body.removeChild(modal);
                     }, 200);
                 };
+                const newImage = document.createElement("img");
+                newImage.classList.add("modal__picture-zoomed--image");
+                newImage.setAttribute("src", src.value);
                 modal.classList.add("modal__picture-zoomed", "hidden");
-                modal.style.backgroundImage = `URL("${src.value}")`;
+                // modal.style.backgroundImage = `URL("${src.value}")`;
                 modal.addEventListener("click", removeModal);
+                modal.append(newImage);
                 document.body.append(modal);
                 document.body.addEventListener("keyup", e => {
                     if (e.key === 'Escape') {

data/_includes/discography-entry.html

@@ -8,7 +8,6 @@
                         {% if include.currPost.image_alt %}
                         alt="{{ include.currPost.image_alt }}"
                         {% endif %}
-                        class="include.currPost-feed_image"
                         src="{{ include.currPost.image | relative_url }}"
                         {% if include.currPost.responsiveImage %}
                         srcset="{% for img in include.currPost.responsiveImage %}{{ img.src | relative_url }} {{ img.size }}w{% if forloop.last == false %},{% endif %}{% endfor %}"

data/_layouts/default.html

@@ -1,5 +1,5 @@
 <!doctype html>
-<html>
+<html lang="{{ site.data.metaData.lang }}">
   <head>
     {% include common-head.html %}
   </head>

data/_sass/styles/_defaults.scss

@@ -117,11 +117,10 @@ img {
         position: absolute;
         left: 0;
         top: 0;
-        z-index: -1;
         width: 100%;
         height: 100%;
         opacity: 0;
-        box-shadow: 0 0px 12px black;
+        box-shadow: 0 0 12px black;
         opacity: 0;
         transition: opacity 0.3s ease-in-out;
     }

data/_sass/styles/_discography.scss

@@ -13,6 +13,9 @@
                 display: block;
                 margin-right: 0.5em;
             }
+            img {
+                max-height: 20vw;
+            }
         }
         p, a {
             font-size: 0.9em;

data/_sass/styles/_menu.scss

@@ -19,39 +19,43 @@
         width: 100%;
         max-height: $mobile-menu-height;
     }
+    &.expanded--visible {
+        @include mobile {
+            .navigation {
+                opacity: 1;
+            }
+            .menu-contact {
+                opacity: 1;
+            }
+        }
+    }
     &.expanded {
         z-index: 10;
         .menu-top_expand  {
-                .bar_top {
-                    -webkit-transform: rotate(-45deg) translate(-8px, 8px);
-                    transform: rotate(-45deg) translate(-8px, 8px);
-                  }
-                  
-                  .bar_middle {opacity: 0;}
-                  
-                  .bar_bottom {
-                    -webkit-transform: rotate(45deg) translate(-8px, -8px);
-                    transform: rotate(45deg) translate(-8px, -8px);
-              }
-          }
-          .navigation {
-            @include mobile {
+            .bar_top {
+                -webkit-transform: rotate(-45deg) translate(-8px, 8px);
+                transform: rotate(-45deg) translate(-8px, 8px);
+                }
+                
+                .bar_middle {opacity: 0;}
+                
+                .bar_bottom {
+                -webkit-transform: rotate(45deg) translate(-8px, -8px);
+                transform: rotate(45deg) translate(-8px, -8px);
+            }
+        }
+        @include mobile {
+            .navigation {
                 display: block;
+            }
+            .menu-contact {
+                display: flex;
                 position: fixed;
-                left: 0;
-                top: $mobile-menu-height;
-                height: calc(100% - #{$mobile-menu-height});
-                width: 100%;
-                background-color: $white;
-                padding-left: 2em;
+                bottom: 0.5em;
+                left: 1em;
             }
-          }
-          .menu-contact {
-              display: flex;
-              position: fixed;
-              bottom: 0.5em;
-              left: 1em;
-          }
+        }
+
       }
     &-top {
         box-sizing: border-box;
@@ -130,8 +134,17 @@
     }
 
     .navigation {
+        transition: opacity 0.3s ease-in-out;
         @include mobile {
             display: none;
+            opacity: 0;
+            position: fixed;
+            left: 0;
+            top: $mobile-menu-height;
+            height: calc(100% - #{$mobile-menu-height});
+            width: 100%;
+            background-color: $white;
+            padding-left: 2em;
         }
     }
 
@@ -140,8 +153,10 @@
         justify-content:left;
         margin-bottom: 0.6em;
         flex-wrap: wrap;
+        transition: opacity 0.3s ease-in-out;
         @include mobile {
             display: none;
+            opacity: 0;
         }
         a {
             color: $p_text;

data/_sass/styles/_modal.scss

@@ -11,11 +11,18 @@
         top: 0;
         left: 0;
         cursor: zoom-out;
-        transition: opacity 0.2s ease-in-out;
+        transition: opacity 0.3s ease-in-out;
         opacity: 1;
+        display: flex;
+        align-items: center;
+        justify-content: center;
         @include mobile {
             background-size: contain;
         }
+        &--image {
+            max-height: 96vh;
+            max-width: 96vw;
+        }
         &.hidden {
             opacity: 0;
         }

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: minimal-music-project
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.1.2
 platform: ruby
 authors:
 - Patryk Bieszke
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2021-10-02 00:00:00.000000000 Z
+date: 2021-10-03 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll