Merge branch 'shipshapecode:main' into main

shipshapecode · Oct 9, 2024 · f0bc79b · f0bc79b
2 parents f8ae3ae + c10a056
commit f0bc79b
Show file tree

Hide file tree

Showing 4 changed files with 41 additions and 67 deletions.
diff --git a/src/layouts/Layout.astro b/src/layouts/Layout.astro
@@ -132,12 +132,12 @@ const description = Astro.props.description ?? starpodConfig.description;
             </p>
           </div>
 
-          <div class="hidden lg:block">
-            <Hosts />
-          </div>
           <div class="px-4 sm:px-6 md:px-4 lg:px-16">
             <Platforms />
           </div>
+          <div class="hidden lg:block">
+            <Hosts />
+          </div>
         </div>
 
         <div class="hidden lg:block">

diff --git a/src/pages/sponsor.astro b/src/pages/sponsor.astro
@@ -13,29 +13,17 @@ import AdPackageCard from '../components/AdPackageCard.astro';
 
     <div class="grid grid-cols-1 gap-6 lg:grid-cols-2">
       <AdPackageCard
-        bullets={['Host read ad']}
+        bullets={['Host read ad', '10% off for 3+', '20% off for 6+']}
         heading="30 second ad"
         price="$500"
       />
       <AdPackageCard
-        bullets={['Host read ad']}
+        bullets={['Host read ad', '10% off for 3+', '20% off for 6+']}
         heading="60 second ad"
         price="$1,000"
       />
     </div>
 
-    <AdPackageCard
-      bullets={['Bundle and save!', '10% off for 3+']}
-      heading="3+ ad package"
-      price="$1,000"
-    />
-
-    <AdPackageCard
-      bullets={['Bundle and save!', '20% off for 6+']}
-      heading="6+ ad package"
-      price="$1,000"
-    />
-
     <h2
       class="mb-4 mt-16 text-2xl font-bold text-light-text-heading lg:mb-6 lg:mt-20 lg:text-5xl dark:text-white"
     >

diff --git a/src/styles/buttons.css b/src/styles/buttons.css
@@ -1,57 +1,43 @@
-@property --gradient-btn-start {
-  syntax: '<color>';
-  inherits: false;
-  initial-value: oklch(88.09% 0.018 234.53);
+@property --complete {
+  initial-value: 0;
+  syntax: '<number>';
+  inherits: true;
 }
 
-@property --gradient-btn-stop {
-  syntax: '<color>';
-  inherits: false;
-  initial-value: oklch(88.09% 0.018 234.53);
-}
-
-@media (prefers-color-scheme: dark) {
-  @property --gradient-btn-start {
-    syntax: '<color>';
-    inherits: false;
-    initial-value: oklch(28.08% 0.048 281.19);
-  }
-
-  @property --gradient-btn-stop {
-    syntax: '<color>';
-    inherits: false;
-    initial-value: oklch(28.08% 0.048 281.19);
-  }
-}
+.btn {
+  @apply relative box-border flex rounded-full border border-transparent bg-white bg-clip-padding p-[1px] text-sm font-bold shadow-sm shadow-[#D9E4F0E5] dark:bg-dark-button dark:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)];
+  @apply before:absolute before:-inset-[1px] before:-z-[1] before:rounded-[inherit] before:content-[''];
+  @apply after:absolute after:-inset-[1px] after:-z-[1] after:rounded-[inherit] after:content-[''];
 
-@layer utilities {
-  .gradient-btn-border {
-    background: linear-gradient(
-      180deg,
-      var(--gradient-btn-start) 0%,
-      var(--gradient-btn-stop) 100%
+  &:after {
+    @apply bg-gradient-to-br from-[#D8CCFF] to-[#8A63FF] dark:from-[#42C8F3] dark:to-[#B6EDFF];
+    mask: conic-gradient(
+      from calc(var(--from, 0) * 1deg),
+      #000 calc(var(--complete) * 1%),
+      #0000 calc(var(--complete) * 1%)
+    );
+    transition: --complete 500ms;
+    transition-timing-function: linear(
+      0 0%,
+      0.0027 3.64%,
+      0.0106 7.29%,
+      0.0425 14.58%,
+      0.0957 21.87%,
+      0.1701 29.16%,
+      0.2477 35.19%,
+      0.3401 41.23%,
+      0.5982 55.18%,
+      0.7044 61.56%,
+      0.7987 68.28%,
+      0.875 75%,
+      0.9297 81.25%,
+      0.9687 87.5%,
+      0.9922 93.75%,
+      1 100%
     );
-    transition:
-      --gradient-btn-start 300ms,
-      --gradient-btn-stop 300ms;
-  }
-
-  .gradient-btn-border:hover {
-    --gradient-btn-start: oklch(77.32% 0.129 294.81);
-    --gradient-btn-stop: oklch(67.59% 0.18851878808119876 292.4954219580293);
-    @media (prefers-color-scheme: dark) {
-      --gradient-btn-start: oklch(88.52% 0.079 220.53);
-      --gradient-btn-stop: oklch(78.86% 0.125 223.67);
-    }
   }
 }
 
-.btn {
-  @apply relative box-border flex rounded-full border border-transparent bg-white bg-clip-padding p-[1px] text-sm font-bold shadow-sm shadow-[#D9E4F0E5] dark:bg-dark-button dark:shadow-[0_4px_4px_0_rgba(0,0,0,0.25)];
-  @apply before:absolute before:inset-0 before:-z-[1] before:-m-[1px] before:block before:rounded-[inherit] before:content-[''];
-  @apply before:transition-all before:duration-300 before:ease-in-out;
-
-  &::before {
-    @apply gradient-btn-border;
-  }
+.btn:is(:hover, :focus-visible) {
+  --complete: 100;
 }
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -17,7 +17,7 @@ footer:has(+ #audio-player .player) {
 }
 
 .animated-bottom-border {
-  @apply border-b after:block after:h-[1px] after:w-0 after:bg-gradient-to-r after:from-[#C6B2FF] after:to-[#8D67FF] after:transition-all after:duration-300 after:ease-in-out hover:after:w-full dark:border-dark-border dark:after:from-[#43C9F5] dark:after:to-[#B4EDFF];
+  @apply border-b after:block after:h-[1px] after:w-0 after:bg-gradient-to-r after:from-[#C6B2FF] after:to-[#8D67FF] after:transition-all after:duration-500 after:ease-in-out hover:after:w-full dark:border-dark-border dark:after:from-[#43C9F5] dark:after:to-[#B4EDFF];
 }
 
 .input {