Merge pull request #235 from significa/fix/bug-fixing-15-05

[Bug fixing] 15/05/23
significa · May 17, 2023 · d1d2178 · d1d2178
2 parents 477e8ae + 42887ff
commit d1d2178
Show file tree

Hide file tree

Showing 9 changed files with 39 additions and 25 deletions.
diff --git a/src/components/contact-form.svelte b/src/components/contact-form.svelte
@@ -220,9 +220,9 @@
         on:blur={() => dispatch('blur', 'budget')}
         on:change={() => dispatch('input', 'budget')}
       >
-        <option value="">Select budget</option>
+        <option value="" class="text-foreground">Select budget</option>
         {#each budgetOptions as option}
-          <option value={option}>{option}</option>
+          <option value={option} class="text-foreground">{option}</option>
         {/each}
       </FloatingSelect>
     {/if}

diff --git a/src/components/hoverable-gallery-card.svelte b/src/components/hoverable-gallery-card.svelte
@@ -36,7 +36,10 @@
   </div>
 {:else if card.component === 'notepad_card' && card.text}
   <div
-    class={clsx('-mx-[10%] transition-all duration-[250ms]', $$restProps.class)}
+    class={clsx(
+      'aspect-[4/6] transition-all duration-[250ms] lg:-mx-[10%] lg:p-[4%]',
+      $$restProps.class
+    )}
     style={`transform:translate(${transformState.x}, ${transformState.y}) rotate(${transformState.deg}deg); z-index: ${transformState.z} `}
     on:mouseenter={() => {
       transformState = hoverTransformState;
@@ -45,23 +48,23 @@
       transformState = staticTransformState;
     }}
   >
-    <div class="aspect-[4/6] rounded-xs bg-background-panel shadow-md">
-      <div class="mb-10 grid h-[10px] grid-cols-12 gap-[4%] p-4">
+    <div class="h-full rounded-xs bg-background-panel text-base/[2rem] shadow-md lg:text-notebook">
+      <div class="mb-[3em] grid h-[10px] grid-cols-12 gap-[4%] p-4 lg:p-[1em]">
         {#each [...Array(12)] as _}
           <div class="aspect-square rounded-full bg-background shadow-inner" />
         {/each}
       </div>
 
       <div
-        class="mt-7 flex h-[100%] flex-col justify-between"
-        style="background-image: linear-gradient(hsl(var(--color-border)) 1px, transparent 1px); background-size: 2rem 2rem;"
+        class="mt-[2em] flex h-full flex-col justify-between"
+        style="background-image: linear-gradient(hsl(var(--color-border)) 1px, transparent 1px); background-size: 2em 2em"
       >
-        <div class="-mt-[2rem] px-4">
-          <SplitLines text={card.text} class="relative font-comic font-bold leading-8" />
+        <div class="-mt-[2em] px-4 lg:px-[1em]">
+          <SplitLines text={card.text} class="relative font-comic font-bold" />
         </div>
 
-        <div class="relative mb-7 flex h-[50%] justify-end">
-          <Bird class="relative mr-2 h-[100%] w-fit drop-shadow-md" />
+        <div class="relative mb-12 flex h-1/2 justify-end">
+          <Bird class="relative mr-6 block w-1/2 drop-shadow-md" />
         </div>
       </div>
     </div>

diff --git a/src/components/illustrations/stickers/bird.svelte b/src/components/illustrations/stickers/bird.svelte
@@ -2,6 +2,7 @@
   xmlns="http://www.w3.org/2000/svg"
   width="128"
   height="141"
+  viewBox="0 0 128 141"
   fill="none"
   class={$$restProps.class}
   ><path

diff --git a/src/components/images.svelte b/src/components/images.svelte
@@ -33,7 +33,7 @@
     {#each images || [] as img}
       {#if img?.filename}
         {@const { src, alt, width, height } = getImageAttributes(img)}
-        <img class="max-h-96" {alt} {src} {width} {height} />
+        <img class="max-h-96 rounded-md object-cover" {alt} {src} {width} {height} />
       {/if}
     {/each}
   </div>

diff --git a/src/components/pages/get-a-quote/form.svelte b/src/components/pages/get-a-quote/form.svelte
@@ -60,8 +60,6 @@
     } else {
       character = 'attach';
     }
-  } else if (lastChangedInput === 'message' && message && message.length > 3) {
-    character = 'idle';
   } else if (lastChangedInput === 'budget') {
     if (['10k - 25k'].includes(budget)) {
       character = 'budget10';
@@ -72,7 +70,13 @@
     } else if (['100k+'].includes(budget)) {
       character = 'budget100';
     }
-  } else if (lastChangedInput === 'name' && name && name.length > 2) {
+  } else if (
+    (lastChangedInput === 'name' ||
+      lastChangedInput === 'email' ||
+      lastChangedInput === 'message') &&
+    name &&
+    name.length > 2
+  ) {
     character = 't-shirt';
   } else {
     character = 'hello';

diff --git a/src/components/pages/handbook.svelte b/src/components/pages/handbook.svelte
@@ -51,18 +51,18 @@
 <div class="flex items-start gap-4 @container">
   <div class="flex-1">
     <header class="container mx-auto my-10 max-w-3xl px-container md:my-14 lg:my-20">
-      <h1 class="text-5xl">{story.name}</h1>
-      {#if story.content.intro}
-        <p class="mt-4 max-w-2xl text-2xl">{story.content.intro}</p>
-      {/if}
       {#if story.content.draft}
-        <div class="mt-8 rounded-md bg-error p-4" data-theme="dark">
+        <div class="mb-8 rounded-md bg-error p-4" data-theme="dark">
           <h4 class="text-lg font-medium">{t('handbook.draft.title')}</h4>
           <p>
             {t('handbook.draft.description')}
           </p>
         </div>
       {/if}
+      <h1 class="text-5xl">{story.name}</h1>
+      {#if story.content.intro}
+        <p class="mt-4 max-w-2xl text-2xl">{story.content.intro}</p>
+      {/if}
     </header>
 
     {#if story.content.cover?.filename}

diff --git a/src/components/split-lines.svelte b/src/components/split-lines.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-  let className: undefined | string = undefined;
-  export { className as class };
   export let as = 'p';
   export let text: string;
 </script>
@@ -9,6 +7,8 @@
   {#if !line}
     <br />
   {:else}
-    <svelte:element this={as} class={className}>{line}</svelte:element>
+    <svelte:element this={as} class={$$restProps.class} style={$$restProps.style}
+      >{line}</svelte:element
+    >
   {/if}
 {/each}
diff --git a/src/components/top-navigation.svelte b/src/components/top-navigation.svelte
@@ -85,7 +85,7 @@
     class={clsx(
       'ease-[cubic-bezier(0.90, 0, 0.05, 1)] z-30 w-full border-b bg-background/95 backdrop-blur-md transition-[transform,border-color] duration-300',
       variant === 'default' && 'fixed',
-      isPastZero ? 'border-b-border' : 'border-b-transparent',
+      !isPastZero && variant === 'default' ? 'border-b-transparent' : 'border-b-border',
       !isPastThreshold
         ? 'translate-y-0'
         : scrollDir === 'down' && variant === 'default'
@@ -153,7 +153,10 @@
     <div
       transition:fly={{ x: 1000, duration: 300 }}
       use:clickOutside={() => (panel = false)}
-      class="fixed bottom-0 right-0 top-0 z-50 flex w-full max-w-sm flex-col items-start overflow-y-auto bg-background px-container py-4"
+      class={clsx(
+        variant === 'handbook' ? 'px-6' : 'px-container pl-6',
+        'fixed bottom-0 right-0 top-0 z-50 flex w-full max-w-sm flex-col items-start overflow-y-auto bg-background py-4'
+      )}
     >
       <div class="flex w-full items-center justify-between">
         <Logo variant="symbol" />

diff --git a/tailwind.config.cjs b/tailwind.config.cjs
@@ -175,6 +175,9 @@ module.exports = {
       fontFamily: {
         comic: 'Comic Sans MS, Chalkboard SE, Comic Neue, Comic Sans, sans-serif'
       },
+      fontSize: {
+        notebook: ['clamp(0.65rem, 1vw, 1rem)', { lineHeight: '2em' }]
+      },
       screens: {
         xs: '480px'
       },