Deploying and installing -- add some "dark mode" icon versions

Author: JayGeorge

public/css/components/tiles-with-description.css

@@ -70,7 +70,7 @@
     }
     .c-tiles-with-description__item__thumbnail {
         padding: var(--spacing-s-2);
-        margin-block-end: var(--spacing-m);
+        margin-block-end: var(--spacing-s-1);
         text-align: center;
         background: var(--color-gradient-full-light-6);
         border: var(--dark-mode-border);

public/img/icons/fortrabbit-dark-mode.svg

@@ -13,7 +13,8 @@ <h2>Laravel Forge</h2>
     <div class="c-icon-grid__item">
         <a href="/deploying/laravel-cloud">
             <div class="c-icon-grid__icon">
-                <img src="/img/laravel-cloud-logo.svg" alt="Laravel Cloud Logo" />
+                <img src="/img/laravel-cloud-logo.svg" class="u-hide-in-dark-mode" alt="Laravel Cloud Logo" />
+                <img src="/img/icons/laravel-cloud-dark-mode.svg" class="u-hide-in-light-mode" alt="Laravel Cloud Logo" />
             </div>
         </a>
         <h2>Laravel Cloud</h2>
@@ -22,7 +23,8 @@ <h2>Laravel Cloud</h2>
     <div class="c-icon-grid__item">
         <a href="/deploying/ploi">
             <div class="c-icon-grid__icon">
-                <img src="/img/icons/ploi.png" alt="Ploi logo" width="483" height="183" />
+                <img src="/img/icons/ploi.png" class="u-hide-in-dark-mode" alt="Ploi logo" width="483" height="183" />
+                <img src="/img/icons/ploi-dark-mode.png" class="u-hide-in-light-mode" alt="Ploi logo" width="483" height="183" />
             </div>
         </a>
         <h2>Ploi</h2>
@@ -31,7 +33,8 @@ <h2>Ploi</h2>
     <div class="c-icon-grid__item">
         <a href="/deploying/fortrabbit">
             <div class="c-icon-grid__icon">
-                <img src="/img/fortrabbit.svg" alt="Fortrabbit Logo" />
+                <img src="/img/fortrabbit.svg" class="u-hide-in-dark-mode" alt="Fortrabbit Logo" />
+                <img src="/img/icons/fortrabbit-dark-mode.svg" class="u-hide-in-light-mode" alt="Fortrabbit Logo" />
             </div>
         </a>
         <h2>Fortrabbit</h2>
@@ -67,7 +70,8 @@ <h2>Netlify</h2>
     <div class="c-icon-grid__item">
         <a href="/deploying/vercel">
             <div class="c-icon-grid__icon">
-                <img src="/img/vercel-logo.svg" alt="Vercel Logo" />
+                <img src="/img/vercel-logo.svg" class="u-hide-in-dark-mode" alt="Vercel Logo" />
+                <img src="/img/icons/vercel-dark-mode.svg" class="u-hide-in-light-mode" alt="Vercel Logo" />
             </div>
         </a>
         <h2>Vercel</h2>

public/img/icons/laravel-cloud-dark-mode.svg

@@ -68,7 +68,8 @@ <h3>Forge</h3>
         <div class="c-icon-grid__item">
             <a href="https://ploi.io/statamic">
                 <div class="c-icon-grid__icon">
-                    <img src="/img/icons/ploi.png" alt="Ploi logo" width="483" height="183" />
+                    <img src="/img/icons/ploi.png" class="u-hide-in-dark-mode" alt="Ploi logo" width="483" height="183" />
+                    <img src="/img/icons/ploi-dark-mode.png" class="u-hide-in-light-mode" alt="Ploi logo" width="483" height="183" />
                 </div>
             </a>
             <h3>Ploi</h3>