1const CHAR_THRESHOLD = 68; // Around 68 characters, we have to take into 2// account the left column that appears on screen 3// wider than 1024px. 4 5const ESTIMATED_CHAR_WIDTH = 8; // If the root element font-size is 16px (default value), 1ch is 7.8025px. 6const TOGGLE_WIDTH = 142; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L954 7 8const PRE_MARGIN_LEFT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L516 9const PRE_MARGIN_RIGHT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L516 10const PRE_PADDING_LEFT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L513 11const PRE_PADDING_RIGHT = 16; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L513 12 13 14const COLUMN_RIGHT_MARGIN_LEFT_LARGE_SCREEN = 234; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L653 15const COLUMN_RIGHT_MARGIN_LEFT_SMALL_SCREEN = 0; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L906 16const COLUMN_RIGHT_MARGIN_RIGHT_LARGE_SCREEN = 0; 17const COLUMN_RIGHT_MARGIN_RIGHT_SMALL_SCREEN = 0; 18const COLUMN_RIGHT_PADDING_LEFT_LARGE_SCREEN = 24; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L655 19const COLUMN_RIGHT_PADDING_LEFT_SMALL_SCREEN = 8; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L907 20const COLUMN_RIGHT_PADDING_RIGHT_LARGE_SCREEN = 32; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L654 21const COLUMN_RIGHT_PADDING_RIGHT_SMALL_SCREEN = 8; // https://github.com/nodejs/node/blob/dbd938549b16718f2e4cc2809746b8c44a191b1d/doc/api_assets/style.css#L908 22 23const getMarginLeft = (charCount) => 24 (charCount > CHAR_THRESHOLD ? 25 COLUMN_RIGHT_MARGIN_LEFT_LARGE_SCREEN : 26 COLUMN_RIGHT_MARGIN_LEFT_SMALL_SCREEN) + PRE_MARGIN_LEFT; 27const getPaddingLeft = (charCount) => 28 (charCount > CHAR_THRESHOLD ? 29 COLUMN_RIGHT_PADDING_LEFT_LARGE_SCREEN : 30 COLUMN_RIGHT_PADDING_LEFT_SMALL_SCREEN) + PRE_PADDING_LEFT; 31const getPaddingRight = (charCount) => 32 (charCount > CHAR_THRESHOLD ? 33 COLUMN_RIGHT_PADDING_RIGHT_LARGE_SCREEN : 34 COLUMN_RIGHT_PADDING_RIGHT_SMALL_SCREEN) + PRE_PADDING_RIGHT; 35const getMarginRight = (charCount) => 36 (charCount > CHAR_THRESHOLD ? 37 COLUMN_RIGHT_MARGIN_RIGHT_LARGE_SCREEN : 38 COLUMN_RIGHT_MARGIN_RIGHT_SMALL_SCREEN) + PRE_MARGIN_RIGHT; 39 40 41export default function buildCSSForFlavoredJS(dynamicSizes) { 42 if (dynamicSizes == null || dynamicSizes.length === 0) return ''; 43 44 return `<style>${Array.from(dynamicSizes, (charCount) => 45 `@media(max-width:${getMarginLeft(charCount) + getPaddingLeft(charCount) + 46 charCount * ESTIMATED_CHAR_WIDTH + TOGGLE_WIDTH + 47 getPaddingRight(charCount) + getMarginRight(charCount)}px){` + 48 `.with-${charCount}-chars>.js-flavor-selector{` + 49 'float:none;' + 50 'margin:0 0 1em auto;' + 51 '}' + 52 '}').join('')}</style>`; 53} 54