@farming-labs/svelte-theme 0.0.2-beta.19 → 0.0.2-beta.20

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@farming-labs/svelte-theme",
-  "version": "0.0.2-beta.19",
+  "version": "0.0.2-beta.20",
   "description": "Svelte UI components for @farming-labs/docs — layout, sidebar, TOC, search, and theme toggle",
   "type": "module",
   "svelte": "./src/index.js",
@@ -72,8 +72,8 @@
   "dependencies": {
     "gray-matter": "^4.0.3",
     "sugar-high": "^0.9.5",
-    "@farming-labs/docs": "0.0.2-beta.19",
-    "@farming-labs/svelte": "0.0.2-beta.19"
+    "@farming-labs/docs": "0.0.2-beta.20",
+    "@farming-labs/svelte": "0.0.2-beta.20"
   },
   "peerDependencies": {
     "svelte": ">=5.0.0"

package/src/components/DocsLayout.svelte

@@ -176,12 +176,16 @@
 
   function buildLayoutCSS(layout) {
     if (!layout) return "";
-    const vars = [];
-    if (layout.sidebarWidth) vars.push(`--fd-sidebar-width: ${layout.sidebarWidth}px;`);
-    if (layout.contentWidth) vars.push(`--fd-content-width: ${layout.contentWidth}px;`);
-    if (layout.tocWidth) vars.push(`--fd-toc-width: ${layout.tocWidth}px;`);
-    if (vars.length === 0) return "";
-    return `:root {\n  ${vars.join("\n  ")}\n}`;
+    const rootVars = [];
+    const desktopVars = [];
+    if (layout.sidebarWidth) desktopVars.push(`--fd-sidebar-width: ${layout.sidebarWidth}px;`);
+    if (layout.contentWidth) rootVars.push(`--fd-content-width: ${layout.contentWidth}px;`);
+    if (layout.tocWidth) desktopVars.push(`--fd-toc-width: ${layout.tocWidth}px;`);
+    if (rootVars.length === 0 && desktopVars.length === 0) return "";
+    const parts = [];
+    if (rootVars.length > 0) parts.push(`:root {\n  ${rootVars.join("\n  ")}\n}`);
+    if (desktopVars.length > 0) parts.push(`@media (min-width: 1024px) {\n  :root {\n    ${desktopVars.join("\n    ")}\n  }\n}`);
+    return parts.join("\n");
   }
 
   let overrideCSS = $derived.by(() => {