feat(sponsors): add fade-in and fade-out effects & fix responsive layout; (#297)

* feat: add sponsor list generator;

* feat: added deploy action;

* fix: fixed layout;

* fix: use utm links inside tooltips;

* fix(CI): set engine version;

* chore: reverted the start button title change;

* fix: add the ability to retry the request to get a list of sponsors;

* chore: change sponsors config & fix sponsor card layout;

* chore: hide 'incognito' sponsor from the list of sponsors;

* chore: add Route4Me sponsor;

* chore: fixed resolution of utm link for manually added sponsors;

* chore: fixed sponsors' tiers resolving;

* chore: draft;

* chore(sponsors): disable utm links generation for `slotozilla-deutschland`;

* chore(draft): Improve sponsors list generator;

* chore(draft): fix origin preset;

* chore(draft): delete generated icon;

* chore(draft): add check to ensure dir exists;

* chore(draft): add check to ensure dir exists;

* chore(draft): activate GitHub data pulling;

* chore(draft): fix crown chevron styling;

* chore(draft): reduce logo min-width;

* chore(draft): add missed `route4me` light logo;

* chore(draft): add a title for readme sponsor block;

* chore(draft): fix description resolving;

* chore(draft): add utm links for sponsors rendered to markdown;

* chore(draft): respect autoUTMLinks for utm links generation;

* chore(draft): set user theme timeout to 24 hours;

* chore(draft): set utm link for markdown output;

* chore(draft): add sponsors' logos;

* chore(draft): fix sponsor.json;

* chore(draft): fix sponsor.json;

* chore(draft): add principal logo;

* chore(draft): add a hotfix for svg logos;

* chore(draft): use image metadata instead of file extension to determine image format;

* chore(draft): add Stytch & Descope links;

* chore(draft): fix utm link generator to respect sponsor's params;

* chore(draft): add page active link rendering;

* chore(draft): notes block refactoring;

* chore(draft): remove graphql packages;

* chore(sponsors): add website link for buzzoid.com;

* chore(sponsors): remove Route4me from the list;

* chore(sponsors): Fixed relative URLs for dark theme logos in the Readme sponsor generator;

* feat(sponsors): add fade-in and fade-out effects & fix responsive layout;

---------

Co-authored-by: Jay <[email protected]>

Author: DigitalBrainJS

scss/home.scss

@@ -239,49 +239,32 @@ html[dir="rtl"] {
 }
 
 .splide {
-  height: 9rem;
-  padding: 0 45px;
+  height: 8rem;
+  padding: 0 55px;
   margin: 0 calc(-1 * var(--margin) / 2);
 }
 
 li.sponsor-card {
-  width: calc(12%);
+  width: max(10%, 170px);
 
   &[data-tier=silver] {
-    width: calc(17%);
+    width: max(15%, 200px);
   }
 
   &[data-tier=gold] {
-    width: calc(22%);
+    width: max(20%, 230px);
   }
 
   &[data-tier=platinum] {
-    width: calc(30%);
+    width: max(25%, 260px);
   }
 }
 
-@media (max-width: 1400px) {
-  li.sponsor-card {
-    width: calc(20%);
-
-    &[data-tier=silver] {
-      width: calc(25%);
-    }
+@media (max-width: 320px) {
 
-    &[data-tier=gold] {
-      width: calc(30%);
-    }
-
-    &[data-tier=platinum] {
-      width: calc(35%);
+  li.sponsor-card {
+    a:has(img) .caption {
+      display: none;
     }
   }
 }
-
-@media (max-width: 1000px) {
-  li.sponsor-card img + .caption {
-    display: none;
-  }
-
-
-}

scss/home_variables.scss

@@ -3,6 +3,7 @@
   --primary-shadow-color: #5b29e45d;
   --secondary-color: #D442C6;
   --fg-color: #1f1c24;
+  --col-bg: #ffffff;
   --margin: 60px;
   --font-sans: 'DM Sans', sans-serif;
   --font-mono: 'DM Mono', monospace;
@@ -42,4 +43,4 @@
       width: 60% !important;
     }
   }
-}
+}

scss/post.scss

@@ -1,17 +1,16 @@
 li.sponsor-card {
-
-  width: calc(15%);
-
 /*  &[data-has-logo=true] .caption {
     display: none;
   }*/
 
+  width: max(20%, 170px);
+
   &[data-tier=gold] {
-    width: calc(25%);
+    width: max(25%, 220px);
   }
 
   &[data-tier=platinum] {
-    width: calc(33%);
+    width: max(30%, 250px);
   }
 }
 
@@ -35,3 +34,20 @@ blockquote{
     padding: 10px;
   }
 }
+
+@media (max-width: 480px) {
+
+  li.sponsor-card {
+    width: calc(100%);
+  }
+}
+
+@media (max-width: 400px) {
+
+  li.sponsor-card {
+
+    a:has(img) .caption {
+      display: none;
+    }
+  }
+}

scss/sponsors.scss

@@ -17,11 +17,8 @@ body.dark {
 }
 
 .splide {
-  height: 7rem;
-/*  background-color: var(--carousel-bg);*/
+  height: 7.3rem;
   border-radius: 5px;
-  padding: 0 55px;
-  margin: 0 calc(-1 * var(--margin) / 2);
 
   .splide__arrows {
     visibility: hidden;
@@ -31,6 +28,30 @@ body.dark {
     height: 100%;
   }
 
+  .splide__track::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    width: 30px;
+    pointer-events: none;
+    background: linear-gradient(to right, transparent, var(--col-bg));
+    z-index: 1;
+  }
+
+  .splide__track::before {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 30px;
+    pointer-events: none;
+    z-index: 1;
+    background: linear-gradient(to left, transparent, var(--col-bg));
+  }
+
   &:hover .splide__arrows {
     visibility: visible;
   }
@@ -40,7 +61,7 @@ li.sponsor-card {
 
   width: calc(15%);
 
-  padding: 1.2rem 0;
+  padding: 1.5rem 0 1.5rem 1.5rem;
 
   .chevron{
     flex-grow: 0;