Skip to content

Commit

Permalink
fix cross-browser rendering issues
Browse files Browse the repository at this point in the history
  • Loading branch information
gchartier committed Nov 19, 2024
1 parent c22e763 commit c44c290
Show file tree
Hide file tree
Showing 4 changed files with 151 additions and 151 deletions.
14 changes: 7 additions & 7 deletions src/lib/components/Countdown.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -32,41 +32,41 @@
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>
<span class="text-base-content-100 opacity-60 text-xl md:text-2xl"
>{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>
<span class="text-base-content-100 opacity-60 text-xl md:text-2xl"
>{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>
<span class="text-base-content-100 opacity-60 text-xl md:text-2xl"
>{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>
Expand Down
34 changes: 17 additions & 17 deletions src/lib/components/Link.svelte
Original file line number Diff line number Diff line change
@@ -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}
242 changes: 121 additions & 121 deletions src/lib/sections/Header.svelte
Original file line number Diff line number Diff line change
@@ -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>
12 changes: 6 additions & 6 deletions src/lib/sections/Hero.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -11,30 +11,30 @@
<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}
activeMessage={"ITN Phase 1 starts in:"}
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
Expand Down

0 comments on commit c44c290

Please sign in to comment.