diff --git a/sidebars.ts b/sidebars.ts index f1fb6230..00b61964 100644 --- a/sidebars.ts +++ b/sidebars.ts @@ -112,8 +112,8 @@ const sidebars: SidebarsConfig = { "python/Data_Structures/python-linked-list", "python/Data_Structures/python-stack", "python/Data_Structures/python-queue", - ] - } + ], + }, ], }, { diff --git a/src/components/ui/FirebaseAuthGithub.tsx b/src/components/ui/FirebaseAuthGithub.tsx index e728cb66..436c2c0d 100644 --- a/src/components/ui/FirebaseAuthGithub.tsx +++ b/src/components/ui/FirebaseAuthGithub.tsx @@ -17,12 +17,29 @@ const uiConfig = { const FirebaseAuthGithub: React.FC = () => { const [user, setUser] = useState(null); + const [githubText, setGithubText] = useState("Sign in with GitHub"); // ✅ new state useEffect(() => { const unregisterAuthObserver = auth.onAuthStateChanged((user) => setUser(user as User), ); - return () => unregisterAuthObserver(); + + // ✅ new effect to change text on resize + const handleResize = () => { + if (window.innerWidth <= 1110) { + setGithubText("Sign in"); + } else { + setGithubText("Sign in with GitHub"); + } + }; + + handleResize(); // initial call + window.addEventListener("resize", handleResize); + + return () => { + unregisterAuthObserver(); + window.removeEventListener("resize", handleResize); + }; }, []); if (user) { @@ -88,7 +105,8 @@ const FirebaseAuthGithub: React.FC = () => { > - Sign in with GitHub + {/* ✅ dynamic text */} + {githubText} ); diff --git a/src/css/custom.css b/src/css/custom.css index b6e18ffe..14448177 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -474,10 +474,14 @@ body { } /* ===== SECTION 11: CRITICAL FIX: TABLET/IPAD NAVBAR BEHAVIOR ===== */ -@media screen and (max-width: 1299px) { - +@media screen and (max-width: 996px) { /* Hide TOP navbar items on mobile (not sidebar) */ - .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand) { + + /* + * This hides all navbar items on small screens, *except* for the + * toggle, brand, and the item :has() the GitHub auth button. + */ + .navbar__items .navbar__item:not(.navbar__toggle):not(.navbar__brand):not(:has(#firebase-auth-github-navbar)) { display: none !important; } @@ -1484,7 +1488,7 @@ html { margin-left: auto !important; display: flex !important; align-items: center !important; - gap: 0.5rem !important; + /* gap: 0.5rem !important; */ flex-shrink: 0 !important; } @@ -1764,38 +1768,8 @@ html[data-theme="light"] [data-slot="card-header"].bg-gradient-to-br { mix-blend-mode: normal !important; } -/* ================= SECTION 15: AUTHOR PAGE AVATAR OVERLAP FIX ================= */ -/* Fix for author page avatar overlap - working solution */ -.avatar.margin-bottom--sm.author-as-h1_iMAg { - width: 150px !important; - height: 150px !important; - border-radius: 50% !important; - border: none !important; -} - -/* Additional avatar class fix */ -/* .avatar.margin-bottom--sm { - width: 40px !important; - height: 40px !important; - border-radius: 50% !important; - border: none !important; */ -/* } */ -/* -/* Author name styling fix */ -/* .authorName_w5sO { - font-size: 1.1rem !important; - line-height: 1.1rem !important; - display: block !important; - flex-direction: column !important; -} */ - -.avatar.margin-bottom--sm { - width: auto !important; - height: auto !important; - border: none !important; +@media screen and (max-width: 1110px) { + .navbar__items{ + gap: 0.1rem !important; } - - -.blog-page .margin-bottom--xl { - margin-bottom: 0rem !important; } \ No newline at end of file