refactor(website): dark mode

This commit is contained in:
iCrawl
2023-04-11 20:13:59 +02:00
parent 78e02c4b63
commit 24c462bf6f
12 changed files with 23 additions and 12 deletions

View File

@@ -3,7 +3,7 @@ import vercelLogo from '~/assets/powered-by-vercel.svg';
export default function Footer() {
return (
<footer className="dark:bg-dark-800 bg-light-600 md:pl-12 md:pr-12">
<footer className="md:pl-12 md:pr-12">
<div className="mx-auto flex max-w-6xl flex-col place-items-center gap-12 pt-12 lg:place-content-center">
<div className="flex w-full flex-col place-content-between place-items-center gap-12 md:flex-row md:gap-0">
<a

View File

@@ -64,7 +64,7 @@ export default function Header() {
);
return (
<header className="dark:bg-dark/50 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/50 shadow backdrop-blur-md">
<header className="dark:bg-dark-600/75 dark:border-dark-100 border-light-900 sticky top-4 z-20 rounded-md border bg-white/75 shadow backdrop-blur-md">
<div className="block h-16 px-6">
<div className="flex h-full flex-row place-content-between place-items-center gap-8">
<Button

View File

@@ -14,7 +14,7 @@ export function Nav({ members }: { members: SidebarSectionItemData[] }) {
return (
<nav
className={`dark:bg-dark/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
className={`dark:bg-dark-600/75 dark:border-dark-100 border-light-900 top-22 fixed bottom-4 left-4 right-4 z-20 mx-auto max-w-5xl rounded-md border bg-white/75 shadow backdrop-blur-md ${
opened ? 'block' : 'hidden'
} lg:min-w-xs lg:sticky lg:block lg:h-full lg:w-full lg:max-w-xs`}
>

View File

@@ -93,7 +93,12 @@ export function Sidebar({ members }: { members: SidebarSectionItemData[] }) {
{(Object.keys(groupItems) as (keyof GroupedMembers)[])
.filter((group) => groupItems[group].length)
.map((group, idx) => (
<Section icon={resolveIcon(group)} key={`${group}-${idx}`} title={group}>
<Section
buttonClassName="bg-light-600 hover:bg-light-700 active:bg-light-800 dark:bg-dark-400 dark:hover:bg-dark-300 dark:active:bg-dark-400 focus:ring-width-2 focus:ring-blurple rounded p-3 outline-0 focus:ring"
icon={resolveIcon(group)}
key={`${group}-${idx}`}
title={group}
>
{groupItems[group].map((member, index) => (
<ItemLink
className={`dark:border-dark-100 border-light-800 focus:ring-width-2 focus:ring-blurple ml-5 flex flex-col border-l p-[5px] pl-6 outline-0 focus:rounded focus:border-0 focus:ring ${