github-mirrors/netris-nestri
1
0
Fork 0
mirror of https://github.com/nestriness/nestri.git synced 2025-12-12 16:55:37 +02:00
Code Issues Packages Projects Releases Wiki Activity

🐛 fix: Use a lower contrast color for as background color

Browse Source
This commit is contained in:
Wanjohi
2024-09-01 02:13:16 +03:00
parent ba15f30bbf
commit 2b6a048ccd
9 changed files with 43 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
packages/ui/src/card.tsx
View File

@@ -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})`;
});

4
packages/ui/src/github-banner.tsx
View File

@@ -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&nbsp;

2
packages/ui/src/home-nav-bar.tsx
View File

@@ -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"

2
packages/ui/src/nav-bar.tsx
View File

@@ -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" >

2
packages/ui/src/react/hero-section.tsx
View File

@@ -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,