leaflet.pub
a tool for shared writing and social publishing
set page-width in theme-provider instead of root
awarm.space
+5
-4
+2
-3
app/globals.css
+2
-3
app/globals.css
···
107
107
--highlight-3: 255, 205, 195;
108
108
109
109
--list-marker-width: 36px;
110
-
--page-width-unitless: 624;
111
110
--page-width-unitless: min(
112
-
var(--page-width-unitless),
111
+
var(--page-width-setting),
113
112
calc(var(--leaflet-width-unitless) - 12)
114
113
);
115
114
--page-width-units: min(
···
134
133
:root {
135
134
/*picks between max width and screen width with 64px of padding*/
136
135
--page-width-unitless: min(
137
-
var(--page-width-unitless),
136
+
var(--page-width-setting),
138
137
calc(var(--leaflet-width-unitless) - 128)
139
138
);
140
139
--page-width-units: min(
+3
-1
components/ThemeManager/ThemeProvider.tsx
+3
-1
components/ThemeManager/ThemeProvider.tsx
···
204
204
205
205
// Set page width CSS variable
206
206
el?.style.setProperty(
207
-
"--page-width-unitless",
207
+
"--page-width-setting",
208
208
(pageWidth || 624).toString(),
209
209
);
210
210
}, [
···
238
238
: "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 75%)",
239
239
"--highlight-2": colorToString(highlight2, "rgb"),
240
240
"--highlight-3": colorToString(highlight3, "rgb"),
241
+
"--page-width-setting": pageWidth || 624,
241
242
"--page-width-unitless": pageWidth || 624,
243
+
"--page-width-units": `min(${pageWidth || 624}px, calc(100vw - 12px))`,
242
244
} as CSSProperties
243
245
}
244
246
>