/* Shared site styles to enforce a uniform left sidebar and main content layout Loaded at the end of each so it can override page-specific inline styles. */ :root{ --sidebar-width: 200px; --sidebar-bg: #f9f9f9; --sidebar-border: #ddd; --content-padding: 30px; --max-content-width: 1500px; } html,body{ height:100%; } body{ margin:0; font-family: Arial, Helvetica, sans-serif; color:#333; box-sizing: border-box; } /* Layout container */ main.layout{ display:flex !important; flex-direction:row !important; min-height:100vh; } /* Sidebar: keep consistent appearance and behaviour */ .sidebar{ width:var(--sidebar-width) !important; background:var(--sidebar-bg) !important; border-right:1px solid var(--sidebar-border) !important; padding:16px !important; position:sticky !important; top:0 !important; height:100vh !important; overflow-y:auto !important; flex-shrink:0 !important; } .app-name{ margin:0 0 14px 0; font-size:18px; } .app-name-link{ text-decoration:none; color:#222; } .sidebar-nav ul{ list-style:none; padding-left:10px; margin:0; } .sidebar-nav li{ margin:5px 0; } .sidebar-nav a{ color:#0066cc; text-decoration:none; } .sidebar-footer{ margin-top:20px; font-size:12px; color:#555; } /* Logo inside the sidebar (on-page) */ .sidebar-logo{ display:flex; align-items:center; justify-content:center; /* center the logo horizontally */ flex-direction:column; gap:8px; padding-bottom:8px; } .sidebar-logo img{ width:96px; /* larger logo */ height:96px; object-fit:contain; border-radius:10px; display:block; } .sidebar-logo .app-name-text{ font-size:18px; font-weight:700; color:#222; text-decoration:none; } /* Main content area: no manual left margin required when using the flex layout */ .content{ flex:1 !important; padding:var(--content-padding) !important; /* Never allow content to overflow the viewport: pick the smaller of the site max and the available viewport space after reserving sidebar + padding. */ max-width: min(var(--max-content-width), calc(100vw - var(--sidebar-width) - (var(--content-padding) * 2))) !important; box-sizing:border-box !important; margin-left:0 !important; /* override pages that insert a left margin */ margin-right:0 !important; /* keep right spacing consistent */ overflow-x: hidden !important; } /* Center and constrain the inner article so pages appear uniform This prevents page content from stretching to the far-right edge while keeping the sidebar fixed on the left. */ .content{ display: flex !important; justify-content: center !important; align-items: flex-start !important; } .content > .markdown-section{ width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; /* Allow long words/URLs/code to break instead of expanding the container */ word-wrap: break-word !important; overflow-wrap: anywhere !important; } /* Ensure images inside content can't grow beyond the article */ .content img, .markdown-section img { max-width: 100% !important; height: auto !important; } /* Make pre/code blocks constrained and scrollable without expanding layout */ pre { max-width: 100% !important; box-sizing: border-box !important; } /* Make figures and rows consistent */ .figure{ margin-left:auto; margin-right:auto; max-width:1000px; width:100%; box-sizing:border-box; } .figure img{ display:block; width:100%; height:auto; border-radius:10px; } .figure figcaption{ font-size:15px; color:#0a0606; text-align:left; margin-top:10px; } .row{ display:flex; align-items:center; margin:20px 0; flex-wrap:wrap; } /* Markdown/list spacing */ .markdown-section ul li{ margin:10px 0; } .markdown-section ul ul li{ margin:6px 0; } /* Responsive behaviour: stack sidebar on small screens */ @media (max-width:900px){ main.layout{ flex-direction:column !important; } .sidebar{ width:100% !important; height:auto !important; position:relative !important; border-right:none !important; border-bottom:1px solid var(--sidebar-border) !important; } .content{ padding:20px !important; } /* reduce logo size on small screens to keep layout compact */ .sidebar-logo img { width:56px !important; height:56px !important; } } /* Small helper to ensure code blocks remain readable */ pre, code{ font-family: Menlo, Monaco, 'Courier New', monospace; } pre{ background:#f6f8fa; color:#0b0b0b; padding:12px; border-radius:6px; border:1px solid #e1e4e8; overflow:auto; }