Skip to content

Commit 0fef268

Browse files
gchartiergchartier
committed
add explorer, status, and docs to desktop menu, add hover underline animations to header and footer links
1 parent afeb1f1 commit 0fef268

File tree

2 files changed

+49
-14
lines changed

2 files changed

+49
-14
lines changed

‎src/lib/components/Footer.svelte‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -123,7 +123,7 @@
123123
<li>
124124
<a
125125
href={link.href}
126-
class="flex items-center gap-2 hover:text-accent"
126+
class="flex items-center w-fit gap-2 relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
127127
target={link.external ? "_blank" : undefined}
128128
>
129129
<svelte:component this={link.icon} class="h-4 w-4" />
@@ -145,7 +145,7 @@
145145
<div class="flex gap-4 text-sm">
146146
<a
147147
href="https://docs.orcfax.io/terms-of-service"
148-
class="hover:text-accent"
148+
class="relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
149149
target="_blank"
150150
>
151151
Terms of Service

‎src/lib/components/Header.svelte‎

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@
1212

1313
<header class="absolute inset-x-0 top-0 z-50">
1414
<nav class="flex items-center justify-between p-6 pl-4 pt-4" aria-label="Global">
15-
<div class="flex lg:flex-1">
15+
<div class="flex xl:flex-1">
1616
<a href={`${base}/`} class="-m-1.5 p-1.5 flex items-center">
1717
<img
1818
class="h-14 w-auto transform transition ease-in-out duration-300 delay-150 hover:-rotate-45"
@@ -23,7 +23,7 @@
2323
>
2424
</a>
2525
</div>
26-
<div class="flex lg:hidden">
26+
<div class="flex xl:hidden">
2727
<button
2828
type="button"
2929
class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-secondary"
@@ -47,32 +47,67 @@
4747
</svg>
4848
</button>
4949
</div>
50-
<div class="hidden lg:flex lg:gap-x-12">
51-
<a href={`${base}/#about`} class="text-sm/6 font-semibold text-secondary">About</a>
52-
<a href={`${base}/#features`} class="text-sm/6 font-semibold text-secondary">Features</a
50+
<div class="hidden xl:flex xl:gap-x-12">
51+
<a
52+
href={`${base}/#about`}
53+
class="text-sm/6 font-semibold text-secondary relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
54+
>About</a
5355
>
54-
<a href={`${base}/#workflow`} class="text-sm/6 font-semibold text-secondary">Workflow</a
56+
<a
57+
href={`${base}/#features`}
58+
class="text-sm/6 font-semibold text-secondary relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
59+
>Features</a
5560
>
56-
<a href={`${base}/#solutions`} class="text-sm/6 font-semibold text-secondary"
61+
<a
62+
href={`${base}/#workflow`}
63+
class="text-sm/6 font-semibold text-secondary relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
64+
>Workflow</a
65+
>
66+
<a
67+
href={`${base}/#solutions`}
68+
class="text-sm/6 font-semibold text-secondary relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
5769
>Solutions</a
5870
>
59-
<a href={`${base}/#tokenomics`} class="text-sm/6 font-semibold text-secondary"
71+
<a
72+
href={`${base}/#tokenomics`}
73+
class="text-sm/6 font-semibold text-secondary relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
6074
>Tokenomics</a
6175
>
62-
<a href={`${base}/#validators`} class="text-sm/6 font-semibold text-secondary"
76+
<a
77+
href={`${base}/#validators`}
78+
class="text-sm/6 font-semibold text-secondary relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
6379
>Validators</a
6480
>
81+
<div class="h-4 w-px bg-secondary/20 -mx-2"></div>
82+
<a
83+
href="https://explorer.orcfax.io"
84+
target="_blank"
85+
class="text-sm/6 font-semibold text-secondary flex items-center relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
86+
><Telescope class="h-4 w-4 mr-1" />Explorer</a
87+
>
88+
<a
89+
href="https://status.orcfax.io"
90+
target="_blank"
91+
class="text-sm/6 font-semibold text-secondary flex items-center relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
92+
><Activity class="h-4 w-4 mr-1" />Status</a
93+
>
94+
<a
95+
href="https://docs.orcfax.io"
96+
target="_blank"
97+
class="text-sm/6 font-semibold text-secondary flex items-center relative after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-0 after:bg-secondary after:transition-all after:duration-200 hover:after:w-full"
98+
><BookOpenText class="h-4 w-4 mr-1" />Docs</a
99+
>
65100
</div>
66101
</nav>
67102
<!-- Mobile menu, show/hide based on menu open state. -->
68103
{#if isOpen}
69-
<div class="lg:hidden" role="dialog" aria-modal="true">
104+
<div class="xl:hidden" role="dialog" aria-modal="true">
70105
<div class="fixed inset-0 z-50"></div>
71106
<div
72107
class="fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10"
73108
>
74109
<div class="flex items-center justify-between">
75-
<div class="flex lg:flex-1">
110+
<div class="flex xl:flex-1">
76111
<a href={`${base}/`} class="-m-1.5 p-1.5 flex items-center">
77112
<img
78113
class="h-14 w-auto transform transition ease-in-out duration-300 delay-150 hover:-rotate-45"
@@ -152,7 +187,7 @@
152187
href="https://status.orcfax.io"
153188
target="_blank"
154189
class="-mx-3 block rounded-lg px-3 py-2.5 text-base/7 font-semibold text-secondary hover:bg-gray-50"
155-
><Activity class="inline-block h-4 w-4 mr-2" />Network Status</a
190+
><Activity class="inline-block h-4 w-4 mr-2" />Status</a
156191
>
157192
<a
158193
href="https://docs.orcfax.io"

0 commit comments

Comments
 (0)