Improve visual effects on the home page

themes/godotengine/assets/css/main.css

@@ -992,6 +992,8 @@ pre > code {
     /* Make links easier to click but still close to each other. */
     padding-top: 0.75rem;
     padding-bottom: 0.75rem;
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
     margin-top: -0.4375rem;
     margin-bottom: -0.4375rem;
   }

themes/godotengine/layouts/home.htm

@@ -147,6 +147,7 @@ postPage = "{{ :slug }}"
 
   .btn.btn-flat.btn-hero-learn-more {
     background-color: rgb(111 111 111 / 27%);
+    -webkit-backdrop-filter: blur(4px);
     backdrop-filter: blur(4px);
   }
 
@@ -183,8 +184,9 @@ postPage = "{{ :slug }}"
   header {
     box-shadow: none;
     margin-bottom: -70px;
-    backdrop-filter: blur(4px);
     background-color: rgb(134 144 154 / 15%);
+    -webkit-backdrop-filter: blur(4px);
+    backdrop-filter: blur(4px);
   }
   @media (max-width: 1200px) {
     input#nav_toggle_cb:checked ~ header {

themes/godotengine/partials/footer.htm

@@ -177,10 +177,29 @@ description = "footer partial"
               document.querySelector('.hero .credits a span.game').innerText = author.game;
               document.querySelector('.hero .credits a span.by').innerText = author.by;
 
-              // Parallax effect: On page scroll move background-position up
+              // Parallax effect: On page scroll move background-position up.
-              window.onscroll = function() {
+              // This effect is disabled if user opted to have reduced motion in browser/OS settings.
-                document.querySelector('section.hero .background-image').style.backgroundPositionY = 'calc( 50% + ' + window.pageYOffset * 0.5 + 'px)';
+              const reducedMotionCheck = window.matchMedia('(prefers-reduced-motion)');
-              };
+              if (!reducedMotionCheck.matches) {
+                // Parallax effect lags on mobile, so we disable it based on the window resolution.
+                const parallaxWidth = 768;
+                const parallaxImage = document.querySelector('section.hero .background-image');
+
+                window.addEventListener("scroll", () => {
+                  // Only scroll in desktop or tablet mode.
+                  if (window.innerWidth > parallaxWidth) {
+                    parallaxImage.style.backgroundPositionY = 'calc( 50% + ' + window.pageYOffset * 0.5 + 'px)';
+                  }
+                });
+                window.addEventListener("resize", () => {
+                  // Reset the offset, in case we switch to an unsupported state.
+                  if (window.innerWidth > parallaxWidth) {
+                    parallaxImage.style.backgroundPositionY = 'calc( 50% + ' + window.pageYOffset * 0.5 + 'px)';
+                  } else {
+                    parallaxImage.style.backgroundPositionY = '0';
+                  }
+                });
+              }
             }
           },
           afterEnter() {

themes/godotengine/partials/header.htm

@@ -36,7 +36,8 @@ description = "header partial"
         <li {% if selected == 'download' %} class="active" {% endif %}><a href="/download">Download</a></li>
         <li><a href="https://docs.godotengine.org">Learn</a></li>
         <li><a href="https://docs.godotengine.org/en/stable/community/contributing/index.html">Contribute</a></li>
-        <li class="fund {% if this.page.id == 'donate' %} active {% endif %}"><a href="/donate">❤ Donate</a></li>
+        {# We add the control character at the end to force the heart to render as text and not as an emoji. #}
+        <li class="fund {% if this.page.id == 'donate' %} active {% endif %}"><a href="/donate">❤&#xFE0E; Donate</a></li>
       </ul>
     </nav>
   </div>