Fixed accessibility issues, changed word animation. (#20513)

### Description
Addresses #20096, and checked #20261 (should have already been fixed)

Also added a different animation for words on the hero as they didn't
look good (some svelte animation bug I think)

Link found at: https://maanavd.github.io/onnxruntime/

Co-authored-by: MaanavD <maanavdalal@microsoft.com>
This commit is contained in:
Maanav Dalal 2024-04-29 14:59:11 -07:00 committed by GitHub
parent 521d8922e2
commit 08407ea351
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 7 additions and 7 deletions

View file

@ -8,8 +8,8 @@
import FaRegClipboard from 'svelte-icons/fa/FaRegClipboard.svelte';
import OnnxLight from '../../images/ONNX-Light.svelte';
import OnnxDark from '../../images/ONNX-Dark.svelte';
import { fade, fly, blur } from 'svelte/transition';
import { quintOut } from 'svelte/easing';
import { fade } from 'svelte/transition';
import { quartInOut } from 'svelte/easing';
let words = [
'Cross-Platform',
@ -86,7 +86,7 @@
{#key activeWord}
<span
class="lg:text-5xl text-4xl"
in:fly={{ delay: 0, duration: 300, x: 200, y: 0, opacity: 1, easing: quintOut }}
in:fade={{ delay: 0, duration: 1000, easing: quartInOut }}
>
{activeWord}
</span>

View file

@ -21,7 +21,7 @@
<div class="bg-slate-300 p-4 rounded">
<div class="grid xl:grid-cols-4 place-items-center">
<div class="col-span-3 text-black">
<h1 class="text-2xl pb-2">Web Browsers</h1>
<h3 class="text-2xl pb-2">Web Browsers</h3>
<p class="text-lg">
Run PyTorch and other ML models in the web browser with ONNX Runtime Web.
</p>
@ -34,7 +34,7 @@
<div class="bg-slate-300 p-4 rounded">
<div class="grid md:grid-cols-4 place-items-center">
<div class="col-span-3 text-black">
<h1 class="text-2xl pb-2">Mobile Devices</h1>
<h3 class="text-2xl pb-2">Mobile Devices</h3>
<p class="text-lg">
Infuse your Android and iOS mobile apps with AI using ONNX Runtime Mobile.
</p>
@ -58,7 +58,7 @@
<div class="bg-slate-300 p-4 rounded">
<div class="grid xl:grid-cols-4 place-items-center">
<div class="col-span-3 text-black">
<h1 class="text-2xl pb-2">Large Model Training</h1>
<h3 class="text-2xl pb-2">Large Model Training</h3>
<p class="text-lg">
Accelerate training of popular models, including <a
href="https://huggingface.co/"
@ -78,7 +78,7 @@
<div class="bg-slate-300 p-4 rounded">
<div class="grid md:grid-cols-4 place-items-center">
<div class="col-span-3 text-black">
<h1 class="text-2xl pb-2">On-Device Training</h1>
<h3 class="text-2xl pb-2">On-Device Training</h3>
<p class="text-lg">
On-device training with ONNX Runtime lets developers take an inference model and train
it locally to deliver a more personalized and privacy-respecting experience for