Fix buttons size and implement optional textSize variable for Button …

…props (spyder-ide#40)
conradolandia · Jan 4, 2025 · 689dea8 · 689dea8
1 parent 8c9a77e
commit 689dea8
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 33 deletions.
diff --git a/src/lib/blocks/ContentBlock.svelte b/src/lib/blocks/ContentBlock.svelte
@@ -3,7 +3,7 @@
   import Youtube from "svelte-youtube-embed";
 
   import { randomId } from "$lib/utils";
-  import { colourScheme, osStore } from '$lib/store';
+  import { colourScheme, osStore } from "$lib/store";
 
   import Card from "$lib/components/Card.svelte";
   import Tabs from "$lib/components/Tabs.svelte";
@@ -42,7 +42,7 @@
 
   const debounce = (func, wait) => {
     let timeout;
-    return function(...args) {
+    return function (...args) {
       const later = () => {
         clearTimeout(timeout);
         func(...args);
@@ -52,26 +52,35 @@
     };
   };
 
-  $: currentBg = $colourScheme === 'dark' && backgroundDark ? backgroundDark : background;
+  $: currentBg =
+    $colourScheme === "dark" && backgroundDark ? backgroundDark : background;
 
   onMount(() => {
     const handleResize = debounce(() => {
       mobile = window.innerWidth < 768;
-      style = mobile ? "" : currentBg ? `background-image: url(${currentBg});` : "";
+      style = mobile
+        ? ""
+        : currentBg
+          ? `background-image: url(${currentBg});`
+          : "";
     }, 250);
 
-    window.addEventListener('resize', handleResize);
+    window.addEventListener("resize", handleResize);
     handleResize();
 
-    return () => window.removeEventListener('resize', handleResize);
+    return () => window.removeEventListener("resize", handleResize);
   });
 
-  $: style = mobile ? "" : currentBg ? `background-image: url(${currentBg});` : "";
+  $: style = mobile
+    ? ""
+    : currentBg
+      ? `background-image: url(${currentBg});`
+      : "";
 
-  osStore.subscribe(data => {
+  osStore.subscribe((data) => {
     if (!data.loading && buttons && imgSrc) {
       buttons = [...data.osButtons];
-      imgSrc = `/assets/media/${data.os}.webp`
+      imgSrc = `/assets/media/${data.os}.webp`;
     }
   });
 </script>
@@ -84,45 +93,50 @@
   {#if title}
     <h1
       class={`text-4xl font-semibold tracking-tight max-w-2xl px-8 mx-auto text-center text-red-berry-900 dark:text-neutral-400
-        ${!boxed ? 'lg:mb-24' : 'lg:mb-8'}`}
+        ${!boxed ? "lg:mb-24" : "lg:mb-8"}`}
     >
       {@html title}
     </h1>
   {/if}
 
   <div
     class={`mx-auto grid gap-8 px-8 ${classes}
-      ${!boxed ? 'py-8 max-w-screen-lg 2xl:max-w-screen-xl' : 'max-w-screen-md'}
-      ${columns ? 'gap-x-8 lg:gap-x-16 xl:gap-x-32 lg:grid-cols-10' : ''}
-      ${border ? 'border border-mine-shaft-200 dark:border-mine-shaft-800' : ''}`}
+      ${!boxed ? "py-8 max-w-screen-lg 2xl:max-w-screen-xl" : "max-w-screen-md"}
+      ${columns ? "gap-x-8 lg:gap-x-16 xl:gap-x-32 lg:grid-cols-10" : ""}
+      ${border ? "border border-mine-shaft-200 dark:border-mine-shaft-800" : ""}`}
   >
     {#if content || buttons}
-      <div class={columns ? 'col-span-full lg:col-span-4' : 'col-span-full'}>
+      <div class={columns ? "col-span-full lg:col-span-4" : "col-span-full"}>
         {#if content}
           <div
             class={`prose prose-h2:text-lg prose-h1:text-xl prose-headings:font-light prose-headings:tracking-tight
               prose-headings:text-gray-700 prose-headings:dark:text-neutral-300
               prose-p:font-light prose-p:text-base prose-p:text-gray-700 prose-p:dark:text-gray-300
-              ${columns ? 'max-w-full' : 'mt-8 md:mt-24 text-center max-w-2xl mx-auto'}`}
+              ${columns ? "max-w-full" : "mt-8 md:mt-24 text-center max-w-2xl mx-auto"}`}
           >
             <slot />
           </div>
         {/if}
         {#if buttons}
-          <div
-            class={`grid grid-cols-1 md:grid-cols-2 gap-4 items-center mt-8
-              ${!columns ? 'text-center' : ''}`}
-          >
-            {#each buttons as button}
-              <Button {...button} />
-            {/each}
-          </div>
+          {#if buttons.length > 1}
+            <div class={`grid grid-cols-1 gap-4 items-center mt-8 mr-32 ${!columns ? "text-center" : ""}`}>
+              {#each buttons as button}
+                <Button {...button} />
+              {/each}
+            </div>
+          {:else}
+            <div class={`mt-8 mr-32 ${!columns ? "text-center" : ""}`}>
+              {#each buttons as button}
+                <Button {...button} />
+              {/each}
+            </div>
+          {/if}
         {/if}
       </div>
     {/if}
 
     {#if videoId || videoSources || tabs || imgSrc || innerColumns}
-      <div class={columns ? 'col-span-full lg:col-span-6' : 'col-span-full'}>
+      <div class={columns ? "col-span-full lg:col-span-6" : "col-span-full"}>
         {#if videoId}
           <Youtube id={videoId} altThumb={true} --title-font-family="Silka" />
         {:else if videoSources}
@@ -138,7 +152,9 @@
         {:else if tabs}
           <Tabs {tabs} />
         {:else if innerColumns}
-          <div class="max-w-2xl mx-auto flex flex-col gap-8 md:gap-16 mt-2 md:mt-0 md:grid md:grid-cols-2">
+          <div
+            class="max-w-2xl mx-auto flex flex-col gap-8 md:gap-16 mt-2 md:mt-0 md:grid md:grid-cols-2"
+          >
             {#each innerColumns as innerColumn}
               {#if innerColumn.link}
                 <a
@@ -172,7 +188,7 @@
       class={`text-center max-w-2xl mx-auto px-8 mt-8 prose prose-h2:text-xl prose-headings:font-light
               prose-headings:tracking-tight prose-headings:text-gray-700 prose-headings:dark:text-neutral-300
               prose-p:font-light prose-p:text-base prose-p:text-gray-700 prose-p:dark:text-gray-300
-              ${columns ? 'order-first' : ''}`}
+              ${columns ? "order-first" : ""}`}
     >
       {#if $$slots.extraContent}
         <slot name="extraContent" />
@@ -183,7 +199,9 @@
   {/if}
 
   {#if extraImage}
-    <div class={`col-span-10 text-center px-8 mt-8 mb-16 ${!columns ? 'max-w-2xl mx-auto' : 'max-w-full'}`}>
+    <div
+      class={`col-span-10 text-center px-8 mt-8 mb-16 ${!columns ? "max-w-2xl mx-auto" : "max-w-full"}`}
+    >
       {#if extraImageLink}
         <a href={extraImageLink} target="_blank" rel="noopener noreferrer">
           <Image figure={false} imgSrc={extraImage} imgAlt={extraImageAlt} />

diff --git a/src/lib/blocks/Header.svelte b/src/lib/blocks/Header.svelte
@@ -2,6 +2,7 @@
   import { Icon } from "svelte-icons-pack";
   import { BiMenu } from "svelte-icons-pack/bi";
   import { AiOutlineClose } from "svelte-icons-pack/ai";
+  import { page } from "$app/stores";
 
   import { base } from "$app/paths";
   import { title, description, navigation } from "$lib/config";
@@ -34,6 +35,7 @@
               <li class="menu-item">
                 <a
                   class="menu-link h-20 grid items-center uppercase text-sm tracking-wider before:h-1 before:hover:bg-red-berry-900"
+                  class:before:bg-red-berry-900={$page.url.pathname === item.href}
                   href={item.href}
                   target={item.target}>{item.text}</a
                 >
@@ -72,6 +74,7 @@
               <li>
                 <a
                   class="menu-link mobile block py-8 uppercase text-2xl tracking-wider no-underline"
+                  class:text-red-berry-900={$page.url.pathname === item.href}
                   href={item.href}
                   target={item.target}
                   on:click={toggleMenu}>{item.text}</a

diff --git a/src/lib/components/Button.svelte b/src/lib/components/Button.svelte
@@ -32,20 +32,31 @@
   export let button = true;
   export let highlight = false;
   export let icon = "";
-  export let iconSize = 20;
+  export let iconSize = 24;
   export let href = "";
   export let rel = "";
   export let text = "";
   export let title = text;
   export let target = "_parent";
   export let iconPosition = "right";
   export let fullwidth = false;
+  export let textSize = "";
 
   let currentIcon = icons[icon];
 
   let hasIcon = icon !== "" && currentIcon !== undefined ? true : false;
   let iconLeft = hasIcon && iconPosition === "left" ? true : false;
   let iconRight = hasIcon && iconPosition === "right" ? true : false;
+
+  if (textSize === 'xs') {
+    iconSize = iconSize * 0.8
+  } else if (textSize === 'sm') {
+    iconSize = iconSize * 0.9
+  } else if (textSize === 'lg') {
+    iconSize = iconSize * 1.2
+  } else if (textSize === 'xl') {
+    iconSize = iconSize * 1.3
+  }
 </script>
 
 <a
@@ -63,7 +74,12 @@
   class:px-5={button}
   class:rounded={button}
   class:regular={!highlight}
-  class="flex items-center justify-between gap-3 text-sm lg:text-xs"
+  class:text-xs={textSize === 'xs'}
+  class:text-sm={textSize === 'sm'}
+  class:text-md={textSize === 'md'}
+  class:text-lg={textSize === 'lg'}
+  class:text-xl={textSize === 'xl'}
+  class="flex items-center justify-between gap-3 font-medium"
 >
   {#if iconLeft}
     <span class:icon-left={iconPosition === "left"}>
@@ -72,7 +88,7 @@
   {/if}
 
   {#if text}
-    <span>{text}</span>
+    <span class="text-left">{text}</span>
   {/if}
 
   {#if iconRight}

diff --git a/src/routes/download/+page.svelte b/src/routes/download/+page.svelte
@@ -138,7 +138,7 @@
       {@html result ? pageSubtitle : pageSubtitleAlt}
     </p>
     {#if os !== "mac"}
-      <div class="block mt-8 mb-16 text-center w-48 mx-auto">
+      <div class="block mt-8 mb-16 text-center w-[250px] mx-auto">
         <Button
           highlight
           text="Download for {osName}"
@@ -149,7 +149,7 @@
         />
       </div>
     {:else}
-      <div class="mt-8 mb-16 text-center w-96 flex gap-4 mx-auto">
+      <div class="mt-8 mb-16 text-center w-[550px] flex gap-4 mx-auto">
         {#each macs as mac}
           <Button
             highlight
@@ -171,7 +171,7 @@
 
   {#if osButtons}
     <div
-      class="mb-5 mx-auto max-w-48 sm:max-w-md grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4"
+      class="mb-5 mx-auto grid grid-cols-1 sm:grid-cols-2 items-center justify-center gap-4"
     >
       {#each osButtons as button}
         <Button