diff --git a/.gitignore b/.gitignore index 2448da7..1deafa5 100644 --- a/.gitignore +++ b/.gitignore @@ -31,5 +31,6 @@ node_modules # Compiled source files -# Generated style guides -styleguide +# Generated documentation & style guides +docs/api +docs/styleguide diff --git a/README.md b/README.md index 3deeb79..f018974 100644 --- a/README.md +++ b/README.md @@ -19,7 +19,7 @@ $ npm install xmeter Use the global variables: ```less -@import (reference) url('/node_modules/xmeter/src/__settings.less'); +@import (reference) url('/node_modules/xmeter/css/src/__settings.less'); .my-selector { font-size: (1.5 * @g-font-size-kilo); } @@ -28,7 +28,7 @@ See `/src/__settings.less` for all the variables available. Use the tools: ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fontsize.less'); +@import (reference) url('/node_modules/xmeter/css/src/__tool.fontsize.less'); .my-selector { .font-size-el(2.0; 1.5); } @@ -45,12 +45,12 @@ Locally: $ npm install xmeter ``` ```html - + ``` Remotely from a CDN (not recommended, unless deploying your `/node_modules/` isn’t possible): ```html - + ``` where `‹master›` can be any branch or tag. @@ -61,7 +61,7 @@ The stylesheet `xmeter.css` is already minified, and is accompanied by a sourcem Xmeter’s stylesheet is a starting point that “normalizes” unclassed HTML elements. And now that Xmeter has a few [design patterns] (link pending) built in, you can use them in your markup too! -In addition to base styles, Xmeter has classes for Objects (`src/_o-*.less`), Components (`src/_c-*.less`) and Helpers (`src/_h-*.less`), +In addition to base styles, Xmeter has classes for Objects (`/css/src/_o-*.less`), Components (`/css/src/_c-*.less`) and Helpers (`/css/src/_h-*.less`), design patterns that aid in a consistent, easy-to-use, vertical rhythm system. These classes should be directly injected into elements’ HTML `[class]` attribute on your site. diff --git a/class/Xmeter.class.js b/class/Xmeter.class.js new file mode 100644 index 0000000..4fb0e79 --- /dev/null +++ b/class/Xmeter.class.js @@ -0,0 +1,44 @@ +const Element = require('extrajs-dom').Element +const View = require('extrajs-view') + +/** + * Static members for the Xmeter package. + * @namespace + */ +class Xmeter { + /** @private */ constructor() {} + + /** + * @summary Render any data in HTML. + * @see Xmeter.VIEW + * @param {*} data any data to render + * @returns {View} + */ + static view(data) { + /** + * @summary This view object is a set of functions returning HTML output. + * @description Available displays: + * - `Xmeter.view(data).permalink()` - display a permalink + * @namespace Xmeter.VIEW + * @type {View} + */ + return new View(null, data) + /** + * Return an `` element. + * @summary Call `Xmeter.view(data).permalink()` to render this display. + * @function Xmeter.VIEW.permalink + * @version STABLE + * @param {string=} content the text of the link + * @param {string=} label the value for `[aria-label]` attribute + * @returns {string} HTML output + */ + .addDisplay(function permalink(content = '§', label = 'permalink') { + return new Element('a').class('c-Permalink h-Inline h-Hidden') + .attr({ href: `#${this.id}`, 'aria-label': label }) + .addContent(content) + .html() + }) + } +} + +module.exports = Xmeter diff --git a/config-jsdoc.json b/config-jsdoc.json new file mode 100644 index 0000000..22b2e7b --- /dev/null +++ b/config-jsdoc.json @@ -0,0 +1,26 @@ +{ + "sourceType": "module", + "tags": { + "allowUnknownTags": true, + "dictionaries": ["jsdoc", "closure"] + }, + "opts": { + "destination": "./docs/api" + }, + "plugins": [ + "plugins/markdown" + ], + "templates": { + "cleverLinks": false, + "monospaceLinks": false, + "default": { + "outputSourceFiles": true, + "includeDate": false + }, + "path": "ink-docstrap", + "theme": "flatly", + "navType": "vertical", + "linenums": false, + "dateFormat": "MMMM Do YYYY, h:mm:ss a" + } +} diff --git a/config-kss.json b/config-kss.json new file mode 100644 index 0000000..89c62d8 --- /dev/null +++ b/config-kss.json @@ -0,0 +1,13 @@ +{ + "title": "Xmeter Style Guide", + "source": "css/src/", + "destination": "docs/styleguide/", + "css": [ + "../../css/xmeter.css", + "../../docs/css/kss.css" + ], + "js": [ + "http://code.jquery.com/jquery-3.2.1.min.js", + "../../js/o-Tablist.js" + ] +} diff --git a/css/src/_-fz.less b/css/src/_-fz.less new file mode 100644 index 0000000..64fd03d --- /dev/null +++ b/css/src/_-fz.less @@ -0,0 +1,87 @@ + +/*################################*\ + xmeter | _-fz.less +\*################################*/ + + +// font-size +// +// The font-size Atoms set the font-size property. +// +// These are two groups of Atoms: the first group simply sets the font size of an element, +// and the second group uses the .font-size-el() mixin, which also affects line-height +// for maintaining vertical rhythm. See __tool.fontsize.less for the mixin code. +// +// All font sizes are available in /src/__settings.less. +//
+//
author
Chris Harvey
+//
updated
+//
+// +// Markup: +// +// +// +// Weight: 1 +// +// Styleguide Atoms.font-size + + +.-fz-peta { font-size: (@g-font-size-peta * 1em) !important; } +.-fz-tera { font-size: (@g-font-size-tera * 1em) !important; } +.-fz-giga { font-size: (@g-font-size-giga * 1em) !important; } +.-fz-mega { font-size: (@g-font-size-mega * 1em) !important; } +.-fz-kilo { font-size: (@g-font-size-kilo * 1em) !important; } +.-fz-norm { font-size: (@g-font-size-norm * 1em) !important; } +.-fz-mill { font-size: (@g-font-size-mill * 1em) !important; } +.-fz-micr { font-size: (@g-font-size-micr * 1em) !important; } + +@media screen and (min-width: 30em) { .-fz-peta-sK { .-fz-peta; } .-fz-tera-sK { .-fz-tera; } .-fz-giga-sK { .-fz-giga; } .-fz-mega-sK { .-fz-mega; } .-fz-kilo-sK { .-fz-kilo; } .-fz-norm-sK { .-fz-norm; } .-fz-mill-sK { .-fz-mill; } .-fz-micr-sK { .-fz-micr; } } +@media screen and (min-width: 45em) { .-fz-peta-sM { .-fz-peta; } .-fz-tera-sM { .-fz-tera; } .-fz-giga-sM { .-fz-giga; } .-fz-mega-sM { .-fz-mega; } .-fz-kilo-sM { .-fz-kilo; } .-fz-norm-sM { .-fz-norm; } .-fz-mill-sM { .-fz-mill; } .-fz-micr-sM { .-fz-micr; } } +@media screen and (min-width: 60em) { .-fz-peta-sG { .-fz-peta; } .-fz-tera-sG { .-fz-tera; } .-fz-giga-sG { .-fz-giga; } .-fz-mega-sG { .-fz-mega; } .-fz-kilo-sG { .-fz-kilo; } .-fz-norm-sG { .-fz-norm; } .-fz-mill-sG { .-fz-mill; } .-fz-micr-sG { .-fz-micr; } } +@media screen and (min-width: 75em) { .-fz-peta-sT { .-fz-peta; } .-fz-tera-sT { .-fz-tera; } .-fz-giga-sT { .-fz-giga; } .-fz-mega-sT { .-fz-mega; } .-fz-kilo-sT { .-fz-kilo; } .-fz-norm-sT { .-fz-norm; } .-fz-mill-sT { .-fz-mill; } .-fz-micr-sT { .-fz-micr; } } +@media screen and (min-width: 90em) { .-fz-peta-sP { .-fz-peta; } .-fz-tera-sP { .-fz-tera; } .-fz-giga-sP { .-fz-giga; } .-fz-mega-sP { .-fz-mega; } .-fz-kilo-sP { .-fz-kilo; } .-fz-norm-sP { .-fz-norm; } .-fz-mill-sP { .-fz-mill; } .-fz-micr-sP { .-fz-micr; } } +@media not all and (min-width: 30em) { .-fz-peta-nK { .-fz-peta; } .-fz-tera-nK { .-fz-tera; } .-fz-giga-nK { .-fz-giga; } .-fz-mega-nK { .-fz-mega; } .-fz-kilo-nK { .-fz-kilo; } .-fz-norm-nK { .-fz-norm; } .-fz-mill-nK { .-fz-mill; } .-fz-micr-nK { .-fz-micr; } } +@media not all and (min-width: 45em) { .-fz-peta-nM { .-fz-peta; } .-fz-tera-nM { .-fz-tera; } .-fz-giga-nM { .-fz-giga; } .-fz-mega-nM { .-fz-mega; } .-fz-kilo-nM { .-fz-kilo; } .-fz-norm-nM { .-fz-norm; } .-fz-mill-nM { .-fz-mill; } .-fz-micr-nM { .-fz-micr; } } +@media not all and (min-width: 60em) { .-fz-peta-nG { .-fz-peta; } .-fz-tera-nG { .-fz-tera; } .-fz-giga-nG { .-fz-giga; } .-fz-mega-nG { .-fz-mega; } .-fz-kilo-nG { .-fz-kilo; } .-fz-norm-nG { .-fz-norm; } .-fz-mill-nG { .-fz-mill; } .-fz-micr-nG { .-fz-micr; } } +@media not all and (min-width: 75em) { .-fz-peta-nT { .-fz-peta; } .-fz-tera-nT { .-fz-tera; } .-fz-giga-nT { .-fz-giga; } .-fz-mega-nT { .-fz-mega; } .-fz-kilo-nT { .-fz-kilo; } .-fz-norm-nT { .-fz-norm; } .-fz-mill-nT { .-fz-mill; } .-fz-micr-nT { .-fz-micr; } } +@media not all and (min-width: 90em) { .-fz-peta-nP { .-fz-peta; } .-fz-tera-nP { .-fz-tera; } .-fz-giga-nP { .-fz-giga; } .-fz-mega-nP { .-fz-mega; } .-fz-kilo-nP { .-fz-kilo; } .-fz-norm-nP { .-fz-norm; } .-fz-mill-nP { .-fz-mill; } .-fz-micr-nP { .-fz-micr; } } + + +.-fz-el-peta { .font-size-el(@g-font-size-peta; 4) !important; } +.-fz-el-tera { .font-size-el(@g-font-size-tera; 3) !important; } +.-fz-el-giga { .font-size-el(@g-font-size-giga; 2) !important; } +.-fz-el-mega { .font-size-el(@g-font-size-mega; 2) !important; } +.-fz-el-kilo { .font-size-el(@g-font-size-kilo ) !important; } +.-fz-el-norm { .font-size-el(@g-font-size-norm ) !important; } +.-fz-el-mill { .font-size-el(@g-font-size-mill ) !important; } +.-fz-el-micr { .font-size-el(@g-font-size-micr ) !important; } + +@media screen and (min-width: 30em) { .-fz-el-peta-sK { .-fz-el-peta; } .-fz-el-tera-sK { .-fz-el-tera; } .-fz-el-giga-sK { .-fz-el-giga; } .-fz-el-mega-sK { .-fz-el-mega; } .-fz-el-kilo-sK { .-fz-el-kilo; } .-fz-el-norm-sK { .-fz-el-norm; } .-fz-el-mill-sK { .-fz-el-mill; } .-fz-el-micr-sK { .-fz-el-micr; } } +@media screen and (min-width: 45em) { .-fz-el-peta-sM { .-fz-el-peta; } .-fz-el-tera-sM { .-fz-el-tera; } .-fz-el-giga-sM { .-fz-el-giga; } .-fz-el-mega-sM { .-fz-el-mega; } .-fz-el-kilo-sM { .-fz-el-kilo; } .-fz-el-norm-sM { .-fz-el-norm; } .-fz-el-mill-sM { .-fz-el-mill; } .-fz-el-micr-sM { .-fz-el-micr; } } +@media screen and (min-width: 60em) { .-fz-el-peta-sG { .-fz-el-peta; } .-fz-el-tera-sG { .-fz-el-tera; } .-fz-el-giga-sG { .-fz-el-giga; } .-fz-el-mega-sG { .-fz-el-mega; } .-fz-el-kilo-sG { .-fz-el-kilo; } .-fz-el-norm-sG { .-fz-el-norm; } .-fz-el-mill-sG { .-fz-el-mill; } .-fz-el-micr-sG { .-fz-el-micr; } } +@media screen and (min-width: 75em) { .-fz-el-peta-sT { .-fz-el-peta; } .-fz-el-tera-sT { .-fz-el-tera; } .-fz-el-giga-sT { .-fz-el-giga; } .-fz-el-mega-sT { .-fz-el-mega; } .-fz-el-kilo-sT { .-fz-el-kilo; } .-fz-el-norm-sT { .-fz-el-norm; } .-fz-el-mill-sT { .-fz-el-mill; } .-fz-el-micr-sT { .-fz-el-micr; } } +@media screen and (min-width: 90em) { .-fz-el-peta-sP { .-fz-el-peta; } .-fz-el-tera-sP { .-fz-el-tera; } .-fz-el-giga-sP { .-fz-el-giga; } .-fz-el-mega-sP { .-fz-el-mega; } .-fz-el-kilo-sP { .-fz-el-kilo; } .-fz-el-norm-sP { .-fz-el-norm; } .-fz-el-mill-sP { .-fz-el-mill; } .-fz-el-micr-sP { .-fz-el-micr; } } +@media not all and (min-width: 30em) { .-fz-el-peta-nK { .-fz-el-peta; } .-fz-el-tera-nK { .-fz-el-tera; } .-fz-el-giga-nK { .-fz-el-giga; } .-fz-el-mega-nK { .-fz-el-mega; } .-fz-el-kilo-nK { .-fz-el-kilo; } .-fz-el-norm-nK { .-fz-el-norm; } .-fz-el-mill-nK { .-fz-el-mill; } .-fz-el-micr-nK { .-fz-el-micr; } } +@media not all and (min-width: 45em) { .-fz-el-peta-nM { .-fz-el-peta; } .-fz-el-tera-nM { .-fz-el-tera; } .-fz-el-giga-nM { .-fz-el-giga; } .-fz-el-mega-nM { .-fz-el-mega; } .-fz-el-kilo-nM { .-fz-el-kilo; } .-fz-el-norm-nM { .-fz-el-norm; } .-fz-el-mill-nM { .-fz-el-mill; } .-fz-el-micr-nM { .-fz-el-micr; } } +@media not all and (min-width: 60em) { .-fz-el-peta-nG { .-fz-el-peta; } .-fz-el-tera-nG { .-fz-el-tera; } .-fz-el-giga-nG { .-fz-el-giga; } .-fz-el-mega-nG { .-fz-el-mega; } .-fz-el-kilo-nG { .-fz-el-kilo; } .-fz-el-norm-nG { .-fz-el-norm; } .-fz-el-mill-nG { .-fz-el-mill; } .-fz-el-micr-nG { .-fz-el-micr; } } +@media not all and (min-width: 75em) { .-fz-el-peta-nT { .-fz-el-peta; } .-fz-el-tera-nT { .-fz-el-tera; } .-fz-el-giga-nT { .-fz-el-giga; } .-fz-el-mega-nT { .-fz-el-mega; } .-fz-el-kilo-nT { .-fz-el-kilo; } .-fz-el-norm-nT { .-fz-el-norm; } .-fz-el-mill-nT { .-fz-el-mill; } .-fz-el-micr-nT { .-fz-el-micr; } } +@media not all and (min-width: 90em) { .-fz-el-peta-nP { .-fz-el-peta; } .-fz-el-tera-nP { .-fz-el-tera; } .-fz-el-giga-nP { .-fz-el-giga; } .-fz-el-mega-nP { .-fz-el-mega; } .-fz-el-kilo-nP { .-fz-el-kilo; } .-fz-el-norm-nP { .-fz-el-norm; } .-fz-el-mill-nP { .-fz-el-mill; } .-fz-el-micr-nP { .-fz-el-micr; } } diff --git a/css/src/__settings.less b/css/src/__settings.less new file mode 100644 index 0000000..3e590be --- /dev/null +++ b/css/src/__settings.less @@ -0,0 +1,29 @@ + +/*################################*\ + xmeter | __settings.less +\*################################*/ + + +// Note: the prefix `g-` on each variable stands for "global" because these variables +// are globally (project-wide) accessible. +// In each partial file, if need a private variable, use prefix `p-` for "private". +// Parameters in mixins shall not use any prefixes. + + +// new global font sizes as of 2016-08-17 +@g-font-size-peta: 96/16; // 6.00 // lines: ceil(6.00/line-height) == 4 +@g-font-size-tera: 64/16; // 4.00 // lines: ceil(4.00/line-height) == 3 +@g-font-size-giga: 48/16; // 3.00 // lines: ceil(3.00/line-height) == 2 +@g-font-size-mega: 32/16; // 2.00 // lines: ceil(2.00/line-height) == 2 +@g-font-size-kilo: 24/16; // 1.50 // lines: ceil(1.50/line-height) == 1 +@g-font-size-norm: 16/16; // 1.00 // lines: ceil(1.00/line-height) == 1 +@g-font-size-mill: 12/16; // 0.75 // lines: ceil(0.75/line-height) == 1 +@g-font-size-micr: 8/16; // 0.50 // lines: ceil(0.50/line-height) == 1 + +// heading sizes +@g-font-size-h1: @g-font-size-giga; +@g-font-size-h2: @g-font-size-mega; +@g-font-size-h3: @g-font-size-kilo; +@g-font-size-h4: @g-font-size-norm; +@g-font-size-h5: @g-font-size-mill; +@g-font-size-h6: @g-font-size-micr; diff --git a/css/src/__tool.border-radius.less b/css/src/__tool.border-radius.less new file mode 100644 index 0000000..50ea077 --- /dev/null +++ b/css/src/__tool.border-radius.less @@ -0,0 +1,45 @@ + +/*################################*\ + xmeter | __tool.border-radius.less +\*################################*/ + + +// Shortcuts for setting `border-radius` on two corners of the same side of a box. +// Also supports two values, for horizontal/vertical components. +// +// Examples: +// - `.border-left-radius(5%)` will do: +// - `border-top-left-radius: 5%;` +// - `border-bottom-left-radius: 5%;` +// - `.border-left-radius(5px 10px)` will do: +// - `border-top-left-radius: 5px 10px;` +// - `border-bottom-left-radius: 5px 10px;` +// +// ^params +// @radius - (default: 0) the value of the border radius +// - one-value syntax: the horizontal and vertical value +// - two-value syntax, space-separated: the horizontal value, then vertical value +// ^author +// : Chris Harvey +// ^updated +// : 2016-06-29 + +.border-left-radius(@radius: 0) { + border-top-left-radius: @radius; + border-bottom-left-radius: @radius; +} + +.border-right-radius(@radius: 0) { + border-top-right-radius: @radius; + border-bottom-right-radius: @radius; +} + +.border-top-radius(@radius: 0) { + border-top-left-radius: @radius; + border-top-right-radius: @radius; +} + +.border-bottom-radius(@radius: 0) { + border-bottom-right-radius: @radius; + border-bottom-left-radius: @radius; +} diff --git a/css/src/__tool.borders.less b/css/src/__tool.borders.less new file mode 100644 index 0000000..bffd802 --- /dev/null +++ b/css/src/__tool.borders.less @@ -0,0 +1,56 @@ + +/*################################*\ + xmeter | __tool.borders.less +\*################################*/ + + +// The following mixins adjust border widths for **BLOCK** Objects only! They will keep the +// vertical rhythm intact when adding border widths (by slightly adjusting position and margins). +// Do *not* use these mixins on INLINE Objects! +// +// NOTE: This mixin affects border width only (for structure). It does not affect cosmetics, +// i.e., border style or color. To change these, you must include the `border-style` and +// `border-color` properties after including this mixin. +// +// ``` +// .border-vert(top ; ); // adjust the top border +// .border-vert(bottom; ); // adjust the bottom border +// .border-vert(topbot; ); // adjust both the top and bottom borders +// .border-vert(all ; ); // adjust all four borders +// ``` +// +// NOTE: In place of `.border-vert(all; ...)`, you may use a hack involving `box-shadow` to create +// an effective border around an element, without using this tool and thus affecting the element’s +// `margin-top` value. +// The box-shadow must be outset, have an offset-x of 0, an offset-y of 0, a blur of 0, +// a spread of `` (the effective border-width), and a color of `` (the effective border-color). +// The color must be specified in the same declaration, and the effective border-style will always be solid. +// ``` +// box-shadow: 0 0 0 ; +// ``` +// +// @width - (optional: `0`) value of `border-width` +// ^author +// : Chris Harvey +// ^updated +// : 2015-05-11 +.border-vert(top; @width: 0) { + border-top-width: @width; + margin-top: (-@width); +} + +.border-vert(bottom; @width: 0) { + border-bottom-width: @width; + margin-top: (-@width); +} + +.border-vert(topbot; @width: 0) { + border-top-width: @width; + border-bottom-width: @width; + margin-top: (-2 * @width); +} + +.border-vert(all; @width: 0) { + border-width: @width; + margin-top: (-2 * @width); +} diff --git a/css/src/__tool.delims.less b/css/src/__tool.delims.less new file mode 100644 index 0000000..0a0c30d --- /dev/null +++ b/css/src/__tool.delims.less @@ -0,0 +1,33 @@ + +/*################################*\ + xmeter | __tool.delims.less +\*################################*/ + + +// This tool adds opening and closing punctuation marks surrounding an element. +// The punctuation marks are given by the `quotes` property. +// +// @arg - (default: `none`) an even number of space-separated left/right delimiters, +// each pair used for one level of nested quotation. +// ^author +// : Chris Harvey +// ^updated +// : 2016-05-05 +.delims(@arg: none) { + quotes: @arg; + &::before { content: open-quote; } + &::after { content: close-quote; } +} + +.parens() { .delims('(' ')'); } +.brackets() { .delims('[' ']'); } +.braces() { .delims('{' '}'); } +.angles() { .delims('<' '>'); } // '\003c' '\003e' // < > + +.apos() { .delims('\'' '\''); } // '\0027' '\0027' // ' ' +.quot() { .delims('\"' '\"'); } // '\0022' '\0022' // " " + +.quotes-single() { .delims('\2018' '\2019'); } // '‘' '’' // ‘ ’ +.quotes-double() { .delims('\201c' '\201d'); } // '“' '”' // “ ” +.guillemets-single() { .delims('\2039' '\203a'); } // '‹' '›' // ‹ › +.guillemets-double() { .delims('\00ab' '\00bb'); } // '«' '»' // « » diff --git a/css/src/__tool.fontsize.less b/css/src/__tool.fontsize.less new file mode 100644 index 0000000..904f870 --- /dev/null +++ b/css/src/__tool.fontsize.less @@ -0,0 +1,49 @@ + +/*################################*\ + xmeter | __tool.fontsize.less +\*################################*/ + + +// Sets the font size of a module while preserving vertical rhythm. +// Modules use their own typographical systems with their own "vertical rhythm units." +// Font size is set in rems so that the module can be placed anywhere without changing appearance. +// Line height is simply set to that of the root element, so that the "vertical rhythm unit" +// scales with font size. (Effectively the same as `inherit`.) +// Typographical blocks within this module will be vertically spaced accordingly: +// as the font-size of this module increases, so does vertical spacing. +// +// ^params +// @ratio - (default: 1) the ratio of the new font size to the root font size, i.e., the number of rems +// ^author +// : Chris Harvey +// ^updated +// : 2016-10-01 +.font-size-mod(@ratio: 1) { + font-size: (@ratio * 1rem); + // line-height: inherit; // NOTE clarification + & > * { + --vru: calc(@ratio ~' * var(--line-height) * 1rem'); // @ratio * parent vru + } +} + +// Sets the font size of an element within a module (or if not, in the root) +// while preserving vertical rhythm. +// Font size is set in ems so that it will scale accordingly with its +// parent module’s (or the root’s) font size. +// Line height is adjusted so that it remains a constant "vertical rhythm unit" +// of the parent module (or root). +// `font-size` * `line-height` = one vertical rhythm unit +// +// ^params +// @ratio - (default: 1) the ratio of the new font size to +// the parent font size, i.e., the number of ems +// @lines - (default: 1) the number of vrus each line of text will take up. +// should be a whole number to satisfy vertical rhythm. +// ^author +// : Chris Harvey +// ^updated +// : 2016-10-01 +.font-size-el(@ratio: 1; @lines: 1) { + font-size: (@ratio * 1em); + line-height: calc(~'var(--line-height) / ' (@ratio/@lines)); +} diff --git a/css/src/__tool.sprite.less b/css/src/__tool.sprite.less new file mode 100644 index 0000000..dd36724 --- /dev/null +++ b/css/src/__tool.sprite.less @@ -0,0 +1,28 @@ + +/*################################*\ + xmeter | __tool.sprite.less +\*################################*/ + + +// Sets the background position of an Object’s background sprite image. +// +// @{[horizontal|vertcial]} - whether the sprite’s images are linearly horizontally or vertically ordered. +// @position - the position of the sprite’s image to be used, starting at 1. must be a positive integer. +// @iconsize - the horizontal (x) size of the sprite’s image. in pixels. +// @iconpadd - the padding between images in the sprite’s image. in pixels. +// ^author +// : Chris Harvey +// ^updated +// : 2016-01-19 +.sprite(horizontal; @position; @iconsize; @iconpadd) when (@position > 1) { + background-position: ((@position - 1) * -(@iconsize + @iconpadd)) 0; +} +.sprite(horizontal; @position; @iconsize; @iconpadd) when (@position = 1) { + background-position: 0 0; +} +.sprite(vertical; @position; @iconsize; @iconpadd) when (@position > 1) { + background-position: 0 ((@position - 1) * -(@iconsize + @iconpadd)); +} +.sprite(vertical; @position; @iconsize; @iconpadd) when (@position = 1) { + background-position: 0 0; +} diff --git a/css/src/__tool.transitions.less b/css/src/__tool.transitions.less new file mode 100644 index 0000000..2b56bbe --- /dev/null +++ b/css/src/__tool.transitions.less @@ -0,0 +1,26 @@ + +/*################################*\ + xmeter | __tool.transitions.less +\*################################*/ + + +// Applies individual longhand transition-* properties on an element. +// Each parameter must be a list of (zero or more) comma-separated values. +// The default value of each parameter is the default value of its +// corresponding longhand css property. +// +// ^params +// : @props - (default: `all`) the CSS property name(s) +// : @dura - (default: `0ms`) the length(s) in time, in milliseconds, the transition is to be in effect +// : @func - (default: `ease`) the timing-function(s). See `https://developer.mozilla.org/en-US/docs/Web/CSS/timing-function` +// : @delay - (default: `0ms`) the length(s) in time, in milliseconds, the transition will wait before starting +// ^author +// : Chris Harvey +// ^updated +// : 2017-06-09 +.transitions(@props: all; @dura: 0ms; @func: ease; @delay: 0ms) { + transition-property: @props; + transition-duration: @dura; + transition-timing-function: @func; + transition-delay: @delay; +} diff --git a/css/src/_base.less b/css/src/_base.less new file mode 100644 index 0000000..cfb824a --- /dev/null +++ b/css/src/_base.less @@ -0,0 +1,465 @@ + +/*################################*\ + xmeter | _base.less +\*################################*/ + + +// Contents +// ------------------------------------ +// # GENERIC...........................`html` and far-reaching page-wide selectors +// # SECTIONS..........................sections, articles, headers, footers, headings +// # GROUPING..........................grouping content +// ## Paragraphs.........................paragraphs, block-level textual elements +// ## Lists..............................ordered, unordered, dictionary +// ## Tables.............................tables +// # TEXT..............................text-level, phrasing (inline) content and links +// ## Links..............................inline hyperlinks +// ## Stress.............................text outstanding from surrounding prose +// ## Documentation......................documentation elements +// ## Data...............................machine- or human-readable data +// # FORMS.............................form elements +// # EMBEDDED..........................images, videos, other media +// # INTERACTIVE.......................user-interactive HTML elements + + +//++++++++++++++++++++++++++++++++// +// # GENERIC +//++++++++++++++++++++++++++++++++// +* { + &, + &::before, + &::after { + content: none; + box-sizing: border-box; + column-rule: 0 solid; // change initial column-rule from `medium none` + @media print { + background: transparent !important; + box-shadow: none !important; + text-shadow: none !important; + } + } + &:not(input):not(button):not(select), // NOTE be careful here: if overriding, specificity > 3 + // &:not(input, button, select), // CHANGED selector not supported yet + &::before, + &::after { + border: 0 solid; // change initial border from `medium none` + } +} + +html { + --line-height: 1.5; // default line-height. NOTE: change in your own project if you wish. + --vru: calc(~'var(--line-height) * 1rem'); + // addresses support for `rem` units (otherwise these would be in `body` selector) + font-size: 100%; // defined by user agent + line-height: var(--line-height); +} + +// Vertical spacing between typographical blocks +// NOTE: `textarea` is inline by default but overriding here: should be block (opinionated) +h1, h2, h3, h4, h5, h6, +p, pre, figure, blockquote, +ol, ul, dl, +table, +form, fieldset, textarea, +details { + margin-bottom: var(--vru); +} +h1 { + padding-top: var(--vru); +} + +// Font sizes for text-level elements should be in units of `em` instead of `rem` because +// they should scale with their parents. +// Also, inline elements should not affect vertical rhythm, thus line-heights are zero. +// (The `display` property of these elements should automatically +// have a value of `inline` (do not set manually), either by browser default +// or by CSS **initial value**.) +span, br, +em, strong, i, mark, u, small, s, +dfn, b, abbr, var, q, cite, sup, sub, +data, time, code, kbd, samp, +label { + line-height: 0; +} + +// Elements with a transparent content model +// should display what their contents display. +a, ins, del { + // display: inherit; + // line-height: inherit; + // h1 > &, h2 > &, h3 > &, h4 > &, h5 > &, h6 > &, + // p > &, pre > &, + // figure > &, figcaption > &, blockquote > &, + // li > &, dt > &, dd > &, + // caption > &, th > &, td > &, + // legend > &, summary > & { + // display: inline; + // line-height: 0; + // } +} +//++++ end # GENERIC ++++// + + +//++++++++++++++++++++++++++++++++// +// # SECTIONS +//++++++++++++++++++++++++++++++++// +body { +} +main { +} +section { +} +article { +} +aside { +} +nav { +} +main { +} +header { +} +footer { +} + +h1, h2, h3, h4, h5, h6 { + font-weight: 700; +} +h1 { .font-size-el(@g-font-size-h1; 2); } +h2 { .font-size-el(@g-font-size-h2; 2); } +h3 { .font-size-el(@g-font-size-h3); } +h4 { .font-size-el(@g-font-size-h4); } +h5 { .font-size-el(@g-font-size-h5); } +h6 { .font-size-el(@g-font-size-h6); } + +h1 { + margin-top: 0; // undo Normalize +} + +address { +} +//++++ end # SECTIONS ++++// + + +//++++++++++++++++++++++++++++++++// +// # GROUPING +//++++++++++++++++++++++++++++++++// +div { +} +hr { + display: none; +} + //--------------------------------// + // ## Paragraphs + //--------------------------------// + p { + } + pre { + .font-size-el(@g-font-size-mill); + text-align: left; // code blocks are always aligned left, regardless of writing mode + text-indent: 0; + white-space: pre; + overflow: auto; + } + figure { + // undo Normalize + margin-top: 0; + margin-left: 0; + margin-right: 0; + } + figcaption { + } + blockquote { + } + //---- end ## Paragraphs ----// + + //--------------------------------// + // ## Lists + //--------------------------------// + ol, + ul, + dl { + li > &, + dt > &, + dd > & { + margin-bottom: 0; // undo default bottom spacing for nested lists + } + } + ol, + ul { + padding: 0 0 0 4rem; + li > &, + dt > &, + dd > & { + padding-left: 2rem; + } + } + ol { + list-style-type: decimal; + } + ul { + list-style-type: disc; + } + dl { + list-style: none; // remove counters from `dl > li` + } + li { + } + dt { + } + dd { + } + //---- end ## Lists ----// + + //--------------------------------// + // ## Tables + //--------------------------------// + table { + max-width: 100%; // fluid tables for responsive purposes + border-collapse: collapse; + text-align: left; // FIXME fix browser bug... which? file an issue! + } + caption { + text-align: center; + } + thead, + tfoot { + vertical-align: bottom; // for heading alignment + } + thead { + } + tfoot { + } + tbody { + vertical-align: top; // for data alignment + } + tr { + } + th { + font-weight: 700; + text-align: center; + } + td { + } + //---- end ## Tables ----// +//++++ end # GROUPING ++++// + + +//++++++++++++++++++++++++++++++++// +// # TEXT +//++++++++++++++++++++++++++++++++// +// RECOMMENDATION: +// Do not use `br` to indicate line breaks, use CSS instead. +// One exception: MAY use `address > br` to indicate line breaks (by convention) +br { +} + //--------------------------------// + // ## Links + //--------------------------------// + a { + color: #00e; // default :link + // color: #551a8b; // default :visited + // color: #f00; // default :active + } + a:not([href]) { + @media screen { + opacity: 0.5; + } + } + //---- end ## Links ----// + + //--------------------------------// + // ## Stress + //--------------------------------// + em { + font-style: italic; + } + strong { + font-weight: 700; + } + i { + font-style: italic; + } + mark { + // let ins = Color.fromString('#acf2bd') // GitHub-flavored green + // let del = Color.fromString('#fdb8c0') // GitHub-flavored red + // let mark = Color.fromHSL(...[ + // (ins.hslHue + del.hslHue)/2, + // (ins.hslSat + del.hslSat)/2, + // (ins.hslLum + del.hslLum)/2, + // ]).invert() + background-color: #f3f8b1; + } + u { + text-decoration: underline; // HACK fallback + text-decoration-line: underline; + color: #080; + } + small { + font-size: (@g-font-size-mill * 1em); + } + s { + text-decoration: line-through; // HACK fallback + text-decoration-line: line-through; + color: #b00; + } + //---- end ## Stress ----// + + //--------------------------------// + // ## Documentation + //--------------------------------// + ins { + background-color: #acf2bd; // GitHub-flavored + } + del { + background-color: #fdb8c0; // GitHub-flavored + } + dfn { + font-style: inherit; // undo Normalize + font-weight: 700; + } + b { + font-weight: 700; + } + abbr { + &[title] { + cursor: help; + text-decoration: none; // undo Normalize + } + } + var { + font-style: italic; + } + q { + .quotes-double(); // fallback for `initial` + quotes: initial; + } + cite { + font-style: italic; + } + sup, sub { + font-size: (@g-font-size-mill * 1em); + } + sup { + } + sub { + } + //---- end ## Documentation ----// + + //--------------------------------// + // ## Data + //--------------------------------// + data { + } + time { + } + code, kbd, samp { + font-size: (@g-font-size-mill * 1em); + white-space: nowrap; + & & { + font-size: inherit; // undo compounding font sizes + } + pre & { + white-space: inherit; // HACK fallback + white-space: unset; // sometimes people put a `code` in a `pre` // override `nowrap` above + } + } + code { + } + kbd { + } + samp { + } + //---- end ## Data ----// +//++++ end # TEXT ++++// + + +//++++++++++++++++++++++++++++++++// +// # FORMS +//++++++++++++++++++++++++++++++++// +@p-color-gray: rgba(0,0,0, 0.25); + +fieldset { + padding: 0 1rem; +} + +textarea, +input { + padding: 0 0.25rem; +} + +input, +button, +select, +textarea { + line-height: inherit; // undo browser default +} + +html > body fieldset { // HACK need a specificity of 3 to override generic `*:not(input):not(button):not(select)` + .border-vert(all; 1px); + border-style: solid; + border-color: @p-color-gray; + // NOTE cannot use box-shadow hack due to shadow covering +} +textarea { + box-shadow: 0 0 0 1px @p-color-gray; // HACK vertical border hack +} + +textarea { + display: block; // override browser default + width: 30rem; + height: calc(~'6 * var(--vru)'); + .font-size-mod(@g-font-size-mill); +} + +input[type="button"], +input[type="reset"], +input[type="submit"], +button, +label { + cursor: pointer; +} + +input:not([type="button"]):not([type="reset"]):not([type="submit"]), +// input:not([type="button"], [type="reset"], [type="submit"]), // CHANGED selector not supported yet +select { + font-size: @g-font-size-mill * 1em; +} + +input[type="button"], +input[type="reset"], +input[type="submit"], +button { + padding: 0.125em 0.25em; +} + +select[multiple] > optgroup > option { + padding-left: 1rem; +} +//++++ end # FORMS ++++// + + +//++++++++++++++++++++++++++++++++// +// # EMBEDDED +//++++++++++++++++++++++++++++++++// +// [1] Correct squishing when one dimension changes +// [2] fluid images for responsive purposes +// [3] offset `[alt]` attribute text from surrounding copy +// [4] safer alternative to `display: block;` +img { + width: auto; // [1] + height: auto; // [1] + max-width: 100%; // [2] + font-style: italic; // [3] + vertical-align: middle; // [4] +} +//++++ end # EMBEDDED ++++// + + +//++++++++++++++++++++++++++++++++// +// # INTERACTIVE +//++++++++++++++++++++++++++++++++// +summary { + cursor: pointer; +} +//++++ end # INTERACTIVE ++++// diff --git a/css/src/_c-Permalink.less b/css/src/_c-Permalink.less new file mode 100644 index 0000000..77a3f28 --- /dev/null +++ b/css/src/_c-Permalink.less @@ -0,0 +1,61 @@ + +/*################################*\ + xmeter | _c-Permalink.less +\*################################*/ + + +// The Permalink +// +// The Permalink Component is added to the end of a heading in a documentation system, +// style guide, or pattern library. This Component is an internal link, and makes sections +// within a document easy to access. +// Use with .h-Inline and .h-Hidden. +//
+//
author
Chris Harvey
+//
updated
+//
+// +// Pug: +//
+// section#section-title
+//   h1
+//     | Section Title
+//     != Xmeter.view({id: 'section-title'}).permalink()
+// 
+// +// Markup: +//
+//

+// Section Title +// § +//

+//
+// +// Weight: 1 +// +// Styleguide Components.Permalink +.c-Permalink { + margin-left: 1rem; + font-weight: 100; + h1:hover > &, + h2:hover > &, + h3:hover > &, + h4:hover > &, + h5:hover > &, + h6:hover > & { + position: static; // HACK fallback + position: initial; // HACK fallback + position: unset; // unset `.h-Hidden` + } +} + +@media screen and (min-width: 30em) { .c-Permalink-sK { .c-Permalink; } } +@media screen and (min-width: 45em) { .c-Permalink-sM { .c-Permalink; } } +@media screen and (min-width: 60em) { .c-Permalink-sG { .c-Permalink; } } +@media screen and (min-width: 75em) { .c-Permalink-sT { .c-Permalink; } } +@media screen and (min-width: 90em) { .c-Permalink-sP { .c-Permalink; } } +@media not all and (min-width: 30em) { .c-Permalink-nK { .c-Permalink; } } +@media not all and (min-width: 45em) { .c-Permalink-nM { .c-Permalink; } } +@media not all and (min-width: 60em) { .c-Permalink-nG { .c-Permalink; } } +@media not all and (min-width: 75em) { .c-Permalink-nT { .c-Permalink; } } +@media not all and (min-width: 90em) { .c-Permalink-nP { .c-Permalink; } } diff --git a/css/src/_h-Block.less b/css/src/_h-Block.less new file mode 100644 index 0000000..c88e170 --- /dev/null +++ b/css/src/_h-Block.less @@ -0,0 +1,37 @@ + +/*################################*\ + xmeter | _h-Block.less +\*################################*/ + + +// Block +// +// The Block Helper displays an element as a block, with an inherited line-height to maintain vertical rhythm. +//
+//
author
Chris Harvey
+//
updated
+//
+// +// Markup: +//

Albert Einstein was made famous by his equation +// E = mc2 +// which explains the relationship between energy and mass.

+// +// Weight: 1 +// +// Styleguide Helpers.Block +.h-Block { + display: block; + line-height: inherit; +} + +@media screen and (min-width: 30em) { .h-Block-sK { .h-Block; } } +@media screen and (min-width: 45em) { .h-Block-sM { .h-Block; } } +@media screen and (min-width: 60em) { .h-Block-sG { .h-Block; } } +@media screen and (min-width: 75em) { .h-Block-sT { .h-Block; } } +@media screen and (min-width: 90em) { .h-Block-sP { .h-Block; } } +@media not all and (min-width: 30em) { .h-Block-nK { .h-Block; } } +@media not all and (min-width: 45em) { .h-Block-nM { .h-Block; } } +@media not all and (min-width: 60em) { .h-Block-nG { .h-Block; } } +@media not all and (min-width: 75em) { .h-Block-nT { .h-Block; } } +@media not all and (min-width: 90em) { .h-Block-nP { .h-Block; } } diff --git a/css/src/_h-Clearfix.less b/css/src/_h-Clearfix.less new file mode 100644 index 0000000..ae4c727 --- /dev/null +++ b/css/src/_h-Clearfix.less @@ -0,0 +1,113 @@ + +/*################################*\ + xmeter | _h-Clearfix.less +\*################################*/ + + +// Clearfix +// +// The Clearfix Helper creates a line break after an element +// in order to push subsequent content below the container. +// This could be a container of floats, or it could simply be an inline list item. +// Use this as an alternative to the br element. +// +// The Clearfix Helper is used in the classical sense in the first example below (to clear a float). +// In the second example, the Clearfix Helper creates a line break after the 2nd inline item. +// +// The last example shows an alternative to marking up postal addresses. +// Instead of adding br elements to create line breaks in +// postal addresses—the traditional approach—you may wrap each line of the address +// with spans using the Clearfix Helper. This approach may be easier if the spans are already present, +// for example, from microdata markup. +// +//
+//
author
Chris Harvey
+//
updated
+//
+// +// Markup: +//
+//
gravity
+//
supernova
+//
+//
spacetime black hole singularity
+//
    +//
  • spacetime
  • +//
  • black hole
  • +//
  • singularity
  • +//
  • neutron star
  • +//
+//

+// The White House +// 1600 Pennsylvania Ave NW +// Washington, DC 20500 +//

+// +// Weight: 3 +// +// Styleguide Helpers.Clearfix + +// Example 1 +// +// The Clearfix Helper is used in the classical sense: to clear a float. +// +// Markup: +//
+//
gravity
+//
supernova
+//
+//
spacetime black hole singularity
+// +// Styleguide Helpers.Clearfix.1 + + +// Example 2 +// +// The Clearfix Helper creates a line break after the 2nd inline list item. +// +// Markup: +//
    +//
  • spacetime
  • +//
  • black hole
  • +//
  • singularity
  • +//
  • neutron star
  • +//
+// +// Styleguide Helpers.Clearfix.2 + + +// Example 3 +// +// An alternative to marking up postal addresses. +// Instead of adding br elements to create line breaks in +// postal addresses—the traditional approach—you may wrap each line of the address +// with spans using the Clearfix Helper. This approach may be easier if the spans are already present, +// for example, from microdata markup. +// +// Markup: +//

+// The White House +// 1600 Pennsylvania Ave NW +// Washington, DC 20500 +//

+// +// Styleguide Helpers.Clearfix.3 + +.h-Clearfix { + &::after { + content: ''; + display: block; + clear: both; + } +} + +@media screen and (min-width: 30em) { .h-Clearfix-sK { .h-Clearfix; } } +@media screen and (min-width: 45em) { .h-Clearfix-sM { .h-Clearfix; } } +@media screen and (min-width: 60em) { .h-Clearfix-sG { .h-Clearfix; } } +@media screen and (min-width: 75em) { .h-Clearfix-sT { .h-Clearfix; } } +@media screen and (min-width: 90em) { .h-Clearfix-sP { .h-Clearfix; } } +@media not all and (min-width: 30em) { .h-Clearfix-nK { .h-Clearfix; } } +@media not all and (min-width: 45em) { .h-Clearfix-nM { .h-Clearfix; } } +@media not all and (min-width: 60em) { .h-Clearfix-nG { .h-Clearfix; } } +@media not all and (min-width: 75em) { .h-Clearfix-nT { .h-Clearfix; } } +@media not all and (min-width: 90em) { .h-Clearfix-nP { .h-Clearfix; } } diff --git a/css/src/_h-Hidden.less b/css/src/_h-Hidden.less new file mode 100644 index 0000000..91900ea --- /dev/null +++ b/css/src/_h-Hidden.less @@ -0,0 +1,41 @@ + +/*################################*\ + xmeter | _h-Hidden.less +\*################################*/ + + +// Hidden +// +// The Hidden Helper visually hides an element while keeping it accessible +// to non-visual media such as screen readers. +// A skip link is a common example. +//
+//
author
Chris Harvey
+//
updated
+//
+// +// Markup: +// skip to main content +// +// :focus - On focus, the element returns to static position. +// +// Weight: 4 +// +// Styleguide Helpers.Hidden +.h-Hidden { + &:not(:focus) { + position: absolute; + } + left: -999999px; +} + +@media screen and (min-width: 30em) { .h-Hidden-sK { .h-Hidden; } } +@media screen and (min-width: 45em) { .h-Hidden-sM { .h-Hidden; } } +@media screen and (min-width: 60em) { .h-Hidden-sG { .h-Hidden; } } +@media screen and (min-width: 75em) { .h-Hidden-sT { .h-Hidden; } } +@media screen and (min-width: 90em) { .h-Hidden-sP { .h-Hidden; } } +@media not all and (min-width: 30em) { .h-Hidden-nK { .h-Hidden; } } +@media not all and (min-width: 45em) { .h-Hidden-nM { .h-Hidden; } } +@media not all and (min-width: 60em) { .h-Hidden-nG { .h-Hidden; } } +@media not all and (min-width: 75em) { .h-Hidden-nT { .h-Hidden; } } +@media not all and (min-width: 90em) { .h-Hidden-nP { .h-Hidden; } } diff --git a/css/src/_h-Inline.less b/css/src/_h-Inline.less new file mode 100644 index 0000000..45090ac --- /dev/null +++ b/css/src/_h-Inline.less @@ -0,0 +1,44 @@ + +/*################################*\ + xmeter | _h-Inline.less +\*################################*/ + + +// Inline +// +// The Inline Helper displays an element in line, with a line-height of 0 to maintain vertical rhythm. +// This class is useful for creating inline lists, +// that is, lists whose items are each displayed in line, one right after another. +//
+//
author
Chris Harvey
+//
updated
+//
+// +// Markup: +//
    +//
  • spacetime
  • +//
  • black hole
  • +//
  • singularity
  • +//
  • gravity
  • +//
  • supernova
  • +//
  • neutron star
  • +//
      +// +// Weight: 2 +// +// Styleguide Helpers.Inline +.h-Inline { + display: inline; + line-height: 0; +} + +@media screen and (min-width: 30em) { .h-Inline-sK { .h-Inline; } } +@media screen and (min-width: 45em) { .h-Inline-sM { .h-Inline; } } +@media screen and (min-width: 60em) { .h-Inline-sG { .h-Inline; } } +@media screen and (min-width: 75em) { .h-Inline-sT { .h-Inline; } } +@media screen and (min-width: 90em) { .h-Inline-sP { .h-Inline; } } +@media not all and (min-width: 30em) { .h-Inline-nK { .h-Inline; } } +@media not all and (min-width: 45em) { .h-Inline-nM { .h-Inline; } } +@media not all and (min-width: 60em) { .h-Inline-nG { .h-Inline; } } +@media not all and (min-width: 75em) { .h-Inline-nT { .h-Inline; } } +@media not all and (min-width: 90em) { .h-Inline-nP { .h-Inline; } } diff --git a/css/src/_h-Measure.less b/css/src/_h-Measure.less new file mode 100644 index 0000000..f18a818 --- /dev/null +++ b/css/src/_h-Measure.less @@ -0,0 +1,65 @@ + +/*################################*\ + xmeter | _h-Meaure.less +\*################################*/ + + +// Measure +// +// The Measure Helper constrains an element’s inline-size +// (width, in horizontal writing modes) to a reasonable line length. +// +// The default style sets the max-inline-size of the block to 66 characters, but there are +// narrow and wide variants for differing cases. +// +// The narrow variant is useful in mobile design when the user might want to +// zoom in on text. Reading text with too large a measure on mobile devices requires a lot of +// horizontal scrolling back and forth. Inversely, the wide variant is useful for +// large type when you might not want the text to wrap as often. +// +// Because the block is capped at a character length, +// this style is responsive to font-size. The bigger the font, the larger the line length +// can be before the text wraps. Try adjusting your browser’s font size to see the effects. +// +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +//

      If the measure is too short, the reader’s eyes +// have to dart back and forth more often, causing fatigue. If the measure is too long, +// the reader is more likely to lose track of the previous line.

      +// +// .h-Measure--narrow - narrow variant constrains the size even tighter +// .h-Measure--wide - wide variant is not as constrained +// +// Weight: 5 +// +// Styleguide Helpers.Measure +.h-Measure { + max-width: 33em; // HACK fallback for `ch` unit + max-width: 66ch; // HACK fallback for logical properties + max-inline-size: 66ch; +} +.h-Measure--narrow { + max-width: 22.5em; // HACK fallback for `ch` unit + max-width: 45ch; // HACK fallback for logical properties + max-inline-size: 45ch; +} +.h-Measure--wide { + max-width: 45em; // HACK fallback for `ch` unit + max-width: 90ch; // HACK fallback for logical properties + max-inline-size: 90ch; +} + +@media screen and (min-width: 30em) { .h-Measure-sK { .h-Measure; } .h-Measure--narrow-sK { .h-Measure--narrow; } .h-Measure--wide-sK { .h-Measure--wide; } } +@media screen and (min-width: 45em) { .h-Measure-sM { .h-Measure; } .h-Measure--narrow-sM { .h-Measure--narrow; } .h-Measure--wide-sM { .h-Measure--wide; } } +@media screen and (min-width: 60em) { .h-Measure-sG { .h-Measure; } .h-Measure--narrow-sG { .h-Measure--narrow; } .h-Measure--wide-sG { .h-Measure--wide; } } +@media screen and (min-width: 75em) { .h-Measure-sT { .h-Measure; } .h-Measure--narrow-sT { .h-Measure--narrow; } .h-Measure--wide-sT { .h-Measure--wide; } } +@media screen and (min-width: 90em) { .h-Measure-sP { .h-Measure; } .h-Measure--narrow-sP { .h-Measure--narrow; } .h-Measure--wide-sP { .h-Measure--wide; } } +@media not all and (min-width: 30em) { .h-Measure-nK { .h-Measure; } .h-Measure--narrow-nK { .h-Measure--narrow; } .h-Measure--wide-nK { .h-Measure--wide; } } +@media not all and (min-width: 45em) { .h-Measure-nM { .h-Measure; } .h-Measure--narrow-nM { .h-Measure--narrow; } .h-Measure--wide-nM { .h-Measure--wide; } } +@media not all and (min-width: 60em) { .h-Measure-nG { .h-Measure; } .h-Measure--narrow-nG { .h-Measure--narrow; } .h-Measure--wide-nG { .h-Measure--wide; } } +@media not all and (min-width: 75em) { .h-Measure-nT { .h-Measure; } .h-Measure--narrow-nT { .h-Measure--narrow; } .h-Measure--wide-nT { .h-Measure--wide; } } +@media not all and (min-width: 90em) { .h-Measure-nP { .h-Measure; } .h-Measure--narrow-nP { .h-Measure--narrow; } .h-Measure--wide-nP { .h-Measure--wide; } } diff --git a/css/src/_h-Ruled.less b/css/src/_h-Ruled.less new file mode 100644 index 0000000..7217f5d --- /dev/null +++ b/css/src/_h-Ruled.less @@ -0,0 +1,50 @@ + +/*################################*\ + xmeter | _h-Ruled.less +\*################################*/ + + +// Ruled +// +// The Ruled Helper adds background lines for designing with vertical rhythm. +// Each line corresponds to one line of text. Lines are separated by one vertical rhythm unit (VRU). +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +//
      +//

      For instance, playing Ping-Pong on the train, one would find that +// the ball obeyed Newton’s laws just like a ball on a table by the track. +// So there is no way to tell whether it is the train or the earth that is moving.

      +//

      The laws of science should be the same for all freely moving observers, +// no matter what their speed. This was true for Netwon’s laws of motion, +// but now the idea was extended to include Maxwell’s theory. All observers +// should measure the same speed of light, no matter how fast they are moving.

      +//

      Gravity is not a force like other forces, but is a consequence of the +// fact that space-time is curved by the distribution of mass and energy in it. +// An object in a gravitational field experiences the same effects as if it were +// accelerating at a rate proportional to the strength of that gravitational field.

      +//
      +// +// Weight: 6 +// +// Styleguide Helpers.Ruled +@p-color-gray: rgba(0,0,0, 0.25); // same as _base.less +.h-Ruled { + background-image: linear-gradient(to top, @p-color-gray 1px, transparent 1px); + background-size: 1px var(--vru); + background-position-y: top; +} + +@media screen and (min-width: 30em) { .h-Ruled-sK { .h-Ruled; } } +@media screen and (min-width: 45em) { .h-Ruled-sM { .h-Ruled; } } +@media screen and (min-width: 60em) { .h-Ruled-sG { .h-Ruled; } } +@media screen and (min-width: 75em) { .h-Ruled-sT { .h-Ruled; } } +@media screen and (min-width: 90em) { .h-Ruled-sP { .h-Ruled; } } +@media not all and (min-width: 30em) { .h-Ruled-nK { .h-Ruled; } } +@media not all and (min-width: 45em) { .h-Ruled-nM { .h-Ruled; } } +@media not all and (min-width: 60em) { .h-Ruled-nG { .h-Ruled; } } +@media not all and (min-width: 75em) { .h-Ruled-nT { .h-Ruled; } } +@media not all and (min-width: 90em) { .h-Ruled-nP { .h-Ruled; } } diff --git a/css/src/_o-Flex.less b/css/src/_o-Flex.less new file mode 100644 index 0000000..3d106ae --- /dev/null +++ b/css/src/_o-Flex.less @@ -0,0 +1,73 @@ + +/*################################*\ + xmeter | _o-Flex.less +\*################################*/ + + +// The Flex Object +// +// The Flex Object is a container of flexible items arranged in one dimension. +// +// The axis, called the main-axis, is horizontal by default, but you can +// change the orientation to vertical using flex-direction. +// +// Also by default, the items along the main-axis do not wrap to the next track (row or column), +// but you can use flex-wrap to override this as well. If wrapping is turned on, +// the point where the wrap occurs is not controlled. This is by design. +// For two-dimensional control, see the Grid Object. +// +// Each flex item has a main size of auto, which defers to its +// width (or height) property. If that property is not explicitly set +// (or is explicitly set to auto), then the item’s main size will set +// automatically based its contents. +// +// The flex items will grow or shrink together to fit into the allotted space. +// By default, the extra space (if any) will be distributed between the items. +// You can override this with justify-content. +// +// See https://css-tricks.com/snippets/css/a-guide-to-flexbox/ for details. +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +//
        +//
      • Burns & McDonnell Engineering
      • +//
      • DIS-TRAN Steel, LLC
      • +//
      • EDM International
      • +//
      • Electrical Consultants, Inc.
      • +//
      • Fabrimet Inc.
      • +//
      • Falcon Steel Company
      • +//
      • Sabre-FWT
      • +//
      • HDR
      • +//
      • Mitas Energy
      • +//
      • Power Consulting Associates, LLC
      • +//
      • Power Line Systems, Inc.
      • +//
      • Quanta Services
      • +//
      • ReliaPOLE Inspection Services
      • +//
      +// +// Weight: 2 +// +// Styleguide Objects.Flex +.o-Flex { + display: flex; + line-height: inherit; // override lh-z on text-level elements + justify-content: space-between; +} + +.o-Flex__Item { + flex: auto; +} + +@media screen and (min-width: 30em) { .o-Flex-sK { .o-Flex; } .o-Flex__Item-sK { .o-Flex__Item; } } +@media screen and (min-width: 45em) { .o-Flex-sM { .o-Flex; } .o-Flex__Item-sM { .o-Flex__Item; } } +@media screen and (min-width: 60em) { .o-Flex-sG { .o-Flex; } .o-Flex__Item-sG { .o-Flex__Item; } } +@media screen and (min-width: 75em) { .o-Flex-sT { .o-Flex; } .o-Flex__Item-sT { .o-Flex__Item; } } +@media screen and (min-width: 90em) { .o-Flex-sP { .o-Flex; } .o-Flex__Item-sP { .o-Flex__Item; } } +@media not all and (min-width: 30em) { .o-Flex-nK { .o-Flex; } .o-Flex__Item-nK { .o-Flex__Item; } } +@media not all and (min-width: 45em) { .o-Flex-nM { .o-Flex; } .o-Flex__Item-nM { .o-Flex__Item; } } +@media not all and (min-width: 60em) { .o-Flex-nG { .o-Flex; } .o-Flex__Item-nG { .o-Flex__Item; } } +@media not all and (min-width: 75em) { .o-Flex-nT { .o-Flex; } .o-Flex__Item-nT { .o-Flex__Item; } } +@media not all and (min-width: 90em) { .o-Flex-nP { .o-Flex; } .o-Flex__Item-nP { .o-Flex__Item; } } diff --git a/css/src/_o-Grid.less b/css/src/_o-Grid.less new file mode 100644 index 0000000..c5a36b6 --- /dev/null +++ b/css/src/_o-Grid.less @@ -0,0 +1,70 @@ + +/*################################*\ + xmeter | _o-Grid.less +\*################################*/ + + +// The Grid Object +// +// The Grid Object is similar to the Flex Object except that it can be controlled in two dimensions. +// +// It has the structure of a list in that all items share the same container +// (unlike tables where cells might not share the same row), while at the same time +// appearing like a table with rows and columns. +// +// The Grid Object has one column at 1fr, unless overridden. +// Using CSS Grid properties and media queries, you can achieve a flexible and responsive table effect, +// adjusting the number of columns and rows based on screen size and/or content. +// +// See https://css-tricks.com/snippets/css/complete-guide-grid/ for details. +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +//
        +//
      • Burns & McDonnell Engineering
      • +//
      • DIS-TRAN Steel, LLC
      • +//
      • EDM International
      • +//
      • Electrical Consultants, Inc.
      • +//
      • Fabrimet Inc.
      • +//
      • Falcon Steel Company
      • +//
      • Sabre-FWT
      • +//
      • HDR
      • +//
      • Mitas Energy
      • +//
      • Power Consulting Associates, LLC
      • +//
      • Power Line Systems, Inc.
      • +//
      • Quanta Services
      • +//
      • ReliaPOLE Inspection Services
      • +//
      • Sabre-FWT
      • +//
      • SAE Towers
      • +//
      • TAPP Steel Poles
      • +//
      • Trinity Meyer Utility Structures
      • +//
      • TRC Engineers
      • +//
      • Underground Devices
      • +//
      • Valmont Newmark
      • +//
      +// +// Weight: 3 +// +// Styleguide Objects.Grid +.o-Grid { + display: grid; + line-height: inherit; // override lh-z on text-level elements + grid-template-columns: 1fr; +} + +.o-Grid__Item { +} + +@media screen and (min-width: 30em) { .o-Grid-sK { .o-Grid; } .o-Grid__Item-sK { .o-Grid__Item; } } +@media screen and (min-width: 45em) { .o-Grid-sM { .o-Grid; } .o-Grid__Item-sM { .o-Grid__Item; } } +@media screen and (min-width: 60em) { .o-Grid-sG { .o-Grid; } .o-Grid__Item-sG { .o-Grid__Item; } } +@media screen and (min-width: 75em) { .o-Grid-sT { .o-Grid; } .o-Grid__Item-sT { .o-Grid__Item; } } +@media screen and (min-width: 90em) { .o-Grid-sP { .o-Grid; } .o-Grid__Item-sP { .o-Grid__Item; } } +@media not all and (min-width: 30em) { .o-Grid-nK { .o-Grid; } .o-Grid__Item-nK { .o-Grid__Item; } } +@media not all and (min-width: 45em) { .o-Grid-nM { .o-Grid; } .o-Grid__Item-nM { .o-Grid__Item; } } +@media not all and (min-width: 60em) { .o-Grid-nG { .o-Grid; } .o-Grid__Item-nG { .o-Grid__Item; } } +@media not all and (min-width: 75em) { .o-Grid-nT { .o-Grid; } .o-Grid__Item-nT { .o-Grid__Item; } } +@media not all and (min-width: 90em) { .o-Grid-nP { .o-Grid; } .o-Grid__Item-nP { .o-Grid__Item; } } diff --git a/css/src/_o-List.less b/css/src/_o-List.less new file mode 100644 index 0000000..27720ae --- /dev/null +++ b/css/src/_o-List.less @@ -0,0 +1,48 @@ + +/*################################*\ + xmeter | _o-List.less +\*################################*/ + + +// The List Object +// +// A simple, plain, blocky list. +// It removes the usual padding and list item markers accompanied by (un)ordered lists. +// The result is a list of items, each on its own line. +// Combine this class with other classes to create a variety of styles. +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +//
        +//
      • Burns & McDonnell Engineering
      • +//
      • DIS-TRAN Steel, LLC
      • +//
      • EDM International
      • +//
      • Electrical Consultants, Inc.
      • +//
      • Fabrimet Inc.
      • +//
      • Falcon Steel Company
      • +//
      +// +// Weight: 1 +// +// Styleguide Objects.List +.o-List { + padding-left: 0; + list-style: none; +} + +.o-List__Item { +} + +@media screen and (min-width: 30em) { .o-List-sK { .o-List; } .o-List__Item-sK { .o-List__Item; } } +@media screen and (min-width: 45em) { .o-List-sM { .o-List; } .o-List__Item-sM { .o-List__Item; } } +@media screen and (min-width: 60em) { .o-List-sG { .o-List; } .o-List__Item-sG { .o-List__Item; } } +@media screen and (min-width: 75em) { .o-List-sT { .o-List; } .o-List__Item-sT { .o-List__Item; } } +@media screen and (min-width: 90em) { .o-List-sP { .o-List; } .o-List__Item-sP { .o-List__Item; } } +@media not all and (min-width: 30em) { .o-List-nK { .o-List; } .o-List__Item-nK { .o-List__Item; } } +@media not all and (min-width: 45em) { .o-List-nM { .o-List; } .o-List__Item-nM { .o-List__Item; } } +@media not all and (min-width: 60em) { .o-List-nG { .o-List; } .o-List__Item-nG { .o-List__Item; } } +@media not all and (min-width: 75em) { .o-List-nT { .o-List; } .o-List__Item-nT { .o-List__Item; } } +@media not all and (min-width: 90em) { .o-List-nP { .o-List; } .o-List__Item-nP { .o-List__Item; } } diff --git a/css/src/_o-Tablist.less b/css/src/_o-Tablist.less new file mode 100644 index 0000000..2f24866 --- /dev/null +++ b/css/src/_o-Tablist.less @@ -0,0 +1,154 @@ + +/*################################*\ + neo | _o-Tablist.less +\*################################*/ + + +// The Tablist Object +// +// The Tablist Object contains a series of corresponding tabs and panels. +// It is similar to a carousel, but only one panel is shown at a time and +// there is no timed automatic progression. +// +// Tabs and corresponding panels follow subsequently, as so: +//
      tab-0, panel-0, tab-1, panel-1, tab-2, panel-2, etc.
      +// +// Note: All radio buttons in a group must have the same `[name]` attribute. +// While the `[name]` attribute prevents the user from selecting multiple radio buttons +// within the same groupat the same time, radio buttons should also be grouped within a +// `fieldset` element (or if not a fieldset, any element with `[aria-role="group"]`). +// Additionally, that `fieldest` element should also contain a visible `legend:first-child` element +// (or if using an `[aria-role="group"]`, it should contain an `[aria-label]` attribute). +// +// Note: Enable Javascript to view carousel effects. +// Without Javascript, this object won’t look like a carousel, just a regular `
      ` list. +// +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +//
      +// Tabs +//
      +// +//
      +//

      This is slide 1. Switch to the next panel by clicking its heading.

      +//
      +// +//
      +//

      This is slide 2. This slide is slightly larger than slide 1.

      +//

      This is slide 2. This slide is slightly larger than slide 1.

      +//
      +// +//
      +//

      This is slide 3. The largest slide.

      +//

      This is slide 3. The largest slide.

      +//

      This is slide 3. The largest slide.

      +//
      +//
      +//
      +// +// Weight: 4 +// +// Styleguide Objects.Tablist +.o-Tablist { + margin-top : 0; margin-top : initial; // HACK fallbacks + margin-left : 0; margin-left : initial; // HACK fallbacks + margin-right: 0; margin-right: initial; // HACK fallbacks + margin-top : unset; // unset fieldset base + margin-left : unset; // unset fieldset base + margin-right: unset; // unset fieldset base + margin-block-start: unset; // CHANGED experimental support + margin-inline : unset; // CHANGED experimental support + + padding: 0; padding: initial; // HACK fallbacks + padding: unset; // unset fieldset base + + border: 0; // unset fieldset base + + & > .o-Flex { + flex-wrap: wrap; + margin-bottom: 0; // fixes a bug where fieldset vertical margins don’t collapse + } +} + + +// Tab +// +// The Tab subcomponent is a child of the Tablist Object. +// It represents a tab for a panel, and semantically consists of a radio button +// (although it may not appear anything like a radio button). +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +// +// +// .o-Tablist__Tab--js-selected - selected tab style (extend with your own skin) +// +// Weight: 1 +// +// Styleguide Objects.Tablist.Tab +.o-Tablist__Tab { +} +// NOTE! Do not add this class manually. +// It will be added automatically by `o-Tablist.js`. +.o-Tablist__Tab--js-selected { +} + +.o-Tablist__Check { + position: absolute; // override `.h-Hidden:focus` +} + + +// Panel +// +// The Panel subcomponent is a child of the Tablist Object. +// It represents a panel, and can contain any content. +//
      +//
      author
      Chris Harvey
      +//
      updated
      +//
      +// +// Markup: +//
      +//

      This is slide 4.

      +//
      +// +// .o-Tablist__Panel--js-selected - selected panel style (extend with your own skin) +// +// Weight: 2 +// +// Styleguide Objects.Tablist.Panel +.o-Tablist__Panel { + order: 1; + flex: 100%; +} +// NOTE! Do not add this class manually. +// It will be added automatically by `o-Tablist.js`. +.o-Tablist__Panel--js-selected { +} diff --git a/src/homepage.md b/css/src/homepage.md similarity index 100% rename from src/homepage.md rename to css/src/homepage.md diff --git a/css/src/reset.css b/css/src/reset.css new file mode 100644 index 0000000..6255cb1 --- /dev/null +++ b/css/src/reset.css @@ -0,0 +1,60 @@ + +/*================================*\ + reset.css +\*================================*/ + + +body { + text-align: start; /* HACK fallback */ + text-align: initial; /* fix unsupported browsers initial value */ + background: #fff; + color: #000; +} + +sup, sub { + vertical-align: baseline; /* HACK fallback */ + vertical-align: initial; /* HACK fallback */ + vertical-align: unset; +} +body, +h1, h2, h3, h4, h5, h6, +hr, +p, figure, blockquote, pre, +ol, ul, dl, +dd, +fieldset { + margin: 0; margin: initial; /* HACK fallback */ + margin: unset; +} +ol, ul, +th, td, +legend { + padding: 0; padding: initial; /* HACK fallback */ + padding: unset; +} +h1, h2, h3, h4, h5, h6, +address, +pre, +th, +em, strong, i, small, +dfn, b, var, cite, sup, sub, +code, kbd, samp { + font: inherit; +} +caption, +th { + text-align: inherit; +} +pre { + white-space: inherit; +} +a, +u, s, +ins, del { + text-decoration: none; text-decoration: initial; /* HACK fallback */ + text-decoration: unset; +} +mark { + color: inherit; /* HACK fallback */ + color: unset; +} diff --git a/css/src/xmeter.less b/css/src/xmeter.less new file mode 100644 index 0000000..475e9a7 --- /dev/null +++ b/css/src/xmeter.less @@ -0,0 +1,135 @@ + +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ + xmeter + Version: 6.0.0 + Licence: MIT + Repo : https://github.com/chharvey/xmeter.git + Home : https://github.com/chharvey/xmeter#readme + Author : Chris Harvey (https://chharvey.github.io/) +\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + + +@import (inline) url('reset.css'); +@import (inline) url('../../node_modules/normalize.css/normalize.css'); + + +/*================================*\ + xmeter.less +\*================================*/ +@import (reference) url('src/__settings.less'); +@import (reference) url('src/__tool.fontsize.less'); +@import (reference) url('src/__tool.borders.less'); +@import (reference) url('src/__tool.delims.less'); + + +/** + * //////////////// CONTENTS //////////////// + * + * reset.css (above)...................strips all elements of all browser-default styles + * normalize.css (above)...............(@necolas) addresses browser discrepancies + * + * BASE--------------------------------BARE UNCLASSED ELEMENTS + * _base.css...........................unclassed html elements + * + * OBJECTS-----------------------------REUSABLE STRUCTURAL PATTERNS + * List................................plain, unstyled, blocky list + * Flex................................one-dimensional flexible box + * Grid................................two-dimensional flexible box + * Tablist.............................object containing tabs and panels + * + * COMPONENTS--------------------------SPECIFIC STYLE PATTERNS + * Permalink...........................internal documentation link + * + * THEMES & HELPERS--------------------LOCATION-DEPENDENT STYLES + * Block...............................gives a blocky look + * Inline..............................a simple inline object + * Clearfix............................creates a line break and clears floats + * Hidden..............................visually hides an element + * Measure.............................constrains an element’s inline-size for readability + * Ruled...............................adds background lines + * + * ATOMS-------------------------------FUNCTIONAL CSS + * fz..................................font-size + */ + +/////////////////////////////////////////////////////////////////////////////// + + +// Principles +// +// Parts of an overarching design theme. +// - voice-and-tone, mood, and look-and-feel of the site +// - typographical conventions & rhythm (typefaces, font sizes, and leading used throughout the site) +// - additionally, any atypical writing modes / other languages required +// - site-wide color scheme +// - image treatment conventions (story-telling, image placement, quality, filters, etc) +// +// Weight: 1 +// +// Styleguide Principles + +@import url('_base.less'); + +// Objects +// +// Layout and structural design patterns that can be reused many times for many different purposes. +// - layout display (grid/flexbox/multicol) +// - positioning/floats/alignment +// - sizing (width & height) +// - spacing (padding & margin) +// +// Weight: 2 +// +// Styleguide Objects + +@import url('_o-List.less'); +@import url('_o-Flex.less'); +@import url('_o-Grid.less'); +@import url('_o-Tablist.less'); + +// Components +// +// Cosmetic design patterns that are each only used for one functional purpose. +// - box effects (backgrounds, borders, opacity) +// - typefaces and font weights/styles +// - textual effects (letter-spacing, alignment, indentation, decoration, list-style, color) +// - bells & whistles (transformations, overflows, shadows, filters, transitions, icons) +// +// Weight: 3 +// +// Styleguide Components + +@import url('_c-Permalink.less'); + +// Organisms +// +// Aggregate compositions of Objects and Components that form single, self-sustaining interfaces. +// +// Weight: 4 +// +// Styleguide Organisms + +// Helpers +// +// Somewhat explicit classes used for enhancing default styles. +// +// Weight: 5 +// +// Styleguide Helpers + +@import url('_h-Block.less'); +@import url('_h-Inline.less'); +@import url('_h-Clearfix.less'); +@import url('_h-Hidden.less'); +@import url('_h-Measure.less'); +@import url('_h-Ruled.less'); + +// Atoms +// +// Very specific classes used for creating anomalies or fixing broken styles. +// +// Weight: 6 +// +// Styleguide Atoms + +@import url('_-fz.less'); diff --git a/css/xmeter.css b/css/xmeter.css new file mode 100644 index 0000000..28cfabb --- /dev/null +++ b/css/xmeter.css @@ -0,0 +1,2 @@ +audio:not([controls]),hr{height:0;display:none}button,hr,input{overflow:visible}legend,mark{color:inherit}audio,canvas,progress,video{display:inline-block}progress,sub,sup{vertical-align:baseline}[hidden],hr,template{display:none}pre,table{text-align:left}pre,textarea{overflow:auto}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,textarea{display:block}button,input[type=button],input[type=reset],input[type=submit],label,summary{cursor:pointer}img,legend,table{max-width:100%}.o-List,dl{list-style:none}.h-Hidden:not(:focus),.o-Tablist__Check{position:absolute}body{text-align:start;text-align:initial;background:#fff;color:#000}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0;margin:initial;margin:unset}legend,ol,td,th,ul{padding:0;padding:initial;padding:unset}address,b,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,kbd,pre,samp,small,strong,sub,sup,th,var{font:inherit}cite,dfn,em,i,var{font-style:italic}caption,th{text-align:inherit;text-align:center}a,del,ins,s,u{text-decoration:none;text-decoration:initial;text-decoration:unset}abbr[title],u{text-decoration:underline}mark{color:unset;background-color:#ff0;color:#000;background-color:#f3f8b1}/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}h1{font-size:2em;margin:.67em 0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}figure{margin:1em 40px;margin-top:0;margin-left:0;margin-right:0}hr{-webkit-box-sizing:content-box;box-sizing:content-box}[type=checkbox],[type=radio],legend{-webkit-box-sizing:border-box;padding:0}pre{white-space:inherit}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#00e}abbr[title]{border-bottom:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted;cursor:help;text-decoration:none}b,strong{font-weight:inherit;font-weight:bolder}b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:700}small{font-size:80%}sub,sup{vertical-align:initial;vertical-align:unset;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{margin:0}button,select{text-transform:none}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:ButtonText dotted 1px}legend{box-sizing:border-box;display:table;white-space:normal}[type=checkbox],[type=radio]{box-sizing:border-box}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1,h3{line-height:calc(var(--line-height)/ 1.5)}h2,h4{line-height:calc(var(--line-height)/ 1)}h5,pre{line-height:calc(var(--line-height)/ .75)}summary{display:list-item}*,::after,::before{content:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-column-rule:0 solid;column-rule:0 solid}@media print{*,::after,::before{background:0 0!important;-webkit-box-shadow:none!important;box-shadow:none!important;text-shadow:none!important}}::after,::before,:not(input):not(button):not(select){border:0 solid}html{--line-height:1.5;--vru:calc(var(--line-height) * 1rem);font-size:100%;line-height:var(--line-height)}blockquote,details,dl,fieldset,figure,form,h1,h2,h3,h4,h5,h6,ol,p,pre,table,textarea,ul{margin-bottom:var(--vru)}h1{padding-top:var(--vru);font-size:3em;margin-top:0}abbr,b,br,cite,code,data,dfn,em,i,kbd,label,mark,q,s,samp,small,span,strong,sub,sup,time,u,var{line-height:0}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1em}h5{font-size:.75em}h6{font-size:.5em;line-height:calc(var(--line-height)/ .5)}code,kbd,pre,samp,small,sub,sup{font-size:.75em}pre{text-indent:0;white-space:pre}.h-Block,.o-Flex,.o-Grid,button,input,select,textarea{line-height:inherit}dd>dl,dd>ol,dd>ul,dt>dl,dt>ol,dt>ul,li>dl,li>ol,li>ul{margin-bottom:0}ol,ul{padding:0 0 0 4rem}dd>ol,dd>ul,dt>ol,dt>ul,li>ol,li>ul{padding-left:2rem}ol{list-style-type:decimal}ul{list-style-type:disc}table{border-collapse:collapse}tfoot,thead{vertical-align:bottom}tbody{vertical-align:top}@media screen{a:not([href]){opacity:.5}}u{-webkit-text-decoration-line:underline;text-decoration-line:underline;color:#080}s{text-decoration:line-through;-webkit-text-decoration-line:line-through;text-decoration-line:line-through;color:#b00}ins{background-color:#acf2bd}del{background-color:#fdb8c0}dfn{font-style:inherit}q{quotes:'\201c' '\201d';quotes:initial}q::before{content:open-quote}q::after{content:close-quote}code,kbd,samp{white-space:nowrap}code code,code kbd,code samp,kbd code,kbd kbd,kbd samp,samp code,samp kbd,samp samp{font-size:inherit}pre code,pre kbd,pre samp{white-space:inherit;white-space:unset}fieldset{padding:0 1rem}input,textarea{padding:0 .25rem}html>body fieldset{margin-top:-2px;border:1px solid rgba(0,0,0,.25)}textarea{-webkit-box-shadow:0 0 0 1px rgba(0,0,0,.25);box-shadow:0 0 0 1px rgba(0,0,0,.25);width:30rem;height:calc(6 * var(--vru));font-size:.75rem}textarea>*{--vru:calc(0.75 * var(--line-height) * 1rem)}input:not([type=button]):not([type=reset]):not([type=submit]),select{font-size:.75em}button,input[type=button],input[type=reset],input[type=submit]{padding:.125em .25em}select[multiple]>optgroup>option{padding-left:1rem}img{border-style:none;width:auto;height:auto;font-style:italic;vertical-align:middle}.o-List{padding-left:0}.o-Flex{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item{-webkit-box-flex:1;-ms-flex:auto;flex:auto}@media screen and (min-width:30em){.o-List-sK{padding-left:0;list-style:none}.o-Flex-sK{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-sK{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media screen and (min-width:45em){.o-List-sM{padding-left:0;list-style:none}.o-Flex-sM{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-sM{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media screen and (min-width:60em){.o-List-sG{padding-left:0;list-style:none}.o-Flex-sG{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-sG{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media screen and (min-width:75em){.o-List-sT{padding-left:0;list-style:none}.o-Flex-sT{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-sT{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media screen and (min-width:90em){.o-List-sP{padding-left:0;list-style:none}.o-Flex-sP{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-sP{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media not all and (min-width:30em){.o-List-nK{padding-left:0;list-style:none}.o-Flex-nK{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-nK{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media not all and (min-width:45em){.o-List-nM{padding-left:0;list-style:none}.o-Flex-nM{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-nM{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media not all and (min-width:60em){.o-List-nG{padding-left:0;list-style:none}.o-Flex-nG{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-nG{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media not all and (min-width:75em){.o-List-nT{padding-left:0;list-style:none}.o-Flex-nT{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-nT{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}@media not all and (min-width:90em){.o-List-nP{padding-left:0;list-style:none}.o-Flex-nP{display:-webkit-box;display:-ms-flexbox;display:flex;line-height:inherit;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.o-Flex__Item-nP{-webkit-box-flex:1;-ms-flex:auto;flex:auto}}.o-Grid{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr}.o-Tablist{margin-top:0;margin-top:initial;margin-left:0;margin-left:initial;margin-right:0;margin-right:initial;margin-top:unset;margin-left:unset;margin-right:unset;-webkit-margin-before:unset;margin-block-start:unset;margin-inline:unset;padding:0;padding:initial;padding:unset;border:0}.o-Tablist>.o-Flex{-ms-flex-wrap:wrap;flex-wrap:wrap;margin-bottom:0}.o-Tablist__Panel{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;-webkit-box-flex:100%;-ms-flex:100%;flex:100%}.c-Permalink{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink,h2:hover>.c-Permalink,h3:hover>.c-Permalink,h4:hover>.c-Permalink,h5:hover>.c-Permalink,h6:hover>.c-Permalink{position:static;position:initial;position:unset}@media screen and (min-width:30em){.o-Grid-sK{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-sK{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-sK,h2:hover>.c-Permalink-sK,h3:hover>.c-Permalink-sK,h4:hover>.c-Permalink-sK,h5:hover>.c-Permalink-sK,h6:hover>.c-Permalink-sK{position:static;position:initial;position:unset}}@media screen and (min-width:45em){.o-Grid-sM{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-sM{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-sM,h2:hover>.c-Permalink-sM,h3:hover>.c-Permalink-sM,h4:hover>.c-Permalink-sM,h5:hover>.c-Permalink-sM,h6:hover>.c-Permalink-sM{position:static;position:initial;position:unset}}@media screen and (min-width:60em){.o-Grid-sG{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-sG{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-sG,h2:hover>.c-Permalink-sG,h3:hover>.c-Permalink-sG,h4:hover>.c-Permalink-sG,h5:hover>.c-Permalink-sG,h6:hover>.c-Permalink-sG{position:static;position:initial;position:unset}}@media screen and (min-width:75em){.o-Grid-sT{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-sT{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-sT,h2:hover>.c-Permalink-sT,h3:hover>.c-Permalink-sT,h4:hover>.c-Permalink-sT,h5:hover>.c-Permalink-sT,h6:hover>.c-Permalink-sT{position:static;position:initial;position:unset}}@media screen and (min-width:90em){.o-Grid-sP{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-sP{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-sP,h2:hover>.c-Permalink-sP,h3:hover>.c-Permalink-sP,h4:hover>.c-Permalink-sP,h5:hover>.c-Permalink-sP,h6:hover>.c-Permalink-sP{position:static;position:initial;position:unset}}@media not all and (min-width:30em){.o-Grid-nK{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-nK{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-nK,h2:hover>.c-Permalink-nK,h3:hover>.c-Permalink-nK,h4:hover>.c-Permalink-nK,h5:hover>.c-Permalink-nK,h6:hover>.c-Permalink-nK{position:static;position:initial;position:unset}}@media not all and (min-width:45em){.o-Grid-nM{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-nM{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-nM,h2:hover>.c-Permalink-nM,h3:hover>.c-Permalink-nM,h4:hover>.c-Permalink-nM,h5:hover>.c-Permalink-nM,h6:hover>.c-Permalink-nM{position:static;position:initial;position:unset}}@media not all and (min-width:60em){.o-Grid-nG{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-nG{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-nG,h2:hover>.c-Permalink-nG,h3:hover>.c-Permalink-nG,h4:hover>.c-Permalink-nG,h5:hover>.c-Permalink-nG,h6:hover>.c-Permalink-nG{position:static;position:initial;position:unset}}@media not all and (min-width:75em){.o-Grid-nT{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-nT{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-nT,h2:hover>.c-Permalink-nT,h3:hover>.c-Permalink-nT,h4:hover>.c-Permalink-nT,h5:hover>.c-Permalink-nT,h6:hover>.c-Permalink-nT{position:static;position:initial;position:unset}}@media not all and (min-width:90em){.o-Grid-nP{display:-ms-grid;display:grid;line-height:inherit;-ms-grid-columns:1fr;grid-template-columns:1fr}.c-Permalink-nP{margin-left:1rem;font-weight:100}h1:hover>.c-Permalink-nP,h2:hover>.c-Permalink-nP,h3:hover>.c-Permalink-nP,h4:hover>.c-Permalink-nP,h5:hover>.c-Permalink-nP,h6:hover>.c-Permalink-nP{position:static;position:initial;position:unset}.h-Block-nP{display:block;line-height:inherit}}.h-Block{display:block}@media screen and (min-width:30em){.h-Block-sK{display:block;line-height:inherit}}@media screen and (min-width:45em){.h-Block-sM{display:block;line-height:inherit}}@media screen and (min-width:60em){.h-Block-sG{display:block;line-height:inherit}}@media screen and (min-width:75em){.h-Block-sT{display:block;line-height:inherit}}@media screen and (min-width:90em){.h-Block-sP{display:block;line-height:inherit}}@media not all and (min-width:30em){.h-Block-nK{display:block;line-height:inherit}}@media not all and (min-width:45em){.h-Block-nM{display:block;line-height:inherit}}@media not all and (min-width:60em){.h-Block-nG{display:block;line-height:inherit}}@media not all and (min-width:75em){.h-Block-nT{display:block;line-height:inherit}.h-Inline-nT{display:inline;line-height:0}}.h-Inline{display:inline;line-height:0}.h-Clearfix::after{content:'';display:block;clear:both}.h-Hidden{left:-999999px}.h-Measure{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta{font-size:6em!important}.-fz-tera{font-size:4em!important}.-fz-giga{font-size:3em!important}.-fz-mega{font-size:2em!important}.-fz-kilo{font-size:1.5em!important}.-fz-norm{font-size:1em!important}.-fz-mill{font-size:.75em!important}.-fz-micr{font-size:.5em!important}@media screen and (min-width:30em){.h-Inline-sK{display:inline;line-height:0}.h-Clearfix-sK::after{content:'';display:block;clear:both}.h-Hidden-sK{left:-999999px}.h-Hidden-sK:not(:focus){position:absolute}.h-Measure-sK{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-sK{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-sK{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-sK{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-sK{font-size:6em!important}.-fz-tera-sK{font-size:4em!important}.-fz-giga-sK{font-size:3em!important}.-fz-mega-sK{font-size:2em!important}.-fz-kilo-sK{font-size:1.5em!important}.-fz-norm-sK{font-size:1em!important}.-fz-mill-sK{font-size:.75em!important}.-fz-micr-sK{font-size:.5em!important}}@media screen and (min-width:45em){.h-Inline-sM{display:inline;line-height:0}.h-Clearfix-sM::after{content:'';display:block;clear:both}.h-Hidden-sM{left:-999999px}.h-Hidden-sM:not(:focus){position:absolute}.h-Measure-sM{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-sM{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-sM{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-sM{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-sM{font-size:6em!important}.-fz-tera-sM{font-size:4em!important}.-fz-giga-sM{font-size:3em!important}.-fz-mega-sM{font-size:2em!important}.-fz-kilo-sM{font-size:1.5em!important}.-fz-norm-sM{font-size:1em!important}.-fz-mill-sM{font-size:.75em!important}.-fz-micr-sM{font-size:.5em!important}}@media screen and (min-width:60em){.h-Inline-sG{display:inline;line-height:0}.h-Clearfix-sG::after{content:'';display:block;clear:both}.h-Hidden-sG{left:-999999px}.h-Hidden-sG:not(:focus){position:absolute}.h-Measure-sG{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-sG{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-sG{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-sG{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-sG{font-size:6em!important}.-fz-tera-sG{font-size:4em!important}.-fz-giga-sG{font-size:3em!important}.-fz-mega-sG{font-size:2em!important}.-fz-kilo-sG{font-size:1.5em!important}.-fz-norm-sG{font-size:1em!important}.-fz-mill-sG{font-size:.75em!important}.-fz-micr-sG{font-size:.5em!important}}@media screen and (min-width:75em){.h-Inline-sT{display:inline;line-height:0}.h-Clearfix-sT::after{content:'';display:block;clear:both}.h-Hidden-sT{left:-999999px}.h-Hidden-sT:not(:focus){position:absolute}.h-Measure-sT{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-sT{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-sT{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-sT{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-sT{font-size:6em!important}.-fz-tera-sT{font-size:4em!important}.-fz-giga-sT{font-size:3em!important}.-fz-mega-sT{font-size:2em!important}.-fz-kilo-sT{font-size:1.5em!important}.-fz-norm-sT{font-size:1em!important}.-fz-mill-sT{font-size:.75em!important}.-fz-micr-sT{font-size:.5em!important}}@media screen and (min-width:90em){.h-Inline-sP{display:inline;line-height:0}.h-Clearfix-sP::after{content:'';display:block;clear:both}.h-Hidden-sP{left:-999999px}.h-Hidden-sP:not(:focus){position:absolute}.h-Measure-sP{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-sP{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-sP{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-sP{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-sP{font-size:6em!important}.-fz-tera-sP{font-size:4em!important}.-fz-giga-sP{font-size:3em!important}.-fz-mega-sP{font-size:2em!important}.-fz-kilo-sP{font-size:1.5em!important}.-fz-norm-sP{font-size:1em!important}.-fz-mill-sP{font-size:.75em!important}.-fz-micr-sP{font-size:.5em!important}}@media not all and (min-width:30em){.h-Inline-nK{display:inline;line-height:0}.h-Clearfix-nK::after{content:'';display:block;clear:both}.h-Hidden-nK{left:-999999px}.h-Hidden-nK:not(:focus){position:absolute}.h-Measure-nK{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-nK{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-nK{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-nK{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-nK{font-size:6em!important}.-fz-tera-nK{font-size:4em!important}.-fz-giga-nK{font-size:3em!important}.-fz-mega-nK{font-size:2em!important}.-fz-kilo-nK{font-size:1.5em!important}.-fz-norm-nK{font-size:1em!important}.-fz-mill-nK{font-size:.75em!important}.-fz-micr-nK{font-size:.5em!important}}@media not all and (min-width:45em){.h-Inline-nM{display:inline;line-height:0}.h-Clearfix-nM::after{content:'';display:block;clear:both}.h-Hidden-nM{left:-999999px}.h-Hidden-nM:not(:focus){position:absolute}.h-Measure-nM{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-nM{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-nM{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-nM{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-nM{font-size:6em!important}.-fz-tera-nM{font-size:4em!important}.-fz-giga-nM{font-size:3em!important}.-fz-mega-nM{font-size:2em!important}.-fz-kilo-nM{font-size:1.5em!important}.-fz-norm-nM{font-size:1em!important}.-fz-mill-nM{font-size:.75em!important}.-fz-micr-nM{font-size:.5em!important}}@media not all and (min-width:60em){.h-Inline-nG{display:inline;line-height:0}.h-Clearfix-nG::after{content:'';display:block;clear:both}.h-Hidden-nG{left:-999999px}.h-Hidden-nG:not(:focus){position:absolute}.h-Measure-nG{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-nG{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-nG{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-nG{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-nG{font-size:6em!important}.-fz-tera-nG{font-size:4em!important}.-fz-giga-nG{font-size:3em!important}.-fz-mega-nG{font-size:2em!important}.-fz-kilo-nG{font-size:1.5em!important}.-fz-norm-nG{font-size:1em!important}.-fz-mill-nG{font-size:.75em!important}.-fz-micr-nG{font-size:.5em!important}}@media not all and (min-width:75em){.h-Clearfix-nT::after{content:'';display:block;clear:both}.h-Hidden-nT{left:-999999px}.h-Hidden-nT:not(:focus){position:absolute}.h-Measure-nT{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-nT{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-nT{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-nT{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-nT{font-size:6em!important}.-fz-tera-nT{font-size:4em!important}.-fz-giga-nT{font-size:3em!important}.-fz-mega-nT{font-size:2em!important}.-fz-kilo-nT{font-size:1.5em!important}.-fz-norm-nT{font-size:1em!important}.-fz-mill-nT{font-size:.75em!important}.-fz-micr-nT{font-size:.5em!important}}@media not all and (min-width:90em){.h-Inline-nP{display:inline;line-height:0}.h-Clearfix-nP::after{content:'';display:block;clear:both}.h-Hidden-nP{left:-999999px}.h-Hidden-nP:not(:focus){position:absolute}.h-Measure-nP{max-width:33em;max-width:66ch;max-inline-size:66ch}.h-Measure--narrow-nP{max-width:22.5em;max-width:45ch;max-inline-size:45ch}.h-Measure--wide-nP{max-width:45em;max-width:90ch;max-inline-size:90ch}.h-Ruled-nP{background-image:linear-gradient(to top,rgba(0,0,0,.25) 1px,transparent 1px);background-size:1px var(--vru);background-position-y:top}.-fz-peta-nP{font-size:6em!important}.-fz-tera-nP{font-size:4em!important}.-fz-giga-nP{font-size:3em!important}.-fz-mega-nP{font-size:2em!important}.-fz-kilo-nP{font-size:1.5em!important}.-fz-norm-nP{font-size:1em!important}.-fz-mill-nP{font-size:.75em!important}.-fz-micr-nP{font-size:.5em!important}}.-fz-el-peta{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}@media screen and (min-width:30em){.-fz-el-peta-sK{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-sK{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-sK{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-sK{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-sK{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-sK{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-sK{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-sK{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media screen and (min-width:45em){.-fz-el-peta-sM{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-sM{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-sM{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-sM{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-sM{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-sM{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-sM{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-sM{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media screen and (min-width:60em){.-fz-el-peta-sG{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-sG{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-sG{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-sG{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-sG{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-sG{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-sG{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-sG{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media screen and (min-width:75em){.-fz-el-peta-sT{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-sT{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-sT{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-sT{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-sT{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-sT{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-sT{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-sT{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media screen and (min-width:90em){.-fz-el-peta-sP{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-sP{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-sP{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-sP{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-sP{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-sP{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-sP{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-sP{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media not all and (min-width:30em){.-fz-el-peta-nK{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-nK{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-nK{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-nK{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-nK{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-nK{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-nK{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-nK{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media not all and (min-width:45em){.-fz-el-peta-nM{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-nM{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-nM{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-nM{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-nM{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-nM{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-nM{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-nM{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media not all and (min-width:60em){.-fz-el-peta-nG{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-nG{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-nG{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-nG{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-nG{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-nG{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-nG{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-nG{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media not all and (min-width:75em){.-fz-el-peta-nT{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-nT{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-nT{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-nT{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-nT{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-nT{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-nT{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-nT{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}}@media not all and (min-width:90em){.-fz-el-peta-nP{font-size:6em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-tera-nP{font-size:4em!important;line-height:calc(var(--line-height)/ 1.33333333)!important}.-fz-el-giga-nP{font-size:3em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-mega-nP{font-size:2em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-kilo-nP{font-size:1.5em!important;line-height:calc(var(--line-height)/ 1.5)!important}.-fz-el-norm-nP{font-size:1em!important;line-height:calc(var(--line-height)/ 1)!important}.-fz-el-mill-nP{font-size:.75em!important;line-height:calc(var(--line-height)/ .75)!important}.-fz-el-micr-nP{font-size:.5em!important;line-height:calc(var(--line-height)/ .5)!important}} +/*# sourceMappingURL=xmeter.css.map */ diff --git a/css/xmeter.css.map b/css/xmeter.css.map new file mode 100644 index 0000000..857aff0 --- /dev/null +++ b/css/xmeter.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["xmeter.css"],"names":[],"mappings":"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yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,mCA7JE,WACE,QAAS,SACT,QAAS,KACT,YAAa,QACb,iBAAkB,IAClB,sBAAuB,IAyJzB,gBACE,YAAa,KACb,YAAa,IAEf,yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,mCApKE,WACE,QAAS,SACT,QAAS,KACT,YAAa,QACb,iBAAkB,IAClB,sBAAuB,IAgKzB,gBACE,YAAa,KACb,YAAa,IAEf,yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,mCA3KE,WACE,QAAS,SACT,QAAS,KACT,YAAa,QACb,iBAAkB,IAClB,sBAAuB,IAuKzB,gBACE,YAAa,KACb,YAAa,IAEf,yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,oCAlLE,WACE,QAAS,SACT,QAAS,KACT,YAAa,QACb,iBAAkB,IAClB,sBAAuB,IA8KzB,gBACE,YAAa,KACb,YAAa,IAEf,yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,oCAzLE,WACE,QAAS,SACT,QAAS,KACT,YAAa,QACb,iBAAkB,IAClB,sBAAuB,IAqLzB,gBACE,YAAa,KACb,YAAa,IAEf,yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,oCAhME,WACE,QAAS,SACT,QAAS,KACT,YAAa,QACb,iBAAkB,IAClB,sBAAuB,IA4LzB,gBACE,YAAa,KACb,YAAa,IAEf,yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,oCAvME,WACE,QAAS,SACT,QAAS,KACT,YAAa,QACb,iBAAkB,IAClB,sBAAuB,IAmMzB,gBACE,YAAa,KACb,YAAa,IAEf,yBACA,yBACA,yBACA,yBACA,yBACA,yBACE,SAAU,OACV,SAAU,QACV,SAAU,OAGd,oCA9ME,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","file":"xmeter.css","sourcesContent":["/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\\\n xmeter\n Version: 6.0.0\n Licence: MIT\n Repo : https://github.com/chharvey/xmeter.git\n Home : https://github.com/chharvey/xmeter#readme\n Author : Chris Harvey (https://chharvey.github.io/)\n\\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/\n\n/*================================*\\\n reset.css\n\\*================================*/\n\n\nbody {\n text-align: start; /* HACK fallback */\n text-align: initial; /* fix unsupported browsers initial value */\n background: #fff;\n color: #000;\n}\n\nsup, sub {\n vertical-align: baseline; /* HACK fallback */\n vertical-align: initial; /* HACK fallback */\n vertical-align: unset;\n}\nbody,\nh1, h2, h3, h4, h5, h6,\nhr,\np, figure, blockquote, pre,\nol, ul, dl,\ndd,\nfieldset {\n margin: 0; margin: initial; /* HACK fallback */\n margin: unset;\n}\nol, ul,\nth, td,\nlegend {\n padding: 0; padding: initial; /* HACK fallback */\n padding: unset;\n}\nh1, h2, h3, h4, h5, h6,\naddress,\npre,\nth,\nem, strong, i, small,\ndfn, b, var, cite, sup, sub,\ncode, kbd, samp {\n font: inherit;\n}\ncaption,\nth {\n text-align: inherit;\n}\npre {\n white-space: inherit;\n}\na,\nu, s,\nins, del {\n text-decoration: none; text-decoration: initial; /* HACK fallback */\n text-decoration: unset;\n}\nmark {\n color: inherit; /* HACK fallback */\n color: unset;\n}\n\n/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */\n\n/* Document\n ========================================================================== */\n\n/**\n * 1. Correct the line height in all browsers.\n * 2. Prevent adjustments of font size after orientation changes in\n * IE on Windows Phone and in iOS.\n */\n\nhtml {\n line-height: 1.15; /* 1 */\n -ms-text-size-adjust: 100%; /* 2 */\n -webkit-text-size-adjust: 100%; /* 2 */\n}\n\n/* Sections\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\narticle,\naside,\nfooter,\nheader,\nnav,\nsection {\n display: block;\n}\n\n/**\n * Correct the font size and margin on `h1` elements within `section` and\n * `article` contexts in Chrome, Firefox, and Safari.\n */\n\nh1 {\n font-size: 2em;\n margin: 0.67em 0;\n}\n\n/* Grouping content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n * 1. Add the correct display in IE.\n */\n\nfigcaption,\nfigure,\nmain { /* 1 */\n display: block;\n}\n\n/**\n * Add the correct margin in IE 8.\n */\n\nfigure {\n margin: 1em 40px;\n}\n\n/**\n * 1. Add the correct box sizing in Firefox.\n * 2. Show the overflow in Edge and IE.\n */\n\nhr {\n -webkit-box-sizing: content-box;\n box-sizing: content-box; /* 1 */\n height: 0; /* 1 */\n overflow: visible; /* 2 */\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\npre {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/* Text-level semantics\n ========================================================================== */\n\n/**\n * 1. Remove the gray background on active links in IE 10.\n * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.\n */\n\na {\n background-color: transparent; /* 1 */\n -webkit-text-decoration-skip: objects; /* 2 */\n}\n\n/**\n * 1. Remove the bottom border in Chrome 57- and Firefox 39-.\n * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.\n */\n\nabbr[title] {\n border-bottom: none; /* 1 */\n text-decoration: underline; /* 2 */\n -webkit-text-decoration: underline dotted;\n text-decoration: underline dotted; /* 2 */\n}\n\n/**\n * Prevent the duplicate application of `bolder` by the next rule in Safari 6.\n */\n\nb,\nstrong {\n font-weight: inherit;\n}\n\n/**\n * Add the correct font weight in Chrome, Edge, and Safari.\n */\n\nb,\nstrong {\n font-weight: bolder;\n}\n\n/**\n * 1. Correct the inheritance and scaling of font size in all browsers.\n * 2. Correct the odd `em` font sizing in all browsers.\n */\n\ncode,\nkbd,\nsamp {\n font-family: monospace, monospace; /* 1 */\n font-size: 1em; /* 2 */\n}\n\n/**\n * Add the correct font style in Android 4.3-.\n */\n\ndfn {\n font-style: italic;\n}\n\n/**\n * Add the correct background and color in IE 9-.\n */\n\nmark {\n background-color: #ff0;\n color: #000;\n}\n\n/**\n * Add the correct font size in all browsers.\n */\n\nsmall {\n font-size: 80%;\n}\n\n/**\n * Prevent `sub` and `sup` elements from affecting the line height in\n * all browsers.\n */\n\nsub,\nsup {\n font-size: 75%;\n line-height: 0;\n position: relative;\n vertical-align: baseline;\n}\n\nsub {\n bottom: -0.25em;\n}\n\nsup {\n top: -0.5em;\n}\n\n/* Embedded content\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\naudio,\nvideo {\n display: inline-block;\n}\n\n/**\n * Add the correct display in iOS 4-7.\n */\n\naudio:not([controls]) {\n display: none;\n height: 0;\n}\n\n/**\n * Remove the border on images inside links in IE 10-.\n */\n\nimg {\n border-style: none;\n}\n\n/**\n * Hide the overflow in IE.\n */\n\nsvg:not(:root) {\n overflow: hidden;\n}\n\n/* Forms\n ========================================================================== */\n\n/**\n * Remove the margin in Firefox and Safari.\n */\n\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n margin: 0;\n}\n\n/**\n * Show the overflow in IE.\n * 1. Show the overflow in Edge.\n */\n\nbutton,\ninput { /* 1 */\n overflow: visible;\n}\n\n/**\n * Remove the inheritance of text transform in Edge, Firefox, and IE.\n * 1. Remove the inheritance of text transform in Firefox.\n */\n\nbutton,\nselect { /* 1 */\n text-transform: none;\n}\n\n/**\n * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`\n * controls in Android 4.\n * 2. Correct the inability to style clickable types in iOS and Safari.\n */\n\nbutton,\nhtml [type=\"button\"], /* 1 */\n[type=\"reset\"],\n[type=\"submit\"] {\n -webkit-appearance: button; /* 2 */\n}\n\n/**\n * Remove the inner border and padding in Firefox.\n */\n\nbutton::-moz-focus-inner,\n[type=\"button\"]::-moz-focus-inner,\n[type=\"reset\"]::-moz-focus-inner,\n[type=\"submit\"]::-moz-focus-inner {\n border-style: none;\n padding: 0;\n}\n\n/**\n * Restore the focus styles unset by the previous rule.\n */\n\nbutton:-moz-focusring,\n[type=\"button\"]:-moz-focusring,\n[type=\"reset\"]:-moz-focusring,\n[type=\"submit\"]:-moz-focusring {\n outline: 1px dotted ButtonText;\n}\n\n/**\n * 1. Correct the text wrapping in Edge and IE.\n * 2. Correct the color inheritance from `fieldset` elements in IE.\n * 3. Remove the padding so developers are not caught out when they zero out\n * `fieldset` elements in all browsers.\n */\n\nlegend {\n -webkit-box-sizing: border-box;\n box-sizing: border-box; /* 1 */\n color: inherit; /* 2 */\n display: table; /* 1 */\n max-width: 100%; /* 1 */\n padding: 0; /* 3 */\n white-space: normal; /* 1 */\n}\n\n/**\n * 1. Add the correct display in IE 9-.\n * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.\n */\n\nprogress {\n display: inline-block; /* 1 */\n vertical-align: baseline; /* 2 */\n}\n\n/**\n * Remove the default vertical scrollbar in IE.\n */\n\ntextarea {\n overflow: auto;\n}\n\n/**\n * 1. Add the correct box sizing in IE 10-.\n * 2. Remove the padding in IE 10-.\n */\n\n[type=\"checkbox\"],\n[type=\"radio\"] {\n -webkit-box-sizing: border-box;\n box-sizing: border-box; /* 1 */\n padding: 0; /* 2 */\n}\n\n/**\n * Correct the cursor style of increment and decrement buttons in Chrome.\n */\n\n[type=\"number\"]::-webkit-inner-spin-button,\n[type=\"number\"]::-webkit-outer-spin-button {\n height: auto;\n}\n\n/**\n * 1. Correct the odd appearance in Chrome and Safari.\n * 2. Correct the outline style in Safari.\n */\n\n[type=\"search\"] {\n -webkit-appearance: textfield; /* 1 */\n outline-offset: -2px; /* 2 */\n}\n\n/**\n * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.\n */\n\n[type=\"search\"]::-webkit-search-cancel-button,\n[type=\"search\"]::-webkit-search-decoration {\n -webkit-appearance: none;\n}\n\n/**\n * 1. Correct the inability to style clickable types in iOS and Safari.\n * 2. Change font properties to `inherit` in Safari.\n */\n\n::-webkit-file-upload-button {\n -webkit-appearance: button; /* 1 */\n font: inherit; /* 2 */\n}\n\n/* Interactive\n ========================================================================== */\n\n/*\n * Add the correct display in IE 9-.\n * 1. Add the correct display in Edge, IE, and Firefox.\n */\n\ndetails, /* 1 */\nmenu {\n display: block;\n}\n\n/*\n * Add the correct display in all browsers.\n */\n\nsummary {\n display: list-item;\n}\n\n/* Scripting\n ========================================================================== */\n\n/**\n * Add the correct display in IE 9-.\n */\n\ncanvas {\n display: inline-block;\n}\n\n/**\n * Add the correct display in IE.\n */\n\ntemplate {\n display: none;\n}\n\n/* Hidden\n ========================================================================== */\n\n/**\n * Add the correct display in IE 10-.\n */\n\n[hidden] {\n display: none;\n}\n\n/*================================*\\\n xmeter.less\n\\*================================*/\n/**\n * //////////////// CONTENTS ////////////////\n *\n * reset.css (above)...................strips all elements of all browser-default styles\n * normalize.css (above)...............(@necolas) addresses browser discrepancies\n *\n * BASE--------------------------------BARE UNCLASSED ELEMENTS\n * _base.css...........................unclassed html elements\n *\n * OBJECTS-----------------------------REUSABLE STRUCTURAL PATTERNS\n * List................................plain, unstyled, blocky list\n * Flex................................one-dimensional flexible box\n * Grid................................two-dimensional flexible box\n * Tablist.............................object containing tabs and panels\n *\n * COMPONENTS--------------------------SPECIFIC STYLE PATTERNS\n * Permalink...........................internal documentation link\n *\n * THEMES & HELPERS--------------------LOCATION-DEPENDENT STYLES\n * Block...............................gives a blocky look\n * Inline..............................a simple inline object\n * Clearfix............................creates a line break and clears floats\n * Hidden..............................visually hides an element\n * Measure.............................constrains an element’s inline-size for readability\n * Ruled...............................adds background lines\n *\n * ATOMS-------------------------------FUNCTIONAL CSS\n * fz..................................font-size\n */\n/*################################*\\\n xmeter | _base.less\n\\*################################*/\n*,\n*::before,\n*::after {\n content: none;\n -webkit-box-sizing: border-box;\n box-sizing: border-box;\n -webkit-column-rule: 0 solid;\n column-rule: 0 solid;\n}\n@media print {\n *,\n *::before,\n *::after {\n background: transparent !important;\n -webkit-box-shadow: none !important;\n box-shadow: none !important;\n text-shadow: none !important;\n }\n}\n*:not(input):not(button):not(select),\n*::before,\n*::after {\n border: 0 solid;\n}\nhtml {\n --line-height: 1.5;\n --vru: calc(var(--line-height) * 1rem);\n font-size: 100%;\n line-height: var(--line-height);\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\np,\npre,\nfigure,\nblockquote,\nol,\nul,\ndl,\ntable,\nform,\nfieldset,\ntextarea,\ndetails {\n margin-bottom: var(--vru);\n}\nh1 {\n padding-top: var(--vru);\n}\nspan,\nbr,\nem,\nstrong,\ni,\nmark,\nu,\nsmall,\ns,\ndfn,\nb,\nabbr,\nvar,\nq,\ncite,\nsup,\nsub,\ndata,\ntime,\ncode,\nkbd,\nsamp,\nlabel {\n line-height: 0;\n}\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 700;\n}\nh1 {\n font-size: 3em;\n line-height: calc(var(--line-height) / 1.5);\n}\nh2 {\n font-size: 2em;\n line-height: calc(var(--line-height) / 1);\n}\nh3 {\n font-size: 1.5em;\n line-height: calc(var(--line-height) / 1.5);\n}\nh4 {\n font-size: 1em;\n line-height: calc(var(--line-height) / 1);\n}\nh5 {\n font-size: 0.75em;\n line-height: calc(var(--line-height) / 0.75);\n}\nh6 {\n font-size: 0.5em;\n line-height: calc(var(--line-height) / 0.5);\n}\nh1 {\n margin-top: 0;\n}\nhr {\n display: none;\n}\npre {\n font-size: 0.75em;\n line-height: calc(var(--line-height) / 0.75);\n text-align: left;\n text-indent: 0;\n white-space: pre;\n overflow: auto;\n}\nfigure {\n margin-top: 0;\n margin-left: 0;\n margin-right: 0;\n}\nli > ol,\nli > ul,\nli > dl,\ndt > ol,\ndt > ul,\ndt > dl,\ndd > ol,\ndd > ul,\ndd > dl {\n margin-bottom: 0;\n}\nol,\nul {\n padding: 0 0 0 4rem;\n}\nli > ol,\nli > ul,\ndt > ol,\ndt > ul,\ndd > ol,\ndd > ul {\n padding-left: 2rem;\n}\nol {\n list-style-type: decimal;\n}\nul {\n list-style-type: disc;\n}\ndl {\n list-style: none;\n}\ntable {\n max-width: 100%;\n border-collapse: collapse;\n text-align: left;\n}\ncaption {\n text-align: center;\n}\nthead,\ntfoot {\n vertical-align: bottom;\n}\ntbody {\n vertical-align: top;\n}\nth {\n font-weight: 700;\n text-align: center;\n}\na {\n color: #00e;\n}\n@media screen {\n a:not([href]) {\n opacity: 0.5;\n }\n}\nem {\n font-style: italic;\n}\nstrong {\n font-weight: 700;\n}\ni {\n font-style: italic;\n}\nmark {\n background-color: #f3f8b1;\n}\nu {\n text-decoration: underline;\n -webkit-text-decoration-line: underline;\n text-decoration-line: underline;\n color: #080;\n}\nsmall {\n font-size: 0.75em;\n}\ns {\n text-decoration: line-through;\n -webkit-text-decoration-line: line-through;\n text-decoration-line: line-through;\n color: #b00;\n}\nins {\n background-color: #acf2bd;\n}\ndel {\n background-color: #fdb8c0;\n}\ndfn {\n font-style: inherit;\n font-weight: 700;\n}\nb {\n font-weight: 700;\n}\nabbr[title] {\n cursor: help;\n text-decoration: none;\n}\nvar {\n font-style: italic;\n}\nq {\n quotes: '\\201c' '\\201d';\n quotes: initial;\n}\nq::before {\n content: open-quote;\n}\nq::after {\n content: close-quote;\n}\ncite {\n font-style: italic;\n}\nsup,\nsub {\n font-size: 0.75em;\n}\ncode,\nkbd,\nsamp {\n font-size: 0.75em;\n white-space: nowrap;\n}\ncode code,\ncode kbd,\ncode samp,\nkbd code,\nkbd kbd,\nkbd samp,\nsamp code,\nsamp kbd,\nsamp samp {\n font-size: inherit;\n}\npre code,\npre kbd,\npre samp {\n white-space: inherit;\n white-space: unset;\n}\nfieldset {\n padding: 0 1rem;\n}\ntextarea,\ninput {\n padding: 0 0.25rem;\n}\ninput,\nbutton,\nselect,\ntextarea {\n line-height: inherit;\n}\nhtml > body fieldset {\n border-width: 1px;\n margin-top: -2px;\n border-style: solid;\n border-color: rgba(0, 0, 0, 0.25);\n}\ntextarea {\n -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);\n}\ntextarea {\n display: block;\n width: 30rem;\n height: calc(6 * var(--vru));\n font-size: 0.75rem;\n}\ntextarea > * {\n --vru: calc(0.75 * var(--line-height) * 1rem);\n}\ninput[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"],\nbutton,\nlabel {\n cursor: pointer;\n}\ninput:not([type=\"button\"]):not([type=\"reset\"]):not([type=\"submit\"]),\nselect {\n font-size: 0.75em;\n}\ninput[type=\"button\"],\ninput[type=\"reset\"],\ninput[type=\"submit\"],\nbutton {\n padding: 0.125em 0.25em;\n}\nselect[multiple] > optgroup > option {\n padding-left: 1rem;\n}\nimg {\n width: auto;\n height: auto;\n max-width: 100%;\n font-style: italic;\n vertical-align: middle;\n}\nsummary {\n cursor: pointer;\n}\n/*################################*\\\n xmeter | _o-List.less\n\\*################################*/\n.o-List {\n padding-left: 0;\n list-style: none;\n}\n@media screen and (min-width: 30em) {\n .o-List-sK {\n padding-left: 0;\n list-style: none;\n }\n}\n@media screen and (min-width: 45em) {\n .o-List-sM {\n padding-left: 0;\n list-style: none;\n }\n}\n@media screen and (min-width: 60em) {\n .o-List-sG {\n padding-left: 0;\n list-style: none;\n }\n}\n@media screen and (min-width: 75em) {\n .o-List-sT {\n padding-left: 0;\n list-style: none;\n }\n}\n@media screen and (min-width: 90em) {\n .o-List-sP {\n padding-left: 0;\n list-style: none;\n }\n}\n@media not all and (min-width: 30em) {\n .o-List-nK {\n padding-left: 0;\n list-style: none;\n }\n}\n@media not all and (min-width: 45em) {\n .o-List-nM {\n padding-left: 0;\n list-style: none;\n }\n}\n@media not all and (min-width: 60em) {\n .o-List-nG {\n padding-left: 0;\n list-style: none;\n }\n}\n@media not all and (min-width: 75em) {\n .o-List-nT {\n padding-left: 0;\n list-style: none;\n }\n}\n@media not all and (min-width: 90em) {\n .o-List-nP {\n padding-left: 0;\n list-style: none;\n }\n}\n/*################################*\\\n xmeter | _o-Flex.less\n\\*################################*/\n.o-Flex {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n}\n.o-Flex__Item {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n}\n@media screen and (min-width: 30em) {\n .o-Flex-sK {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-sK {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media screen and (min-width: 45em) {\n .o-Flex-sM {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-sM {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media screen and (min-width: 60em) {\n .o-Flex-sG {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-sG {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media screen and (min-width: 75em) {\n .o-Flex-sT {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-sT {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media screen and (min-width: 90em) {\n .o-Flex-sP {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-sP {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media not all and (min-width: 30em) {\n .o-Flex-nK {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-nK {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media not all and (min-width: 45em) {\n .o-Flex-nM {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-nM {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media not all and (min-width: 60em) {\n .o-Flex-nG {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-nG {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media not all and (min-width: 75em) {\n .o-Flex-nT {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-nT {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n@media not all and (min-width: 90em) {\n .o-Flex-nP {\n display: -webkit-box;\n display: -ms-flexbox;\n display: flex;\n line-height: inherit;\n -webkit-box-pack: justify;\n -ms-flex-pack: justify;\n justify-content: space-between;\n }\n .o-Flex__Item-nP {\n -webkit-box-flex: 1;\n -ms-flex: auto;\n flex: auto;\n }\n}\n/*################################*\\\n xmeter | _o-Grid.less\n\\*################################*/\n.o-Grid {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n}\n@media screen and (min-width: 30em) {\n .o-Grid-sK {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media screen and (min-width: 45em) {\n .o-Grid-sM {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media screen and (min-width: 60em) {\n .o-Grid-sG {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media screen and (min-width: 75em) {\n .o-Grid-sT {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media screen and (min-width: 90em) {\n .o-Grid-sP {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media not all and (min-width: 30em) {\n .o-Grid-nK {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media not all and (min-width: 45em) {\n .o-Grid-nM {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media not all and (min-width: 60em) {\n .o-Grid-nG {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media not all and (min-width: 75em) {\n .o-Grid-nT {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n@media not all and (min-width: 90em) {\n .o-Grid-nP {\n display: -ms-grid;\n display: grid;\n line-height: inherit;\n -ms-grid-columns: 1fr;\n grid-template-columns: 1fr;\n }\n}\n/*################################*\\\n neo | _o-Tablist.less\n\\*################################*/\n.o-Tablist {\n margin-top: 0;\n margin-top: initial;\n margin-left: 0;\n margin-left: initial;\n margin-right: 0;\n margin-right: initial;\n margin-top: unset;\n margin-left: unset;\n margin-right: unset;\n -webkit-margin-before: unset;\n margin-block-start: unset;\n margin-inline: unset;\n padding: 0;\n padding: initial;\n padding: unset;\n border: 0;\n}\n.o-Tablist > .o-Flex {\n -ms-flex-wrap: wrap;\n flex-wrap: wrap;\n margin-bottom: 0;\n}\n.o-Tablist__Check {\n position: absolute;\n}\n.o-Tablist__Panel {\n -webkit-box-ordinal-group: 2;\n -ms-flex-order: 1;\n order: 1;\n -webkit-box-flex: 100%;\n -ms-flex: 100%;\n flex: 100%;\n}\n/*################################*\\\n xmeter | _c-Permalink.less\n\\*################################*/\n.c-Permalink {\n margin-left: 1rem;\n font-weight: 100;\n}\nh1:hover > .c-Permalink,\nh2:hover > .c-Permalink,\nh3:hover > .c-Permalink,\nh4:hover > .c-Permalink,\nh5:hover > .c-Permalink,\nh6:hover > .c-Permalink {\n position: static;\n position: initial;\n position: unset;\n}\n@media screen and (min-width: 30em) {\n .c-Permalink-sK {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-sK,\n h2:hover > .c-Permalink-sK,\n h3:hover > .c-Permalink-sK,\n h4:hover > .c-Permalink-sK,\n h5:hover > .c-Permalink-sK,\n h6:hover > .c-Permalink-sK {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media screen and (min-width: 45em) {\n .c-Permalink-sM {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-sM,\n h2:hover > .c-Permalink-sM,\n h3:hover > .c-Permalink-sM,\n h4:hover > .c-Permalink-sM,\n h5:hover > .c-Permalink-sM,\n h6:hover > .c-Permalink-sM {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media screen and (min-width: 60em) {\n .c-Permalink-sG {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-sG,\n h2:hover > .c-Permalink-sG,\n h3:hover > .c-Permalink-sG,\n h4:hover > .c-Permalink-sG,\n h5:hover > .c-Permalink-sG,\n h6:hover > .c-Permalink-sG {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media screen and (min-width: 75em) {\n .c-Permalink-sT {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-sT,\n h2:hover > .c-Permalink-sT,\n h3:hover > .c-Permalink-sT,\n h4:hover > .c-Permalink-sT,\n h5:hover > .c-Permalink-sT,\n h6:hover > .c-Permalink-sT {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media screen and (min-width: 90em) {\n .c-Permalink-sP {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-sP,\n h2:hover > .c-Permalink-sP,\n h3:hover > .c-Permalink-sP,\n h4:hover > .c-Permalink-sP,\n h5:hover > .c-Permalink-sP,\n h6:hover > .c-Permalink-sP {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media not all and (min-width: 30em) {\n .c-Permalink-nK {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-nK,\n h2:hover > .c-Permalink-nK,\n h3:hover > .c-Permalink-nK,\n h4:hover > .c-Permalink-nK,\n h5:hover > .c-Permalink-nK,\n h6:hover > .c-Permalink-nK {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media not all and (min-width: 45em) {\n .c-Permalink-nM {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-nM,\n h2:hover > .c-Permalink-nM,\n h3:hover > .c-Permalink-nM,\n h4:hover > .c-Permalink-nM,\n h5:hover > .c-Permalink-nM,\n h6:hover > .c-Permalink-nM {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media not all and (min-width: 60em) {\n .c-Permalink-nG {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-nG,\n h2:hover > .c-Permalink-nG,\n h3:hover > .c-Permalink-nG,\n h4:hover > .c-Permalink-nG,\n h5:hover > .c-Permalink-nG,\n h6:hover > .c-Permalink-nG {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media not all and (min-width: 75em) {\n .c-Permalink-nT {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-nT,\n h2:hover > .c-Permalink-nT,\n h3:hover > .c-Permalink-nT,\n h4:hover > .c-Permalink-nT,\n h5:hover > .c-Permalink-nT,\n h6:hover > .c-Permalink-nT {\n position: static;\n position: initial;\n position: unset;\n }\n}\n@media not all and (min-width: 90em) {\n .c-Permalink-nP {\n margin-left: 1rem;\n font-weight: 100;\n }\n h1:hover > .c-Permalink-nP,\n h2:hover > .c-Permalink-nP,\n h3:hover > .c-Permalink-nP,\n h4:hover > .c-Permalink-nP,\n h5:hover > .c-Permalink-nP,\n h6:hover > .c-Permalink-nP {\n position: static;\n position: initial;\n position: unset;\n }\n}\n/*################################*\\\n xmeter | _h-Block.less\n\\*################################*/\n.h-Block {\n display: block;\n line-height: inherit;\n}\n@media screen and (min-width: 30em) {\n .h-Block-sK {\n display: block;\n line-height: inherit;\n }\n}\n@media screen and (min-width: 45em) {\n .h-Block-sM {\n display: block;\n line-height: inherit;\n }\n}\n@media screen and (min-width: 60em) {\n .h-Block-sG {\n display: block;\n line-height: inherit;\n }\n}\n@media screen and (min-width: 75em) {\n .h-Block-sT {\n display: block;\n line-height: inherit;\n }\n}\n@media screen and (min-width: 90em) {\n .h-Block-sP {\n display: block;\n line-height: inherit;\n }\n}\n@media not all and (min-width: 30em) {\n .h-Block-nK {\n display: block;\n line-height: inherit;\n }\n}\n@media not all and (min-width: 45em) {\n .h-Block-nM {\n display: block;\n line-height: inherit;\n }\n}\n@media not all and (min-width: 60em) {\n .h-Block-nG {\n display: block;\n line-height: inherit;\n }\n}\n@media not all and (min-width: 75em) {\n .h-Block-nT {\n display: block;\n line-height: inherit;\n }\n}\n@media not all and (min-width: 90em) {\n .h-Block-nP {\n display: block;\n line-height: inherit;\n }\n}\n/*################################*\\\n xmeter | _h-Inline.less\n\\*################################*/\n.h-Inline {\n display: inline;\n line-height: 0;\n}\n@media screen and (min-width: 30em) {\n .h-Inline-sK {\n display: inline;\n line-height: 0;\n }\n}\n@media screen and (min-width: 45em) {\n .h-Inline-sM {\n display: inline;\n line-height: 0;\n }\n}\n@media screen and (min-width: 60em) {\n .h-Inline-sG {\n display: inline;\n line-height: 0;\n }\n}\n@media screen and (min-width: 75em) {\n .h-Inline-sT {\n display: inline;\n line-height: 0;\n }\n}\n@media screen and (min-width: 90em) {\n .h-Inline-sP {\n display: inline;\n line-height: 0;\n }\n}\n@media not all and (min-width: 30em) {\n .h-Inline-nK {\n display: inline;\n line-height: 0;\n }\n}\n@media not all and (min-width: 45em) {\n .h-Inline-nM {\n display: inline;\n line-height: 0;\n }\n}\n@media not all and (min-width: 60em) {\n .h-Inline-nG {\n display: inline;\n line-height: 0;\n }\n}\n@media not all and (min-width: 75em) {\n .h-Inline-nT {\n display: inline;\n line-height: 0;\n }\n}\n@media not all and (min-width: 90em) {\n .h-Inline-nP {\n display: inline;\n line-height: 0;\n }\n}\n/*################################*\\\n xmeter | _h-Clearfix.less\n\\*################################*/\n.h-Clearfix::after {\n content: '';\n display: block;\n clear: both;\n}\n@media screen and (min-width: 30em) {\n .h-Clearfix-sK::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media screen and (min-width: 45em) {\n .h-Clearfix-sM::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media screen and (min-width: 60em) {\n .h-Clearfix-sG::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media screen and (min-width: 75em) {\n .h-Clearfix-sT::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media screen and (min-width: 90em) {\n .h-Clearfix-sP::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media not all and (min-width: 30em) {\n .h-Clearfix-nK::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media not all and (min-width: 45em) {\n .h-Clearfix-nM::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media not all and (min-width: 60em) {\n .h-Clearfix-nG::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media not all and (min-width: 75em) {\n .h-Clearfix-nT::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n@media not all and (min-width: 90em) {\n .h-Clearfix-nP::after {\n content: '';\n display: block;\n clear: both;\n }\n}\n/*################################*\\\n xmeter | _h-Hidden.less\n\\*################################*/\n.h-Hidden {\n left: -999999px;\n}\n.h-Hidden:not(:focus) {\n position: absolute;\n}\n@media screen and (min-width: 30em) {\n .h-Hidden-sK {\n left: -999999px;\n }\n .h-Hidden-sK:not(:focus) {\n position: absolute;\n }\n}\n@media screen and (min-width: 45em) {\n .h-Hidden-sM {\n left: -999999px;\n }\n .h-Hidden-sM:not(:focus) {\n position: absolute;\n }\n}\n@media screen and (min-width: 60em) {\n .h-Hidden-sG {\n left: -999999px;\n }\n .h-Hidden-sG:not(:focus) {\n position: absolute;\n }\n}\n@media screen and (min-width: 75em) {\n .h-Hidden-sT {\n left: -999999px;\n }\n .h-Hidden-sT:not(:focus) {\n position: absolute;\n }\n}\n@media screen and (min-width: 90em) {\n .h-Hidden-sP {\n left: -999999px;\n }\n .h-Hidden-sP:not(:focus) {\n position: absolute;\n }\n}\n@media not all and (min-width: 30em) {\n .h-Hidden-nK {\n left: -999999px;\n }\n .h-Hidden-nK:not(:focus) {\n position: absolute;\n }\n}\n@media not all and (min-width: 45em) {\n .h-Hidden-nM {\n left: -999999px;\n }\n .h-Hidden-nM:not(:focus) {\n position: absolute;\n }\n}\n@media not all and (min-width: 60em) {\n .h-Hidden-nG {\n left: -999999px;\n }\n .h-Hidden-nG:not(:focus) {\n position: absolute;\n }\n}\n@media not all and (min-width: 75em) {\n .h-Hidden-nT {\n left: -999999px;\n }\n .h-Hidden-nT:not(:focus) {\n position: absolute;\n }\n}\n@media not all and (min-width: 90em) {\n .h-Hidden-nP {\n left: -999999px;\n }\n .h-Hidden-nP:not(:focus) {\n position: absolute;\n }\n}\n/*################################*\\\n xmeter | _h-Meaure.less\n\\*################################*/\n.h-Measure {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n}\n.h-Measure--narrow {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n}\n.h-Measure--wide {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n}\n@media screen and (min-width: 30em) {\n .h-Measure-sK {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-sK {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-sK {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media screen and (min-width: 45em) {\n .h-Measure-sM {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-sM {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-sM {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media screen and (min-width: 60em) {\n .h-Measure-sG {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-sG {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-sG {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media screen and (min-width: 75em) {\n .h-Measure-sT {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-sT {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-sT {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media screen and (min-width: 90em) {\n .h-Measure-sP {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-sP {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-sP {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media not all and (min-width: 30em) {\n .h-Measure-nK {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-nK {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-nK {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media not all and (min-width: 45em) {\n .h-Measure-nM {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-nM {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-nM {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media not all and (min-width: 60em) {\n .h-Measure-nG {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-nG {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-nG {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media not all and (min-width: 75em) {\n .h-Measure-nT {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-nT {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-nT {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n@media not all and (min-width: 90em) {\n .h-Measure-nP {\n max-width: 33em;\n max-width: 66ch;\n max-inline-size: 66ch;\n }\n .h-Measure--narrow-nP {\n max-width: 22.5em;\n max-width: 45ch;\n max-inline-size: 45ch;\n }\n .h-Measure--wide-nP {\n max-width: 45em;\n max-width: 90ch;\n max-inline-size: 90ch;\n }\n}\n/*################################*\\\n xmeter | _h-Ruled.less\n\\*################################*/\n.h-Ruled {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n}\n@media screen and (min-width: 30em) {\n .h-Ruled-sK {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media screen and (min-width: 45em) {\n .h-Ruled-sM {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media screen and (min-width: 60em) {\n .h-Ruled-sG {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media screen and (min-width: 75em) {\n .h-Ruled-sT {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media screen and (min-width: 90em) {\n .h-Ruled-sP {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media not all and (min-width: 30em) {\n .h-Ruled-nK {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media not all and (min-width: 45em) {\n .h-Ruled-nM {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media not all and (min-width: 60em) {\n .h-Ruled-nG {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media not all and (min-width: 75em) {\n .h-Ruled-nT {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n@media not all and (min-width: 90em) {\n .h-Ruled-nP {\n background-image: linear-gradient(to top, rgba(0, 0, 0, 0.25) 1px, transparent 1px);\n background-size: 1px var(--vru);\n background-position-y: top;\n }\n}\n/*################################*\\\n xmeter | _-fz.less\n\\*################################*/\n.-fz-peta {\n font-size: 6em !important;\n}\n.-fz-tera {\n font-size: 4em !important;\n}\n.-fz-giga {\n font-size: 3em !important;\n}\n.-fz-mega {\n font-size: 2em !important;\n}\n.-fz-kilo {\n font-size: 1.5em !important;\n}\n.-fz-norm {\n font-size: 1em !important;\n}\n.-fz-mill {\n font-size: 0.75em !important;\n}\n.-fz-micr {\n font-size: 0.5em !important;\n}\n@media screen and (min-width: 30em) {\n .-fz-peta-sK {\n font-size: 6em !important;\n }\n .-fz-tera-sK {\n font-size: 4em !important;\n }\n .-fz-giga-sK {\n font-size: 3em !important;\n }\n .-fz-mega-sK {\n font-size: 2em !important;\n }\n .-fz-kilo-sK {\n font-size: 1.5em !important;\n }\n .-fz-norm-sK {\n font-size: 1em !important;\n }\n .-fz-mill-sK {\n font-size: 0.75em !important;\n }\n .-fz-micr-sK {\n font-size: 0.5em !important;\n }\n}\n@media screen and (min-width: 45em) {\n .-fz-peta-sM {\n font-size: 6em !important;\n }\n .-fz-tera-sM {\n font-size: 4em !important;\n }\n .-fz-giga-sM {\n font-size: 3em !important;\n }\n .-fz-mega-sM {\n font-size: 2em !important;\n }\n .-fz-kilo-sM {\n font-size: 1.5em !important;\n }\n .-fz-norm-sM {\n font-size: 1em !important;\n }\n .-fz-mill-sM {\n font-size: 0.75em !important;\n }\n .-fz-micr-sM {\n font-size: 0.5em !important;\n }\n}\n@media screen and (min-width: 60em) {\n .-fz-peta-sG {\n font-size: 6em !important;\n }\n .-fz-tera-sG {\n font-size: 4em !important;\n }\n .-fz-giga-sG {\n font-size: 3em !important;\n }\n .-fz-mega-sG {\n font-size: 2em !important;\n }\n .-fz-kilo-sG {\n font-size: 1.5em !important;\n }\n .-fz-norm-sG {\n font-size: 1em !important;\n }\n .-fz-mill-sG {\n font-size: 0.75em !important;\n }\n .-fz-micr-sG {\n font-size: 0.5em !important;\n }\n}\n@media screen and (min-width: 75em) {\n .-fz-peta-sT {\n font-size: 6em !important;\n }\n .-fz-tera-sT {\n font-size: 4em !important;\n }\n .-fz-giga-sT {\n font-size: 3em !important;\n }\n .-fz-mega-sT {\n font-size: 2em !important;\n }\n .-fz-kilo-sT {\n font-size: 1.5em !important;\n }\n .-fz-norm-sT {\n font-size: 1em !important;\n }\n .-fz-mill-sT {\n font-size: 0.75em !important;\n }\n .-fz-micr-sT {\n font-size: 0.5em !important;\n }\n}\n@media screen and (min-width: 90em) {\n .-fz-peta-sP {\n font-size: 6em !important;\n }\n .-fz-tera-sP {\n font-size: 4em !important;\n }\n .-fz-giga-sP {\n font-size: 3em !important;\n }\n .-fz-mega-sP {\n font-size: 2em !important;\n }\n .-fz-kilo-sP {\n font-size: 1.5em !important;\n }\n .-fz-norm-sP {\n font-size: 1em !important;\n }\n .-fz-mill-sP {\n font-size: 0.75em !important;\n }\n .-fz-micr-sP {\n font-size: 0.5em !important;\n }\n}\n@media not all and (min-width: 30em) {\n .-fz-peta-nK {\n font-size: 6em !important;\n }\n .-fz-tera-nK {\n font-size: 4em !important;\n }\n .-fz-giga-nK {\n font-size: 3em !important;\n }\n .-fz-mega-nK {\n font-size: 2em !important;\n }\n .-fz-kilo-nK {\n font-size: 1.5em !important;\n }\n .-fz-norm-nK {\n font-size: 1em !important;\n }\n .-fz-mill-nK {\n font-size: 0.75em !important;\n }\n .-fz-micr-nK {\n font-size: 0.5em !important;\n }\n}\n@media not all and (min-width: 45em) {\n .-fz-peta-nM {\n font-size: 6em !important;\n }\n .-fz-tera-nM {\n font-size: 4em !important;\n }\n .-fz-giga-nM {\n font-size: 3em !important;\n }\n .-fz-mega-nM {\n font-size: 2em !important;\n }\n .-fz-kilo-nM {\n font-size: 1.5em !important;\n }\n .-fz-norm-nM {\n font-size: 1em !important;\n }\n .-fz-mill-nM {\n font-size: 0.75em !important;\n }\n .-fz-micr-nM {\n font-size: 0.5em !important;\n }\n}\n@media not all and (min-width: 60em) {\n .-fz-peta-nG {\n font-size: 6em !important;\n }\n .-fz-tera-nG {\n font-size: 4em !important;\n }\n .-fz-giga-nG {\n font-size: 3em !important;\n }\n .-fz-mega-nG {\n font-size: 2em !important;\n }\n .-fz-kilo-nG {\n font-size: 1.5em !important;\n }\n .-fz-norm-nG {\n font-size: 1em !important;\n }\n .-fz-mill-nG {\n font-size: 0.75em !important;\n }\n .-fz-micr-nG {\n font-size: 0.5em !important;\n }\n}\n@media not all and (min-width: 75em) {\n .-fz-peta-nT {\n font-size: 6em !important;\n }\n .-fz-tera-nT {\n font-size: 4em !important;\n }\n .-fz-giga-nT {\n font-size: 3em !important;\n }\n .-fz-mega-nT {\n font-size: 2em !important;\n }\n .-fz-kilo-nT {\n font-size: 1.5em !important;\n }\n .-fz-norm-nT {\n font-size: 1em !important;\n }\n .-fz-mill-nT {\n font-size: 0.75em !important;\n }\n .-fz-micr-nT {\n font-size: 0.5em !important;\n }\n}\n@media not all and (min-width: 90em) {\n .-fz-peta-nP {\n font-size: 6em !important;\n }\n .-fz-tera-nP {\n font-size: 4em !important;\n }\n .-fz-giga-nP {\n font-size: 3em !important;\n }\n .-fz-mega-nP {\n font-size: 2em !important;\n }\n .-fz-kilo-nP {\n font-size: 1.5em !important;\n }\n .-fz-norm-nP {\n font-size: 1em !important;\n }\n .-fz-mill-nP {\n font-size: 0.75em !important;\n }\n .-fz-micr-nP {\n font-size: 0.5em !important;\n }\n}\n.-fz-el-peta {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n}\n.-fz-el-tera {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n}\n.-fz-el-giga {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n}\n.-fz-el-mega {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n}\n.-fz-el-kilo {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n}\n.-fz-el-norm {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n}\n.-fz-el-mill {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n}\n.-fz-el-micr {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n}\n@media screen and (min-width: 30em) {\n .-fz-el-peta-sK {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-sK {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-sK {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-sK {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-sK {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-sK {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-sK {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-sK {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media screen and (min-width: 45em) {\n .-fz-el-peta-sM {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-sM {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-sM {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-sM {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-sM {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-sM {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-sM {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-sM {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media screen and (min-width: 60em) {\n .-fz-el-peta-sG {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-sG {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-sG {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-sG {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-sG {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-sG {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-sG {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-sG {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media screen and (min-width: 75em) {\n .-fz-el-peta-sT {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-sT {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-sT {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-sT {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-sT {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-sT {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-sT {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-sT {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media screen and (min-width: 90em) {\n .-fz-el-peta-sP {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-sP {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-sP {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-sP {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-sP {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-sP {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-sP {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-sP {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media not all and (min-width: 30em) {\n .-fz-el-peta-nK {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-nK {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-nK {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-nK {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-nK {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-nK {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-nK {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-nK {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media not all and (min-width: 45em) {\n .-fz-el-peta-nM {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-nM {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-nM {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-nM {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-nM {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-nM {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-nM {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-nM {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media not all and (min-width: 60em) {\n .-fz-el-peta-nG {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-nG {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-nG {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-nG {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-nG {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-nG {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-nG {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-nG {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media not all and (min-width: 75em) {\n .-fz-el-peta-nT {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-nT {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-nT {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-nT {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-nT {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-nT {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-nT {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-nT {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n@media not all and (min-width: 90em) {\n .-fz-el-peta-nP {\n font-size: 6em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-tera-nP {\n font-size: 4em !important;\n line-height: calc(var(--line-height) / 1.33333333) !important;\n }\n .-fz-el-giga-nP {\n font-size: 3em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-mega-nP {\n font-size: 2em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-kilo-nP {\n font-size: 1.5em !important;\n line-height: calc(var(--line-height) / 1.5) !important;\n }\n .-fz-el-norm-nP {\n font-size: 1em !important;\n line-height: calc(var(--line-height) / 1) !important;\n }\n .-fz-el-mill-nP {\n font-size: 0.75em !important;\n line-height: calc(var(--line-height) / 0.75) !important;\n }\n .-fz-el-micr-nP {\n font-size: 0.5em !important;\n line-height: calc(var(--line-height) / 0.5) !important;\n }\n}\n"]} \ No newline at end of file diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 624e81b..980b615 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -14,14 +14,6 @@ html(lang="en") = ': ' + item.description() if item.findAll().length && depth > 0 +doctoc({pages: item.findAll(), classes: (classes.sub || {}), depth: depth-1}, true) - mixin newSection(n, page) - - var id = page.url().split('#')[1] - section(id=id) - | #{page.name()} - include ../_views/_c-Permalink.view.pug - +permalink(id) - | - block block vars head title= page.title() || `${page.name()} | ${Docs.DOCS.name()}` @@ -30,9 +22,9 @@ html(lang="en") meta(name="viewport" content="width=device-width, initial-scale=1") block styles //- link(rel="stylesheet" href="https://cdn.rawgit.com/chharvey/bangs/v0.9.0/bangs.min.css") - link(rel="stylesheet" href="../xmeter.css") - link(rel="stylesheet" href="styles/docs.css") - body.docs-body#top + link(rel="stylesheet" href="../css/xmeter.css") + link(rel="stylesheet" href="css/docs.css") + body.h-Ruled#top a.h-Hidden(href="#main") skip to main content header h1= Docs.DOCS.name() diff --git a/docs/_includes/_base.pug b/docs/_includes/_base.pug index 1e0aa7b..7a24a46 100644 --- a/docs/_includes/_base.pug +++ b/docs/_includes/_base.pug @@ -1,5 +1,6 @@ - classname = classname || {} -include ../../_views/_c-Permalink.view.pug +mixin permalink(id) + != Xmeter.view({ id: id }).permalink() section#grouping-elements block groupingElements h2 Grouping Elements #[+permalink('grouping-elements')] diff --git a/docs/_models/Docs.class.js b/docs/_models/Docs.class.js deleted file mode 100644 index 343bbf3..0000000 --- a/docs/_models/Docs.class.js +++ /dev/null @@ -1,40 +0,0 @@ -var Page = require('sitepage').Page - -const DOCS = new Page({ name: 'Xmeter Style Guide', url: '/docs/' }) - // REVIEW indentation - .title('Xmeter Style Guide') - .description('A demo of Xmeter styles.') - .add(new Page({ name: 'Home', url: '/docs/index.html' }) - .description('Xmeter Homepage') - ) - .add(new Page({ name: 'Base Typography', url: '/docs/base.html' }) - .description('Bare, unstyled HTML elements. No classes.') - .add(new Page({ name: 'Grouping Elements', url: '/docs/base.html#grouping-elements' }) - .add(new Page({ name: 'Headings & Paragraphs', url: '/docs/base.html#headings-paragraphs' })) - .add(new Page({ name: 'Lists' , url: '/docs/base.html#lists' })) - .add(new Page({ name: 'Tables' , url: '/docs/base.html#tables' })) - ) - .add(new Page({ name: 'Text-Level Elements', url: '/docs/base.html#text-level-elements' }) - .add(new Page({ name: 'Links' , url: '/docs/base.html#links' })) - .add(new Page({ name: 'Stress' , url: '/docs/base.html#stress' })) - .add(new Page({ name: 'Documentation', url: '/docs/base.html#documentation' })) - .add(new Page({ name: 'Data' , url: '/docs/base.html#data' })) - ) - .add(new Page({ name: 'Forms' , url: '/docs/base.html#forms' })) - .add(new Page({ name: 'Embedded Elements' , url: '/docs/base.html#embedded-elements' })) - .add(new Page({ name: 'Interactive Elements', url: '/docs/base.html#interactive-elements' })) - ) - -/** - * Static class for this project’s docs. - * @module - */ -module.exports = class Docs { - /** @private */ constructor() {} - - /** - * The style guide site for this project. - * @type {Page} - */ - static get DOCS() { return DOCS } -} diff --git a/docs/base.html b/docs/base.html index be39bb8..c776bcc 100644 --- a/docs/base.html +++ b/docs/base.html @@ -1,4 +1,4 @@ -Base Typography | Xmeter Style Guideskip to main content

      Xmeter Style Guide

      A demo of Xmeter styles.

      Base Typography

      Bare, unstyled HTML elements. No classes.

      Grouping Elements §

      Headings & Paragraphs §

      Heading 1 h1

      Paragraph p +Base Typography | Xmeter Style Guideskip to main content

      Xmeter Style Guide

      A demo of Xmeter styles.

      Base Typography

      Bare, unstyled HTML elements. No classes.

      Grouping Elements §

      Headings & Paragraphs §

      Heading 1 h1

      Paragraph p Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam sagittis suscipit nunc, a cursus libero euismod at. Nulla placerat neque massa, quis interdum leo efficitur vel. diff --git a/docs/base.pug b/docs/base.pug index e523f0b..d85405c 100644 --- a/docs/base.pug +++ b/docs/base.pug @@ -4,10 +4,10 @@ block append vars - var page = Docs.DOCS.find('/docs/base.html') - var classname = { - figure: 'docs-figure' - , pre : 'docs-pre' - , code : 'docs-code' - , form : 'docs-form' + figure: 'docs-figure', + pre : 'docs-pre', + code : 'docs-code', + form : 'docs-form', } block append main diff --git a/docs/class/Docs.class.js b/docs/class/Docs.class.js new file mode 100644 index 0000000..6489f21 --- /dev/null +++ b/docs/class/Docs.class.js @@ -0,0 +1,39 @@ +const Page = require('sitepage').Page + +const DOCS = new Page({ name: 'Xmeter Style Guide', url: '/docs/' }) + .title('Xmeter Style Guide') + .description('A demo of Xmeter styles.') + .add(new Page({ name: 'Home', url: '/docs/index.html' }) + .description('Xmeter Homepage') + ) + .add(new Page({ name: 'Base Typography', url: '/docs/base.html' }) + .description('Bare, unstyled HTML elements. No classes.') + .add(new Page({ name: 'Grouping Elements', url: '/docs/base.html#grouping-elements' }) + .add(new Page({ name: 'Headings & Paragraphs', url: '/docs/base.html#headings-paragraphs' })) + .add(new Page({ name: 'Lists' , url: '/docs/base.html#lists' })) + .add(new Page({ name: 'Tables' , url: '/docs/base.html#tables' })) + ) + .add(new Page({ name: 'Text-Level Elements', url: '/docs/base.html#text-level-elements' }) + .add(new Page({ name: 'Links' , url: '/docs/base.html#links' })) + .add(new Page({ name: 'Stress' , url: '/docs/base.html#stress' })) + .add(new Page({ name: 'Documentation', url: '/docs/base.html#documentation' })) + .add(new Page({ name: 'Data' , url: '/docs/base.html#data' })) + ) + .add(new Page({ name: 'Forms' , url: '/docs/base.html#forms' })) + .add(new Page({ name: 'Embedded Elements' , url: '/docs/base.html#embedded-elements' })) + .add(new Page({ name: 'Interactive Elements', url: '/docs/base.html#interactive-elements' })) + ) + +/** + * Static class for this project’s docs. + * @module + */ +module.exports = class Docs { + /** @private */ constructor() {} + + /** + * The style guide site for this project. + * @type {Page} + */ + static get DOCS() { return DOCS } +} diff --git a/docs/styles/docs.css b/docs/css/docs.css similarity index 64% rename from docs/styles/docs.css rename to docs/css/docs.css index 9f0fa47..6746a9a 100644 --- a/docs/styles/docs.css +++ b/docs/css/docs.css @@ -7,56 +7,28 @@ [aria-current="page"] { font-weight: bold; } -.docs-body { - background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); - background-position: left top; - background-size: 1px 24px; - background-repeat: repeat; -} .docs-main { margin: 0 1rem var(--vru); } -.docs-pre, .docs-code { + padding: 2px 4px; background-color: #333; color: #ccc; border-radius: 0.25rem; } -.docs-pre u, -.docs-code u { - color: #6c6; -} -.docs-pre strong, -.docs-code strong { - color: #eee; -} -.docs-pre, -.docs-figure { - padding: calc(0.5 * var(--vru)) 0.5rem; -} -.docs-code { - padding: 2px 4px; -} .docs-figure { position: relative; margin-left: 1rem; margin-right: 1rem; - /* - .border-vert(all; 1px); - border-style: solid; - border-color: #ddd; - */ + padding: calc(0.5 * var(--vru)) 0.5rem; + border-radius: 0.5rem; -webkit-box-shadow: 0 0 0 1px #ddd; box-shadow: 0 0 0 1px #ddd; - border-radius: 0.5rem; background-color: #eee; overflow: auto; } -.docs-figure > figcaption { - font-style: italic; -} .docs-form { - background-color: #fff; + background-color: #ddd; } body > a:last-of-type { position: fixed; diff --git a/docs/styles/docs.less b/docs/css/docs.less similarity index 58% rename from docs/styles/docs.less rename to docs/css/docs.less index 4e0a24a..d34285a 100644 --- a/docs/styles/docs.less +++ b/docs/css/docs.less @@ -7,8 +7,6 @@ /*================================*\ docs.less \*================================*/ -@import (reference) url('../../src/__settings.less'); -@import (reference) url('../../src/__tool.borders.less'); // Stylesheet for Xmeter documentation files. @@ -18,48 +16,27 @@ font-weight: bold; } -.docs-body { - background-image: url('https://chharvey.github.io/core/images/crossgrid-lined.svg'); - background-position: left top; - background-size: 1px 24px; - background-repeat: repeat; -} .docs-main { margin: 0 1rem var(--vru); } -.docs-pre, .docs-code { + padding: 2px 4px; background-color: #333; color: #ccc; border-radius: 0.25rem; - u { color: #6c6; } // override bad contrast ratio - strong { color: #eee; } -} -.docs-pre, -.docs-figure { - padding: calc(~'0.5 * var(--vru)') 0.5rem; -} -.docs-code { - padding: 2px 4px; } .docs-figure { position: relative; margin-left: 1rem; margin-right: 1rem; - /* - .border-vert(all; 1px); - border-style: solid; - border-color: #ddd; - */ box-shadow: 0 0 0 1px #ddd; // HACK vertical border hack + padding: calc(~'0.5 * var(--vru)') 0.5rem; border-radius: 0.5rem; + box-shadow: 0 0 0 1px #ddd; // HACK vertical border hack background-color: #eee; overflow: auto; - & > figcaption { - font-style: italic; - } } .docs-form { - background-color: #fff; + background-color: #ddd; } body > a:last-of-type { diff --git a/docs/css/kss.css b/docs/css/kss.css new file mode 100644 index 0000000..5fdc31b --- /dev/null +++ b/docs/css/kss.css @@ -0,0 +1,19 @@ + +/*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ + xmeter +\*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/ + + +/*================================*\ + kss.css +\*================================*/ + + +/* Stylesheet for KSS documentation files. */ + + + + +#kssref-helpers-lined .kss-modifier__example p { + text-indent: 2rem; +} diff --git a/docs/index.html b/docs/index.html index 31eaad1..cea9f50 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Home | Xmeter Style Guideskip to main content

      Xmeter Style Guide

      A demo of Xmeter styles.

      Home

      Xmeter Homepage

      jump to top \ No newline at end of file +Home | Xmeter Style Guideskip to main content

      Xmeter Style Guide

      A demo of Xmeter styles.

      Home

      Xmeter Homepage

      jump to top \ No newline at end of file diff --git a/docs/tools.md b/docs/tools.md index d6c5d17..75068dc 100644 --- a/docs/tools.md +++ b/docs/tools.md @@ -30,7 +30,7 @@ or all 4 sides on a box, while preserving vertical rhythm. This tool subtracts a the `margin-top` of the box, equal to the sum of the widths of the box’s top and bottom borders, so that subsequent elements will not be pushed down the page. ```less -@import (reference) url('/node_modules/xmeter/src/__tool.borders.less'); +@import (reference) url('/node_modules/xmeter/css/src/__tool.borders.less'); .your-class { .border-vert([top | bot | topbot | all]; ?:0); } @@ -78,7 +78,7 @@ in the same declaration, and the effective border-style cannot be specified; it ### border-radius ```less -@import (reference) url('/node_modules/xmeter/src/__tool.border-radius.less'); +@import (reference) url('/node_modules/xmeter/css/src/__tool.border-radius.less'); .your-class { .border-left-radius (?:0 ?:); .border-right-radius (?:0 ?:); @@ -89,7 +89,7 @@ in the same declaration, and the effective border-style cannot be specified; it ### Font Sizing Tools ```less -@import (reference) url('/node_modules/xmeter/src/__tool.fontsize.less'); +@import (reference) url('/node_modules/xmeter/css/src/__tool.fontsize.less'); .your-module { .font-size-mod(?:1); .your-element { @@ -100,7 +100,7 @@ in the same declaration, and the effective border-style cannot be specified; it ### delims ```less -@import (reference) url('/node_modules/xmeter/src/__tool.delims.less'); +@import (reference) url('/node_modules/xmeter/css/src/__tool.delims.less'); .your-class { .delims([!none | [ ]+]?); .parens(); // ( ) @@ -119,7 +119,7 @@ in the same declaration, and the effective border-style cannot be specified; it ### transitions This mixin differs from the `transition` css shorthand property, which does not allow you to set comma-separated properties/durations/functions/delays. ```less -@import (reference) url('/node_modules/xmeter/src/__tool.transitions.less'); +@import (reference) url('/node_modules/xmeter/css/src/__tool.transitions.less'); .your-class { .transitions(#;