Merge pull request #1 from tonideleo/SimpleParallaxJS

Simple Parallax JS - Fixed Particle JS integration with dark/light/system mode
tonideleo · Jul 22, 2024 · 6ded7d0 · 6ded7d0
2 parents bc4b78f + 5d2ecfd
commit 6ded7d0
Show file tree

Hide file tree

Showing 8 changed files with 836 additions and 18 deletions.
diff --git a/_config.yml b/_config.yml
@@ -21,6 +21,12 @@ last_updated: true # set to true if you want to display last updated in the foot
 impressum_path: # set to path to include impressum link in the footer, use the same path as permalink in a page, helps to conform with EU GDPR
 back_to_top: true # set to false to disable the back to top button
 
+# -----------------------------------------------------------------------------
+# Extra Special Settings
+# -----------------------------------------------------------------------------
+particle_js: true # Set the use of particle JS
+simple_parallax_js: true # Set the use of Simple Parallax JS
+
 # -----------------------------------------------------------------------------
 # Theme
 # -----------------------------------------------------------------------------
@@ -39,7 +45,7 @@ repo_trophies:
 # will use title and url fields
 # Take a look to https://github.com/jekyll/jekyll-feed for more customization
 
-rss_icon: true
+rss_icon: false
 
 # -----------------------------------------------------------------------------
 # Layout

diff --git a/_layouts/about.liquid b/_layouts/about.liquid
@@ -37,7 +37,6 @@ layout: default
         {% endif %}
       </div>
     {% endif %}
-
     <div class="clearfix">{{ content }}</div>
 
     <!-- News -->

diff --git a/_layouts/bib.liquid b/_layouts/bib.liquid
@@ -2,7 +2,7 @@
 ---
 <div class="row">
   {% if site.enable_publication_thumbnails %}
-    <div class="col col-sm-2 abbr">
+    <div class="col col-sm-4 abbr">
       {%- if entry.abbr -%}
         {%- if site.data.venues[entry.abbr] -%}
           {% assign venue_style = null %}
@@ -34,7 +34,7 @@
             include figure.liquid
             loading="eager"
             path=entry_path
-            sizes = "600px"
+            sizes = "750px"
             class="preview z-depth-1 rounded"
             zoomable=true
             alt=entry.preview

diff --git a/_layouts/default.liquid b/_layouts/default.liquid
@@ -3,6 +3,39 @@
 
   <!-- Head -->
   <head>
+    <!-- Simple Parallax JS -->
+    {% if site.simple_parallax_js %}
+      {% if site.simple_parallax_js == true %}
+        {% comment %} <script defer src="https://cdnjs.cloudflare.com/ajax/libs/simple-parallax-js/5.6.2/simpleParallax.js" integrity="sha512-gbbpFS1amYeHZT44HIou1MbN9b6gmRvyBdisWdE+d/GNn1aEVbUvbnOw1Jh+nW9N5+hd3d1trhhVf0ycE5LJeg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> {% endcomment %}
+        <script type="module" src={{ '/assets/js/simpleParallax.js' | relative_url }}></script>
+        <style>
+          img[class^="img"] {
+            visibility: hidden;
+            transform: scale(1.2); /* Ensure images are scaled initially */
+            transition: transform 0s;
+          }
+        </style>
+        <script defer>
+          document.addEventListener('DOMContentLoaded', function() {
+            var images = document.querySelectorAll('[class^="img"]');
+            images.forEach(function(img) {
+              img.addEventListener('load', function() {
+                img.style.visibility = 'visible';
+                new simpleParallax(img, {
+                  delay: 3,
+                  scale: 1.3,
+                  transition: 'cubic-bezier(0,0,0,1)'
+                });
+              });
+              if (img.complete) {
+                img.dispatchEvent(new Event('load'));
+              }
+            });
+          });
+        </script>
+      {% endif %}
+    {% endif %}
+
     {% if page.redirect %}
       {% if page.redirect == true %}
         {% assign redirect = site.baseurl | append: '/' %}
@@ -19,13 +52,17 @@
   <!-- Body -->
   <body class="{% if site.navbar_fixed %}fixed-top-nav{% endif %} {% unless site.footer_fixed %}sticky-bottom-footer{% endunless %}">
 
+    <!-- Particle JS -->
+    {% if site.particle_js %}
+      {% if site.particle_js == true %}
+        <script src={{ '/assets/js/particles.js' | relative_url }}></script>
+        <script src={{ '/assets/js/particle-call-function.js' | relative_url }}></script>
+        <div id="particles-js"></div>
+      {% endif %}
+    {% endif %}
+
     <!-- Header -->
     {% include header.liquid %}
-    <!-- particles.js container -->
-    <div id="particles-js"></div>
-    <script src="/assets/js/particles.js"></script>
-    <script src="/assets/js/particle-call-function.js"></script>
-
 
     <!-- Content -->
     <div class="container mt-5" role="main">

diff --git a/_sass/_base.scss b/_sass/_base.scss
@@ -737,7 +737,7 @@ a:hover, a:focus {
       margin-bottom: 1rem;
 
       .preview {
-        image-resolution: from-image 400dpi;
+        image-resolution: 600dpi;
       }
 
       .abbr {

diff --git a/assets/js/particle-call-function.js b/assets/js/particle-call-function.js
@@ -1,5 +1,29 @@
-/* particlesJS.load(@dom-id, @path-json, @callback (optional)); */
-particlesJS.load('particles-js', '/assets/json/particles.json', function() {
-    console.log('callback - particles.js config loaded');
+document.addEventListener("DOMContentLoaded", function () {
+  // Function to determine the user's system theme preference
+  const getSystemTheme = () => {
+      if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
+          return "dark";
+      }
+      return "light";
+  };
+
+  // Load and modify particles configuration based on the system theme
+  particlesJS.load('particles-js', '/assets/json/particles.json', function() {
+      console.log('callback - particles.js config loaded');
+
+      // Modify particle colors based on the theme
+      const theme = getSystemTheme();
+      const particles = pJSDom[0].pJS.particles;
+
+      if (theme === "dark") {
+          particles.color.value = '#ffffff';
+          particles.line_linked.color = '#ffffff';
+      } else {
+          particles.color.value = '#000000';
+          particles.line_linked.color = '#000000';
+      }
+
+      // Refresh particles.js settings
+      pJSDom[0].pJS.fn.particlesRefresh();
   });
-  
+});