mirror of
https://github.com/nestriness/nestri.git
synced 2025-12-11 00:05:36 +02:00
🐛 fix: Use a lower contrast color for as background color
This commit is contained in:
Wanjohi
@@ -34,7 +34,7 @@ export default component$(() => {
|
||||
<RouterHead />
|
||||
</head>
|
||||
<body
|
||||
class="bg-gray-50 text-gray-950 dark:bg-gray-950 dark:text-gray-50 font-body flex min-h-[100dvh] flex-col overflow-x-hidden antialiased"
|
||||
class="bg-gray-100 text-gray-950 dark:bg-gray-900 dark:text-gray-50 font-body flex min-h-[100dvh] flex-col overflow-x-hidden antialiased"
|
||||
lang="en">
|
||||
<RouterOutlet />
|
||||
{/* {!isDev && <ServiceWorkerRegister />} */}
|
||||
|
||||
@@ -27,7 +27,7 @@ export default component$(() => {
|
||||
</div>
|
||||
<div class="pt-2 pb-4 pr-2 pl-4 md:pl-8 h-max gap-4 flex flex-col relative before:absolute before:bottom-2 before:top-0 before:left-[7px] before:w-0.5 before:bg-gradient-to-b before:rounded-[2px] before:from-primary-500 before:to-transparent" >
|
||||
<div class="flex flex-row flex-wrap gap-2.5">
|
||||
<div class="aspect-auto h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="aspect-auto h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="text-base backdrop-blur-sm font-title font-medium text-white z-[2] w-full h-full text-center p-4 justify-center items-center flex flex-col">
|
||||
<p class="text-2xl">Fresh new look, Intel & AMD GPU support and we finally launched 🥳</p>
|
||||
</div>
|
||||
@@ -35,7 +35,7 @@ export default component$(() => {
|
||||
<img draggable={false} src="/changelog/v0.0.3/header.avif" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="aspect-square h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="aspect-square h-max rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="text-lg font-title font-medium text-white z-[2] w-full h-full text-center p-4 justify-end flex flex-col">
|
||||
<p class="m-4 backdrop-blur-sm" >Fresh new logo and branding 💅🏾</p>
|
||||
</div>
|
||||
@@ -43,22 +43,22 @@ export default component$(() => {
|
||||
<img draggable={false} src="/changelog/v0.0.3/new-website-design.avif" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="justify-center items-center flex w-full">
|
||||
<p class="text-xl font-title text-center font-medium">Updated our <Link class="underline" href="/terms">Terms of Service</Link> <br class="hidden md:block" /> and our <Link class="underline" href="/privacy">Privacy Policy</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-max md:aspect-square aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="h-max md:aspect-square aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="justify-center items-center flex w-full">
|
||||
<p class="text-xl font-title text-center font-medium">Added support for Intel & AMD GPUs. Courtesy of{" "}<Link class="underline" href="https://github.com/DatCaptainHorse">@DatHorse</Link></p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-max aspect-square rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="h-max aspect-square rounded-2xl overflow-hidden shadow-sm flex relative sm:basis-[calc(50%-5px)] basis-full after:absolute after:pointer-events-none after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="absolute inset-0 z-0">
|
||||
<img draggable={false} src="/changelog/v0.0.3/gameplay.avifs" alt="Nestri Logo" height={328} width={328} class="w-full h-full object-cover" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="h-max aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="justify-center items-center flex w-full">
|
||||
<p class="text-lg font-title text-center font-medium">+ Lots of quality of life improvements! 🤞🏽</p>
|
||||
</div>
|
||||
@@ -75,7 +75,7 @@ export default component$(() => {
|
||||
</div>
|
||||
<div class="pt-2 pb-4 pr-2 pl-4 md:pl-8 h-max relative before:absolute before:bottom-2 before:top-0 before:left-[7px] before:w-0.5 before:bg-gradient-to-b before:rounded-[2px] before:from-primary-500 before:to-transparent" >
|
||||
<div class="flex flex-row flex-wrap gap-2.5">
|
||||
<div class="h-max justify-center aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-gray-200/70 select-none border-gray-300/70 dark:border-gray-700/70 p-5 border dark:bg-gray-800/70 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<div class="h-max justify-center aspect-auto rounded-2xl overflow-hidden shadow-sm flex relative basis-full after:absolute after:inset-0 after:z-[3] bg-white dark:bg-black select-none ring-2 ring-gray-300 dark:ring-gray-700 p-5 text-neutral-900/70 dark:text-neutral-100/70">
|
||||
<p class="text-lg font-title text-center font-medium">Nestri has been long overdue for a changelog. <br class="hidden md:block" /> Welcome to our changelog!</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -103,19 +103,19 @@ export default component$(() => {
|
||||
{feedback.map((item, index) => (
|
||||
<div key={`emoji-${index}`} class="flex relative">
|
||||
<input type="radio" class="hidden peer" name="feedback-emoji" value={item.rating} id={`emoji-${index + 1}`} />
|
||||
<label for={`emoji-${index + 1}`} class="peer-checked:bg-gray-300/70 dark:peer-checked:bg-gray-700/70 border-gray-300 dark:border-gray-700 peer-checked:ring-gray-400 dark:peer-checked:ring-gray-600 peer-checked:ring-offset-gray-50 dark:peer-checked:ring-offset-gray-950 peer-checked:ring-2 peer-checked:ring-offset-2 border cursor-pointer bg-gray-200/70 dark:bg-gray-800/70 rounded-full p-3">
|
||||
<label for={`emoji-${index + 1}`} class="peer-checked:bg-gray-300/70 dark:peer-checked:bg-gray-700/70 border-gray-300 dark:border-gray-700 peer-checked:ring-gray-400 dark:peer-checked:ring-gray-600 peer-checked:ring-offset-gray-50 dark:peer-checked:ring-offset-gray-950 peer-checked:ring-2 peer-checked:ring-offset-2 border cursor-pointer bg-gray-200 dark:bg-gray-800 rounded-full p-3">
|
||||
<item.icon />
|
||||
</label>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div class="bg-gray-200/70 dark:bg-gray-800/70 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/50 dark:focus-within:bg-gray-700/50 border-gray-300 dark:border-gray-700 ">
|
||||
<div class="bg-gray-200 dark:bg-gray-800 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/70 dark:focus-within:bg-gray-700/70 border-gray-300 dark:border-gray-700 ">
|
||||
<input type="text" class="w-full h-full bg-transparent rounded-lg p-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-gray-400 dark:focus-within:ring-gray-600 focus-within:ring-offset-2 focus-visible:outline-none focus-within:ring-offset-gray-50 dark:focus-within:ring-offset-gray-950 placeholder:text-gray-500/70" placeholder="Full Name" />
|
||||
</div>
|
||||
<div class="bg-gray-200/70 dark:bg-gray-800/70 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/50 dark:focus-within:bg-gray-700/50 border-gray-300 dark:border-gray-700 ">
|
||||
<div class="bg-gray-200 dark:bg-gray-800 flex rounded-lg w-full relative h-10 flex-none border focus-within:bg-gray-300/70 dark:focus-within:bg-gray-700/70 border-gray-300 dark:border-gray-700 ">
|
||||
<input type="email" class="w-full h-full bg-transparent rounded-lg p-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-gray-400 dark:focus-within:ring-gray-600 focus-within:ring-offset-2 focus-visible:outline-none focus-within:ring-offset-gray-50 dark:focus-within:ring-offset-gray-950 placeholder:text-gray-500/70" placeholder="Email Address" />
|
||||
</div>
|
||||
<div class="bg-gray-200/70 dark:bg-gray-800/70 flex rounded-lg w-full relative h-max flex-none border focus-within:bg-gray-300/50 dark:focus-within:bg-gray-700/50 border-gray-300 dark:border-gray-700 ">
|
||||
<div class="bg-gray-200 dark:bg-gray-800 flex rounded-lg w-full relative h-max flex-none border focus-within:bg-gray-300/70 dark:focus-within:bg-gray-700/70 border-gray-300 dark:border-gray-700 ">
|
||||
<textarea class="resize-y overflow-y-auto whitespace-break-spaces [form-sizing:content] min-h-[193px] w-full h-full bg-transparent rounded-lg p-3 focus-within:outline-none focus-within:ring-2 focus-within:ring-gray-400 dark:focus-within:ring-gray-600 focus-within:ring-offset-2 focus-visible:outline-none focus-within:ring-offset-gray-50 dark:focus-within:ring-offset-gray-950 placeholder:text-gray-500/70" placeholder="Your message" />
|
||||
</div>
|
||||
<button class={cn(buttonVariants.solid({ size: "md", intent: "neutral" }), "w-full")} type="submit" >
|
||||
|
||||
@@ -90,19 +90,17 @@ export default component$(() => {
|
||||
<>
|
||||
<NavBar />
|
||||
<HeroSection client:load>
|
||||
<button class="w-full max-w-xl rounded-xl flex items-center justify-between hover:bg-gray-300/70 dark:hover:bg-gray-700/70 transition-colors gap-2 px-4 py-3 h-[45px] border border-gray-300 dark:border-gray-700 mx-autotext-gray-500/70 bg-gray-200/70 dark:bg-gray-800/70">
|
||||
<button class="w-full max-w-xl rounded-xl flex items-center justify-between hover:bg-gray-200 dark:hover:bg-gray-800 transition-all gap-2 px-4 py-3 h-[45px] ring-2 ring-gray-300 dark:ring-gray-700 mx-auto text-gray-900/70 dark:text-gray-100/70 bg-white dark:bg-black">
|
||||
<span class="flex items-center gap-3 h-max justify-center overflow-hidden overflow-ellipsis whitespace-nowrap">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="size-[18] flex-shrink-0" height="18" width="18" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2"><circle cx="11.5" cy="11.5" r="9.5" /><path stroke-linecap="round" d="M18.5 18.5L22 22" /></g></svg>
|
||||
Search for a game to play...
|
||||
</span>
|
||||
<span class="flex items-center gap-2">
|
||||
<div class="flex items-center gap-2 text-base font-title font-bold">
|
||||
<kbd class="border-neutral-300 dark:border-neutral-700 border px-2 py-1 rounded-md">
|
||||
{/* ⌘ */}
|
||||
<kbd class="ring-2 ring-gray-300 dark:ring-gray-700 px-2 py-1 rounded-md">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" class="size-5 flex-shrink-0" width="20" height="20" viewBox="0 0 256 256"><path fill="currentColor" d="M180 144h-20v-32h20a36 36 0 1 0-36-36v20h-32V76a36 36 0 1 0-36 36h20v32H76a36 36 0 1 0 36 36v-20h32v20a36 36 0 1 0 36-36m-20-68a20 20 0 1 1 20 20h-20ZM56 76a20 20 0 0 1 40 0v20H76a20 20 0 0 1-20-20m40 104a20 20 0 1 1-20-20h20Zm16-68h32v32h-32Zm68 88a20 20 0 0 1-20-20v-20h20a20 20 0 0 1 0 40" /></svg>
|
||||
{/* <svg xmlns="http://www.w3.org/2000/svg" class="size-5 flex-shrink-0" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M6.5 21q-1.45 0-2.475-1.025T3 17.5t1.025-2.475T6.5 14H8v-4H6.5q-1.45 0-2.475-1.025T3 6.5t1.025-2.475T6.5 3t2.475 1.025T10 6.5V8h4V6.5q0-1.45 1.025-2.475T17.5 3t2.475 1.025T21 6.5t-1.025 2.475T17.5 10H16v4h1.5q1.45 0 2.475 1.025T21 17.5t-1.025 2.475T17.5 21t-2.475-1.025T14 17.5V16h-4v1.5q0 1.45-1.025 2.475T6.5 21m0-2q.625 0 1.063-.437T8 17.5V16H6.5q-.625 0-1.062.438T5 17.5t.438 1.063T6.5 19m11 0q.625 0 1.063-.437T19 17.5t-.437-1.062T17.5 16H16v1.5q0 .625.438 1.063T17.5 19M10 14h4v-4h-4zM6.5 8H8V6.5q0-.625-.437-1.062T6.5 5t-1.062.438T5 6.5t.438 1.063T6.5 8M16 8h1.5q.625 0 1.063-.437T19 6.5t-.437-1.062T17.5 5t-1.062.438T16 6.5z"/></svg> */}
|
||||
</kbd>
|
||||
<span class="px-2 py-0.5 rounded-md border border-neutral-300 dark:border-neutral-700">
|
||||
<span class="px-2 py-0.5 rounded-md ring-2 ring-gray-300 dark:ring-gray-700">
|
||||
K
|
||||
</span>
|
||||
</div>
|
||||
@@ -128,7 +126,7 @@ export default component$(() => {
|
||||
zIndex: 1 + index,
|
||||
transform: game.rotate ? `rotate(${game.rotate}deg)` : undefined,
|
||||
}}
|
||||
class={"aspect-[2/3] bg-gray-100 dark:bg-gray-900 rounded-md overflow-hidden block hover:!rotate-0 hover:scale-[1.17] hover:!z-10 ring-1 shadow-lg shadow-gray-300 dark:shadow-gray-700 ring-gray-300 dark:ring-gray-700 transition-all duration-200"}>
|
||||
class={"aspect-[2/3] bg-white dark:bg-black rounded-md overflow-hidden block hover:!rotate-0 hover:scale-[1.17] hover:!z-10 shadow-lg shadow-gray-300 dark:shadow-gray-700 ring-2 ring-gray-300 dark:ring-gray-700 transition-all duration-200"}>
|
||||
{game.image ? <BasicImageLoader width={600} height={900} src={game.image} alt={game.title} /> :
|
||||
<div class="w-full text-gray-900 dark:text-gray-100 h-full flex flex-col px-3 text-center gap-3 items-center justify-center">
|
||||
<p>Can't find your game here?</p>
|
||||
@@ -214,17 +212,17 @@ export default component$(() => {
|
||||
<div class="w-full mx-auto max-w-xl flex items-center flex-col lg:flex-row gap-6 justify-center">
|
||||
<div class="flex cursor-default items-end group">
|
||||
<div class="flex [transform:perspective(700px)] w-[61px] [transform-style:preserve-3d] relative">
|
||||
<p class="font-bold text-[200px] text-gray-50 dark:text-gray-950 group-hover:text-primary-200 dark:group-hover:text-primary-800 group-hover:-translate-x-2 transition-all duration-200 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px] leading-[1em]">
|
||||
<p class="font-bold text-[200px] text-white dark:text-black group-hover:text-primary-200 dark:group-hover:text-primary-800 group-hover:-translate-x-2 transition-all duration-200 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px] leading-[1em]">
|
||||
1
|
||||
</p>
|
||||
</div>
|
||||
<div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
|
||||
<div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-2 ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-white dark:bg-black rounded-2xl overflow-hidden">
|
||||
<div class="flex items-center justify-center" >
|
||||
<div class="z-[4] flex relative items-center justify-center size-[66px] transition-all duration-200 rounded-full bg-gray-200 dark:bg-gray-800 text-gray-500 dark:group-hover:bg-primary-800 group-hover:bg-primary-200 shadow-lg shadow-gray-300 dark:shadow-gray-700" >
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" class="size-10 flex-shrink-0 group-hover:hidden" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M6.286 19C3.919 19 2 17.104 2 14.765s1.919-4.236 4.286-4.236q.427.001.83.08m7.265-2.582a5.8 5.8 0 0 1 1.905-.321c.654 0 1.283.109 1.87.309m-11.04 2.594a5.6 5.6 0 0 1-.354-1.962C6.762 5.528 9.32 3 12.476 3c2.94 0 5.361 2.194 5.68 5.015m-11.04 2.594a4.3 4.3 0 0 1 1.55.634m9.49-3.228C20.392 8.78 22 10.881 22 13.353c0 2.707-1.927 4.97-4.5 5.52" opacity=".5" /><path stroke-linejoin="round" d="M12 22v-6m0 6l2-2m-2 2l-2-2" /></g></svg>
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="32" class="size-10 flex-shrink-0 transition-all duration-200 group-hover:block hidden text-primary-500" height="32" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5"><path d="M6.286 19C3.919 19 2 17.104 2 14.765s1.919-4.236 4.286-4.236q.427.001.83.08m7.265-2.582a5.8 5.8 0 0 1 1.905-.321c.654 0 1.283.109 1.87.309m-11.04 2.594a5.6 5.6 0 0 1-.354-1.962C6.762 5.528 9.32 3 12.476 3c2.94 0 5.361 2.194 5.68 5.015m-11.04 2.594a4.3 4.3 0 0 1 1.55.634m9.49-3.228C20.392 8.78 22 10.881 22 13.353c0 2.707-1.927 4.97-4.5 5.52" opacity=".5" /><path stroke-linejoin="round" d="m10 19.8l1.143 1.2L14 18" /></g></svg>
|
||||
</div>
|
||||
<div class="-mx-3 group-hover:-mx-2 transition-all duration-200 size-[90px] rounded-full bg-gray-100 dark:bg-gray-900 shadow-lg shadow-gray-300 dark:shadow-gray-700 z-10 relative flex items-center justify-center">
|
||||
<div class="-mx-3 group-hover:-mx-2 ring-1 ring-gray-300 dark:ring-gray-700 transition-all duration-200 size-[90px] rounded-full bg-gray-100 dark:bg-gray-900 shadow-lg shadow-gray-300 dark:shadow-gray-700 z-10 relative flex items-center justify-center">
|
||||
<svg
|
||||
width="48.672001"
|
||||
height="36.804001"
|
||||
@@ -253,11 +251,11 @@ export default component$(() => {
|
||||
</div>
|
||||
<div class="flex cursor-default group items-end">
|
||||
<div class="flex [transform:perspective(700px)] w-[80px] [transform-style:preserve-3d] relative">
|
||||
<p class="font-bold text-[200px] dark:text-gray-950 group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 relative text-gray-50 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
|
||||
<p class="font-bold text-[200px] text-white dark:text-black group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 relative [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
|
||||
2
|
||||
</p>
|
||||
</div>
|
||||
<div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
|
||||
<div class="z-[1] group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-2 ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-white dark:bg-black rounded-2xl overflow-hidden">
|
||||
<div class="flex flex-col gap-2 w-full items-center justify-center">
|
||||
<p class="text-neutral-900/70 dark:text-neutral-100/70 max-w-[80%] text-center mx-auto text-2xl font-title">
|
||||
<strong>Create</strong> or join a Nestri Party
|
||||
@@ -309,11 +307,11 @@ export default component$(() => {
|
||||
</div>
|
||||
<div class="flex cursor-none group items-end">
|
||||
<div class="flex [transform:perspective(700px)] w-[80px] [transform-style:preserve-3d] relative">
|
||||
<p class="relative font-bold text-[200px] dark:text-gray-950 group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 text-gray-50 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
|
||||
<p class="relative font-bold text-[200px] text-white dark:text-black group-hover:text-primary-200 dark:group-hover:text-primary-800 leading-[1em] group-hover:-translate-x-2 transition-all duration-200 [-webkit-text-stroke-color:theme(colors.primary.500)] [-webkit-text-stroke-width:2px]">
|
||||
3
|
||||
</p>
|
||||
</div>
|
||||
<div class="z-[1] relative group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-[3px] ring-gray-200 dark:ring-gray-800 duration-200 h-[260px] aspect-square bg-gray-100 dark:bg-gray-900 rounded-2xl overflow-hidden">
|
||||
<div class="z-[1] relative group-hover:ring-primary-500 gap-4 flex items-center justify-center flex-col transition-all ring-2 ring-gray-300 dark:ring-gray-700 duration-200 h-[260px] aspect-square bg-white dark:bg-black rounded-2xl overflow-hidden">
|
||||
<div class="absolute top-0 left-0 bottom-0 right-0 w-full h-full z-[3]">
|
||||
<Cursor client:load class="absolute left-4 top-4" text="Wanjohi" />
|
||||
<Cursor client:load color="#3a9a00" flip class="absolute right-2 top-8" text="Jd" />
|
||||
|
||||
@@ -41,11 +41,21 @@ export const Card = component$(({ game }: Props) => {
|
||||
g = Math.floor(g / count);
|
||||
b = Math.floor(b / count);
|
||||
|
||||
// Ensure the color is light enough
|
||||
const minBrightness = 100;
|
||||
r = Math.max(r, minBrightness);
|
||||
g = Math.max(g, minBrightness);
|
||||
b = Math.max(b, minBrightness);
|
||||
const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
|
||||
|
||||
if (isDarkMode) {
|
||||
// Darken the color for dark mode
|
||||
r = Math.floor(r * 0.8);
|
||||
g = Math.floor(g * 0.8);
|
||||
b = Math.floor(b * 0.8);
|
||||
} else {
|
||||
// For light mode, keep the existing logic
|
||||
const minBrightness = 100;
|
||||
r = Math.max(r, minBrightness);
|
||||
g = Math.max(g, minBrightness);
|
||||
b = Math.max(b, minBrightness);
|
||||
}
|
||||
|
||||
|
||||
return `rgb(${r},${g},${b})`;
|
||||
});
|
||||
|
||||
@@ -15,7 +15,7 @@ export const GithubBanner = component$(() => {
|
||||
>
|
||||
<section class="w-full flex flex-col items-center justify-center">
|
||||
<div class="w-full max-w-xl mx-auto">
|
||||
<div class="z-[2] md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 p-6 pb-[30px] bg-white dark:bg-black ring-1 ring-neutral-400 dark:ring-neutral-600 rounded-xl">
|
||||
<div class="z-[2] md:flex-row flex-col relative overflow-hidden flex justify-between md:items-center gap-6 p-6 pb-[30px] bg-white dark:bg-black ring-2 ring-gray-300 dark:ring-gray-700 rounded-xl">
|
||||
<div>
|
||||
<div class="gap-2 w-full flex flex-col">
|
||||
<div class="flex md:items-center justify-start gap-2 md:flex-row flex-col dark:text-gray-400/70 text-gray-600/70">
|
||||
@@ -38,7 +38,7 @@ export const GithubBanner = component$(() => {
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex items-center md:flex-col justify-center gap-2 w-max">
|
||||
<Link class="select-none relative justify-center items-center w-full flex z-[2] px-3 ring-1 ring-neutral-400 dark:ring-neutral-600 rounded-md h-8 min-w-max bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200" rel="noopener noreferrer" href="https://github.com/nestriness/nestri" target="_blank">
|
||||
<Link class="select-none relative justify-center items-center w-full flex z-[2] px-3 ring-2 ring-gray-300 dark:ring-gray-700 rounded-md h-8 min-w-max bg-white dark:bg-black hover:bg-gray-100 dark:hover:bg-gray-800 transition-all duration-200" rel="noopener noreferrer" href="https://github.com/nestriness/nestri" target="_blank">
|
||||
<span class="text-sm dark:text-white text-black w-full">
|
||||
<div class="flex justify-around items-center w-full h-max">
|
||||
Self-Host
|
||||
|
||||
@@ -12,7 +12,7 @@ export const HomeNavBar = component$(() => {
|
||||
);
|
||||
|
||||
return (
|
||||
<nav class={cn("sticky justify-between top-0 z-50 px-2 sm:px-6 text-xs sm:text-sm leading-[1] text-gray-950/70 dark:text-gray-50/70 h-[66px] dark:bg-gray-950/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full flex items-center", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-200 dark:shadow-gray-800")} >
|
||||
<nav class={cn("sticky justify-between top-0 z-50 px-2 sm:px-6 text-xs sm:text-sm leading-[1] text-gray-950/70 dark:text-gray-50/70 h-[66px] dark:bg-gray-900/70 bg-gray-100/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full flex items-center", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-300 dark:shadow-gray-700")} >
|
||||
<div class="w-6 h-6 flex-shrink-0 md:mr-2">
|
||||
<svg
|
||||
class="h-full w-full"
|
||||
|
||||
@@ -29,7 +29,7 @@ export const NavBar = component$(() => {
|
||||
);
|
||||
|
||||
return (
|
||||
<nav class={cn("sticky top-0 z-50 px-4 text-sm font-extrabold bg-gray-50/70 dark:bg-gray-950/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-200 dark:shadow-gray-800")} >
|
||||
<nav class={cn("sticky top-0 z-50 px-4 text-sm font-extrabold bg-gray-100/70 dark:bg-gray-900/70 before:backdrop-blur-[15px] before:absolute before:-z-[1] before:top-0 before:left-0 before:w-full before:h-full", hasScrolled.value && "shadow-[0_2px_20px_1px] shadow-gray-300 dark:shadow-gray-700")} >
|
||||
<div class="mx-auto flex max-w-xl items-center border-b-2 dark:border-gray-50/50 border-gray-950/50" >
|
||||
<Link class="outline-none" href="/" >
|
||||
<h1 class="text-lg font-title" >
|
||||
|
||||
@@ -24,7 +24,7 @@ export function ReactHeroSection({ children }: Props) {
|
||||
return (
|
||||
<>
|
||||
<section className="px-4" >
|
||||
<header className="overflow-hidden mx-auto max-w-xl pt-20 pb-1">
|
||||
<header className="mx-auto max-w-xl pt-20 pb-1">
|
||||
<motion.img
|
||||
initial={{
|
||||
opacity: 0,
|
||||
|
||||
Reference in New Issue
Block a user