renttrent/peroxy_site
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

dark mode and light mode support

Browse Source
This commit is contained in:
rei
2022-12-30 15:01:25 +01:00
parent d397503c66
commit 4d9092ae3d
10 changed files with 148 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
components/Navbar.tsx
View File

@@ -13,14 +13,14 @@ export const Navbar = () => {
const [showMenu, setShowMenu] = useState(false);
return (
<nav className="py-4 xl:px-10 px-4 flex flex-row justify-between sticky top-0 bg-gradient-dark z-50 border-b border-gradient-light">
<nav className="py-4 xl:px-10 px-4 flex flex-row justify-between sticky top-0 bg-slate-100 dark:bg-gradient-dark z-50 border-b dark:border-gradient-light border-gray-200">
<Link
href="/"
id="logo"
className="flex flex-row gap-2 items-center group"
>
<Logo />
<div className="font-bold xl:text-4xl text-xl font-mono transition-all ease-in duration-100 text-action group-hover:text-secondary">
<div className="font-bold xl:text-4xl text-xl font-mono transition-all ease-in duration-100 text-action group-hover:text-primary dark:group-hover:text-secondary">
peroxy
<span className="xl:text-sm text-xs">.dev</span>
</div>
@@ -49,7 +49,7 @@ export const Navbar = () => {
exit={{ opacity: 0 }}
/>
<motion.div
className={`z-40 absolute w-1/2 bg-blue-900
className={`z-40 absolute w-1/2 bg-blue-900 text-primary-text
right-0 top-0 px-10 py-6 h-full`}
initial={{ x: "100%" }}
animate={{ x: 0 }}