From 26e910acd1697315c2d9c9a854b095cd670fd025 Mon Sep 17 00:00:00 2001 From: mohamed hadri Date: Sat, 18 Oct 2025 23:09:10 +0300 Subject: [PATCH 1/4] fix: Improve mobile responsiveness and code block button visibility --- docusaurus.config.js | 6 ++ src/css/custom.css | 252 +++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 258 insertions(+) diff --git a/docusaurus.config.js b/docusaurus.config.js index 2b712420..031f4c4c 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -60,6 +60,12 @@ const config = { ({ // Replace with your project's social card image: "img/docusaurus-social-card.jpg", + metadata: [ + { + name: "viewport", + content: "width=device-width, initial-scale=1.0, maximum-scale=5.0", + }, + ], navbar: { title: "Open Source Education Path", logo: { diff --git a/src/css/custom.css b/src/css/custom.css index ce74df63..4bacbdfb 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -49,4 +49,256 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { background-size: contain; position: absolute; background-repeat: no-repeat; +} + +/* ========================================== + MOBILE RESPONSIVE IMPROVEMENTS + ========================================== */ + +/* Fix code block copy buttons for mobile */ +/* Make copy buttons always visible on mobile devices */ +@media (max-width: 996px) { + .clean-btn { + opacity: 1 !important; + visibility: visible !important; + } + + /* Ensure the button group is always visible */ + .code-block-with-language .button-group { + opacity: 1 !important; + visibility: visible !important; + } + + /* Make sure copy button is always visible */ + .clean-btn[aria-label*="Copy"] { + opacity: 1 !important; + visibility: visible !important; + } +} + +/* Alternative approach - target Docusaurus specific classes */ +@media (max-width: 996px) { + /* Target the copy button in code blocks */ + .theme-code-block .clean-btn { + opacity: 1 !important; + visibility: visible !important; + } + + /* Target button groups in code blocks */ + .theme-code-block .button-group { + opacity: 1 !important; + visibility: visible !important; + } + + /* Ensure code block buttons are always visible on mobile */ + .prism-code .clean-btn { + opacity: 1 !important; + visibility: visible !important; + } +} + +/* General Mobile Breakpoints */ +@media (max-width: 996px) { + /* Improve overall spacing on mobile */ + .main-wrapper { + padding: 0; + } + + /* Better content padding on mobile */ + .container { + padding-left: 1rem; + padding-right: 1rem; + } + + /* Improve article spacing */ + article { + padding: 1rem; + } +} + +/* Image Responsiveness */ +@media (max-width: 996px) { + /* Make all images responsive */ + img { + max-width: 100%; + height: auto; + display: block; + } + + /* Ensure markdown images are responsive */ + .markdown img { + max-width: 100%; + height: auto; + } + + /* Handle images in content */ + .theme-doc-markdown img { + max-width: 100%; + height: auto; + } + + /* Responsive image containers */ + .markdown > p > img { + width: 100%; + height: auto; + object-fit: contain; + } +} + +/* Navigation Menu Improvements for Mobile */ +@media (max-width: 996px) { + /* Improve mobile menu button visibility */ + .navbar__toggle { + display: flex; + align-items: center; + justify-content: center; + } + + /* Better mobile menu styling */ + .navbar-sidebar { + width: 80vw; + max-width: 350px; + } + + /* Improve menu item spacing */ + .navbar-sidebar .menu__list-item { + padding: 0.5rem 0; + } + + /* Better touch targets for mobile menu */ + .navbar-sidebar .menu__link { + padding: 0.75rem 1rem; + font-size: 1rem; + min-height: 44px; /* Accessibility - minimum touch target */ + } +} + +/* Table Responsiveness */ +@media (max-width: 996px) { + /* Make tables scrollable horizontally on mobile */ + .markdown table { + display: block; + width: 100%; + overflow-x: auto; + -webkit-overflow-scrolling: touch; + } + + /* Ensure table cells have adequate padding */ + .markdown table td, + .markdown table th { + min-width: 100px; + padding: 0.5rem; + } +} + +/* Typography Improvements for Mobile */ +@media (max-width: 996px) { + /* Adjust heading sizes for mobile */ + h1 { + font-size: 1.75rem !important; + } + + h2 { + font-size: 1.5rem !important; + } + + h3 { + font-size: 1.25rem !important; + } + + /* Better line height for readability */ + .markdown p { + line-height: 1.7; + } + + /* Prevent text overflow */ + .markdown { + word-wrap: break-word; + overflow-wrap: break-word; + } +} + +/* Sidebar Improvements for Mobile */ +@media (max-width: 996px) { + /* Ensure sidebar is fully usable on mobile */ + .theme-doc-sidebar-container { + width: 100%; + } + + /* Better sidebar menu items */ + .theme-doc-sidebar-menu { + padding: 1rem; + } + + /* Improve sidebar link spacing */ + .menu__link { + padding: 0.5rem 0.75rem; + font-size: 0.95rem; + } +} + +/* Button and Interactive Elements */ +@media (max-width: 996px) { + /* Ensure all buttons have adequate touch targets */ + .button, + .clean-btn, + a.button { + min-height: 44px; + min-width: 44px; + padding: 0.75rem 1.25rem; + } + + /* Better button spacing */ + .button:not(:last-child) { + margin-bottom: 0.5rem; + } +} + +/* Admonitions (Tips, Notes, Warnings) on Mobile */ +@media (max-width: 996px) { + .admonition { + margin: 1rem 0; + padding: 1rem; + } + + .admonition-heading h5 { + font-size: 1rem; + } +} + +/* Footer Improvements for Mobile */ +@media (max-width: 996px) { + .footer { + padding: 2rem 1rem; + } + + .footer__links { + padding-left: 0; + } + + .footer__col { + margin-bottom: 1.5rem; + } +} + +/* Prevent horizontal scroll */ +@media (max-width: 996px) { + body { + overflow-x: hidden; + } + + /* Prevent content from overflowing */ + .main-wrapper { + overflow-x: hidden; + } + + /* Ensure all containers respect viewport */ + * { + max-width: 100%; + } + + /* Allow specific elements to exceed if needed */ + html, body, .main-wrapper, .container { + max-width: none; + } } \ No newline at end of file From 5f3d38ca70dea15ca1adc53e3bca61b81d286f73 Mon Sep 17 00:00:00 2001 From: mohamed hadri Date: Sun, 19 Oct 2025 00:21:12 +0300 Subject: [PATCH 2/4] refactor: Remove article padding from dark theme styles --- src/css/custom.css | 5 ----- 1 file changed, 5 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 4bacbdfb..8701e623 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -109,11 +109,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { padding-left: 1rem; padding-right: 1rem; } - - /* Improve article spacing */ - article { - padding: 1rem; - } } /* Image Responsiveness */ From ca4be90341434bbcdcd094f570face52cf5ad18b Mon Sep 17 00:00:00 2001 From: mohamed hadri Date: Sun, 19 Oct 2025 00:41:51 +0300 Subject: [PATCH 3/4] style: Enhance mobile layout by removing padding from containers and articles --- src/css/custom.css | 50 ++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 44 insertions(+), 6 deletions(-) diff --git a/src/css/custom.css b/src/css/custom.css index 8701e623..6d1f3c9f 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -101,13 +101,44 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { @media (max-width: 996px) { /* Improve overall spacing on mobile */ .main-wrapper { - padding: 0; + padding: 0 !important; } - /* Better content padding on mobile */ + /* Remove ALL padding from containers */ .container { - padding-left: 1rem; - padding-right: 1rem; + padding-left: 0 !important; + padding-right: 0 !important; + } + + /* Remove all horizontal padding from article */ + article { + padding-left: 0 !important; + padding-right: 0 !important; + } + + /* Add ONLY minimal padding to markdown content - force override */ + .theme-doc-markdown.markdown { + padding-left: 0.75rem !important; + padding-right: 0.75rem !important; + } + + /* Remove padding from ALL doc containers */ + div[class*="docItemContainer"], + div[class*="docMainContainer"], + div[class*="docItemCol"] { + padding-left: 0 !important; + padding-right: 0 !important; + } + + /* Target the main doc wrapper */ + main[class*="docMainContainer"] { + padding: 0 !important; + } + + /* Remove row padding */ + .row { + margin-left: 0 !important; + margin-right: 0 !important; } } @@ -238,11 +269,18 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { .button, .clean-btn, a.button { - min-height: 44px; - min-width: 44px; + min-height: 40px; + min-width: 40px; padding: 0.75rem 1.25rem; } + /* Add flex display to clean-btn for better layout */ + .clean-btn { + display: flex; + align-items: center; + justify-content: center; + } + /* Better button spacing */ .button:not(:last-child) { margin-bottom: 0.5rem; From afdae01c8fab06400561fcbe32ff1f6a2e4338ee Mon Sep 17 00:00:00 2001 From: Mohamed Hadri <68324184+mohamedhadri@users.noreply.github.com> Date: Sat, 1 Nov 2025 19:13:19 +0000 Subject: [PATCH 4/4] feat: add mobile word wrap functionality and improve image responsiveness --- docusaurus.config.js | 5 +++ src/css/custom.css | 49 ++++++++++++++++-------- src/js/mobileWordWrap.js | 83 ++++++++++++++++++++++++++++++++++++++++ 3 files changed, 122 insertions(+), 15 deletions(-) create mode 100644 src/js/mobileWordWrap.js diff --git a/docusaurus.config.js b/docusaurus.config.js index 118a2cfc..2368faa9 100644 --- a/docusaurus.config.js +++ b/docusaurus.config.js @@ -28,6 +28,11 @@ const config = { onBrokenLinks: "throw", onBrokenMarkdownLinks: "warn", + // Client modules - scripts that run on the client side + clientModules: [ + require.resolve('./src/js/mobileWordWrap.js'), + ], + // Even if you don't use internationalization, you can use this field to set // useful metadata like html lang. For example, if your site is Chinese, you // may want to replace "en" with "zh-Hans". diff --git a/src/css/custom.css b/src/css/custom.css index 6d1f3c9f..9f3ccd0d 100644 --- a/src/css/custom.css +++ b/src/css/custom.css @@ -144,23 +144,12 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { /* Image Responsiveness */ @media (max-width: 996px) { - /* Make all images responsive */ - img { - max-width: 100%; - height: auto; - display: block; - } - - /* Ensure markdown images are responsive */ - .markdown img { - max-width: 100%; - height: auto; - } - - /* Handle images in content */ + /* Make content images responsive */ + .markdown img, .theme-doc-markdown img { max-width: 100%; height: auto; + display: block; } /* Responsive image containers */ @@ -171,6 +160,16 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { } } +/* Footer logo sizing on mobile – prevent oversized logo */ +@media (max-width: 996px) { + .footer .footer__logo img, + .footer .footer__logo { + max-width: 72px; + width: 72px; + height: auto; + } +} + /* Navigation Menu Improvements for Mobile */ @media (max-width: 996px) { /* Improve mobile menu button visibility */ @@ -199,6 +198,27 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { } } +/* Pagination (Prev/Next) – prevent cut off on mobile */ +@media (max-width: 996px) { + /* Add small horizontal padding to the whole block to keep cards inside viewport */ + .pagination-nav { + padding-left: 0.75rem; + padding-right: 0.75rem; + } + + /* Remove extra margins that cause overflow when each item is 50% width */ + .pagination-nav__link { + margin: 0; + } + + /* Ensure box sizing doesn't overflow and keep a tiny gap */ + .pagination-nav__item { + box-sizing: border-box; + padding-left: 0.25rem; + padding-right: 0.25rem; + } +} + /* Table Responsiveness */ @media (max-width: 996px) { /* Make tables scrollable horizontally on mobile */ @@ -271,7 +291,6 @@ html[data-theme='dark'] .docusaurus-highlight-code-line { a.button { min-height: 40px; min-width: 40px; - padding: 0.75rem 1.25rem; } /* Add flex display to clean-btn for better layout */ diff --git a/src/js/mobileWordWrap.js b/src/js/mobileWordWrap.js new file mode 100644 index 00000000..fa8c7e28 --- /dev/null +++ b/src/js/mobileWordWrap.js @@ -0,0 +1,83 @@ +/** + * Automatically enable word wrap in code blocks on mobile devices + * This script clicks the word wrap button when the page loads on mobile screens + */ + +function enableWordWrapOnMobile() { + // Check if we're on a mobile device (screen width <= 996px) + if (window.innerWidth <= 996) { + // Wait for the DOM to be fully loaded and code blocks to render + setTimeout(() => { + // Find all word wrap buttons + // The button has class 'clean-btn' and when enabled also has 'wordWrapButtonEnabled_*' + const wordWrapButtons = document.querySelectorAll('.clean-btn[aria-label*="word wrap"], .clean-btn[aria-label*="Word wrap"], .clean-btn[title*="word wrap"], .clean-btn[title*="Word wrap"]'); + + wordWrapButtons.forEach(button => { + // Check if the button is NOT already enabled + // When enabled, it has a class containing 'wordWrapButtonEnabled' + const isEnabled = Array.from(button.classList).some(className => + className.includes('wordWrapButtonEnabled') + ); + + if (!isEnabled) { + // Click the button to enable word wrap + button.click(); + } + }); + }, 500); // Wait 500ms for code blocks to render + } +} + +// Run on initial page load +if (typeof window !== 'undefined') { + // Execute when DOM is ready + if (document.readyState === 'loading') { + document.addEventListener('DOMContentLoaded', enableWordWrapOnMobile); + } else { + enableWordWrapOnMobile(); + } + + // Also run when navigating between pages (Docusaurus uses client-side routing) + window.addEventListener('popstate', enableWordWrapOnMobile); + + // Listen for route changes in Docusaurus + if (window.docusaurus) { + window.docusaurus.prefetch = function() { + // Hook into Docusaurus navigation + enableWordWrapOnMobile(); + }; + } + + // Use MutationObserver to detect when new code blocks are added to the page + const observer = new MutationObserver((mutations) => { + let shouldCheck = false; + + mutations.forEach((mutation) => { + if (mutation.addedNodes.length > 0) { + mutation.addedNodes.forEach((node) => { + // Check if a code block or button was added + if (node.nodeType === 1) { // Element node + if (node.matches && ( + node.matches('.theme-code-block') || + node.matches('.clean-btn') || + node.querySelector('.theme-code-block') || + node.querySelector('.clean-btn') + )) { + shouldCheck = true; + } + } + }); + } + }); + + if (shouldCheck) { + enableWordWrapOnMobile(); + } + }); + + // Start observing the document body for changes + observer.observe(document.body, { + childList: true, + subtree: true + }); +}