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

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

{"version":3,"sources":["_h-Measure.less"],"names":[],"mappings":"AAgDA,WACE,UAAA,KACA,UAAA,KACA,gCAAA,WACE,UAAA,MACA,gBAAA,MAGJ,mBACE,UAAA,OACA,UAAA,KACA,gCAAA,mBACE,UAAA,MACA,gBAAA,MAGJ,iBACE,UAAA,KACA,UAAA,KACA,gCAAA,iBACE,UAAA,MACA,gBAAA","file":"h-Measure.css","sourcesContent":["\n/*################################*\\\n    xmeter  |  _h-Meaure.less\n\\*################################*/\n\n\n// Measure\n//\n// The Measure Helper constrains an element’s inline-size\n// (width, in horizontal writing modes) to a reasonable line length.\n//\n// The default style sets the max-inline-size of the block to 66 characters<sup>&lowast;</sup>,\n// but there are narrow and wide variants for differing cases.\n//\n// The narrow variant is useful in mobile design when the user might want to\n// zoom in on text. Reading text with too large a measure on mobile devices requires a lot of\n// horizontal scrolling back and forth. Inversely, the wide variant is useful for\n// large type when you might not want the text to wrap as often.\n//\n// Because the block is capped at a character length,\n// this style is responsive to font-size. The bigger the font, the larger the line length\n// can be before the text wraps. Try adjusting your browser’s font size to see the effects.\n//\n// <footer>\n// <sup>&lowast;</sup>Note that 66 characters (and variants) are approximate measures,\n// inspired by [<cite>Tachyons</cite>](https://tachyons.io/docs/typography/measure/).\n// The actual number of characters in a line will depend on its content,\n// if the font is a proportional font.\n// Read [<cite>What is the CSS ‘ch’ Unit?</cite>](https://meyerweb.com/eric/thoughts/2018/06/28/what-is-the-css-ch-unit/) for more information.\n// </footer>\n//\n// <header><dl>\n//   <dt>author</dt>  <dd>Chris Harvey</dd>\n//   <dt>updated</dt> <dd><time>2017-09-18</time></dd>\n// </dl></header>\n//\n// Markup:\n// <!--link rel=\"stylesheet\" href=\"/node_modules/xmeter/css/dist/h-Measure.css\"/-->\n// <p class=\"h-Measure {{ modifier_class }}\">If the measure is too short, the reader’s eyes\n// have to dart back and forth more often, causing fatigue. If the measure is too long,\n// the reader is more likely to lose track of the previous line.</p>\n//\n// .h-Measure--narrow - narrow variant constrains the size even tighter\n// .h-Measure--wide - wide variant is not as constrained\n//\n// Weight: 5\n//\n// Styleguide Helpers.Measure\n.h-Measure {\n  max-width: 33em; // COMBAK{FALLBACK} for `ch` unit\n  max-width: 66ch;\n  @supports (max-inline-size: 1ch) {\n    max-width: unset;\n    max-inline-size: 66ch;\n  }\n}\n.h-Measure--narrow {\n  max-width: 22.5em; // COMBAK{FALLBACK} for `ch` unit\n  max-width: 45ch;\n  @supports (max-inline-size: 1ch) {\n    max-width: unset;\n    max-inline-size: 45ch;\n  }\n}\n.h-Measure--wide {\n  max-width: 45em; // COMBAK{FALLBACK} for `ch` unit\n  max-width: 90ch;\n  @supports (max-inline-size: 1ch) {\n    max-width: unset;\n    max-inline-size: 90ch;\n  }\n}\n"]}