From c44c290664a93933b5aba69a59d9c4d7c70e387f Mon Sep 17 00:00:00 2001
From: Gabriel Chartier <gabriel@chartier.link>
Date: Tue, 19 Nov 2024 15:11:48 -0500
Subject: [PATCH] fix cross-browser rendering issues

---
 src/lib/components/Countdown.svelte |  14 +-
 src/lib/components/Link.svelte      |  34 ++--
 src/lib/sections/Header.svelte      | 242 ++++++++++++++--------------
 src/lib/sections/Hero.svelte        |  12 +-
 4 files changed, 151 insertions(+), 151 deletions(-)

diff --git a/src/lib/components/Countdown.svelte b/src/lib/components/Countdown.svelte
index b1f5764..1c824dc 100644
--- a/src/lib/components/Countdown.svelte
+++ b/src/lib/components/Countdown.svelte
@@ -32,17 +32,17 @@
         endMessage={secondaryEndMessage}
     />
 {:else if hasDatePassed}
-    <div class="text-xl sm:text-2xl font-black text-center" transition:blur>{endMessage}</div>
+    <div class="text-xl sm:text-2xl font-bold text-center" transition:blur>{endMessage}</div>
 {:else}
     <div
-        class="flex flex-col gap-4 sm:gap-2 justify-center items-center max-w-[16rem] md:max-w-full"
+        class="flex flex-col gap-2 justify-center items-center max-w-[16rem] md:max-w-full"
         transition:blur
     >
-        <p class="text-xl sm:text-2xl font-black text-center w-full">
+        <p class="text-xl sm:text-2xl font-bold text-center w-full">
             {activeMessage}
         </p>
         <div class="flex gap-5 font-semibold">
-            <div>
+            <div class="flex flex-col">
                 <span class="countdown text-2xl md:text-3xl">
                     <span class="text-accent font-extrabold" style={`--value:${days};`} />
                 </span>
@@ -50,7 +50,7 @@
                     >{pluralize("day", days)}</span
                 >
             </div>
-            <div>
+            <div class="flex flex-col">
                 <span class="countdown text-2xl md:text-3xl">
                     <span class="text-accent font-extrabold" style={`--value:${hours};`} />
                 </span>
@@ -58,7 +58,7 @@
                     >{pluralize("hour", hours)}</span
                 >
             </div>
-            <div>
+            <div class="flex flex-col">
                 <span class="countdown text-2xl md:text-3xl">
                     <span class="text-accent font-extrabold" style={`--value:${minutes};`} />
                 </span>
@@ -66,7 +66,7 @@
                     >{pluralize("min", minutes)}</span
                 >
             </div>
-            <div>
+            <div class="flex flex-col">
                 <span class="countdown text-2xl md:text-3xl">
                     <span class="text-accent font-extrabold" style={`--value:${seconds};`} />
                 </span>
diff --git a/src/lib/components/Link.svelte b/src/lib/components/Link.svelte
index 894eb7b..625fc96 100644
--- a/src/lib/components/Link.svelte
+++ b/src/lib/components/Link.svelte
@@ -1,25 +1,25 @@
 <script lang="ts">
-	import Button from '$lib/components/Button.svelte';
+    import Button from "$lib/components/Button.svelte";
 
-	export let isNewTab = false;
-	export let isButton = false;
+    export let isNewTab = false;
+    export let isButton = false;
 
-	const defaultStyles = 'underline';
+    const defaultStyles = "underline";
 </script>
 
 {#if isButton}
-	<a href={$$props.href} target={isNewTab ? '_blank' : '_self'} on:click>
-		<Button>
-			<slot />
-		</Button>
-	</a>
+    <a href={$$props.href} target={isNewTab ? "_blank" : "_self"} class="m-2" on:click>
+        <Button>
+            <slot />
+        </Button>
+    </a>
 {:else}
-	<a
-		class={$$props.class ?? defaultStyles}
-		href={$$props.href}
-		target={isNewTab ? '_blank' : '_self'}
-		on:click
-	>
-		<slot />
-	</a>
+    <a
+        class={$$props.class ?? defaultStyles}
+        href={$$props.href}
+        target={isNewTab ? "_blank" : "_self"}
+        on:click
+    >
+        <slot />
+    </a>
 {/if}
diff --git a/src/lib/sections/Header.svelte b/src/lib/sections/Header.svelte
index 3e4ee56..3f220af 100644
--- a/src/lib/sections/Header.svelte
+++ b/src/lib/sections/Header.svelte
@@ -1,132 +1,132 @@
 <script>
-	import { base } from '$app/paths';
-	import Link from '$lib/components/Link.svelte';
-	import OpenLink from '$lib/components/icons/OpenLink.svelte';
+    import { base } from "$app/paths";
+    import Link from "$lib/components/Link.svelte";
+    import OpenLink from "$lib/components/icons/OpenLink.svelte";
 
-	const navItems = [
-		{
-			name: 'Features',
-			href: '#features'
-		},
-		{
-			name: 'Token',
-			href: '#token'
-		},
-		{
-			name: 'Team',
-			href: '#team'
-		},
-		{
-			name: 'Connect',
-			href: '#connect'
-		},
-		{
-			name: 'Docs',
-			href: 'https://docs.orcfax.io',
-			isExernalLink: true
-		},
-		{
-			name: 'Explorer',
-			href: 'https://explorer.orcfax.io',
-			isExernalLink: true
-		}
-	];
+    const navItems = [
+        {
+            name: "Features",
+            href: "#features",
+        },
+        {
+            name: "Token",
+            href: "#token",
+        },
+        {
+            name: "Team",
+            href: "#team",
+        },
+        {
+            name: "Connect",
+            href: "#connect",
+        },
+        {
+            name: "Docs",
+            href: "https://docs.orcfax.io",
+            isExernalLink: true,
+        },
+        {
+            name: "Explorer",
+            href: "https://explorer.orcfax.io",
+            isExernalLink: true,
+        },
+    ];
 
-	let menuOpen = false;
+    let menuOpen = false;
 </script>
 
 <header class="absolute z-1 top-0 left-0 flex w-full justify-between">
-	<a href="https://orcfax.io" class="transform hover:rotate-[-30]">
-		<img
-			src={`${base}/echo.svg`}
-			class="w-[6rem] h-[6rem] lg:w-[8rem] lg:h-[8rem] transform transition ease-in-out duration-300 delay-150 hover:-rotate-45"
-			alt="The Orcfax Logo and Mascot, Echo, a black and white Orca."
-		/>
-	</a>
-	<nav class="font-semibold">
-		<div class="hidden md:flex gap-7 pr-9 pt-9 h-min">
-			{#each navItems as navItem}
-				{#if navItem.isExernalLink}
-					<Link
-						class="flex gap-1 h-min items-center text-xl hover:underline "
-						href={navItem.href}
-						isNewTab
-					>
-						<span>{navItem.name}</span>
-						<OpenLink strokeColor="stroke-secondary fill-primary" />
-					</Link>
-				{:else}
-					<Link class="text-xl hover:underline" href={navItem.href}>{navItem.name}</Link>
-				{/if}
-			{/each}
-		</div>
+    <a href="https://orcfax.io" class="transform hover:rotate-[-30]">
+        <img
+            src={`${base}/echo.svg`}
+            class="w-[8wh] h-[8vh] mt-1 sm:w-[6rem] sm:h-[6rem] transform transition ease-in-out duration-300 delay-150 hover:-rotate-45"
+            alt="The Orcfax Logo and Mascot, Echo, a black and white Orca."
+        />
+    </a>
+    <nav class="font-semibold">
+        <div class="hidden md:flex gap-7 pr-4 pt-4 h-min">
+            {#each navItems as navItem}
+                {#if navItem.isExernalLink}
+                    <Link
+                        class="flex gap-1 h-min items-center text-xl hover:underline "
+                        href={navItem.href}
+                        isNewTab
+                    >
+                        <span>{navItem.name}</span>
+                        <OpenLink strokeColor="stroke-secondary fill-primary" />
+                    </Link>
+                {:else}
+                    <Link class="text-xl hover:underline" href={navItem.href}>{navItem.name}</Link>
+                {/if}
+            {/each}
+        </div>
 
-		<div class="flex md:hidden">
-			<button
-				on:click={() => (menuOpen = !menuOpen)}
-				type="button"
-				class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent"
-				aria-controls="mobile-menu"
-				aria-expanded="false"
-			>
-				<span class="absolute -inset-0.5"></span>
-				<span class="sr-only">Open main menu</span>
+        <div class="flex md:hidden">
+            <button
+                on:click={() => (menuOpen = !menuOpen)}
+                type="button"
+                class="relative inline-flex items-center justify-center rounded-md p-2 text-gray-400 hover:bg-gray-100 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-inset focus:ring-accent"
+                aria-controls="mobile-menu"
+                aria-expanded="false"
+            >
+                <span class="absolute -inset-0.5"></span>
+                <span class="sr-only">Open main menu</span>
 
-				<svg
-					class={`${menuOpen ? 'hidden' : 'block'} h-12 w-12`}
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					aria-hidden="true"
-				>
-					<path
-						stroke-linecap="round"
-						stroke-linejoin="round"
-						d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-					/>
-				</svg>
+                <svg
+                    class={`${menuOpen ? "hidden" : "block"} h-12 w-12`}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                >
+                    <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
+                    />
+                </svg>
 
-				<svg
-					class={`${menuOpen ? 'block' : 'hidden'} h-12 w-12 relative z-20`}
-					fill="none"
-					viewBox="0 0 24 24"
-					stroke-width="1.5"
-					stroke="currentColor"
-					aria-hidden="true"
-				>
-					<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
-				</svg>
-			</button>
+                <svg
+                    class={`${menuOpen ? "block" : "hidden"} h-12 w-12 relative z-20`}
+                    fill="none"
+                    viewBox="0 0 24 24"
+                    stroke-width="1.5"
+                    stroke="currentColor"
+                    aria-hidden="true"
+                >
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                </svg>
+            </button>
 
-			{#if menuOpen}
-				<div
-					class="w-screen h-screen bg-primary absolute top-0 left-0 z-10 pt-20 md:hidden"
-					id="mobile-menu"
-				>
-					<div class="flex flex-col justify-center items-center gap-8 pb-3 pt-2 w-full">
-						{#each navItems as navItem}
-							{#if navItem.isExernalLink}
-								<Link
-									on:click={() => (menuOpen = false)}
-									class="flex gap-1 h-min items-center text-xl hover:underline "
-									href={navItem.href}
-									isNewTab
-								>
-									<span>{navItem.name}</span>
-									<OpenLink strokeColor="stroke-secondary fill-primary" />
-								</Link>
-							{:else}
-								<Link
-									on:click={() => (menuOpen = false)}
-									class="text-xl hover:underline"
-									href={navItem.href}>{navItem.name}</Link
-								>
-							{/if}
-						{/each}
-					</div>
-				</div>
-			{/if}
-		</div>
-	</nav>
+            {#if menuOpen}
+                <div
+                    class="w-screen h-screen bg-primary absolute top-0 left-0 z-10 pt-20 md:hidden"
+                    id="mobile-menu"
+                >
+                    <div class="flex flex-col justify-center items-center gap-8 pb-3 pt-2 w-full">
+                        {#each navItems as navItem}
+                            {#if navItem.isExernalLink}
+                                <Link
+                                    on:click={() => (menuOpen = false)}
+                                    class="flex gap-1 h-min items-center text-xl hover:underline "
+                                    href={navItem.href}
+                                    isNewTab
+                                >
+                                    <span>{navItem.name}</span>
+                                    <OpenLink strokeColor="stroke-secondary fill-primary" />
+                                </Link>
+                            {:else}
+                                <Link
+                                    on:click={() => (menuOpen = false)}
+                                    class="text-xl hover:underline"
+                                    href={navItem.href}>{navItem.name}</Link
+                                >
+                            {/if}
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+        </div>
+    </nav>
 </header>
diff --git a/src/lib/sections/Hero.svelte b/src/lib/sections/Hero.svelte
index ea79283..59afcc9 100644
--- a/src/lib/sections/Hero.svelte
+++ b/src/lib/sections/Hero.svelte
@@ -11,22 +11,22 @@
 <section class="flex flex-col justify-center items-center pt-8 grow">
     <Link
         href="#about"
-        class="text-[5rem] xs:text-[6.5rem] sm:text-[8rem] lg:text-[12rem] h-min leading-snug tracking-wide font-black hover:underline"
+        class="text-[5rem] xs:text-[6.5rem] sm:text-[8rem] lg:text-[8rem] h-min leading-snug tracking-wide font-black hover:underline"
     >
         Orcfax
     </Link>
 
     <h2
-        class="text-center max-w-xs xs:max-w-sm sm:max-w-md text-xl xs:text-2xl sm:text-3xl lg:text-4xl lg:max-w-lg font-bold"
+        class="text-center max-w-xs xs:max-w-sm sm:max-w-md text-xl xs:text-2xl sm:text-3xl lg:max-w-lg font-bold"
     >
         Decentralized oracle feeds for Cardano smart contracts
     </h2>
-    <div class="flex flex-col items-center pt-8 gap-8">
-        <div class="text-2xl sm:text-3xl text-center font-black px-2">
+    <div class="flex flex-col items-center pt-4 sm:pt-8 gap-5 sm:gap-8">
+        <div class="text-xl sm:text-2xl text-center font-black px-2">
             Orcfax v1 is live on Mainnet!
         </div>
 
-        <div class="flex flex-col justify-center items-center gap-4 mb-4">
+        <div class="flex flex-col justify-center items-center">
             {#if !isAfterItnPhase1StartDate}
                 <Countdown
                     targetDate={itnPhase1StartDate}
@@ -34,7 +34,7 @@
                     endMessage={"ITN Phase 1 is live!"}
                 />
             {:else}
-                <div class="text-2xl text-center mb-4 font-black">ITN Phase 1 is live!</div>
+                <div class="text-2xl text-center mb-4 font-bold">ITN Phase 1 is live!</div>
             {/if}
 
             <Link