83 lines
2.5 KiB
TypeScript
83 lines
2.5 KiB
TypeScript
import type { ContentWidthPreset } from "./types";
|
|
|
|
export const contentWidthMap: Record<ContentWidthPreset, { desktop: string; mobile: string }> = {
|
|
small: {
|
|
desktop: "clamp(40rem, 70vw, 100rem)",
|
|
mobile: "80vw",
|
|
},
|
|
smallMedium: {
|
|
desktop: "clamp(40rem, 72.5vw, 100rem)",
|
|
mobile: "80vw",
|
|
},
|
|
compact: {
|
|
desktop: "clamp(40rem, 75vw, 100rem)",
|
|
mobile: "80vw",
|
|
},
|
|
mediumSmall: {
|
|
desktop: "clamp(40rem, 77.5vw, 100rem)",
|
|
mobile: "80vw",
|
|
},
|
|
medium: {
|
|
desktop: "clamp(40rem, 80vw, 100rem)",
|
|
mobile: "80vw",
|
|
},
|
|
mediumLarge: {
|
|
desktop: "clamp(40rem, 82.5vw, 100rem)",
|
|
mobile: "85vw",
|
|
},
|
|
};
|
|
|
|
function calculateExpandedWidth(width: string): string {
|
|
const clampMatch = width.match(/clamp\(([\d.]+)rem,\s*([\d.]+)vw,\s*([\d.]+)rem\)/);
|
|
if (clampMatch) {
|
|
const minRem = clampMatch[1];
|
|
const vwValue = parseFloat(clampMatch[2]);
|
|
const maxRem = clampMatch[3];
|
|
|
|
const remainingVw = 100 - vwValue;
|
|
const expandedVw = vwValue + (remainingVw / 2);
|
|
|
|
const expandedMin = `calc(${minRem}rem - (${minRem}rem - 100vw) / 2)`;
|
|
const expandedMax = `calc(${maxRem}rem + (100vw - ${maxRem}rem) / 2)`;
|
|
|
|
return `clamp(${expandedMin}, ${expandedVw}vw, ${expandedMax})`;
|
|
}
|
|
|
|
const vwMatch = width.match(/([\d.]+)vw/);
|
|
if (vwMatch) {
|
|
const vwValue = parseFloat(vwMatch[1]);
|
|
const remainingVw = 100 - vwValue;
|
|
const expandedVw = vwValue + (remainingVw / 2);
|
|
return `${expandedVw}vw`;
|
|
}
|
|
|
|
return width;
|
|
}
|
|
|
|
export const expandedContentWidthMap: Record<ContentWidthPreset, { desktop: string; mobile: string }> = {
|
|
small: {
|
|
desktop: calculateExpandedWidth(contentWidthMap.small.desktop),
|
|
mobile: calculateExpandedWidth(contentWidthMap.small.mobile),
|
|
},
|
|
smallMedium: {
|
|
desktop: calculateExpandedWidth(contentWidthMap.smallMedium.desktop),
|
|
mobile: calculateExpandedWidth(contentWidthMap.smallMedium.mobile),
|
|
},
|
|
compact: {
|
|
desktop: calculateExpandedWidth(contentWidthMap.compact.desktop),
|
|
mobile: calculateExpandedWidth(contentWidthMap.compact.mobile),
|
|
},
|
|
mediumSmall: {
|
|
desktop: calculateExpandedWidth(contentWidthMap.mediumSmall.desktop),
|
|
mobile: calculateExpandedWidth(contentWidthMap.mediumSmall.mobile),
|
|
},
|
|
medium: {
|
|
desktop: calculateExpandedWidth(contentWidthMap.medium.desktop),
|
|
mobile: calculateExpandedWidth(contentWidthMap.medium.mobile),
|
|
},
|
|
mediumLarge: {
|
|
desktop: calculateExpandedWidth(contentWidthMap.mediumLarge.desktop),
|
|
mobile: calculateExpandedWidth(contentWidthMap.mediumLarge.mobile),
|
|
},
|
|
};
|