Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Development - Dark Mode Default #23

Merged
merged 3 commits into from
Oct 30, 2023
Merged

Development - Dark Mode Default #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
27eddbc
God Ray css
kmiguel10 Oct 30, 2023
3784d48
Dark Mode (Default Theme) + God Rays Css on Header + Adjusted height …
kmiguel10 Oct 30, 2023
26b42d7
Turned off mobile dark theme toggle
kmiguel10 Oct 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions app/components/ui/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,9 @@ const ProfileHeader = () => {
const currentPath = usePathname();

return (
<div className="flex flex-col items-center rounded-xl border border-gray-6 bg-gray-2 p-3 md:flex-row md:justify-between md:rounded-2xl md:p-6">
<div className="flex w-full items-center">
<div className="relative flex flex-col items-center rounded-xl border border-gray-6 bg-gray-2 p-3 md:flex-row md:justify-between md:rounded-2xl md:p-6">
<div className="jumbo absolute inset-0 z-0 opacity-50"></div>
<div className="relative z-10 h-full flex w-full items-center">
{/* Avatara (desktop) */}
<ProfileAvatar className="mr-4 hidden md:block" size={56} />
{/* Avatara (mobile) TODO */}
Expand Down
14 changes: 14 additions & 0 deletions app/components/ui/nav-bar/nav-bar-desktop.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,8 +3,14 @@ import React from "react";
import { NAVBAR_PAGES } from "@/lib/constants/site";
import Button from "@components/ui/button/index";
import clsx from "clsx";
import { SunMoon } from "lucide-react";

export default function NavbarDesktop({ selected }: NavBarProps) {
// const toggleTheme = () => {
// if (document.body.classList.contains("dark"))
// document.body.classList.remove("dark");
// else document.body.classList.add("dark");
// };
return (
<nav className="pointer-events-auto sticky top-0 z-popover hidden h-12 items-center border-b border-gray-6 bg-white px-4 dark:bg-black md:flex">
{/* <Logo /> Can insert picure here or KM logo*/}
Expand All @@ -27,6 +33,14 @@ export default function NavbarDesktop({ selected }: NavBarProps) {
);
})}
<div className="flex-grow" />
<div className="ml-2">
{/* <button
onClick={toggleTheme}
className="px-3 py-1 border border-stone-200 rounded-full drop-shadow-sm text-sm text-stone-800 dark:text-white bg-white/40 dark:bg-black/40 backdrop-blur-lg hover:border-stone-300 transition-colors dark:border-stone-500 dark:hover:border-stone-400"
>
<SunMoon />
</button> */}
</div>
</nav>
);
}
12 changes: 12 additions & 0 deletions app/components/ui/nav-bar/nav-bar-mobile.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,14 @@ import { NAVBAR_PAGES } from "@/lib/constants/site";
import Tooltip from "@components/ui/tooltip";
import IconButton from "@components/ui/icon-button";
import clsx from "clsx";
import { SunMoon } from "lucide-react";

export default function NavbarMobile({ selected }: NavBarProps) {
// const toggleTheme = () => {
// if (document.body.classList.contains("dark"))
// document.body.classList.remove("dark");
// else document.body.classList.add("dark");
// };
return (
<nav className="pointer-events-auto sticky top-0 z-popover flex h-12 items-center border-b border-gray-6 bg-white px-4 dark:bg-black md:hidden">
{/* <Logo /> */}
Expand All @@ -31,6 +37,12 @@ export default function NavbarMobile({ selected }: NavBarProps) {
);
})}
<div className="flex-grow" />
{/* <button
onClick={toggleTheme}
className="px-3 py-1 border border-stone-200 rounded-full drop-shadow-sm text-sm text-stone-800 dark:text-white bg-white/40 dark:bg-black/40 backdrop-blur-lg hover:border-stone-300 transition-colors dark:border-stone-500 dark:hover:border-stone-400"
>
<SunMoon />
</button> */}
</nav>
);
}
104 changes: 103 additions & 1 deletion app/globals.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ body,
main {
@apply bg-gray-1 text-gray-12;
font-weight: 300;
height: 93vh;
height: 100%;
}

* {
Expand Down Expand Up @@ -69,3 +69,105 @@ div#__next > div > main {
.recharts-cartesian-axis-tick-value {
@apply fill-gray-11;
}

@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");

/* body {
font-family: Inter, sans-serif;
}
God Rays
*/

@keyframes jumbo {
from {
background-position:
50% 50%,
50% 50%;
}
to {
background-position:
350% 50%,
350% 50%;
}
}

.jumbo {
--stripes: repeating-linear-gradient(
100deg,
#fff 0%,
#fff 7%,
transparent 10%,
transparent 12%,
#fff 16%
);
--stripesDark: repeating-linear-gradient(
100deg,
#000 0%,
#000 7%,
transparent 10%,
transparent 12%,
#000 16%
);
--rainbow: repeating-linear-gradient(
100deg,
#60a5fa 10%,
#e879f9 15%,
#60a5fa 20%,
#5eead4 25%,
#60a5fa 30%
);
background-image: var(--stripes), var(--rainbow);
background-size: 100%, 100%;
background-position:
50% 50%,
50% 50%;

filter: blur(10px) invert(100%);

mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);

pointer-events: none;
}

.jumbo::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--stripes), var(--rainbow);
background-size: 200%, 100%;
animation: jumbo 60s linear infinite;
background-attachment: fixed;
mix-blend-mode: difference;
}

.dark .jumbo {
background-image: var(--stripesDark), var(--rainbow);
filter: blur(10px) opacity(50%) saturate(200%);
}
.dark .jumbo::after {
background-image: var(--stripesDark), var(--rainbow);
}

.jumbo-background {
@apply absolute inset-0;
background-image: var(--stripes), var(--rainbow);
background-size: 100%, 100%;
background-position:
50% 50%,
50% 50%;
filter: blur(10px) invert(100%);
mask-image: radial-gradient(ellipse at 100% 0%, black 40%, transparent 70%);
pointer-events: none;
mix-blend-mode: difference;
z-index: -1; /* Place the background behind the content */
}

.jumbo-background::after {
content: "";
position: absolute;
inset: 0;
background-image: var(--stripes), var(--rainbow);
background-size: 200%, 100%;
animation: jumbo 60s linear infinite;
background-attachment: fixed;
}
2 changes: 1 addition & 1 deletion app/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ export default function RootLayout({
}) {
return (
<html lang="en">
<body className={inter.className}>
<body className={`${inter.className} dark`}>
{children}
<Analytics />
</body>
Expand Down