Merge pull request #477 from coppolaemilio/adding-game-to-showcase

* Adding Dome Keeper to the Showcase
* 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/pages/showcase.htm

@@ -64,6 +64,15 @@ is_hidden = 0
   {# 3 columns at most (instead of 4). #}
   {# Projects are sorted from most recent to least recent release date. #}
   <section class="flex grid showcase-cards" style="grid-template-columns: repeat(auto-fill, minmax(300px, 1fr))">
+    {%
+      partial "showcase/list-item"
+      title="Dome Keeper"
+      author="Bippinbits"
+      platforms="windows, macos, linux"
+      slug="dome-keeper"
+      image="dome-keeper.jpg"
+      placeholder="linear-gradient(90deg, #b5c1d8 2%, #a8b5d5 9%, #707473 47%, #666a6a 57%)"
+    %}
     {%
       partial "showcase/list-item"
       title="Pingo Adventure"

themes/godotengine/pages/showcase/dome-keeper.htm

@@ -0,0 +1,35 @@
+title = "Showcase | Dome Keeper"
+url = "/showcase/dome-keeper"
+layout = "showcase-item"
+description = "Defend against waves of alien attackers in this innovative roguelike survival miner. Dig for resources and choose from powerful upgrade paths. Is there enough time to mine a little deeper and get back to defend before the monsters attack your dome?"
+is_hidden = 0
+==
+{##}
+{% put title %} Dome Keeper {% endput %}
+{% put author %} Bippinbits {% endput %}
+{% put author_url %} https://bippinbits.com/ {% endput %}
+{% put release_date %} September 2022 {% endput %}
+{% put platforms %} windows, macOS, linux {% endput %}
+
+{% put description %}
+<p>
+  Defend your dome from wave after wave of monsters in this innovative roguelike survival miner, Dome Keeper. Use the time between each attack to dig beneath the surface in search of valuable resources and artifacts – use them carefully to choose powerful upgrades and bonuses. Set on beautifully crafted pixel art alien planets, Dome Keeper offers a captivating atmosphere with music tracks fusing melodic and synthetic creations.
+</p>
+<h3>Dig</h3>
+<p>
+	Drill tunnels beneath your dome in search of precious materials or to uncover powerful hidden artifacts. Watch the time, you need to get back to the dome and be ready when the next wave of attack comes. How deep will you get this time? How much can you carry back?
+</p>
+<h3>Defend</h3>
+<p>
+	Take control of your defenses to fend off the alien attacks. Air and ground, slow and fast; the attackers must be prioritized and dealt with before they tear your dome apart.
+</p>
+<h3>Develop</h3>
+<p>
+	Utilize your mineral harvest to unlock powerful upgrades: augment your weapons, enhance the impact of your drill, boost your jetpack’s max speed, and many other upgrade paths -- each of which gives you and your dome the best odds for survival!
+</p>
+{% endput %}
+
+{% put link_steam %} https://store.steampowered.com/app/1637320/Dome_Keeper/ {% endput %}
+{% put image %} dome-keeper.jpg {% endput image %}
+{% put placeholder %} linear-gradient(90deg, #b5c1d8 2%, #a8b5d5 9%, #707473 47%, #666a6a 57%) {% endput %}
+{% put youtube_embed_code %} qTnGtmh8eTE {% endput %}

themes/godotengine/partials/footer.htm

@@ -143,13 +143,13 @@ description = "footer partial"
                   game: 'Beat Invaders',
                   by: 'by Raffaele Picca',
                   url: 'https://www.raffaelepicca.com/',
-                  image: '/themes/godotengine/assets/home/hero/beat-invaders.jpg',
+                  image: '/themes/godotengine/assets/showcase/beat-invaders.jpg',
                 },
                 {
                   game: 'Ex Zodiac',
                   by: 'by Ben Hickling',
                   url: 'https://store.steampowered.com/app/1249480/ExZodiac/',
-                  image: '/themes/godotengine/assets/home/hero/ex-zodiac.png',
+                  image: '/themes/godotengine/assets/showcase/ex-zodiac.png',
                 },
                 {
                   game: 'Primal Light',
@@ -163,7 +163,12 @@ description = "footer partial"
                   url: 'https://store.steampowered.com/app/975150/Resolutiion/',
                   image: '/themes/godotengine/assets/home/hero/resolutiion.jpg',
                 },
-                
+                {
+                  game: 'Dome Keeper',
+                  by: 'by Bippinbits',
+                  url: 'https://bippinbits.com/',
+                  image: '/themes/godotengine/assets/showcase/dome-keeper.jpg',
+                },
               ];
 
               let author = authors[Math.floor(Math.random() * authors.length)];
@@ -172,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
-              window.onscroll = function() {
-                document.querySelector('section.hero .background-image').style.backgroundPositionY = 'calc( 50% + ' + window.pageYOffset * 0.5 + 'px)';
-              };
+              // Parallax effect: On page scroll move background-position up.
+              // This effect is disabled if user opted to have reduced motion in browser/OS settings.
+              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>