Change the layout of the "Support us" page, to highlight the Spyder project (#65)

Author: conradolandia

src/lib/blocks/Blog.svelte

@@ -1,10 +1,10 @@
 <script>
-  import { _, waitLocale, locale } from "svelte-i18n";
+  import { _, locale, waitLocale } from "svelte-i18n";
 
   import { browser } from "$app/environment";
   import { base } from "$app/paths";
 
-  import { formattedPubDate, fetchAuthorsMetadata } from "$lib/utils";
+  import { fetchAuthorsMetadata, formattedPubDate } from "$lib/utils";
 
   import Loader from "$lib/components/Loader.svelte";
   import Pagination from "$lib/components/Pagination.svelte";
@@ -62,7 +62,7 @@
         font-extralight
         text-mine-shaft-600
         dark:text-mine-shaft-200
-        my-16 md:my-32"
+        my-16 xl:my-32"
     >
       {$_("config.blog.title")}
     </h1>
@@ -71,7 +71,7 @@
       {#await postsWithAuthor}
         <Loader classes="fill-black dark:fill-white" />
       {:then loadedPosts}
-        <div class="grid grid-flow-row gap-24">
+        <div class="grid grid-flow-row gap-16 xl:gap-24">
           {#each loadedPosts as post}
             <article>
               <h2

src/lib/blocks/ContributorBlock.svelte

@@ -30,7 +30,7 @@
   class="flex flex-col items-center mx-auto {containerSizeClass[size]}"
 >
   {#if title}
-    <h2 class="text-4xl text-center text-red-berry-900 dark:text-neutral-400 mt-32 mb-16">
+    <h2 class="text-3xl xl:text-4xl font-extralight xl:font-light text-center text-red-berry-900 dark:text-neutral-400 my-16 xl:mt-32">
       {title}
     </h2>
   {/if}

src/lib/components/Button.svelte

@@ -29,6 +29,8 @@
     unknown: "BsQuestionCircleFill",
     windows: "BsWindows",
     donate: "BsHeartFill",
+    more: "BsArrowRightCircleFill",
+    info: "BsInfoCircleFill"
   };
 
   let iconThemes = {

src/lib/components/ProgressBar.svelte

@@ -1,37 +1,64 @@
 <script>
   export let progress = 0;
+  export let mt = 4;
 
-  let percentage = 0;
-  let offset = 0;
+  let textElement;
+  let progressContainer;
+  let marginLeft = 0;
 
   $: normalizedProgress = Math.min(progress, 100);
-  $: offset = percentage.offsetWidth / 2;
+
+  function calculateMargin() {
+    if (!textElement || !progressContainer) return 0;
+
+    const containerWidth = progressContainer.offsetWidth;
+    const textWidth = textElement.offsetWidth;
+
+    if (containerWidth === 0 || textWidth === 0) return 0;
+
+    // Calculate target position (center text on progress end)
+    const targetPixels = (normalizedProgress / 100) * containerWidth - textWidth / 2;
+
+    // Keep within bounds
+    const minPixels = 0;
+    const maxPixels = containerWidth - textWidth;
+    const constrainedPixels = Math.min(Math.max(targetPixels, minPixels), maxPixels);
+
+    // Convert to percentage
+    return (constrainedPixels / containerWidth) * 100;
+  }
+
+  $: {
+    normalizedProgress;
+    if (textElement && progressContainer) {
+      marginLeft = calculateMargin();
+    }
+  }
 </script>
 
-<div class="progress-bar-container relative mt-4">
+<div class="progress-bar-container mt-{mt}" bind:this={progressContainer}>
   <div class="progress-bar">
     <div class="progress" style="width: {normalizedProgress}%" />
   </div>
-  <div
-    bind:this={percentage}
-    class="progress-bar-text"
-    style="left: min(max(calc({normalizedProgress}% - {offset}px), 0px), calc(100% - {percentage?.offsetWidth || 0}px))"
-  >
+  <div bind:this={textElement} class="progress-bar-text" style="margin-left: {marginLeft}%">
     {normalizedProgress}%
   </div>
 </div>
 
 <style lang="postcss">
-  /* dark:bg-mine-shaft-950 dark:text-spring-wood-50 */
-  .progress-bar {
-    @apply h-4 w-full overflow-hidden rounded-full bg-mine-shaft-100 dark:bg-mine-shaft-800;
+  .progress-bar-container {
+    @apply flex flex-col gap-[2px];
   }
 
-  .progress-bar-text {
-    @apply absolute left-0 top-5 text-center text-sm;
+  .progress-bar {
+    @apply h-2 w-full overflow-hidden rounded-full bg-mine-shaft-100 dark:bg-mine-shaft-800;
   }
 
   .progress {
     @apply h-full bg-red-berry-800 transition-all duration-500 dark:bg-red-berry-900;
   }
+
+  .progress-bar-text {
+    @apply text-xs text-mine-shaft-600 dark:text-mine-shaft-400 transition-all duration-300 inline-block w-fit;
+  }
 </style>