xmeter/css/dist/h-FontSize.css.map

A default stylesheet with a set of tools that make designing with vertical rhythm easy.

{"version":3,"sources":["_h-FontSize.less"],"names":[],"mappings":"AA8BA,YAGE,UAAA,gCACA,YAAA","file":"h-FontSize.css","sourcesContent":["/*################################*\\\n    xmeter  |  _h-FontSize.less\n\\*################################*/\n\n\n// FontSize\n//\n// The FontSize Helper sets the font-size of an element while maintaining vertical rhythm.\n// Add `[class=\"h-Fontsize\"]` to an element, and then set the `--font-scale`\n// custom property (and optionally the `--tracks` custom property), either via inline style or stylesheet.\n// This Helper adjusts the line-height of the element so that track size remains unaffected.\n// <header><dl>\n//   <dt>author</dt>  <dd>Chris Harvey</dd>\n//   <dt>updated</dt> <dd><time>2018-03-20</time></dd>\n// </dl></header>\n//\n// Markup:\n// <!--link rel=\"stylesheet\" href=\"/node_modules/xmeter/css/dist/h-FontSize.css\"/-->\n// <p class=\"h-FontSize\" style=\"--font-scale: 2.25;\">This paragraph has a font-size of 2.25em,\n//   and an adjusted line-height so that each line of text takes up exactly 1 track.\n//   Vertical rhythm is maintained.\n//   However, this example’s font-size is too big to be read clearly.</p>\n// <p class=\"h-FontSize\" style=\"--font-scale: 2.25; --tracks: 2;\">Set the `--tracks` to an integer\n//   in order to adjust the number of “tracks” each line of text takes up.\n//   In this paragraph, each line of text takes up 2 tracks instead of the default 1.\n//   This increased leading provides a more pleasant reading experience.</p>\n//\n// Weight: 5.2\n//\n// Styleguide Helpers.FontSize\n.h-FontSize {\n  // specify `--font-scale`\n  // specify `--tracks`\n  font-size: calc(var(--font-scale, 1) * 1em);\n  line-height: calc(var(--line-height) / var(--font-scale, 1) * var(--tracks, 1));\n}\n"]}