From ad42bdc12bc12f2de1192f798749f72026179294 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Thu, 6 Nov 2025 09:01:15 +0100 Subject: [PATCH 1/9] chore: update height params and update bg menu color --- docusaurus.config.js | 21 ++ src/components/BRB/BRBParallax.tsx | 4 +- src/components/Explainer/Explainer.tsx | 2 +- .../FloatingEmoji/FloatingEmoji.tsx | 265 +++++++++++------- src/components/IFrameModal/IFrameModal.tsx | 2 +- src/components/PushChat/PushChatComponent.tsx | 2 +- src/components/RemixIDE/RemixIDE.tsx | 2 +- src/css/custom.css | 18 +- src/pages-composition/homeComp.tsx | 4 +- src/pages-composition/privacymobileComp.tsx | 2 +- src/pages-composition/tosComp.tsx | 2 +- src/pages/donut-testnet-secret.tsx | 4 +- src/pages/litepaper.tsx | 2 +- .../DocRoot/Layout/Sidebar/styles.module.css | 2 +- src/theme/NotFound/Content/index.tsx | 4 +- src/theme/Root.js | 3 +- src/theme/TOC/styles.module.css | 4 +- 17 files changed, 219 insertions(+), 124 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 9a2690c18220..89af3cbcbc18 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -169,6 +169,27 @@ const config = { content: 'width=device-width, initial-scale=1, viewport-fit=cover', }, }, + { + tagName: 'meta', + attributes: { + name: 'theme-color', + content: 'rgba(0, 0, 0, 0)', + }, + }, + { + tagName: 'meta', + attributes: { + name: 'apple-mobile-web-app-capable', + content: 'yes', + }, + }, + { + tagName: 'meta', + attributes: { + name: 'apple-mobile-web-app-status-bar-style', + content: 'black-translucent', + }, + }, { tagName: 'link', attributes: { diff --git a/src/components/BRB/BRBParallax.tsx b/src/components/BRB/BRBParallax.tsx index 6e46d410d681..1f526d78e6ff 100644 --- a/src/components/BRB/BRBParallax.tsx +++ b/src/components/BRB/BRBParallax.tsx @@ -143,9 +143,9 @@ const Container = styled.div` const BRBWrapper = styled.div` width: 100%; - height: 100vh; + height: 100dvh; @media ${device.mobileL} { - min-height: 100vh; + min-height: 100dvh; } `; diff --git a/src/components/Explainer/Explainer.tsx b/src/components/Explainer/Explainer.tsx index b648db4fb884..b5b394c9f727 100644 --- a/src/components/Explainer/Explainer.tsx +++ b/src/components/Explainer/Explainer.tsx @@ -1051,7 +1051,7 @@ const DesktopTOC = styled(ItemV)` justify-content: flex-start; - max-height: 90vh; + max-height: 90dvh; overflow-y: auto; overflow-x: hidden; /* Prevent horizontal scrollbar */ diff --git a/src/components/FloatingEmoji/FloatingEmoji.tsx b/src/components/FloatingEmoji/FloatingEmoji.tsx index 9ac90ce5ed84..0b6ac1180a27 100644 --- a/src/components/FloatingEmoji/FloatingEmoji.tsx +++ b/src/components/FloatingEmoji/FloatingEmoji.tsx @@ -61,7 +61,7 @@ const FloatingContainer = styled.div` top: 0; left: 0; width: 100vw; - height: 100vh; + height: 100dvh; pointer-events: none; z-index: 1000; overflow: hidden; @@ -70,72 +70,102 @@ const FloatingContainer = styled.div` const FloatingEmojiWrapper = styled.div<{ $top: number; $fromSide: 'left' | 'right'; - $animationState: 'roll-in-left' | 'roll-in-right' | 'stay' | 'roll-out-left' | 'roll-out-right'; + $animationState: + | 'roll-in-left' + | 'roll-in-right' + | 'stay' + | 'roll-out-left' + | 'roll-out-right'; $size: number; }>` position: absolute; - top: ${props => props.$top}vh; + top: ${(props) => props.$top}dvh; pointer-events: none; - + /* Responsive horizontal positioning accounting for emoji width */ /* Default: 10% from side (much further from center) */ - left: ${props => props.$fromSide === 'left' ? '10%' : '90%'}; - transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; - + left: ${(props) => (props.$fromSide === 'left' ? '10%' : '90%')}; + transform: ${(props) => + props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; + /* DesktopL: 15% from side */ @media ${device.desktopL} { - left: ${props => props.$fromSide === 'left' ? '15%' : '85%'}; - transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; + left: ${(props) => (props.$fromSide === 'left' ? '15%' : '85%')}; + transform: ${(props) => + props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; } - + /* Tablet: 8% from side */ @media ${device.tablet} { - left: ${props => props.$fromSide === 'left' ? '8%' : '92%'}; - transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; + left: ${(props) => (props.$fromSide === 'left' ? '8%' : '92%')}; + transform: ${(props) => + props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; } - + /* MobileL: 3% from side */ @media ${device.mobileL} { - left: ${props => props.$fromSide === 'left' ? '3%' : '97%'}; - transform: ${props => props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; + left: ${(props) => (props.$fromSide === 'left' ? '3%' : '97%')}; + transform: ${(props) => + props.$fromSide === 'left' ? 'translateX(0)' : 'translateX(-100%)'}; } - + /* Size constraint - max 20vh */ - width: ${props => Math.min(props.$size, 20)}vh; - height: ${props => Math.min(props.$size, 20)}vh; - + width: ${(props) => Math.min(props.$size, 20)}dvh; + height: ${(props) => Math.min(props.$size, 20)}dvh; + /* Animation based on state */ - ${props => { + ${(props) => { switch (props.$animationState) { case 'roll-in-left': - return css`animation: ${rollInFromLeft} 2s ease-out forwards;`; + return css` + animation: ${rollInFromLeft} 2s ease-out forwards; + `; case 'roll-in-right': - return css`animation: ${rollInFromRight} 2s ease-out forwards;`; + return css` + animation: ${rollInFromRight} 2s ease-out forwards; + `; case 'stay': - return css`animation: ${stayVisible} 3s ease-in-out forwards;`; + return css` + animation: ${stayVisible} 3s ease-in-out forwards; + `; case 'roll-out-left': - return css`animation: ${rollOutToLeft} 2s ease-in forwards;`; + return css` + animation: ${rollOutToLeft} 2s ease-in forwards; + `; case 'roll-out-right': - return css`animation: ${rollOutToRight} 2s ease-in forwards;`; + return css` + animation: ${rollOutToRight} 2s ease-in forwards; + `; default: - return css`animation: none;`; + return css` + animation: none; + `; } }} - + /* Responsive scaling - laptopL and lower */ /* LaptopL (1440px) and lower: 0.75x scale */ @media (max-width: 1440px) { - transform: ${props => props.$fromSide === 'left' ? 'translateX(0) scale(0.75)' : 'translateX(-100%) scale(0.75)'}; + transform: ${(props) => + props.$fromSide === 'left' + ? 'translateX(0) scale(0.75)' + : 'translateX(-100%) scale(0.75)'}; } - + /* Tablet (768px) and lower: 0.5x scale */ @media ${device.tablet} { - transform: ${props => props.$fromSide === 'left' ? 'translateX(0) scale(0.5)' : 'translateX(-100%) scale(0.5)'}; + transform: ${(props) => + props.$fromSide === 'left' + ? 'translateX(0) scale(0.5)' + : 'translateX(-100%) scale(0.5)'}; } - + /* MobileL (525px) and lower: 0.25x scale */ @media ${device.mobileL} { - transform: ${props => props.$fromSide === 'left' ? 'translateX(0) scale(0.25)' : 'translateX(-100%) scale(0.25)'}; + transform: ${(props) => + props.$fromSide === 'left' + ? 'translateX(0) scale(0.25)' + : 'translateX(-100%) scale(0.25)'}; } `; @@ -146,7 +176,12 @@ interface FloatingEmojiState { top: number; size: number; fromSide: 'left' | 'right'; - animationState: 'roll-in-left' | 'roll-in-right' | 'stay' | 'roll-out-left' | 'roll-out-right'; + animationState: + | 'roll-in-left' + | 'roll-in-right' + | 'stay' + | 'roll-out-left' + | 'roll-out-right'; } // Props interface @@ -159,46 +194,51 @@ interface FloatingEmojiProps { } const FloatingEmoji: React.FC = ({ + // eslint-disable-next-line @typescript-eslint/no-unused-vars interval = 8000, // 8 seconds between emojis stayDuration = 3000, // 3 seconds stay duration minSize = 8, // 8vh minimum maxSize = 20, // 20vh maximum (will be capped at 20vh anyway) - enabled = true + enabled = true, }) => { const [activeEmojis, setActiveEmojis] = useState([]); - const [confettiSequenceComplete, setConfettiSequenceComplete] = useState(false); + const [confettiSequenceComplete, setConfettiSequenceComplete] = + useState(false); const [confettiLaunched, setConfettiLaunched] = useState(false); - + const emojiTypes: EmojiType[] = ['love', 'haha', 'yay', 'wow']; // Removed confetti from random selection - + // Generate confetti emoji for initial sequence - const generateConfettiEmoji = useCallback((fromSide: 'left' | 'right'): FloatingEmojiState => { - const size = Math.random() * (Math.min(maxSize, 20) - minSize) + minSize; - - // Check if we're on laptopL or smaller (1440px and below) - const isLaptopLOrSmaller = window.innerWidth <= 1440; - - // Position confetti: same as regular emojis on laptopL and smaller, otherwise bottom 70% - const maxTop = 100 - size; // Ensure emoji doesn't go below viewport - const minTop = isLaptopLOrSmaller ? 70 : 30; // Follow emoji rules on smaller screens - const top = Math.random() * (maxTop - minTop) + minTop; + const generateConfettiEmoji = useCallback( + (fromSide: 'left' | 'right'): FloatingEmojiState => { + const size = Math.random() * (Math.min(maxSize, 20) - minSize) + minSize; - return { - id: `confetti-${fromSide}-${Date.now()}-${Math.random()}`, - type: 'confetti', - fromSide, - top, - size, - animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right' - }; - }, [minSize, maxSize]); + // Check if we're on laptopL or smaller (1440px and below) + const isLaptopLOrSmaller = window.innerWidth <= 1440; + + // Position confetti: same as regular emojis on laptopL and smaller, otherwise bottom 70% + const maxTop = 100 - size; // Ensure emoji doesn't go below viewport + const minTop = isLaptopLOrSmaller ? 70 : 30; // Follow emoji rules on smaller screens + const top = Math.random() * (maxTop - minTop) + minTop; + + return { + id: `confetti-${fromSide}-${Date.now()}-${Math.random()}`, + type: 'confetti', + fromSide, + top, + size, + animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right', + }; + }, + [minSize, maxSize] + ); // Generate random emoji (non-confetti) const generateRandomEmoji = useCallback((): FloatingEmojiState => { const type = emojiTypes[Math.floor(Math.random() * emojiTypes.length)]; const fromSide = Math.random() > 0.5 ? 'left' : 'right'; const size = Math.random() * (Math.min(maxSize, 20) - minSize) + minSize; - + // Position regular emoji in bottom 30% (70vh to 100vh), ensure no cutoff const maxTop = 100 - size; // Ensure emoji doesn't go below viewport const minTop = 70; @@ -210,47 +250,62 @@ const FloatingEmoji: React.FC = ({ fromSide, top, size, - animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right' + animationState: fromSide === 'left' ? 'roll-in-left' : 'roll-in-right', }; }, [minSize, maxSize]); - + // Update emoji animation state - const updateEmojiState = useCallback((id: string, newState: FloatingEmojiState['animationState']) => { - setActiveEmojis(prev => - prev.map(emoji => - emoji.id === id ? { ...emoji, animationState: newState } : emoji - ) - ); - }, []); - + const updateEmojiState = useCallback( + (id: string, newState: FloatingEmojiState['animationState']) => { + setActiveEmojis((prev) => + prev.map((emoji) => + emoji.id === id ? { ...emoji, animationState: newState } : emoji + ) + ); + }, + [] + ); + // Remove emoji const removeEmoji = useCallback((id: string) => { - setActiveEmojis(prev => prev.filter(emoji => emoji.id !== id)); + setActiveEmojis((prev) => prev.filter((emoji) => emoji.id !== id)); }, []); - // Add regular emoji (only after confetti sequence is complete) const addRegularEmoji = useCallback(() => { if (!enabled || !confettiSequenceComplete) return; - + const newEmoji = generateRandomEmoji(); - setActiveEmojis(prev => [...prev, newEmoji]); - + setActiveEmojis((prev) => [...prev, newEmoji]); + // Schedule state transitions setTimeout(() => { updateEmojiState(newEmoji.id, 'stay'); }, 2000); // After roll-in animation (2s) - + setTimeout(() => { // Exit from the same side as entry - updateEmojiState(newEmoji.id, newEmoji.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right'); + updateEmojiState( + newEmoji.id, + newEmoji.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right' + ); }, 2000 + stayDuration); // After roll-in + stay duration - - setTimeout(() => { - removeEmoji(newEmoji.id); - }, 2000 + stayDuration + 2000); // After complete cycle - }, [enabled, confettiSequenceComplete, generateRandomEmoji, updateEmojiState, removeEmoji, stayDuration]); - + + setTimeout( + () => { + removeEmoji(newEmoji.id); + }, + 2000 + stayDuration + 2000 + ); // After complete cycle + }, [ + enabled, + confettiSequenceComplete, + generateRandomEmoji, + updateEmojiState, + removeEmoji, + stayDuration, + ]); + // Set up confetti sequence and regular emoji intervals useEffect(() => { if (!enabled) { @@ -259,56 +314,60 @@ const FloatingEmoji: React.FC = ({ setConfettiLaunched(false); return; } - + // Add single confetti from random side after 1 second const confettiTimeout = setTimeout(() => { if (confettiLaunched) return; - + // Randomly choose left or right const randomSide = Math.random() > 0.5 ? 'left' : 'right'; const confetti = generateConfettiEmoji(randomSide); - setActiveEmojis(prev => [...prev, confetti]); + setActiveEmojis((prev) => [...prev, confetti]); setConfettiLaunched(true); - + // Schedule confetti animation state transitions setTimeout(() => { updateEmojiState(confetti.id, 'stay'); }, 2000); // After roll-in animation (2s) - + setTimeout(() => { // Exit from the same side as entry - updateEmojiState(confetti.id, confetti.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right'); + updateEmojiState( + confetti.id, + confetti.fromSide === 'left' ? 'roll-out-left' : 'roll-out-right' + ); }, 2000 + stayDuration); // After roll-in + stay duration - - setTimeout(() => { - removeEmoji(confetti.id); - }, 2000 + stayDuration + 2000); // After complete cycle + + setTimeout( + () => { + removeEmoji(confetti.id); + }, + 2000 + stayDuration + 2000 + ); // After complete cycle }, 1000); - + // Mark confetti sequence as complete after confetti is launched and has time to finish const completeTimeout = setTimeout(() => { setConfettiSequenceComplete(true); }, 7000); // 7 seconds should be enough for single confetti to complete its cycle - + return () => { clearTimeout(confettiTimeout); clearTimeout(completeTimeout); }; }, [enabled]); - - // Set up regular emoji interval (only after confetti sequence) useEffect(() => { if (!enabled || !confettiSequenceComplete) { return; } - + // Start regular emoji sequence after confetti is complete (random 6-12s delay) const firstDelay = Math.random() * (12000 - 6000) + 6000; // 6000-12000ms const firstRegularTimeout = setTimeout(() => { addRegularEmoji(); - + // Set up recurring intervals with random timing (12-18s) const scheduleNext = () => { const nextDelay = Math.random() * (18000 - 12000) + 12000; // 12000-18000ms @@ -317,20 +376,20 @@ const FloatingEmoji: React.FC = ({ scheduleNext(); // Schedule the next one }, nextDelay); }; - + scheduleNext(); }, firstDelay); - + return () => { clearTimeout(firstRegularTimeout); }; }, [enabled, confettiSequenceComplete, addRegularEmoji]); - + if (!enabled) return null; - + return ( - {activeEmojis.map(emoji => ( + {activeEmojis.map((emoji) => ( = ({ $animationState={emoji.animationState} $size={emoji.size} > - diff --git a/src/components/IFrameModal/IFrameModal.tsx b/src/components/IFrameModal/IFrameModal.tsx index ddab1fd7c2d7..998b97849995 100644 --- a/src/components/IFrameModal/IFrameModal.tsx +++ b/src/components/IFrameModal/IFrameModal.tsx @@ -54,7 +54,7 @@ export default function IFrameModal({ display: 'flex', flexDirection: 'column', width: '100%', - height: isIframeVisible ? '80vh' : 'auto', + height: isIframeVisible ? '80dvh' : 'auto', maxHeight, borderRadius: '12px', overflow: 'hidden', diff --git a/src/components/PushChat/PushChatComponent.tsx b/src/components/PushChat/PushChatComponent.tsx index d0caa3e43e81..43e78c4c3cc7 100644 --- a/src/components/PushChat/PushChatComponent.tsx +++ b/src/components/PushChat/PushChatComponent.tsx @@ -264,6 +264,6 @@ const PlayGround = styled(Section)` background-repeat: no-repeat; background-size: contain; width: 100%; - height: 75vh; + height: 75dvh; margin: 0 auto; `; diff --git a/src/components/RemixIDE/RemixIDE.tsx b/src/components/RemixIDE/RemixIDE.tsx index c39b736bc37b..be2586f99c20 100644 --- a/src/components/RemixIDE/RemixIDE.tsx +++ b/src/components/RemixIDE/RemixIDE.tsx @@ -226,7 +226,7 @@ export default function RemixIDE({ examples }: RemixIDEProps) {
diff --git a/src/css/custom.css b/src/css/custom.css index 81423edd276d..6f8b55d97a2c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -772,6 +772,17 @@ --ifm-color-tag-hover: #d53a94; } +htm { + height: 100%; + padding-bottom: env(safe-area-inset-bottom); + } + + body { + min-height: 100vh; + min-height: 100dvh; + background: var(--ifm-color-black); + } + /* update docs/blogs dark mode color */ html[data-theme='dark'], html[data-theme='dark'] body, @@ -781,6 +792,7 @@ html[data-theme='dark'] .theme-doc-markdown, html[data-theme='dark'] .theme-doc-page, html[data-theme='dark'] .container { background-color: #202124 !important; + background: #202124 !important; } /* Custom styles for admonitions/alerts */ @@ -1360,10 +1372,10 @@ a:hover { } .navbar-sidebar { - height: 96vh; + height: 96dvh; width: 90vw; border-radius: 0.5rem; - margin: 2vh 5vw; + margin: 2dvh 5vw; } .navbar-sidebar .navbar__brand { @@ -2491,4 +2503,4 @@ article .markdown>ol>li>code { margin-left: 8px; vertical-align: middle; transform: rotate(180deg); -} \ No newline at end of file +} diff --git a/src/pages-composition/homeComp.tsx b/src/pages-composition/homeComp.tsx index 7a0abd493174..426cb3a9ab7a 100644 --- a/src/pages-composition/homeComp.tsx +++ b/src/pages-composition/homeComp.tsx @@ -698,7 +698,9 @@ const HomeWrapper = styled(ItemV)` background: var(--ifm-color-black); margin: 0; padding: 0; + padding-bottom: env(safe-area-inset-bottom); overflow-x: hidden !important; + min-height: 100dvh; font-family: DM Sans, san-serif !important; @@ -735,7 +737,7 @@ const HomeWrapper = styled(ItemV)` const HeroSection = styled(Section)` overflow-y: visible; overflow-x: clip; - min-height: 100vh; + min-height: 100dvh; `; const HeroContent = styled(Content)` diff --git a/src/pages-composition/privacymobileComp.tsx b/src/pages-composition/privacymobileComp.tsx index 74386413d9f8..09ba4d8f00da 100644 --- a/src/pages-composition/privacymobileComp.tsx +++ b/src/pages-composition/privacymobileComp.tsx @@ -23,7 +23,7 @@ const PrivacyMobileComp = () => { return ( <>
- + diff --git a/src/pages-composition/tosComp.tsx b/src/pages-composition/tosComp.tsx index 1569a51593ce..df603cea301f 100644 --- a/src/pages-composition/tosComp.tsx +++ b/src/pages-composition/tosComp.tsx @@ -28,7 +28,7 @@ const TosComp = () => { return ( <>
- + {t('pages.tos.hero-section.title')} diff --git a/src/pages/donut-testnet-secret.tsx b/src/pages/donut-testnet-secret.tsx index fafc2c75c49c..79e150d7ef9a 100755 --- a/src/pages/donut-testnet-secret.tsx +++ b/src/pages/donut-testnet-secret.tsx @@ -90,8 +90,8 @@ const Container = styled.div` display: flex; flex-direction: column; align-items: center; - justify-content: center; - height: 100vh; + justify-condtent: center; + height: 100dvh; background-color: black; color: white; text-align: center; diff --git a/src/pages/litepaper.tsx b/src/pages/litepaper.tsx index e0362e2989ae..a7de4ad6a704 100644 --- a/src/pages/litepaper.tsx +++ b/src/pages/litepaper.tsx @@ -29,7 +29,7 @@ const Container = styled.div` flex-direction: column; align-items: center; justify-content: center; - height: 100vh; + height: 100dvh; background-color: black; color: white; text-align: center; diff --git a/src/theme/DocRoot/Layout/Sidebar/styles.module.css b/src/theme/DocRoot/Layout/Sidebar/styles.module.css index 221aabf56422..ab9746b650ba 100644 --- a/src/theme/DocRoot/Layout/Sidebar/styles.module.css +++ b/src/theme/DocRoot/Layout/Sidebar/styles.module.css @@ -27,6 +27,6 @@ top: 0; position: sticky; height: 100%; - max-height: 100vh; + max-height: 100dvh; } } diff --git a/src/theme/NotFound/Content/index.tsx b/src/theme/NotFound/Content/index.tsx index 3ff9db665beb..ab134d3073d3 100644 --- a/src/theme/NotFound/Content/index.tsx +++ b/src/theme/NotFound/Content/index.tsx @@ -113,7 +113,7 @@ const PageContainer = styled.div<{ isDocsPage?: boolean }>` flex-direction: column; ${({ isDocsOrBlogsPage }) => !isDocsOrBlogsPage && 'background: var(--ifm-color-black)'}; - ${({ isDocsOrBlogsPage }) => isDocsOrBlogsPage && 'min-height: 100vh;'}; + ${({ isDocsOrBlogsPage }) => isDocsOrBlogsPage && 'min-height: 100dvh;'}; ${({ isDocsOrBlogsPage }) => isDocsOrBlogsPage ? 'color: var(--ifm-color-primary-text) !important' @@ -125,7 +125,7 @@ const Container = styled.div` flex-direction: column; align-items: center; justify-content: center; - height: 100vh; + height: 100dvh; color: white; text-align: center; `; diff --git a/src/theme/Root.js b/src/theme/Root.js index d0326fce303b..c29e28aa8208 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -159,7 +159,8 @@ export default function Root({ children }) { const PageContainer = styled.div` display: flex; flex-direction: column; - min-height: 100vh; + min-height: 100dvh; + position: relative; `; // The main content should take up all remaining space diff --git a/src/theme/TOC/styles.module.css b/src/theme/TOC/styles.module.css index 1453e0515266..cf3d5d864ffa 100644 --- a/src/theme/TOC/styles.module.css +++ b/src/theme/TOC/styles.module.css @@ -6,7 +6,7 @@ */ .tableOfContents { - max-height: calc(100vh - var(--ifm-navbar-height) - 2rem); + max-height: calc(100dvh - var(--ifm-navbar-height) - 2rem); overflow-y: auto; position: sticky; top: calc(var(--ifm-navbar-height) + 1rem); @@ -33,7 +33,7 @@ /* Adjust TOC height when Copy Page Button is present */ .tableOfContents:has(.copyPageButtonWrapper) { - max-height: calc(100vh - var(--ifm-navbar-height) - 2rem); + max-height: calc(100dvh - var(--ifm-navbar-height) - 2rem); } /* Ensure proper scrolling for TOC items when Copy Page Button is present */ From fc0e6aa82ad99c6321e225aa286be0aa84a64a04 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Thu, 6 Nov 2025 17:14:00 +0100 Subject: [PATCH 2/9] chore: update style --- src/css/custom.css | 11 ++--------- src/theme/Root.js | 27 ++++++++++++++++++++++++++- 2 files changed, 28 insertions(+), 10 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 6f8b55d97a2c..0f4338218d58 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -772,16 +772,10 @@ --ifm-color-tag-hover: #d53a94; } -htm { +html { height: 100%; padding-bottom: env(safe-area-inset-bottom); - } - - body { - min-height: 100vh; - min-height: 100dvh; - background: var(--ifm-color-black); - } +} /* update docs/blogs dark mode color */ html[data-theme='dark'], @@ -792,7 +786,6 @@ html[data-theme='dark'] .theme-doc-markdown, html[data-theme='dark'] .theme-doc-page, html[data-theme='dark'] .container { background-color: #202124 !important; - background: #202124 !important; } /* Custom styles for admonitions/alerts */ diff --git a/src/theme/Root.js b/src/theme/Root.js index c29e28aa8208..520654ab5583 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -1,7 +1,7 @@ // React + Web3 Essentials import { useLocation } from '@docusaurus/router'; -import React, { useContext } from 'react'; +import React, { useContext, useLayoutEffect } from 'react'; // External Components import i18nInitialize from '@site/src/utils/i18n'; @@ -62,6 +62,31 @@ export default function Root({ children }) { excludeDefaultConfigAt(path) ); + useLayoutEffect(() => { + if (location.pathname === '/') { + document.body.style.boxSizing = 'border-box'; + document.body.style.margin = '0'; + document.body.style.minHeight = '100dvh'; + document.body.style.background = '#000000'; + document.body.style.paddingBottom = 'env(safe-area-inset-bottom)'; + } else { + // Reset for other pages + document.body.style.boxSizing = ''; + document.body.style.margin = ''; + document.body.style.minHeight = ''; + document.body.style.background = ''; + document.body.style.paddingBottom = ''; + } + + return () => { + document.body.style.boxSizing = ''; + document.body.style.margin = ''; + document.body.style.minHeight = ''; + document.body.style.background = ''; + document.body.style.paddingBottom = ''; + }; + }, [location.pathname]); + // return superimposed class names if conditions are met function returnAdditionalClasses(conditions) { let result = ''; From 51f2b53b743d144c0894e8bb68f3048e934cf01e Mon Sep 17 00:00:00 2001 From: corlard3y Date: Thu, 6 Nov 2025 19:12:28 +0100 Subject: [PATCH 3/9] chore: add classname --- src/css/custom.css | 8 ++++++++ src/theme/Root.js | 19 +++---------------- 2 files changed, 11 insertions(+), 16 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 0f4338218d58..ed32915e358c 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -777,6 +777,14 @@ html { padding-bottom: env(safe-area-inset-bottom); } +body.homepage-body { + box-sizing: border-box; + margin: 0; + min-height: 100dvh; + background: #000000; + padding-bottom: env(safe-area-inset-bottom); +} + /* update docs/blogs dark mode color */ html[data-theme='dark'], html[data-theme='dark'] body, diff --git a/src/theme/Root.js b/src/theme/Root.js index 520654ab5583..3fe376f79ee8 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -64,26 +64,13 @@ export default function Root({ children }) { useLayoutEffect(() => { if (location.pathname === '/') { - document.body.style.boxSizing = 'border-box'; - document.body.style.margin = '0'; - document.body.style.minHeight = '100dvh'; - document.body.style.background = '#000000'; - document.body.style.paddingBottom = 'env(safe-area-inset-bottom)'; + document.body.classList.add('homepage-body'); } else { - // Reset for other pages - document.body.style.boxSizing = ''; - document.body.style.margin = ''; - document.body.style.minHeight = ''; - document.body.style.background = ''; - document.body.style.paddingBottom = ''; + document.body.classList.remove('homepage-body'); } return () => { - document.body.style.boxSizing = ''; - document.body.style.margin = ''; - document.body.style.minHeight = ''; - document.body.style.background = ''; - document.body.style.paddingBottom = ''; + document.body.classList.remove('homepage-body'); }; }, [location.pathname]); From 65f27534b0a6ee15f47d95d4440b10130045b493 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Fri, 7 Nov 2025 11:40:43 +0100 Subject: [PATCH 4/9] chore: add style changes --- src/css/custom.css | 10 +++++----- src/hooks/useHomeBodyStyles.tsx | 32 ++++++++++++++++++++++++++++++++ src/theme/Root.js | 16 +++------------- 3 files changed, 40 insertions(+), 18 deletions(-) create mode 100644 src/hooks/useHomeBodyStyles.tsx diff --git a/src/css/custom.css b/src/css/custom.css index ed32915e358c..0ff3601f1243 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -778,16 +778,16 @@ html { } body.homepage-body { - box-sizing: border-box; + box-sizing: border-box !important; margin: 0; - min-height: 100dvh; - background: #000000; - padding-bottom: env(safe-area-inset-bottom); + min-height: 100dvh !important; + background: #000000 !important; + padding-bottom: env(safe-area-inset-bottom) !important; } /* update docs/blogs dark mode color */ html[data-theme='dark'], -html[data-theme='dark'] body, +/*html[data-theme='dark'] body,*/ html[data-theme='dark'] #__docusaurus, html[data-theme='dark'] .main-wrapper, html[data-theme='dark'] .theme-doc-markdown, diff --git a/src/hooks/useHomeBodyStyles.tsx b/src/hooks/useHomeBodyStyles.tsx new file mode 100644 index 000000000000..2a8c8901bbbd --- /dev/null +++ b/src/hooks/useHomeBodyStyles.tsx @@ -0,0 +1,32 @@ +import { useLayoutEffect } from 'react'; +import { useLocation } from '@docusaurus/router'; + +export function useHomepageStyles() { + const location = useLocation(); + + useLayoutEffect(() => { + const isHomepage = location.pathname === '/'; + + if (isHomepage) { + document.body.classList.add('homepage-body'); + + const observer = new MutationObserver(() => { + if (!document.body.classList.contains('homepage-body')) { + document.body.classList.add('homepage-body'); + } + }); + + observer.observe(document.body, { + attributes: true, + attributeFilter: ['class'], + }); + + return () => { + observer.disconnect(); + document.body.classList.remove('homepage-body'); + }; + } else { + document.body.classList.remove('homepage-body'); + } + }, [location.pathname]); +} diff --git a/src/theme/Root.js b/src/theme/Root.js index 3fe376f79ee8..a8937f1bf4fa 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -1,7 +1,7 @@ // React + Web3 Essentials import { useLocation } from '@docusaurus/router'; -import React, { useContext, useLayoutEffect } from 'react'; +import React, { useContext } from 'react'; // External Components import i18nInitialize from '@site/src/utils/i18n'; @@ -17,6 +17,7 @@ import AccountContext from '../context/accountContext'; import { useChainNotification } from '../hooks/useChainNotification'; import { Notification } from '../hooks/useRewardsNotification'; import { useSiteBaseUrl } from '../hooks/useSiteBaseUrl'; +import { useHomepageStyles } from '../hooks/useHomeBodyStyles'; // Initialize Internalization i18nInitialize(); @@ -51,6 +52,7 @@ export default function Root({ children }) { const location = useLocation(); const baseURL = useSiteBaseUrl(); useChainNotification(); + useHomepageStyles(); const { showAlertBar } = useContext(AccountContext); const isPreview = /^\/push-chain-website\/pr-preview\/pr-\d+\/?$/.test( location.pathname @@ -62,18 +64,6 @@ export default function Root({ children }) { excludeDefaultConfigAt(path) ); - useLayoutEffect(() => { - if (location.pathname === '/') { - document.body.classList.add('homepage-body'); - } else { - document.body.classList.remove('homepage-body'); - } - - return () => { - document.body.classList.remove('homepage-body'); - }; - }, [location.pathname]); - // return superimposed class names if conditions are met function returnAdditionalClasses(conditions) { let result = ''; From 442bfe832842f17d0fd5e548c7fe6766db7e156f Mon Sep 17 00:00:00 2001 From: corlard3y Date: Fri, 7 Nov 2025 13:03:34 +0100 Subject: [PATCH 5/9] chore: update preview styles --- src/hooks/useHomeBodyStyles.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/src/hooks/useHomeBodyStyles.tsx b/src/hooks/useHomeBodyStyles.tsx index 2a8c8901bbbd..cceb470bbd65 100644 --- a/src/hooks/useHomeBodyStyles.tsx +++ b/src/hooks/useHomeBodyStyles.tsx @@ -5,7 +5,10 @@ export function useHomepageStyles() { const location = useLocation(); useLayoutEffect(() => { - const isHomepage = location.pathname === '/'; + // Check for both local homepage and preview homepage + const isHomepage = + location.pathname === '/' || + /^\/push-chain-website\/pr-preview\/pr-\d+\/?$/.test(location.pathname); if (isHomepage) { document.body.classList.add('homepage-body'); From 0090a3dc2d00f89270ef4e4454c60c5fd0398657 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Fri, 7 Nov 2025 14:23:09 +0100 Subject: [PATCH 6/9] chore: update mediaquery --- src/hooks/useMediaQuery.ts | 46 ------------------------------- src/theme/Navbar/Content/index.js | 20 ++++++-------- 2 files changed, 8 insertions(+), 58 deletions(-) diff --git a/src/hooks/useMediaQuery.ts b/src/hooks/useMediaQuery.ts index 72eacf94fd49..e31cf77351a4 100644 --- a/src/hooks/useMediaQuery.ts +++ b/src/hooks/useMediaQuery.ts @@ -32,49 +32,3 @@ function useMediaQuery(query: string): boolean { } export default useMediaQuery; - -// // React + Web3 Essentials -// import { useEffect, useState } from 'react'; - -// function useMediaQuery(query: string): boolean { -// const getMatches = (query: string): boolean => { -// // Prevents SSR issues -// if (typeof window !== 'undefined') { -// return window.matchMedia(query).matches; -// } -// return false; -// }; - -// const [matches, setMatches] = useState(getMatches(query)); - -// function handleChange() { -// setMatches(getMatches(query)); -// } - -// useEffect(() => { -// const matchMedia = window.matchMedia(query); - -// // Triggered at the first client-side load and if query changes -// handleChange(); - -// // Listen matchMedia -// if (matchMedia.addListener) { -// matchMedia.addListener(handleChange); -// } else { -// matchMedia.addEventListener('change', handleChange, { passive: true }); -// } - -// return () => { -// if (matchMedia.removeListener) { -// matchMedia.removeListener(handleChange); -// } else { -// matchMedia.removeEventListener('change', handleChange); -// } -// }; -// // eslint-disable-next-line react-hooks/exhaustive-deps -// }, [query]); - -// return matches; -// } - -// export default useMediaQuery; diff --git a/src/theme/Navbar/Content/index.js b/src/theme/Navbar/Content/index.js index d74b7d63f9b4..089ea2715698 100644 --- a/src/theme/Navbar/Content/index.js +++ b/src/theme/Navbar/Content/index.js @@ -298,7 +298,6 @@ export default function NavbarContent() { const NavigationMenuItem = styled.div` position: relative; - // Styles for the flags .flag-icon { width: 24px; height: 24px; @@ -313,17 +312,11 @@ const NavigationMenuItem = styled.div` font-size: 16px; line-height: 150%; letter-spacing: normal; - // color: var(--ifm-color-neutral-700); } &:hover { - & span { - // color: var(--ifm-color-white); - } - & .chevronIcon { transform: rotate(180deg); - // color: var(--ifm-color-white); } & .menuContent { @@ -344,10 +337,6 @@ const NavigationMenuHeader = styled.div` padding: 0px 4px 0px 12px; border-left: 1px solid var(--ifm-header-caret-color); font-family: DM Sans !important; - - &:hover { - // color: var(--ifm-navbar-text-color); - } } &:hover { @@ -362,7 +351,6 @@ const NavigationMenuHeader = styled.div` @media ${device.laptopM} { justify-content: space-between; - margin: 24px 0 0px 0; & span { padding: 0px; @@ -375,6 +363,10 @@ const NavigationMenuHeader = styled.div` props.expanded ? 'rotate(180deg)' : 'none !important'}; } } + + @media ${device.laptopM} { + display: none; + } `; const NavigationMenuContent = styled.ul` @@ -481,4 +473,8 @@ const NavItem = styled(LinkTo)` &:hover { color: var(--ifm-color-primary-text); } + + @media ${device.laptopM} { + display: none; + } `; From be953002ce91721cecef0970d6b01ce6f25c4977 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Mon, 10 Nov 2025 10:15:04 +0100 Subject: [PATCH 7/9] chore: update style --- docusaurus.config.js | 17 +++++++++++++++++ src/components/SEO/WebsiteMeta.tsx | 11 +---------- src/css/custom.css | 14 ++++++++++++++ src/pages-composition/homeComp.tsx | 2 ++ src/theme/Root.js | 1 + 5 files changed, 35 insertions(+), 10 deletions(-) diff --git a/docusaurus.config.js b/docusaurus.config.js index 89af3cbcbc18..fae36327966d 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -228,6 +228,23 @@ const config = { })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv='); `, }, + { + tagName: 'script', + attributes: { + type: 'text/javascript', + }, + innerHTML: ` + (function() { + var isHomepage = + window.location.pathname === '/' || + /^\\/push-chain-website\\/pr-preview\\/pr-\\d+\\/?$/.test(window.location.pathname); + + if (isHomepage) { + document.body.classList.add('homepage-body'); + } + })(); + `, + }, { tagName: 'script', attributes: { diff --git a/src/components/SEO/WebsiteMeta.tsx b/src/components/SEO/WebsiteMeta.tsx index 8698c54530bc..fa516471dce1 100644 --- a/src/components/SEO/WebsiteMeta.tsx +++ b/src/components/SEO/WebsiteMeta.tsx @@ -59,16 +59,7 @@ export default function WebsiteMeta() { /> {/* Browser UI chrome */} - - + Date: Wed, 12 Nov 2025 11:39:57 +0100 Subject: [PATCH 8/9] chore: remove hook --- src/css/custom.css | 25 ++++++++++++++++++++--- src/hooks/useHomeBodyStyles.tsx | 35 --------------------------------- src/theme/Root.js | 11 ++++++----- 3 files changed, 28 insertions(+), 43 deletions(-) delete mode 100644 src/hooks/useHomeBodyStyles.tsx diff --git a/src/css/custom.css b/src/css/custom.css index b2aecdddab73..f8ed6e4548f4 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -777,20 +777,39 @@ html { padding-bottom: env(safe-area-inset-bottom); } +body { + height: 100%; +} + body.homepage-body { box-sizing: border-box !important; margin: 0; - min-height: 100svh !important; - min-height: 100dvh !important; + height: 100% !important; background: #000000 !important; padding-bottom: env(safe-area-inset-bottom) !important; } /* Ensure homepage uses black background under translucent bars and fills viewport */ body.homepage-body, +.homepage-body, body.homepage-body #__docusaurus, -body.homepage-body .main-wrapper { +.homepage-body #__docusaurus, +body.homepage-body .main-wrapper, +.homepage-body .main-wrapper { background: #000000 !important; + height: 100% !important; + display: flex !important; + flex-direction: column !important; +} + +/* Ensure homepage root content expands to fill available space */ +body.homepage-body #__docusaurus > div, +.homepage-body #__docusaurus > div, +body.homepage-body > div, +.homepage-body > div { + height: 100% !important; + display: flex !important; + flex-direction: column !important; } /* Guard against any component adding white bg on homepage */ diff --git a/src/hooks/useHomeBodyStyles.tsx b/src/hooks/useHomeBodyStyles.tsx deleted file mode 100644 index cceb470bbd65..000000000000 --- a/src/hooks/useHomeBodyStyles.tsx +++ /dev/null @@ -1,35 +0,0 @@ -import { useLayoutEffect } from 'react'; -import { useLocation } from '@docusaurus/router'; - -export function useHomepageStyles() { - const location = useLocation(); - - useLayoutEffect(() => { - // Check for both local homepage and preview homepage - const isHomepage = - location.pathname === '/' || - /^\/push-chain-website\/pr-preview\/pr-\d+\/?$/.test(location.pathname); - - if (isHomepage) { - document.body.classList.add('homepage-body'); - - const observer = new MutationObserver(() => { - if (!document.body.classList.contains('homepage-body')) { - document.body.classList.add('homepage-body'); - } - }); - - observer.observe(document.body, { - attributes: true, - attributeFilter: ['class'], - }); - - return () => { - observer.disconnect(); - document.body.classList.remove('homepage-body'); - }; - } else { - document.body.classList.remove('homepage-body'); - } - }, [location.pathname]); -} diff --git a/src/theme/Root.js b/src/theme/Root.js index a53154478b51..e34287bca5c5 100644 --- a/src/theme/Root.js +++ b/src/theme/Root.js @@ -17,7 +17,6 @@ import AccountContext from '../context/accountContext'; import { useChainNotification } from '../hooks/useChainNotification'; import { Notification } from '../hooks/useRewardsNotification'; import { useSiteBaseUrl } from '../hooks/useSiteBaseUrl'; -import { useHomepageStyles } from '../hooks/useHomeBodyStyles'; // Initialize Internalization i18nInitialize(); @@ -52,7 +51,6 @@ export default function Root({ children }) { const location = useLocation(); const baseURL = useSiteBaseUrl(); useChainNotification(); - useHomepageStyles(); const { showAlertBar } = useContext(AccountContext); const isPreview = /^\/push-chain-website\/pr-preview\/pr-\d+\/?$/.test( location.pathname @@ -134,7 +132,7 @@ export default function Root({ children }) { )} @@ -161,16 +159,19 @@ export default function Root({ children }) { const PageContainer = styled.div` display: flex; flex-direction: column; - min-height: 100svh; - min-height: 100dvh; + min-height: 100%; position: relative; `; // The main content should take up all remaining space const Content = styled.div` flex: 1; + display: flex; + flex-direction: column; + width: 100%; ${({ isHome }) => isHome && `background: linear-gradient(90deg, #3524ed 0%,var(--ifm-color-custom-pink) 50%, #3524ed 100%); + min-height: 100%; `} `; From b9e9603dcbae2dc0137036e2eeb0065efa6a88e1 Mon Sep 17 00:00:00 2001 From: corlard3y Date: Wed, 12 Nov 2025 14:14:57 +0100 Subject: [PATCH 9/9] update custom.css file --- src/css/custom.css | 32 +++----------------------------- 1 file changed, 3 insertions(+), 29 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index f8ed6e4548f4..d7cc6073d595 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -781,47 +781,21 @@ body { height: 100%; } -body.homepage-body { - box-sizing: border-box !important; - margin: 0; - height: 100% !important; - background: #000000 !important; - padding-bottom: env(safe-area-inset-bottom) !important; -} - /* Ensure homepage uses black background under translucent bars and fills viewport */ -body.homepage-body, -.homepage-body, -body.homepage-body #__docusaurus, -.homepage-body #__docusaurus, -body.homepage-body .main-wrapper, -.homepage-body .main-wrapper { +body .homepage-body { background: #000000 !important; height: 100% !important; display: flex !important; flex-direction: column !important; -} + margin: 0; -/* Ensure homepage root content expands to fill available space */ -body.homepage-body #__docusaurus > div, -.homepage-body #__docusaurus > div, -body.homepage-body > div, -.homepage-body > div { - height: 100% !important; - display: flex !important; - flex-direction: column !important; } -/* Guard against any component adding white bg on homepage */ -body.homepage-body .navbar--fixed-top, -body.homepage-body .navbar__inner { - background-color: transparent !important; -} /* update docs/blogs dark mode color */ html[data-theme='dark'], /*html[data-theme='dark'] body,*/ -html[data-theme='dark'] #__docusaurus, +/*html[data-theme='dark'] #__docusaurus,*/ html[data-theme='dark'] .main-wrapper, html[data-theme='dark'] .theme-doc-markdown, html[data-theme='dark'] .theme-doc-page,