Merge pull request #568 from aquaductape/aside-sponsers-replace-png-conic-gradient-with-css

Update border highlight animation with css conic-gradient

Author: RomanNabukhotnyi

src/assets/images/dark-gradient.png

@@ -25,7 +25,7 @@ const goldSponsors = asideSponsors.filter(
     {heroSponsors.map((sponsor) => (
       <a
         class:list={[
-          "aside-sponsors__sponsor",
+          "aside-sponsors__sponsor border-highlight",
           "aside-sponsors__hero-sponsor",
         ]}
         href={`https://${sponsor.sponsorEntity.login}`}
@@ -66,7 +66,7 @@ const goldSponsors = asideSponsors.filter(
     {goldSponsors.map((sponsor) => (
       <a
         class:list={[
-          "aside-sponsors__sponsor",
+          "aside-sponsors__sponsor border-highlight",
           ["Sponsor"].includes(sponsor.sponsorEntity.name)
             ? "aside-sponsors__sponsor--hide"
             : "",
@@ -224,27 +224,6 @@ const goldSponsors = asideSponsors.filter(
     height: 74px;
   }
 
-  html.dark .aside-sponsors__sponsor::before {
-    background-image: url("../../assets/images/dark-gradient.png");
-  }
-
-  .aside-sponsors__sponsor::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    width: 240px;
-    height: 240px;
-    background-image: url("../../assets/images/light-gradient.png");
-    background-size: 240px 240px;
-    background-position: center center;
-    transform: rotate(45deg) scale(1.45);
-    animation: spin 10s linear infinite;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
   .aside-sponsors__sponsor:hover::before {
     opacity: 1;
   }

src/assets/images/light-gradient.png

@@ -1390,4 +1390,27 @@
     height: 16px;
     pointer-events: none;
   }
+
+  html.dark .border-highlight::before {
+    --gradient-0: #EE9A01;
+    --gradient-1: #2E1A00;
+  }
+  .border-highlight::before {
+    content: "";
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 240px;
+    height: 240px;
+    --gradient-0: #F5A015;
+    --gradient-1: #FDE1B5;
+    background-image: conic-gradient(from 0deg at 50% 50%, var(--gradient-0) 0deg, var(--gradient-1) 45deg, var(--gradient-1) 135deg, var(--gradient-0) 180deg, var(--gradient-1) 225deg, var(--gradient-1) 315deg, var(--gradient-0) 360deg);
+    background-size: 240px 240px;
+    background-position: center center;
+    transform: translate(-50%, -50%) rotate(45deg) scale(1.45);
+    animation: spin 10s linear infinite;
+    z-index: -1;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
 </style>

src/ui/components/AsideSponsors.astro

@@ -26,7 +26,7 @@ const toasts = [
         data-toast={index}
         data-toast-name={toast.title}
         style={`transform: translateY(${(toasts.length - index - 1) * 100}%) scale(${1 - (toasts.length - index - 1) * 0.06});`}
-        class="toast"
+        class="toast border-highlight"
       >
         <div class="toast-content">
           <div class="toast-icon">
@@ -104,28 +104,6 @@ const toasts = [
     overflow: hidden;
   }
 
-  html.dark .toast::before {
-    background-image: url("../../assets/images/dark-gradient.png");
-  }
-
-  .toast::before {
-    content: "";
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-    width: 240px;
-    height: 240px;
-    background-image: url("../../assets/images/light-gradient.png");
-    background-size: 240px 240px;
-    background-position: center center;
-    transform: rotate(45deg) scale(1.45);
-    animation: spin 10s linear infinite;
-    z-index: -1;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
   .toast-text {
     display: flex;
     flex-direction: column;