diff --git a/src/app.css b/src/app.css index c0062b5..7d5e682 100644 --- a/src/app.css +++ b/src/app.css @@ -128,8 +128,37 @@ } } -/* Manual dark mode via .dark class */ -.dark { +/* Manual theme override via classes (higher specificity than media query) */ +:root.light { + --color-rosewater: #c14a4a; + --color-flamingo: #c14a4a; + --color-pink: #945e80; + --color-mauve: #945e80; + --color-red: #c14a4a; + --color-maroon: #c14a4a; + --color-peach: #c35e0a; + --color-yellow: #a96b2c; + --color-green: #6c782e; + --color-teal: #4c7a5d; + --color-sky: #4c7a5d; + --color-sapphire: #4c7a5d; + --color-blue: #45707a; + --color-lavender: #45707a; + --color-text: #654735; + --color-subtext1: #7b5d44; + --color-subtext0: #8f6f56; + --color-overlay2: #a28368; + --color-overlay1: #b6977a; + --color-overlay0: #c9aa8c; + --color-surface2: #a79c86; + --color-surface1: #c9c19f; + --color-surface0: #dfd6b1; + --color-base: #fbf1c7; + --color-mantle: #f3eac1; + --color-crust: #e7deb7; +} + +:root.dark { --color-rosewater: #efc9c2; --color-flamingo: #ebb2b2; --color-pink: #f2a7de; @@ -496,11 +525,12 @@ input[type="checkbox"]:checked::before { } /* Hamburger menu button - only show on non-touch devices under mobile breakpoint */ -@media (max-width: 767px) and (hover: hover) and (pointer: fine) { +@media (max-width: 767px) { .hamburger-menu-btn { display: block !important; } } + @keyframes shaker { 0% { transform: rotate(0deg); diff --git a/src/components/Bars.tsx b/src/components/Bars.tsx index 8f7b56a..48deef8 100644 --- a/src/components/Bars.tsx +++ b/src/components/Bars.tsx @@ -9,6 +9,124 @@ import LinkedIn from "./icons/LinkedIn"; import MoonIcon from "./icons/MoonIcon"; import SunIcon from "./icons/SunIcon"; +export function RightBarContent() { + const [isDark, setIsDark] = createSignal(false); + + onMount(() => { + const prefersDark = window.matchMedia( + "(prefers-color-scheme: dark)" + ).matches; + + if (prefersDark) { + setIsDark(true); + document.documentElement.classList.add("dark"); + document.documentElement.classList.remove("light"); + } else { + setIsDark(false); + document.documentElement.classList.add("light"); + document.documentElement.classList.remove("dark"); + } + }); + + const toggleDarkMode = () => { + const newDarkMode = !isDark(); + setIsDark(newDarkMode); + + if (newDarkMode) { + document.documentElement.classList.add("dark"); + document.documentElement.classList.remove("light"); + } else { + document.documentElement.classList.add("light"); + document.documentElement.classList.remove("dark"); + } + }; + + return ( +
+ +
+

+ Connect +

+ +
+ + {/* Dark Mode Toggle */} +
+ +
+
+ ); +} + export function LeftBar() { const { setLeftBarSize, leftBarVisible, setLeftBarVisible } = useBars(); let ref: HTMLDivElement | undefined; @@ -156,7 +274,7 @@ export function LeftBar() { {/* Hamburger menu button - positioned at right edge of navbar */} - -

- Freno.dev -

- -
-
- Recent Posts -
- }> - - {(post) => ( - - -
- post-cover - - {insertSoftHyphens(post.title.replace(/_/g, " "))} - -
+
+ +

+ Freno.dev +

+ - - {new Date(post.date).toLocaleDateString("en-US", { - month: "short", - day: "numeric", - year: "numeric" - })} - - - - )} - - +
+
+ Recent Posts +
+ }> + + {(post) => ( + + +
+ post-cover + + {insertSoftHyphens(post.title.replace(/_/g, " "))} + +
+ + + {new Date(post.date).toLocaleDateString("en-US", { + month: "short", + day: "numeric", + year: "numeric" + })} + + + + )} + + +
+
+ + {/* Navigation Links */} +
+ +
+ +
+ + + {/* RightBar content on mobile */} +
+ +
- -
- - {/* Right bar navigation merged for mobile */} - -
-
); @@ -259,20 +377,7 @@ export function RightBar() { let ref: HTMLDivElement | undefined; let actualWidth = 0; - const [isDark, setIsDark] = createSignal(false); - onMount(() => { - // Initialize dark mode based on system preference - const prefersDark = window.matchMedia( - "(prefers-color-scheme: dark)" - ).matches; - const savedTheme = localStorage.getItem("theme"); - - if (savedTheme === "dark" || (!savedTheme && prefersDark)) { - setIsDark(true); - document.documentElement.classList.add("dark"); - } - if (ref) { const updateSize = () => { actualWidth = ref?.offsetWidth || 0; @@ -282,7 +387,6 @@ export function RightBar() { updateSize(); const resizeObserver = new ResizeObserver((entries) => { - // Use requestAnimationFrame to avoid ResizeObserver loop error requestAnimationFrame(() => { actualWidth = ref?.offsetWidth || 0; setRightBarSize(rightBarVisible() ? actualWidth : 0); @@ -296,22 +400,10 @@ export function RightBar() { } }); - // Update size when visibility changes createEffect(() => { setRightBarSize(rightBarVisible() ? actualWidth : 0); }); - const toggleDarkMode = () => { - setIsDark(!isDark()); - if (!isDark()) { - document.documentElement.classList.add("dark"); - localStorage.setItem("theme", "dark"); - } else { - document.documentElement.classList.remove("dark"); - localStorage.setItem("theme", "light"); - } - }; - return ( ); } diff --git a/src/routes/contact.tsx b/src/routes/contact.tsx index 33038b4..cbc4579 100644 --- a/src/routes/contact.tsx +++ b/src/routes/contact.tsx @@ -199,11 +199,9 @@ export default function ContactPage() {
-
- Contact -
+
Contact
-
+
(for this website or any of my apps...)
@@ -302,32 +300,6 @@ export default function ContactPage() { > {emailSent() ? "Email Sent!" : error()}
-
diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 235ba74..ce66465 100644 --- a/src/routes/index.tsx +++ b/src/routes/index.tsx @@ -2,8 +2,8 @@ import { Typewriter } from "~/components/Typewriter"; export default function Home() { return ( - -
+ +
{/* fill in a ipsum lorem */} ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem ipsum lorem