Spaces:
Sleeping
Sleeping
Mohammed AL Sarraj
fix: add comprehensive mobile responsive styles — sidebar collapse, grid stacking, text sizing
d715331 | <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"/> | |
| <title>{% block title %}DevKit{% endblock %}</title> | |
| <script src="https://cdn.tailwindcss.com?plugins=forms,container-queries"></script> | |
| <link href="https://fonts.googleapis.com/css2?family=Space+Mono:wght@400;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600&display=swap" rel="stylesheet"/> | |
| <link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap" rel="stylesheet"/> | |
| <script id="tailwind-config"> | |
| tailwind.config = { | |
| darkMode: "class", | |
| theme: { | |
| extend: { | |
| colors: { | |
| "error-container": "#fe8983", | |
| "on-primary-fixed-variant": "#005bb0", | |
| "on-secondary-fixed-variant": "#505d68", | |
| "surface-bright": "#f8f9fa", | |
| "surface": "#f8f9fa", | |
| "surface-tint": "#00d97e", | |
| "primary": "#00d97e", | |
| "on-surface-variant": "#586064", | |
| "primary-fixed-dim": "#bfd5ff", | |
| "inverse-surface": "#0c0f10", | |
| "on-tertiary": "#fbf7ff", | |
| "background": "#f8f9fa", | |
| "secondary": "#54616b", | |
| "on-secondary-fixed": "#34414b", | |
| "on-background": "#2b3437", | |
| "surface-container": "#eaeff1", | |
| "tertiary-dim": "#51516c", | |
| "on-primary": "#001a0d", | |
| "secondary-container": "#d7e4f1", | |
| "tertiary": "#5d5c78", | |
| "primary-dim": "#0052a0", | |
| "on-error": "#fff7f6", | |
| "surface-container-lowest": "#ffffff", | |
| "outline-variant": "#abb3b7", | |
| "on-secondary": "#f5f9ff", | |
| "inverse-primary": "#5f9efb", | |
| "tertiary-fixed-dim": "#cbc9e9", | |
| "outline": "#737c7f", | |
| "on-secondary-container": "#46535e", | |
| "primary-container": "#d6e3ff", | |
| "error-dim": "#4e0309", | |
| "error": "#9f403d", | |
| "secondary-fixed": "#d7e4f1", | |
| "primary-fixed": "#d6e3ff", | |
| "inverse-on-surface": "#9b9d9e", | |
| "on-tertiary-container": "#4a4a65", | |
| "tertiary-fixed": "#d9d7f8", | |
| "on-tertiary-fixed-variant": "#54546f", | |
| "on-surface": "#2b3437", | |
| "on-primary-fixed": "#003f7d", | |
| "on-primary-container": "#00519e", | |
| "on-tertiary-fixed": "#383751", | |
| "surface-container-low": "#f1f4f6", | |
| "surface-dim": "#d1dce0", | |
| "secondary-fixed-dim": "#c9d6e3", | |
| "on-error-container": "#752121", | |
| "surface-container-high": "#e3e9ec", | |
| "surface-variant": "#dbe4e7", | |
| "tertiary-container": "#d9d7f8", | |
| "surface-container-highest": "#dbe4e7", | |
| "secondary-dim": "#48555f" | |
| }, | |
| borderRadius: {"DEFAULT":"0.25rem","lg":"0.5rem","xl":"0.75rem","full":"9999px"}, | |
| fontFamily: { | |
| "headline": ["DM Sans","sans-serif"], | |
| "body": ["DM Sans","sans-serif"], | |
| "label": ["DM Sans","sans-serif"] | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <style> | |
| *, *::before, *::after { box-sizing: border-box; } | |
| html, body { height: 100%; } | |
| body { display: flex; flex-direction: column; } | |
| body { font-family: DM Sans, sans-serif; } | |
| .material-symbols-outlined { | |
| font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; | |
| vertical-align: middle; | |
| } | |
| .glass-effect { background: rgba(248,249,250,0.8); backdrop-filter: blur(12px); } | |
| .ghost-border { outline: 1px solid rgba(171,179,183,0.15); } | |
| ::-webkit-scrollbar { width: 6px; } | |
| ::-webkit-scrollbar-track { background: transparent; } | |
| ::-webkit-scrollbar-thumb { background: #abb3b7; border-radius: 10px; } | |
| .no-scrollbar::-webkit-scrollbar { display: none; } | |
| .no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; } | |
| .custom-scrollbar::-webkit-scrollbar { width: 6px; } | |
| .custom-scrollbar::-webkit-scrollbar-thumb { background: #abb3b7; border-radius: 10px; } | |
| .code-editor { font-family: 'JetBrains Mono','Fira Code','Cascadia Code','Consolas',monospace; } | |
| .editor-bg { background: #1e1e2e; color: #cdd6f4; } | |
| .arabic-text { font-family: 'Segoe UI',Tahoma,Arial,sans-serif; } | |
| .toolbar-blur { background: rgba(242,242,247,0.85); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } | |
| .btn-primary { display:inline-flex;align-items:center;gap:6px;padding:6px 14px;background:#00d97e;color:#001a0d;border-radius:8px;font-size:13px;font-weight:600;border:none;cursor:pointer; } | |
| .btn-secondary { display:inline-flex;align-items:center;gap:4px;padding:5px 10px;background:rgba(0,0,0,0.06);color:#3C3C43;border-radius:7px;font-size:12px;font-weight:500;border:none;cursor:pointer; } | |
| .section-label { font-size:11px;font-weight:600;color:#636366;text-transform:uppercase;letter-spacing:.06em; } | |
| .sys-label, .text-sys-label { color: #1C1C1E; } | |
| @media (max-width: 768px) { | |
| /* Hide fixed sidebars */ | |
| aside.fixed, aside.w-64, aside.w-72, .shrink-0.w-64 { | |
| display: none ; | |
| } | |
| /* Remove sidebar margin from main content */ | |
| main.ml-64, main.ml-72, .ml-64, .ml-72 { | |
| margin-left: 0 ; | |
| } | |
| /* Fix header padding */ | |
| header.fixed, nav.fixed { | |
| padding-left: 12px ; | |
| padding-right: 12px ; | |
| } | |
| /* Stack 12-col grids */ | |
| .grid-cols-12 > .col-span-8, | |
| .grid-cols-12 > .col-span-4 { | |
| grid-column: span 12 ; | |
| } | |
| /* Stack 2-col grids */ | |
| .grid-cols-2 { | |
| grid-template-columns: 1fr ; | |
| } | |
| /* Fix overflowing text */ | |
| .max-w-3xl, .max-w-4xl, .max-w-5xl, .max-w-7xl { | |
| max-width: 100% ; | |
| padding-left: 16px ; | |
| padding-right: 16px ; | |
| } | |
| /* Reduce padding on sections */ | |
| section.p-8, div.p-8 { | |
| padding: 16px ; | |
| } | |
| /* Fix hero text sizes */ | |
| .text-4xl, .text-5xl { | |
| font-size: 1.75rem ; | |
| line-height: 1.2 ; | |
| } | |
| /* Flex wrapping */ | |
| .flex.items-center.gap-3, | |
| .flex.items-center.gap-4 { | |
| flex-wrap: wrap; | |
| } | |
| /* Flex auto for main content */ | |
| .flex-1.overflow-hidden { flex: 1 1 auto; min-width: 0; } | |
| } | |
| .hub-back-btn { | |
| display: inline-flex; align-items: center; gap: 5px; flex-shrink: 0; | |
| padding: 4px 10px 4px 7px; border-radius: 100px; | |
| background: rgba(0,217,126, .1); | |
| border: 1px solid rgba(0,217,126, .22); | |
| color: #00d97e; font-size: 11px; font-weight: 600; | |
| text-decoration: none; transition: background .15s; | |
| font-family: DM Sans, sans-serif; white-space: nowrap; vertical-align: middle; | |
| } | |
| .hub-back-btn:hover { background: rgba(0,217,126, .18); } | |
| .hub-back-btn-icon { font-size: 14px ; color: #00d97e; line-height: 1; vertical-align: middle; } | |
| </style> | |
| {% block extra_head %}{% endblock %} | |
| <meta name="csrf-token" content="{{ csrf_token() }}"/> | |
| </head> | |
| <body class="bg-surface text-on-surface selection:bg-primary-container selection:text-on-primary-container"> | |
| {% block content %}{% endblock %} | |
| {% block extra_scripts %}{% endblock %} | |
| <script> | |
| (function() { | |
| var toolAlphas = {"schema-detective":"0.10","test-forge":"0.13","sql-whisperer":"0.08","doc-forge":"0.11","changelog-ai":"0.09","git-narrator":"0.12"}; | |
| var path = window.location.pathname.replace(/\/+$/, "").split("/").filter(Boolean)[0] || ""; | |
| if (path !== "") { | |
| var btn = document.createElement("a"); | |
| btn.href = "/"; | |
| btn.className = "hub-back-btn"; | |
| var icon = document.createElement("span"); | |
| icon.className = "material-symbols-outlined hub-back-btn-icon"; | |
| icon.textContent = "arrow_back_ios_new"; | |
| var lbl = document.createElement("span"); | |
| lbl.textContent = "DevKit"; | |
| btn.appendChild(icon); | |
| btn.appendChild(lbl); | |
| var navEl = document.querySelector("header, nav"); | |
| if (navEl) { | |
| var leftDiv = navEl.querySelector("div"); | |
| if (leftDiv) { leftDiv.insertBefore(btn, leftDiv.firstChild); } | |
| else { navEl.insertBefore(btn, navEl.firstChild); } | |
| } else { | |
| document.body.insertBefore(btn, document.body.firstChild); | |
| } | |
| } | |
| })(); | |
| </script> | |
| </body> | |
| </html> | |