diff --git a/docs/_docs.tpl.jade b/docs/_docs.tpl.jade index 2f1f70e..4be1473 100644 --- a/docs/_docs.tpl.jade +++ b/docs/_docs.tpl.jade @@ -1,29 +1,30 @@ doctype html html(lang="en") + include includes/_data.jade + block vars head - include includes/_data.jade - block vars - - - var project_name = 'Xmeter' - var page = {} - title= page.name + ' | ' + project_name + title= page.title() || (page.name() + ' | ' + Xmeter.DOCS.name()) meta(charset="utf-8") + meta(name="description" content=Xmeter.DOCS.description()) meta(name="viewport" content="width=device-width, initial-scale=1") - meta(name="description" content="A demo of Xmeter styles.") link(rel="stylesheet" href="../xmeter.css") link(rel="stylesheet" href="styles/docs.css") body.docs-body main.docs-main block main header - h1= project_name + ' — ' + page.name - p= page.description + //- h1= page.title() || (Xmeter.DOCS.name() + ' — ' + page.name()) + if page.title() + h1= page.title() + else + h1 #[a(href=Xmeter.DOCS.url())= Xmeter.DOCS.name()] — #{page.name()} + block mainIntro + p= page.description() nav#table-contents h2 Table of Contents block toc - +doctoc({pages: page.sub, depth: Infinity}) - unless page === Xmeter.getPage('index.html') + +doctoc({pages: page.findAll(), depth: Infinity}) + block footer footer: nav h1 Sitemap - +doctoc({pages: Xmeter.PAGES}) - block scripts + +doctoc({pages: Xmeter.DOCS.findAll()}) diff --git a/docs/atom.html b/docs/atom.html index 8de9850..db4954d 100644 --- a/docs/atom.html +++ b/docs/atom.html @@ -1,6 +1,34 @@ -Atoms | Xmeter

Xmeter — Atoms

Very specific classes used for creating anomalies or fixing broken styles.

margin-bottom

This atom sets the bottom margin to one vertical rhythm unit (1vru), +Atoms | Xmeter

Xmeter — Atoms

Very specific classes used for creating anomalies or fixing broken styles.

margin-bottom

This atom sets the bottom margin to one vertical rhythm unit (1vru), which is equal to the html element’s line-height multiplied by 1rem.

@g-vru: @g-line_height * 1rem;
-.-mb-1vru { margin-bottom: @g-vru; }
Most typographical block elements like paragraphs and lists are automatically given this style.
<div class="-mb-1vru">Most ...</div>

padding-top

This atom sets the top padding to 1vru.

@g-vru: @g-line_height * 1rem;
-.-pt-1vru { padding-top: @g-vru; }
Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.
<div class="-pt-1vru">Usually only ...</div>
\ No newline at end of file +.-mb-1vru { margin-bottom: @g-vru; }
Most typographical block elements like paragraphs and lists are automatically given this style.
<div class="-mb-1vru">Most ...</div>

padding-top

This atom sets the top padding to 1vru.

@g-vru: @g-line_height * 1rem;
+.-pt-1vru { padding-top: @g-vru; }
Usually only Heading 1 is given this style, but it is also useful for moving an element down the page.
<div class="-pt-1vru">Usually only ...</div>

font-size

These are two groups of atoms. The first group simply sets the font size of an element. +The second group uses the .font-size-el() mixin, +for maintaining vertical rhythm.

See all the font sizes in the source file /src/__settings.less, +and all atoms in /src/_atom.less

@g-font_size_peta: 96/16;
+@g-font_size_tera: 64/16;
+@g-font_size_giga: 48/16;
+@g-font_size_mega: 32/16;
+@g-font_size_kilo: 24/16;
+@g-font_size_norm: 16/16;
+@g-font_size_mill: 12/16;
+@g-font_size_micr:  8/16;
+.-fz-norm { font-size: @g-font_size_norm * 1em; }
+.-fz-el-norm { .font-size-el(@g-font_size_norm); }
Use .-fz-* on inline elements. +Numbers shown are font-sizes(ems).
  • universe (6.00)
  • galaxy (4.00)
  • star (3.00)
  • planet (2.00)
  • asteroid (1.50)
  • molecule (1.00)
  • atom (0.75)
  • quark (0.50)
<li><u class="-fz-peta">universe</u> (6.00)</li>
+<li><u class="-fz-tera">galaxy  </u> (4.00)</li>
+<li><u class="-fz-giga">star    </u> (3.00)</li>
+<li><u class="-fz-mega">planet  </u> (2.00)</li>
+<li><u class="-fz-kilo">asteroid</u> (1.50)</li>
+<li><u class="-fz-norm">molecule</u> (1.00)</li>
+<li><u class="-fz-mill">atom    </u> (0.75)</li>
+<li><u class="-fz-micr">quark   </u> (0.50)</li>
Use .-fz-el-* on block elements. +Numbers shown are font-sizes(ems)/line-heights.
  • universe (6.00/1.000)
  • galaxy (4.00/1.125)
  • star (3.00/1.000)
  • planet (2.00/1.500)
  • asteroid (1.50/1.000)
  • molecule (1.00/1.500)
  • atom (0.75/2.000)
  • quark (0.50/3.000)
<li class="-fz-el-peta">universe (6.00/1.000)</li>
+<li class="-fz-el-tera">galaxy   (4.00/1.125)</li>
+<li class="-fz-el-giga">star     (3.00/1.000)</li>
+<li class="-fz-el-mega">planet   (2.00/1.500)</li>
+<li class="-fz-el-kilo">asteroid (1.50/1.000)</li>
+<li class="-fz-el-norm">molecule (1.00/1.500)</li>
+<li class="-fz-el-mill">atom     (0.75/2.000)</li>
+<li class="-fz-el-micr">quark    (0.50/3.000)</li>
\ No newline at end of file diff --git a/docs/atom.jade b/docs/atom.jade index 15a8e9d..612b157 100644 --- a/docs/atom.jade +++ b/docs/atom.jade @@ -1,10 +1,15 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('atom.html') + - var page = Xmeter.DOCS.find('atom.html') block append main - include includes/_atom.margin-bottom.docs.jade - +docs_marginBottom(Xmeter.DOCS_CLASSES) - include includes/_atom.padding-top.docs.jade - +docs_paddingTop(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('atom.html#margin-bottom')) + include includes/_atom.margin-bottom.docs.jade + +docs_marginBottom(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('atom.html#padding-top')) + include includes/_atom.padding-top.docs.jade + +docs_paddingTop(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('atom.html#font-size')) + include includes/_atom.font-size.docs.jade + +docs_fontSize(Xmeter.DOCS_CLASSES) diff --git a/docs/base.html b/docs/base.html index 66b3dab..8cd9505 100644 --- a/docs/base.html +++ b/docs/base.html @@ -1,4 +1,4 @@ -Base Typography | Xmeter

Xmeter — Base Typography

Bare, unstyled HTML elements. No classes.

Headings & Paragraphs

Heading 1 h1

Paragraph p +Base Typography | Xmeter

Xmeter — Base Typography

Bare, unstyled HTML elements. No classes.

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. @@ -69,4 +69,4 @@ , quis: convallis(id () { justo Quisque.elit; }) }; } -}

Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file +}
Aenean consectetur figure suscipit urna, non vehicula lacus blandit et.
Integer at lacus et diam tristique figure figcaption suscipit.
Donec blockquote vel dolor ut felis dapibus ultricies vitae a nibh.
A horizontal rule hr is present below.

Lists

Ordered List ol
  1. List item li
  2. List item li
    1. Nested list item
    2. Nested list item
      1. Another nested list item
      2. Another nested list item
Unrdered List ul
  • List item li
  • List item li
    • Nested list item
    • Nested list item
      • Another nested list item
      • Another nested list item
Dictionary List dl
key dt
value dd
  • 1st key
  • 2nd key
value
key
  • 1st value
  • 2nd value

Tables

table caption
theader trow 1 theading 1theader trow 1 theading 2theader trow 1 theading 3
tfooter trow 1 tdata 1tfooter trow 1 tdata 2tfooter trow 1 tdata 3
tfooter trow 2 tdata 1tfooter trow 2 tdata 2tfooter trow 2 tdata 3
tbody trow 1 tdata 1tbody trow 1 tdata 2tbody trow 1 tdata 3
tbody trow 2 tdata 1tbody trow 2 tdata 2tbody trow 2 tdata 3
tbody trow 3 tdata 1tbody trow 3 tdata 2tbody trow 3 tdata 3

Text-Level Elements

Stress

  • emphasized text em
  • important text strong
  • alternate voice/mood (scare quotes, mentioning words, foreign expressions) i
  • relevant in some context mark
  • unarticulated annotation u
  • side comment small
  • text shown to be no longer relevant s

Documentation

  • content shown to be inserted into a document ins
  • content shown to be deleted from a document del
  • definining instance of a term dfn
  • keyword or technical term b
  • abbreviation or acronym abbr[title]
  • variable var
  • quoted material q
  • reference to a work, some part of a work, or the creator of a work cite
  • superscript sup
  • subscript sub

Data

  • generic machine-readable data data
  • a fragment of code code
  • user input kbd
  • a button or key on a physical device kbd > kbd
  • sample computer output samp

Embedded Elements

Forms

Integer at lacus et diam tristique fieldset legend suscipit.Aenean consectetur fieldset suscipit urna, non vehicula lacus blandit et.
single line text inputs
date/time
without text input
check boxes
radio buttons
drop-down list (select only one)
drop-down list (select multiple)
buttons
textarea

Interactive Elements

Integer at lacus et diam tristique details summary suscipit.Aenean consectetur details suscipit urna, non vehicula lacus blandit et.
\ No newline at end of file diff --git a/docs/base.jade b/docs/base.jade index 0a1a18d..a28978d 100644 --- a/docs/base.jade +++ b/docs/base.jade @@ -1,7 +1,7 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('base.html') + - var page = Xmeter.DOCS.find('base.html') block append main - var classname = Xmeter.DOCS_CLASSES diff --git a/docs/help.html b/docs/help.html index b5958fb..22ff0ab 100644 --- a/docs/help.html +++ b/docs/help.html @@ -1,23 +1,23 @@ -Helpers | Xmeter

Xmeter — Helpers

Somewhat explicit classes used for enhancing default styles.

Block

The Block Helper creates a blocky look, +Helpers | Xmeter

Xmeter — Helpers

Somewhat explicit classes used for enhancing default styles.

Block

The Block Helper creates a blocky look, with an inherited line-height to maintain vertical rhythm.

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

<p>... his famous equation
   <b class="h-Block" style="text-align:center;">E = mc<sup>2</sup></b>
-  which explains ...</p>

Inline

Creates an inline look, + which explains ...</p>

Inline

Creates an inline look, with zero line-height 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.

  • spacetime
  • black hole
  • singularity
  • gravity
  • supernova
  • neutron star 
<ul>
   <li class="h-Inline">spacetime </li>
   <li class="h-Inline">black hole </li>
   ...
-</ul>

Clearfix

The Clearfix Helper creates a line break after an element. +</ul>

Clearfix

The Clearfix Helper creates a line break after an element. 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.

gravity
supernova
spacetime black hole singularity
<div class="h-Clearfix">
+Use this as an alternative to the br element.
gravity
supernova
spacetime black hole singularity
<div class="h-Clearfix">
   <div style="float:  left;">gravity</div>
   <div style="float: right;">supernova</div>
 </div>
-<div>spacetime black hole singularity</div>
The Clearfix Helper is used in the classical sense.
    spacetime black hole singularity neutron star 
<ul>
-  <li class="o-Inline">spacetime </li>
-  <li class="o-Inline  h-Clearfix">black hole </li>
-  <li class="o-Inline">singularity </li>
-  <li class="o-Inline">neutron star </li>
-</ul>
The Clearfix Helper creates a line break after the 2nd inline item.
\ No newline at end of file +<div>spacetime black hole singularity</div>
The Clearfix Helper is used in the classical sense.
  • spacetime
  • black hole
  • singularity
  • neutron star 
<ul>
+  <li class="h-Inline">spacetime </li>
+  <li class="h-Inline  h-Clearfix">black hole </li>
+  <li class="h-Inline">singularity </li>
+  <li class="h-Inline">neutron star </li>
+</ul>
The Clearfix Helper creates a line break after the 2nd inline item.
\ No newline at end of file diff --git a/docs/help.jade b/docs/help.jade index ea34949..8e7aeb5 100644 --- a/docs/help.jade +++ b/docs/help.jade @@ -1,12 +1,15 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('help.html') + - var page = Xmeter.DOCS.find('help.html') block append main - include includes/_h-Block.docs.jade - +docs_block(Xmeter.DOCS_CLASSES) - include includes/_h-Inline.docs.jade - +docs_inline(Xmeter.DOCS_CLASSES) - include includes/_h-Clearfix.docs.jade - +docs_clearfix(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('help.html#block')) + include includes/_h-Block.docs.jade + +docs_block(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('help.html#inline')) + include includes/_h-Inline.docs.jade + +docs_inline(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('help.html#cleafix')) + include includes/_h-Clearfix.docs.jade + +docs_clearfix(Xmeter.DOCS_CLASSES) diff --git a/docs/includes/_atom.font-size.docs.jade b/docs/includes/_atom.font-size.docs.jade new file mode 100644 index 0000000..eacfd98 --- /dev/null +++ b/docs/includes/_atom.font-size.docs.jade @@ -0,0 +1,64 @@ +mixin docs_fontSize(classname) + - classname = classname || {} + p. + These are two groups of atoms. The first group simply sets the font size of an element. + The second group uses the #[code(class=classname.code) .font-size-el()] mixin, + for maintaining vertical rhythm. + p. + See all the font sizes in the source file #[code(class=classname.code) /src/__settings.less], + and all atoms in #[code(class=classname.code) /src/_atom.less] + pre(class=classname.pre). + @g-font_size_peta: 96/16; + @g-font_size_tera: 64/16; + @g-font_size_giga: 48/16; + @g-font_size_mega: 32/16; + @g-font_size_kilo: 24/16; + @g-font_size_norm: 16/16; + @g-font_size_mill: 12/16; + @g-font_size_micr: 8/16; + .-fz-norm { font-size: @g-font_size_norm * 1em; } + .-fz-el-norm { .font-size-el(@g-font_size_norm); } + figure(class=classname.figure) + figcaption.-mb-1vru. + Use #[code(class=classname.code) .-fz-*] on inline elements. + Numbers shown are font-sizes(ems). + ul + li #[u.-fz-peta universe] (6.00) + li #[u.-fz-tera galaxy ] (4.00) + li #[u.-fz-giga star ] (3.00) + li #[u.-fz-mega planet ] (2.00) + li #[u.-fz-kilo asteroid] (1.50) + li #[u.-fz-norm molecule] (1.00) + li #[u.-fz-mill atom ] (0.75) + li #[u.-fz-micr quark ] (0.50) + pre(class=classname.pre). + <li><u class="#[u -fz-peta]">universe</u> (6.00)</li> + <li><u class="#[u -fz-tera]">galaxy </u> (4.00)</li> + <li><u class="#[u -fz-giga]">star </u> (3.00)</li> + <li><u class="#[u -fz-mega]">planet </u> (2.00)</li> + <li><u class="#[u -fz-kilo]">asteroid</u> (1.50)</li> + <li><u class="#[u -fz-norm]">molecule</u> (1.00)</li> + <li><u class="#[u -fz-mill]">atom </u> (0.75)</li> + <li><u class="#[u -fz-micr]">quark </u> (0.50)</li> + figure(class=classname.figure) + figcaption. + Use #[code(class=classname.code) .-fz-el-*] on block elements. + Numbers shown are font-sizes(ems)/line-heights. + ul(style="overflow:auto;white-space:nowrap;") + li.-fz-el-peta universe (6.00/1.000) + li.-fz-el-tera galaxy (4.00/1.125) + li.-fz-el-giga star (3.00/1.000) + li.-fz-el-mega planet (2.00/1.500) + li.-fz-el-kilo asteroid (1.50/1.000) + li.-fz-el-norm molecule (1.00/1.500) + li.-fz-el-mill atom (0.75/2.000) + li.-fz-el-micr quark (0.50/3.000) + pre(class=classname.pre). + <li class="#[u -fz-el-peta]">universe (6.00/1.000)</li> + <li class="#[u -fz-el-tera]">galaxy (4.00/1.125)</li> + <li class="#[u -fz-el-giga]">star (3.00/1.000)</li> + <li class="#[u -fz-el-mega]">planet (2.00/1.500)</li> + <li class="#[u -fz-el-kilo]">asteroid (1.50/1.000)</li> + <li class="#[u -fz-el-norm]">molecule (1.00/1.500)</li> + <li class="#[u -fz-el-mill]">atom (0.75/2.000)</li> + <li class="#[u -fz-el-micr]">quark (0.50/3.000)</li> diff --git a/docs/includes/_atom.margin-bottom.docs.jade b/docs/includes/_atom.margin-bottom.docs.jade index 38300e1..134750f 100644 --- a/docs/includes/_atom.margin-bottom.docs.jade +++ b/docs/includes/_atom.margin-bottom.docs.jade @@ -1,16 +1,14 @@ mixin docs_marginBottom(classname) - classname = classname || {} - section#margin-bottom - h2 margin-bottom - p. - This atom sets the bottom margin to one #[dfn vertical rhythm unit] (1vru), - which is equal to the #[code(class=classname.code) html] element’s - #[code(class=classname.code) line-height] multiplied by - #[code(class=classname.code) 1rem]. + p. + This atom sets the bottom margin to one #[dfn vertical rhythm unit] (1vru), + which is equal to the #[code(class=classname.code) html] element’s + #[code(class=classname.code) line-height] multiplied by + #[code(class=classname.code) 1rem]. + pre(class=classname.pre). + @g-vru: @g-line_height * 1rem; + .-mb-1vru { margin-bottom: @g-vru; } + figure(class=classname.figure) + div.-mb-1vru Most typographical block elements like paragraphs and lists are automatically given this style. pre(class=classname.pre). - @g-vru: @g-line_height * 1rem; - .-mb-1vru { margin-bottom: @g-vru; } - figure(class=classname.figure) - div.-mb-1vru Most typographical block elements like paragraphs and lists are automatically given this style. - pre(class=classname.pre). - <div class="#[u -mb-1vru]">Most ...</div> + <div class="#[u -mb-1vru]">Most ...</div> diff --git a/docs/includes/_atom.padding-top.docs.jade b/docs/includes/_atom.padding-top.docs.jade index 99f36b0..4d92baf 100644 --- a/docs/includes/_atom.padding-top.docs.jade +++ b/docs/includes/_atom.padding-top.docs.jade @@ -1,13 +1,11 @@ mixin docs_paddingTop(classname) - classname = classname || {} - section#padding-top - h2 padding-top - p. - This atom sets the top padding to 1#[b: abbr(title="vertical rhythm unit") vru]. + p. + This atom sets the top padding to 1#[b: abbr(title="vertical rhythm unit") vru]. + pre(class=classname.pre). + @g-vru: @g-line_height * 1rem; + .-pt-1vru { padding-top: @g-vru; } + figure(class=classname.figure) + div.-pt-1vru Usually only Heading 1 is given this style, but it is also useful for moving an element down the page. pre(class=classname.pre). - @g-vru: @g-line_height * 1rem; - .-pt-1vru { padding-top: @g-vru; } - figure(class=classname.figure) - div.-pt-1vru Usually only Heading 1 is given this style, but it is also useful for moving an element down the page. - pre(class=classname.pre). - <div class="#[u -pt-1vru]">Usually only ...</div> + <div class="#[u -pt-1vru]">Usually only ...</div> diff --git a/docs/includes/_base.docs.jade b/docs/includes/_base.docs.jade index 7c8ee8e..22ab195 100644 --- a/docs/includes/_base.docs.jade +++ b/docs/includes/_base.docs.jade @@ -1,7 +1,7 @@ - classname = classname || {} section#headings-paragraphs block headingsParagraphs - h2 Headings & Paragraphs + h2 Headings & Paragraphs #[a.docs-_fragid(href='#headings-paragraphs')] figure(class=classname.figure) h1 Heading 1 #[code(class=classname.code) h1] p. @@ -117,7 +117,7 @@ section#headings-paragraphs hr section#lists block lists - h2 Lists + h2 Lists #[a.docs-_fragid(href='#lists')] figure(class=classname.figure) figcaption Ordered List #[code(class=classname.code) ol] ol @@ -157,7 +157,7 @@ section#lists li 2nd value section#tables block tables - h2 Tables + h2 Tables #[a.docs-_fragid(href='#tables')] figure(class=classname.figure) table caption #[code(class=classname.code) table] #[code(class=classname.code) caption] @@ -184,17 +184,17 @@ section#tables +tablebodyrows(3,3) section#text-level-elements block textLevelElements - h2 Text-Level Elements + h2 Text-Level Elements #[a.docs-_fragid(href='#text-level-elements')] section#links block links - h3 Links + h3 Links #[a.docs-_fragid(href='#links')] figure(class=classname.figure): ul block linksList li: a a li: a(href="#0") a[href] section#stress block stress - h3 Stress + h3 Stress #[a.docs-_fragid(href='#stress')] figure(class=classname.figure): ul block stressList li: em emphasized text #[code(class=classname.code) em] @@ -206,7 +206,7 @@ section#text-level-elements li: s text shown to be no longer relevant #[code(class=classname.code) s] section#documentation block documentation - h3 Documentation + h3 Documentation #[a.docs-_fragid(href='#documentation')] figure(class=classname.figure): ul block documentationList li: ins content shown to be inserted into a document #[code(class=classname.code) ins] @@ -221,7 +221,7 @@ section#text-level-elements li: sub subscript #[code(class=classname.code) sub] section#data block data - h3 Data + h3 Data #[a.docs-_fragid(href='#data')] figure(class=classname.figure): ul block dataList li: time(datetime="Z") a specific date or time #[code(class=classname.code) time] @@ -232,10 +232,10 @@ section#text-level-elements li: samp sample computer output #[code(class=classname.code) samp] section#embedded-elements block embeddedElements - h2 Embedded Elements + h2 Embedded Elements #[a.docs-_fragid(href='#embedded-elements')] section#forms block forms - h2 Forms + h2 Forms #[a.docs-_fragid(href='#forms')] form(class=classname.form) figure(class=classname.figure) fieldset @@ -328,7 +328,7 @@ section#forms textarea section#interactive-elements block interactiveElements - h2 Interactive Elements + h2 Interactive Elements #[a.docs-_fragid(href='#interactive-elements')] figure(class=classname.figure) details summary Integer at lacus et diam tristique #[code(class=classname.code) details summary] suscipit. diff --git a/docs/includes/_data.jade b/docs/includes/_data.jade index 11cc208..407b0ad 100644 --- a/docs/includes/_data.jade +++ b/docs/includes/_data.jade @@ -1,96 +1,30 @@ -- - var Xmeter = (function () { - function Xmeter() {} - Xmeter.PAGES = [ - { - name: 'Pattern Library', url: 'index.html' - , description: '' - } - , { - name: 'Visual Design', url: 'visual.html' - , description: 'Color and font schemes, look-and-feel, overall mood and tone.' - , is_hidden: true - } - , { - name: 'Base Typography', url: 'base.html' - , description: 'Bare, unstyled HTML elements. No classes.' - , sub: [ - { name: 'Table of Contents' , url: 'base.html#table-contents' } - , { name: 'Headings & Paragraphs', url: 'base.html#headings-paragraphs' } - , { name: 'Lists' , url: 'base.html#lists' } - , { name: 'Tables' , url: 'base.html#tables' } - , { - name: 'Text-Level Elements', url: '#text-level-elements' - , sub: [ - { name: 'Links' , url: 'base.html#links' } - , { name: 'Stress' , url: 'base.html#stress' } - , { name: 'Documentation', url: 'base.html#documentation' } - , { name: 'Data' , url: 'base.html#data' } - ] - } - , { name: 'Embedded Elements' , url: 'base.html#embedded-elements' } - , { name: 'Forms' , url: 'base.html#forms' } - , { name: 'Interactive Elements', url: 'base.html#interactive-elements' } - ] - } - , { - name: 'Objects', url: 'obj.html' - , description: 'Patterns of structure that can be reused many times for many different purposes.' - , sub: [ - { name: 'Table of Contents', url: 'obj.html#table-contents' } - , { name: 'The List Object' , url: 'obj.html#list-object' } - , { name: 'The Flex Object' , url: 'obj.html#flex-object' } - , { name: 'The Grid Object' , url: 'obj.html#grid-object' } - ] - } - , { - name: 'Components', url: 'comp.html' - , description: 'Patterns of look-and-feel that are each only used for one purpose.' - , is_hidden: true - } - , { - name: 'Helpers', url: 'help.html' - , description: 'Somewhat explicit classes used for enhancing default styles.' - , sub: [ - { name: 'Table of Contents', url: 'help.html#table-contents' } - , { name: 'Block' , url: 'help.html#block' } - , { name: 'Inline' , url: 'help.html#inline' } - , { name: 'Clearfix' , url: 'help.html#cleafix' } - ] - } - , { - name: 'Atoms', url: 'atom.html' - , description: 'Very specific classes used for creating anomalies or fixing broken styles.' - , sub: [ - { name: 'Table of Contents', url: 'atom.html#table-contents' } - , { name: 'margin-bottom' , url: 'atom.html#margin-bottom' } - , { name: 'padding-top' , url: 'atom.html#padding-top' } - ] - } - ] - Xmeter.DOCS_CLASSES = { - figure : 'docs-figure' - , pre : 'docs-pre' - , code : 'docs-code' - , form : 'docs-form' - } - Xmeter.getPage = function getPage(url0) { - return Xmeter.PAGES.find(function (item) { return item.url === url0 }) || {} - } - return Xmeter - })() - mixin doctoc(args) + //- NOTE parameter validation - - var pages = args.pages || [] - var class_obj = args.class_obj || {} - var depth = +args.depth || 0 - ol(class=class_obj.listclasses) + var pages = args.pages || [] + , classes = args.classes || {} + , depth = +args.depth || 0 + ol(class=classes.listclasses) each item in pages - unless item.is_hidden - li(class=class_obj.itemclasses) - a(class=class_obj.linkclasses href=item.url)= item.name - if item.description - = ': ' + item.description - if item.sub && depth > 0 - +doctoc({pages: item.sub, class_obj: (class_obj.sub || {}), depth: depth-1}) + unless item.isHidden() + li(class=classes.itemclasses) + a(class=classes.linkclasses href=item.url())= item.name() + if item.description() + = ': ' + item.description() + if item.findAll().length && depth > 0 + +doctoc({pages: item.findAll(), classes: (classes.sub || {}), depth: depth-1}) + +mixin newSection(hn, page) + - + var text = page.name() + , id = page.url().split('#')[1] + section(id=id) + if hn === 1 + h1 #{text} #[a.docs-_fragid(href='#' + id)] + else if hn === 2 + h2 #{text} #[a.docs-_fragid(href='#' + id)] + else if hn === 3 + h3 #{text} #[a.docs-_fragid(href='#' + id)] + else + p #{text} + block diff --git a/docs/includes/_h-Block.docs.jade b/docs/includes/_h-Block.docs.jade index 21e7605..1d43f09 100644 --- a/docs/includes/_h-Block.docs.jade +++ b/docs/includes/_h-Block.docs.jade @@ -1,16 +1,14 @@ mixin docs_block(classname) - classname = classname || {} - section#block - h2 Block + p. + The Block Helper creates a blocky look, + with an inherited line-height to maintain vertical rhythm. + figure(class=classname.figure) p. - The Block Helper creates a blocky look, - with an inherited line-height to maintain vertical rhythm. - figure(class=classname.figure) - p. - Albert Einstein was made famous by his equation - #[b.h-Block(style="text-align:center;") E = mc#[sup 2]] - which explains the relationship between energy and mass. - pre(class=classname.pre). - <p>... his famous equation - <b class="#[u h-Block]" style="text-align:center;">E = mc<sup>2</sup></b> - which explains ...</p> + Albert Einstein was made famous by his equation + #[b.h-Block(style="text-align:center;") E = mc#[sup 2]] + which explains the relationship between energy and mass. + pre(class=classname.pre). + <p>... his famous equation + <b class="#[u h-Block]" style="text-align:center;">E = mc<sup>2</sup></b> + which explains ...</p> diff --git a/docs/includes/_h-Clearfix.docs.jade b/docs/includes/_h-Clearfix.docs.jade index 49a04b3..3ec0fb3 100644 --- a/docs/includes/_h-Clearfix.docs.jade +++ b/docs/includes/_h-Clearfix.docs.jade @@ -1,35 +1,33 @@ mixin docs_clearfix(classname) - classname = classname || {} - section#clearfix - h2 Clearfix - p. - The Clearfix Helper creates a line break after an element. - This could be a container of floats, or it could simply be an inline list item. - Use this as an alternative to the #[code(class=classname.code) br] element. - figure(class=classname.figure) - div.h-Clearfix - div(style="font-weight: 700; float: left;") gravity - div(style="font-weight: 700; float: right;") supernova - div spacetime black hole singularity - pre(class=classname.pre). - <div class="#[u h-Clearfix]"> - <div style="float: left;">gravity</div> - <div style="float: right;">supernova</div> - </div> - <div>spacetime black hole singularity</div> - figcaption The Clearfix Helper is used in the classical sense. - figure(class=classname.figure) - ul - span.o-Inline spacetime#{' '} - span.o-Inline.h-Clearfix black hole#{' '} - span.o-Inline singularity#{' '} - span.o-Inline neutron star#{' '} - pre(class=classname.pre). - <ul> - <li class="o-Inline">spacetime </li> - <li class="o-Inline #[u h-Clearfix]">black hole </li> - <li class="o-Inline">singularity </li> - <li class="o-Inline">neutron star </li> - </ul> - figcaption. - The Clearfix Helper creates a line break after the 2nd inline item. + p. + The Clearfix Helper creates a line break after an element. + This could be a container of floats, or it could simply be an inline list item. + Use this as an alternative to the #[code(class=classname.code) br] element. + figure(class=classname.figure) + div.h-Clearfix + div(style="font-weight: 700; float: left;") gravity + div(style="font-weight: 700; float: right;") supernova + div spacetime black hole singularity + pre(class=classname.pre). + <div class="#[u h-Clearfix]"> + <div style="float: left;">gravity</div> + <div style="float: right;">supernova</div> + </div> + <div>spacetime black hole singularity</div> + figcaption The Clearfix Helper is used in the classical sense. + figure(class=classname.figure) + ul + li.h-Inline spacetime#{' '} + li.h-Inline.h-Clearfix black hole#{' '} + li.h-Inline singularity#{' '} + li.h-Inline neutron star#{' '} + pre(class=classname.pre). + <ul> + <li class="h-Inline">spacetime </li> + <li class="h-Inline #[u h-Clearfix]">black hole </li> + <li class="h-Inline">singularity </li> + <li class="h-Inline">neutron star </li> + </ul> + figcaption. + The Clearfix Helper creates a line break after the 2nd inline item. diff --git a/docs/includes/_h-Inline.docs.jade b/docs/includes/_h-Inline.docs.jade index 6f4da36..b9c58a1 100644 --- a/docs/includes/_h-Inline.docs.jade +++ b/docs/includes/_h-Inline.docs.jade @@ -1,24 +1,22 @@ mixin docs_inline(classname) - classname = classname || {} - section#inline - h2 Inline - p. - Creates an inline look, - with zero line-height to maintain vertical rhythm. - p. - This class is useful for creating inline lists, that is, - lists whose items are each displayed in line, one right after another. - figure(class=classname.figure) - ul - li.h-Inline spacetime#{' '} - li.h-Inline black hole#{' '} - li.h-Inline singularity#{' '} - li.h-Inline gravity#{' '} - li.h-Inline supernova#{' '} - li.h-Inline neutron star#{' '} - pre(class=classname.pre). - <ul> - <li class="#[u h-Inline]">spacetime </li> - <li class="#[u h-Inline]">black hole </li> - ... - </ul> + p. + Creates an inline look, + with zero line-height to maintain vertical rhythm. + p. + This class is useful for creating inline lists, that is, + lists whose items are each displayed in line, one right after another. + figure(class=classname.figure) + ul + li.h-Inline spacetime#{' '} + li.h-Inline black hole#{' '} + li.h-Inline singularity#{' '} + li.h-Inline gravity#{' '} + li.h-Inline supernova#{' '} + li.h-Inline neutron star#{' '} + pre(class=classname.pre). + <ul> + <li class="#[u h-Inline]">spacetime </li> + <li class="#[u h-Inline]">black hole </li> + ... + </ul> diff --git a/docs/includes/_o-Flex.docs.jade b/docs/includes/_o-Flex.docs.jade index 3a5db46..8e2a690 100644 --- a/docs/includes/_o-Flex.docs.jade +++ b/docs/includes/_o-Flex.docs.jade @@ -1,46 +1,44 @@ mixin docs_flex(classname) - classname = classname || {} - section#flex-object - h2 The Flex Object - p. - A Flex Object is simply a container of flexible items arranged in one dimension. - Each flex item has a #[b main size] of #[code(class=classname.code) auto], - depending on its contents. - The flex items will grow or shrink together to fit into the allotted space. - If overridden, the extra space (if any) will be distributed #[em between] the items. - figure(class=classname.figure) - ul.o-List.o-Flex - li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering - li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Flex__Item EDM International - pre(class=classname.pre). - <ul class="o-List #[u o-Flex]"> - <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption. - A Flex Object with extra space. - figure(class=classname.figure) - ul.o-List.o-Flex - li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering - li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Flex__Item EDM International - li.o-List__Item.o-Flex__Item Electrical Consultants, Inc. - li.o-List__Item.o-Flex__Item Fabrimet Inc. - li.o-List__Item.o-Flex__Item Falcon Steel Company - li.o-List__Item.o-Flex__Item Sabre-FWT - li.o-List__Item.o-Flex__Item HDR - li.o-List__Item.o-Flex__Item Mitas Energy - li.o-List__Item.o-Flex__Item Power Consulting Associates, LLC - li.o-List__Item.o-Flex__Item Power Line Systems, Inc. - li.o-List__Item.o-Flex__Item Quanta Services - li.o-List__Item.o-Flex__Item ReliaPOLE Inspection Services - pre(class=classname.pre). - <ul class="o-List #[u o-Flex]"> - <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption. - A Flex Object with not enough space. + p. + A Flex Object is simply a container of flexible items arranged in one dimension. + Each flex item has a #[b main size] of #[code(class=classname.code) auto], + depending on its contents. + The flex items will grow or shrink together to fit into the allotted space. + If overridden, the extra space (if any) will be distributed #[em between] the items. + figure(class=classname.figure) + ul.o-List.o-Flex + li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering + li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Flex__Item EDM International + pre(class=classname.pre). + <ul class="o-List #[u o-Flex]"> + <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption. + A Flex Object with extra space. + figure(class=classname.figure) + ul.o-List.o-Flex + li.o-List__Item.o-Flex__Item Burns & McDonnell Engineering + li.o-List__Item.o-Flex__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Flex__Item EDM International + li.o-List__Item.o-Flex__Item Electrical Consultants, Inc. + li.o-List__Item.o-Flex__Item Fabrimet Inc. + li.o-List__Item.o-Flex__Item Falcon Steel Company + li.o-List__Item.o-Flex__Item Sabre-FWT + li.o-List__Item.o-Flex__Item HDR + li.o-List__Item.o-Flex__Item Mitas Energy + li.o-List__Item.o-Flex__Item Power Consulting Associates, LLC + li.o-List__Item.o-Flex__Item Power Line Systems, Inc. + li.o-List__Item.o-Flex__Item Quanta Services + li.o-List__Item.o-Flex__Item ReliaPOLE Inspection Services + pre(class=classname.pre). + <ul class="o-List #[u o-Flex]"> + <li class="o-List__Item #[u o-Flex__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Flex__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption. + A Flex Object with not enough space. diff --git a/docs/includes/_o-Grid.docs.jade b/docs/includes/_o-Grid.docs.jade index c3e69b8..50b80a3 100644 --- a/docs/includes/_o-Grid.docs.jade +++ b/docs/includes/_o-Grid.docs.jade @@ -1,59 +1,57 @@ mixin docs_grid(classname) - classname = classname || {} - section#grid-object - h2 The Grid Object - p. - The Grid Object is similar to the Flex Object except that it can be extended - to 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. - p. - By default, each item has a #[b main size] of #[code(class=classname.code) 100%] (unless overridden). - Using media queries, you can achieve a flexible and responsive table effect, - adjusting the number of #[b cross axes]—columns if - #[code(class=classname.code) flex-direction: row;], or rows if - #[code(class=classname.code) flex-direction: column;]—based on screen size. - In order to appear like a table, all the items within - a #[b cross axis] should have the same #[b main size]. - figure(class=classname.figure) - ul.o-List.o-Grid - li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering - li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Grid__Item EDM International - pre(class=classname.pre). - <ul class="o-List #[u o-Grid]"> - <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption A Grid Object with extra space. - figure(class=classname.figure) - ul.o-List.o-Grid - li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering - li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC - li.o-List__Item.o-Grid__Item EDM International - li.o-List__Item.o-Grid__Item Electrical Consultants, Inc. - li.o-List__Item.o-Grid__Item Fabrimet Inc. - li.o-List__Item.o-Grid__Item Falcon Steel Company - li.o-List__Item.o-Grid__Item Sabre-FWT - li.o-List__Item.o-Grid__Item HDR - li.o-List__Item.o-Grid__Item Mitas Energy - li.o-List__Item.o-Grid__Item Power Consulting Associates, LLC - li.o-List__Item.o-Grid__Item Power Line Systems, Inc. - li.o-List__Item.o-Grid__Item Quanta Services - li.o-List__Item.o-Grid__Item ReliaPOLE Inspection Services - li.o-List__Item.o-Grid__Item Sabre-FWT - li.o-List__Item.o-Grid__Item SAE Towers - li.o-List__Item.o-Grid__Item TAPP Steel Poles - li.o-List__Item.o-Grid__Item Trinity Meyer Utility Structures - li.o-List__Item.o-Grid__Item TRC Engineers - li.o-List__Item.o-Grid__Item Underground Devices - li.o-List__Item.o-Grid__Item Valmont Newmark - pre(class=classname.pre). - <ul class="o-List #[u o-Grid]"> - <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> - <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> - figcaption A Grid Object with not enough space. + p. + The Grid Object is similar to the Flex Object except that it can be extended + to 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. + p. + By default, each item has a #[b main size] of #[code(class=classname.code) 100%] (unless overridden). + Using media queries, you can achieve a flexible and responsive table effect, + adjusting the number of #[b cross axes]—columns if + #[code(class=classname.code) flex-direction: row;], or rows if + #[code(class=classname.code) flex-direction: column;]—based on screen size. + In order to appear like a table, all the items within + a #[b cross axis] should have the same #[b main size]. + figure(class=classname.figure) + ul.o-List.o-Grid + li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering + li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Grid__Item EDM International + pre(class=classname.pre). + <ul class="o-List #[u o-Grid]"> + <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption A Grid Object with extra space. + figure(class=classname.figure) + ul.o-List.o-Grid + li.o-List__Item.o-Grid__Item Burns & McDonnell Engineering + li.o-List__Item.o-Grid__Item DIS-TRAN Steel, LLC + li.o-List__Item.o-Grid__Item EDM International + li.o-List__Item.o-Grid__Item Electrical Consultants, Inc. + li.o-List__Item.o-Grid__Item Fabrimet Inc. + li.o-List__Item.o-Grid__Item Falcon Steel Company + li.o-List__Item.o-Grid__Item Sabre-FWT + li.o-List__Item.o-Grid__Item HDR + li.o-List__Item.o-Grid__Item Mitas Energy + li.o-List__Item.o-Grid__Item Power Consulting Associates, LLC + li.o-List__Item.o-Grid__Item Power Line Systems, Inc. + li.o-List__Item.o-Grid__Item Quanta Services + li.o-List__Item.o-Grid__Item ReliaPOLE Inspection Services + li.o-List__Item.o-Grid__Item Sabre-FWT + li.o-List__Item.o-Grid__Item SAE Towers + li.o-List__Item.o-Grid__Item TAPP Steel Poles + li.o-List__Item.o-Grid__Item Trinity Meyer Utility Structures + li.o-List__Item.o-Grid__Item TRC Engineers + li.o-List__Item.o-Grid__Item Underground Devices + li.o-List__Item.o-Grid__Item Valmont Newmark + pre(class=classname.pre). + <ul class="o-List #[u o-Grid]"> + <li class="o-List__Item #[u o-Grid__Item]">Burns & McDonnell Engineering</li> + <li class="o-List__Item #[u o-Grid__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> + figcaption A Grid Object with not enough space. diff --git a/docs/includes/_o-List.docs.jade b/docs/includes/_o-List.docs.jade index 7c94884..ca38866 100644 --- a/docs/includes/_o-List.docs.jade +++ b/docs/includes/_o-List.docs.jade @@ -1,22 +1,20 @@ mixin docs_list(classname) - classname = classname || {} - section#list-object - h2 The List Object - p. - Use the List Object to remove 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. - figure(class=classname.figure) - ul.o-List - li.o-List__Item Burns & McDonnell Engineering - li.o-List__Item DIS-TRAN Steel, LLC - li.o-List__Item EDM International - li.o-List__Item Electrical Consultants, Inc. - li.o-List__Item Fabrimet Inc. - li.o-List__Item Falcon Steel Company - pre(class=classname.pre). - <ul class="#[u o-List]"> - <li class="#[u o-List__Item]">Burns & McDonnell Engineering</li> - <li class="#[u o-List__Item]">DIS-TRAN Steel, LLC</li> - ... - </ul> + p. + Use the List Object to remove 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. + figure(class=classname.figure) + ul.o-List + li.o-List__Item Burns & McDonnell Engineering + li.o-List__Item DIS-TRAN Steel, LLC + li.o-List__Item EDM International + li.o-List__Item Electrical Consultants, Inc. + li.o-List__Item Fabrimet Inc. + li.o-List__Item Falcon Steel Company + pre(class=classname.pre). + <ul class="#[u o-List]"> + <li class="#[u o-List__Item]">Burns & McDonnell Engineering</li> + <li class="#[u o-List__Item]">DIS-TRAN Steel, LLC</li> + ... + </ul> diff --git a/docs/index.html b/docs/index.html index cc77a9f..3c748dd 100644 --- a/docs/index.html +++ b/docs/index.html @@ -1 +1 @@ -Pattern Library | Xmeter

Xmeter — Pattern Library

\ No newline at end of file +Xmeter Style Guide

Xmeter Style Guide

A demo of Xmeter styles.

\ No newline at end of file diff --git a/docs/index.jade b/docs/index.jade index a3e462c..003bc2f 100644 --- a/docs/index.jade +++ b/docs/index.jade @@ -1,7 +1,6 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('index.html') + - var page = Xmeter.DOCS -block toc - +doctoc({pages: Xmeter.PAGES, depth: Infinity}) +block footer diff --git a/docs/models/classes/Xmeter.class.js b/docs/models/classes/Xmeter.class.js new file mode 100644 index 0000000..5534e7f --- /dev/null +++ b/docs/models/classes/Xmeter.class.js @@ -0,0 +1,55 @@ +var Page = require('sitepage').Page +var StyleGuide = require('sitepage').StyleGuide + +module.exports = (function () { + // CONSTRUCTOR + function Xmeter() {} + + // METHODS + + // STATIC MEMBERS + /** + * The style guide site for this project. + * @type {StyleGuide} + */ + Xmeter.DOCS = (function () { + var docs = new StyleGuide('Xmeter', '/docs/') + .title('Xmeter Style Guide') + .description('A demo of Xmeter styles.') + .init() + docs.find('visual.html') + .hide() + docs.find('obj.html') + .add(new Page({ name: 'Table of Contents', url: 'obj.html#table-contents' })) + .add(new Page({ name: 'The List Object' , url: 'obj.html#list-object' })) + .add(new Page({ name: 'The Flex Object' , url: 'obj.html#flex-object' })) + .add(new Page({ name: 'The Grid Object' , url: 'obj.html#grid-object' })) + docs.find('comp.html') + .hide() + docs.find('help.html') + .add(new Page({ name: 'Table of Contents', url: 'help.html#table-contents' })) + .add(new Page({ name: 'Block' , url: 'help.html#block' })) + .add(new Page({ name: 'Inline' , url: 'help.html#inline' })) + .add(new Page({ name: 'Clearfix' , url: 'help.html#cleafix' })) + docs.find('atom.html') + .add(new Page({ name: 'Table of Contents', url: 'atom.html#table-contents' })) + .add(new Page({ name: 'margin-bottom' , url: 'atom.html#margin-bottom' })) + .add(new Page({ name: 'padding-top' , url: 'atom.html#padding-top' })) + .add(new Page({ name: 'font-size' , url: 'atom.html#font-size' })) + return docs + })() + + /** + * Static classes for Xmeter style guide elements. + * REVIEW : may not need this + * @type {Object} + */ + Xmeter.DOCS_CLASSES = { + figure : 'docs-figure' + , pre : 'docs-pre' + , code : 'docs-code' + , form : 'docs-form' + } + + return Xmeter +})() diff --git a/docs/models/options.js b/docs/models/options.js new file mode 100644 index 0000000..6e0bcc8 --- /dev/null +++ b/docs/models/options.js @@ -0,0 +1,4 @@ +// Options and locals for compiling Pug pages. +module.exports = { + Xmeter: require('./classes/Xmeter.class.js') +} diff --git a/docs/obj.html b/docs/obj.html index e975adb..3ce5f48 100644 --- a/docs/obj.html +++ b/docs/obj.html @@ -1,10 +1,10 @@ -Objects | Xmeter

Xmeter — Objects

Patterns of structure that can be reused many times for many different purposes.

The List Object

Use the List Object to remove the usual padding and list item markers accompanied by +Objects | Xmeter

Xmeter — Objects

Patterns of structure that can be reused many times for many different purposes.

The List Object

Use the List Object to remove 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.

  • Burns & McDonnell Engineering
  • DIS-TRAN Steel, LLC
  • EDM International
  • Electrical Consultants, Inc.
  • Fabrimet Inc.
  • Falcon Steel Company
<ul class="o-List">
   <li class="o-List__Item">Burns & McDonnell Engineering</li>
   <li class="o-List__Item">DIS-TRAN Steel, LLC</li>
   ...
-</ul>

The Flex Object

A Flex Object is simply a container of flexible items arranged in one dimension. +</ul>

The Flex Object

A Flex Object is simply a container of flexible items arranged in one dimension. Each flex item has a main size of auto, depending on its contents. The flex items will grow or shrink together to fit into the allotted space. @@ -16,7 +16,7 @@ <li class="o-List__Item o-Flex__Item">Burns & McDonnell Engineering</li> <li class="o-List__Item o-Flex__Item">DIS-TRAN Steel, LLC</li> ... -</ul>

A Flex Object with not enough space.

The Grid Object

The Grid Object is similar to the Flex Object except that it can be extended +</ul>

A Flex Object with not enough space.

The Grid Object

The Grid Object is similar to the Flex Object except that it can be extended to 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 @@ -34,4 +34,4 @@ <li class="o-List__Item o-Grid__Item">Burns & McDonnell Engineering</li> <li class="o-List__Item o-Grid__Item">DIS-TRAN Steel, LLC</li> ... -</ul>

A Grid Object with not enough space.
\ No newline at end of file +</ul>
A Grid Object with not enough space.
\ No newline at end of file diff --git a/docs/obj.jade b/docs/obj.jade index 79be0e7..fe5649a 100644 --- a/docs/obj.jade +++ b/docs/obj.jade @@ -1,12 +1,15 @@ extends _docs.tpl.jade block append vars - - var page = Xmeter.getPage('obj.html') + - var page = Xmeter.DOCS.find('obj.html') block append main - include includes/_o-List.docs.jade - +docs_list(Xmeter.DOCS_CLASSES) - include includes/_o-Flex.docs.jade - +docs_flex(Xmeter.DOCS_CLASSES) - include includes/_o-Grid.docs.jade - +docs_grid(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('obj.html#list-object')) + include includes/_o-List.docs.jade + +docs_list(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('obj.html#flex-object')) + include includes/_o-Flex.docs.jade + +docs_flex(Xmeter.DOCS_CLASSES) + +newSection(2, Xmeter.DOCS.find('obj.html#grid-object')) + include includes/_o-Grid.docs.jade + +docs_grid(Xmeter.DOCS_CLASSES) diff --git a/docs/styles/docs.css b/docs/styles/docs.css index 0ee256e..30aa397 100644 --- a/docs/styles/docs.css +++ b/docs/styles/docs.css @@ -23,6 +23,10 @@ .docs-code u { color: #6c6; } +.docs-pre strong, +.docs-code strong { + color: #eee; +} .docs-pre, .docs-figure { padding: 0.75rem 0.5rem; @@ -48,3 +52,20 @@ .docs-form { background: #fff; } +.docs-_fragid { + display: inline; + line-height: 0; + margin-left: 1rem; + font-weight: 100; +} +.docs-_fragid::before { + content: ''; +} +h1:hover > .docs-_fragid::before, +h2:hover > .docs-_fragid::before, +h3:hover > .docs-_fragid::before, +h4:hover > .docs-_fragid::before, +h5:hover > .docs-_fragid::before, +h6:hover > .docs-_fragid::before { + content: '\00a7'; +} diff --git a/docs/styles/docs.less b/docs/styles/docs.less index 80d9518..ee480b8 100644 --- a/docs/styles/docs.less +++ b/docs/styles/docs.less @@ -29,6 +29,7 @@ color: #ccc; border-radius: 0.25rem; u { color: #6c6; } // override bad contrast ratio + strong { color: #eee; } } .docs-pre, .docs-figure { @@ -54,3 +55,19 @@ .docs-form { background: #fff; } + + +.docs-_fragid { + display: inline; + line-height: 0; + margin-left: 1rem; + font-weight: 100; + &::before { + content: ''; + } +} +h1, h2, h3, h4, h5, h6 { + &:hover > .docs-_fragid::before { + content: '\00a7'; + } +} diff --git a/docs/tools.md b/docs/tools.md new file mode 100644 index 0000000..fecce7e --- /dev/null +++ b/docs/tools.md @@ -0,0 +1,159 @@ +# Xmeter — Tools + +Functions and mixins used for development. + +These are the mixins and/or functions in the codebase that are used in development. +These rules don’t output any CSS, but they do make writing CSS a lot easier +by encapsulating reusable sets of property declarations. +[Fallbacks](#fallbacks) are simply mixins that address +browser vendor prefixes for CSS properties and values, +whereas [Tools](#tools) combine properties commonly used together. + +WARNING: Syntax shown in code below has not been completely resolved. +Watch out for changes. + +## Table of Contents + +1. [Table of Contents](#table-contents) +- [Fallbacks](#fallbacks) + 1. [box-sizing](#box-sizing) + - [The Flexbox Tools](#flexbox-tools) + - [transform](#transform) + - [transform-origin](#transform-origin) + - [column-count](#column-count) + - [column-width](#column-width) + - [filter](#filter) +- [Tools](#tools) + 1. [vertspacing](#vertspacing) + - [borders](#borders) + - [border-radius](#border-radius) + - [Font Sizing Tools](#font-sizing-tools) + - [delims](#delims) + - [sprite](#sprite) + +## Fallbacks + +### box-sizing +```less +@import (reference) url('/node_modules/xmeter/src/__fallback.box-sizing.less'); +.your-class { + .box-sizing([!content-box | border-box]?); +} +``` + +### The Flexbox Tools +```less +.content { --status: 'coming soon...'; } +``` + +### transform +```less +@import (reference) url('/node_modules/xmeter/src/__fallback.transform.less'); +.your-class { + .transform([!none | ]?); +} +``` + +### transform-origin +```less +@import (reference) url('/node_modules/xmeter/src/__fallback.transform-origin.less'); +.your-class { + .transform-origin(?:[50% 50% 0]); +} +// where: +// == | [ [ && ] ? ] +// == | | left | center | right | top | bottom +// == [ | | left | center | right ]:50% +// == [ | | top | center | bottom]:50% +// == []:0 +``` + +### column-count +```less +@import (reference) url('/node_modules/xmeter/src/__fallback.column-count.less'); +.your-class { + .column-count([!auto | ]?); +} +``` + +### column-width +```less +@import (reference) url('/node_modules/xmeter/src/__fallback.column-width.less'); +.your-class { + .column-width([!auto | ]?); +} +``` + +### filter +```less +@import (reference) url('/node_modules/xmeter/src/__fallback.filter.less'); +.your-class { + .column-width([!none | ]?); +} +``` + +## Tools + +### vertspacing +```less +@import (reference) url('/node_modules/xmeter/src/__tool.vertspacing.less'); +.your-module { + .vertspacing(?:@g-vru); +} +``` + +### borders +```less +@import (reference) url('/node_modules/xmeter/src/__tool.borders.less'); +.your-class { + .border-vert([top | bot | topbot | all]; ?:0); +} +``` + +### border-radius +```less +@import (reference) url('/node_modules/xmeter/src/__tool.border-radius.less'); +.your-class { + .border-left-radius(?:0); + .border-right-radius(?:0); + .border-top-radius(?:0); + .border-bottom-radius(?:0); +} +``` + +### Font Sizing Tools +```less +@import (reference) url('/node_modules/xmeter/src/__tool.fontsize.less'); +.your-module { + .font-size-mod(?:1); + .your-element { + .font-size-el(?:1; ?:1; ?:@g-line_height); + } +} +``` + +### delims +```less +@import (reference) url('/node_modules/xmeter/src/__tool.delims.less'); +.your-class { + .delims([!none | [ ]+]?); + .parens(); // ( ) + .brackets(); // [ ] + .braces(); // { } + .angles(); // < > + .apos(); // ' ' + .quot(); // " " + .quotes-single(); // ‘ ’ + .quotes-double(); // “ ” + .guillemets-single(); // ‹ › + .guillemets-double(); // « » +} +``` + +### sprite +```less +@import (reference) url('/node_modules/xmeter/src/__tool.delims.less'); +.your-class { + .sprite([horizontal | vertical]; ; ; ); +} +``` diff --git a/index.html b/index.html new file mode 100644 index 0000000..6398e69 --- /dev/null +++ b/index.html @@ -0,0 +1 @@ +Xmeter index page

Xmeter

Go to Docs

\ No newline at end of file diff --git a/index.jade b/index.jade new file mode 100644 index 0000000..1dd6cf8 --- /dev/null +++ b/index.jade @@ -0,0 +1,11 @@ +doctype html +html(lang="en") + head + title Xmeter index page + meta(charset="utf-8") + meta(name="viewport" content="width=device-width, initial-scale=1") + body + main + h1 Xmeter + p: a(href="/docs/") Go to Docs + script(src="app.js") diff --git a/package.json b/package.json index a5acf19..2615fee 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "xmeter", - "version": "5.0.0", + "version": "5.1.0", "description": "A default stylesheet with a set of tools that make designing with vertical rhythm easy.", "main": "xmeter.css", "dependencies": {}, @@ -10,12 +10,14 @@ "less": "^2.7.1", "lessc-each": "^1.1.0", "normalize.css": "~4.1.1", - "resetcss": "^1.0.3" + "pug-cli": "^1.0.0-alpha6", + "resetcss": "^1.0.3", + "sitepage": "^1.0.0" }, "scripts": { "test": "echo \"Error: no test specified\" && exit 1", - "jade:docs": "jade docs/{index,base,obj,help,atom}.jade", - "jade:all": "npm run jade:docs", + "jade:docs": "pug -O docs/models/options.js docs/{index,base,obj,help,atom}.jade", + "jade:all": "jade index.jade && npm run jade:docs", "lessc:docs": "lessc docs/styles/docs.less docs/styles/docs.css", "lessc:xmeter": "lessc-each src/ build/ && lessc xmeter.less xmeter.css", "lessc:all": "npm run lessc:docs && npm run lessc:xmeter", diff --git a/src/__fallback.column-width.less b/src/__fallback.column-width.less index 85fccfc..12c4bd2 100644 --- a/src/__fallback.column-width.less +++ b/src/__fallback.column-width.less @@ -7,14 +7,14 @@ // Sets the width of columns of text. // See [MDN](https://developer.mozilla.org/en-US/docs/Web/CSS/column-width) for more info. // -// @n - a positive integer indicating the number of columns, or -// - auto (initial) - indicates the width of columns should be determined by the `column-count` property +// @width - a length indicating the optimal width of the columns, or +// - auto (initial) - indicates the width of columns should be determined by the `column-count` property // ^author // : Chris Harvey // ^updated // : 2016-02-08 -.column-width(@n: auto) { - -webkit-column-width: @n; - -moz-column-width: @n; - column-width: @n; +.column-width(@width: auto) { + -webkit-column-width: @width; + -moz-column-width: @width; + column-width: @width; } diff --git a/src/__settings.less b/src/__settings.less index 423b6f4..433306f 100644 --- a/src/__settings.less +++ b/src/__settings.less @@ -19,9 +19,21 @@ @g-vru_px: (@g-line_height * @g-1rem); // fallback for @g-vru, which is in rems @g-vru: (@g-line_height * 1rem); -@g-font_size_h1: 32/16; // 2.000 -@g-font_size_h2: 24/16; // 1.500 -@g-font_size_h3: 20/16; // 1.250 -@g-font_size_h4: 16/16; // 1.000 -@g-font_size_h5: 14/16; // 0.875 -@g-font_size_h6: 12/16; // 0.750 + +// new global font sizes as of 2016-08-17 +@g-font_size_peta: 96/16; // 6.00 // lines: ceil(6.00/@g-line_height) == 4 +@g-font_size_tera: 64/16; // 4.00 // lines: ceil(4.00/@g-line_height) == 3 +@g-font_size_giga: 48/16; // 3.00 // lines: ceil(3.00/@g-line_height) == 2 +@g-font_size_mega: 32/16; // 2.00 // lines: ceil(2.00/@g-line_height) == 2 +@g-font_size_kilo: 24/16; // 1.50 // lines: ceil(1.50/@g-line_height) == 1 +@g-font_size_norm: 16/16; // 1.00 // lines: ceil(1.00/@g-line_height) == 1 +@g-font_size_mill: 12/16; // 0.75 // lines: ceil(0.75/@g-line_height) == 1 +@g-font_size_micr: 8/16; // 0.50 // lines: ceil(0.50/@g-line_height) == 1 + +// new 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/src/_atom.less b/src/_atom.less index ddf81af..555e9b5 100644 --- a/src/_atom.less +++ b/src/_atom.less @@ -39,3 +39,173 @@ @media screen and (min-width: 60em) { .-pt-1vru-sG { .-pt-1vru; } } @media screen and (min-width: 75em) { .-pt-1vru-sT { .-pt-1vru; } } @media screen and (min-width: 90em) { .-pt-1vru-sP { .-pt-1vru; } } + + +@import (reference) url('__tool.fontsize.less'); +// Sets font-size properties. +// First group sets only font-size in ems; +// second group uses the `.font-size-el()` mixin for vertical rhythm. +// See `__tool.fontsize.less` for more info. +// +// ^author +// : Chris Harvey +// ^updated +// : 2016-08-17 +.-fz-micr { font-size: @g-font_size_micr * 1em; } +.-fz-mill { font-size: @g-font_size_mill * 1em; } +.-fz-norm { font-size: @g-font_size_norm * 1em; } +.-fz-kilo { font-size: @g-font_size_kilo * 1em; } +.-fz-mega { font-size: @g-font_size_mega * 1em; } +.-fz-giga { font-size: @g-font_size_giga * 1em; } +.-fz-tera { font-size: @g-font_size_tera * 1em; } +.-fz-peta { font-size: @g-font_size_peta * 1em; } +@media screen { + .-fz-micr-s { .-fz-micr; } + .-fz-mill-s { .-fz-mill; } + .-fz-norm-s { .-fz-norm; } + .-fz-kilo-s { .-fz-kilo; } + .-fz-mega-s { .-fz-mega; } + .-fz-giga-s { .-fz-giga; } + .-fz-tera-s { .-fz-tera; } + .-fz-peta-s { .-fz-peta; } +} +@media print { + .-fz-micr-p { .-fz-micr; } + .-fz-mill-p { .-fz-mill; } + .-fz-norm-p { .-fz-norm; } + .-fz-kilo-p { .-fz-kilo; } + .-fz-mega-p { .-fz-mega; } + .-fz-giga-p { .-fz-giga; } + .-fz-tera-p { .-fz-tera; } + .-fz-peta-p { .-fz-peta; } +} +@media screen and (min-width: 30em) { + .-fz-micr-sK { .-fz-micr; } + .-fz-mill-sK { .-fz-mill; } + .-fz-norm-sK { .-fz-norm; } + .-fz-kilo-sK { .-fz-kilo; } + .-fz-mega-sK { .-fz-mega; } + .-fz-giga-sK { .-fz-giga; } + .-fz-tera-sK { .-fz-tera; } + .-fz-peta-sK { .-fz-peta; } +} +@media screen and (min-width: 45em) { + .-fz-micr-sM { .-fz-micr; } + .-fz-mill-sM { .-fz-mill; } + .-fz-norm-sM { .-fz-norm; } + .-fz-kilo-sM { .-fz-kilo; } + .-fz-mega-sM { .-fz-mega; } + .-fz-giga-sM { .-fz-giga; } + .-fz-tera-sM { .-fz-tera; } + .-fz-peta-sM { .-fz-peta; } +} +@media screen and (min-width: 60em) { + .-fz-micr-sG { .-fz-micr; } + .-fz-mill-sG { .-fz-mill; } + .-fz-norm-sG { .-fz-norm; } + .-fz-kilo-sG { .-fz-kilo; } + .-fz-mega-sG { .-fz-mega; } + .-fz-giga-sG { .-fz-giga; } + .-fz-tera-sG { .-fz-tera; } + .-fz-peta-sG { .-fz-peta; } +} +@media screen and (min-width: 75em) { + .-fz-micr-sT { .-fz-micr; } + .-fz-mill-sT { .-fz-mill; } + .-fz-norm-sT { .-fz-norm; } + .-fz-kilo-sT { .-fz-kilo; } + .-fz-mega-sT { .-fz-mega; } + .-fz-giga-sT { .-fz-giga; } + .-fz-tera-sT { .-fz-tera; } + .-fz-peta-sT { .-fz-peta; } +} +@media screen and (min-width: 90em) { + .-fz-micr-sP { .-fz-micr; } + .-fz-mill-sP { .-fz-mill; } + .-fz-norm-sP { .-fz-norm; } + .-fz-kilo-sP { .-fz-kilo; } + .-fz-mega-sP { .-fz-mega; } + .-fz-giga-sP { .-fz-giga; } + .-fz-tera-sP { .-fz-tera; } + .-fz-peta-sP { .-fz-peta; } +} + + +.-fz-el-micr { .font-size-el(@g-font_size_micr); } +.-fz-el-mill { .font-size-el(@g-font_size_mill); } +.-fz-el-norm { .font-size-el(@g-font_size_norm); } +.-fz-el-kilo { .font-size-el(@g-font_size_kilo); } +.-fz-el-mega { .font-size-el(@g-font_size_mega; 2); } +.-fz-el-giga { .font-size-el(@g-font_size_giga; 2); } +.-fz-el-tera { .font-size-el(@g-font_size_tera; 3); } +.-fz-el-peta { .font-size-el(@g-font_size_peta; 4); } +@media screen { + .-fz-el-micr-s { .-fz-el-micr; } + .-fz-el-mill-s { .-fz-el-mill; } + .-fz-el-norm-s { .-fz-el-norm; } + .-fz-el-kilo-s { .-fz-el-kilo; } + .-fz-el-mega-s { .-fz-el-mega; } + .-fz-el-giga-s { .-fz-el-giga; } + .-fz-el-tera-s { .-fz-el-tera; } + .-fz-el-peta-s { .-fz-el-peta; } +} +@media print { + .-fz-el-micr-p { .-fz-el-micr; } + .-fz-el-mill-p { .-fz-el-mill; } + .-fz-el-norm-p { .-fz-el-norm; } + .-fz-el-kilo-p { .-fz-el-kilo; } + .-fz-el-mega-p { .-fz-el-mega; } + .-fz-el-giga-p { .-fz-el-giga; } + .-fz-el-tera-p { .-fz-el-tera; } + .-fz-el-peta-p { .-fz-el-peta; } +} +@media screen and (min-width: 30em) { + .-fz-el-micr-sK { .-fz-el-micr; } + .-fz-el-mill-sK { .-fz-el-mill; } + .-fz-el-norm-sK { .-fz-el-norm; } + .-fz-el-kilo-sK { .-fz-el-kilo; } + .-fz-el-mega-sK { .-fz-el-mega; } + .-fz-el-giga-sK { .-fz-el-giga; } + .-fz-el-tera-sK { .-fz-el-tera; } + .-fz-el-peta-sK { .-fz-el-peta; } +} +@media screen and (min-width: 45em) { + .-fz-el-micr-sM { .-fz-el-micr; } + .-fz-el-mill-sM { .-fz-el-mill; } + .-fz-el-norm-sM { .-fz-el-norm; } + .-fz-el-kilo-sM { .-fz-el-kilo; } + .-fz-el-mega-sM { .-fz-el-mega; } + .-fz-el-giga-sM { .-fz-el-giga; } + .-fz-el-tera-sM { .-fz-el-tera; } + .-fz-el-peta-sM { .-fz-el-peta; } +} +@media screen and (min-width: 60em) { + .-fz-el-micr-sG { .-fz-el-micr; } + .-fz-el-mill-sG { .-fz-el-mill; } + .-fz-el-norm-sG { .-fz-el-norm; } + .-fz-el-kilo-sG { .-fz-el-kilo; } + .-fz-el-mega-sG { .-fz-el-mega; } + .-fz-el-giga-sG { .-fz-el-giga; } + .-fz-el-tera-sG { .-fz-el-tera; } + .-fz-el-peta-sG { .-fz-el-peta; } +} +@media screen and (min-width: 75em) { + .-fz-el-micr-sT { .-fz-el-micr; } + .-fz-el-mill-sT { .-fz-el-mill; } + .-fz-el-norm-sT { .-fz-el-norm; } + .-fz-el-kilo-sT { .-fz-el-kilo; } + .-fz-el-mega-sT { .-fz-el-mega; } + .-fz-el-giga-sT { .-fz-el-giga; } + .-fz-el-tera-sT { .-fz-el-tera; } + .-fz-el-peta-sT { .-fz-el-peta; } +} +@media screen and (min-width: 90em) { + .-fz-el-micr-sP { .-fz-el-micr; } + .-fz-el-mill-sP { .-fz-el-mill; } + .-fz-el-norm-sP { .-fz-el-norm; } + .-fz-el-kilo-sP { .-fz-el-kilo; } + .-fz-el-mega-sP { .-fz-el-mega; } + .-fz-el-giga-sP { .-fz-el-giga; } + .-fz-el-tera-sP { .-fz-el-tera; } + .-fz-el-peta-sP { .-fz-el-peta; } +} diff --git a/src/_base.forms.less b/src/_base.forms.less index 5941ade..b03406d 100644 --- a/src/_base.forms.less +++ b/src/_base.forms.less @@ -38,7 +38,7 @@ button { // small font size for textual inputs input:not([type="button"]):not([type="reset"]):not([type="submit"]), textarea { - .font-size-el(@g-font_size_h6); + .font-size-el(@g-font_size_mill); } textarea { diff --git a/src/_base.grouping.paras.less b/src/_base.grouping.paras.less index f527728..c4b72c4 100644 --- a/src/_base.grouping.paras.less +++ b/src/_base.grouping.paras.less @@ -9,7 +9,7 @@ p { } pre { - .font-size-el(@g-font_size_h6); + .font-size-el(@g-font_size_mill); text-align: left; text-indent: 0; white-space: pre; diff --git a/src/_base.sections.less b/src/_base.sections.less index fec3d12..58c713d 100644 --- a/src/_base.sections.less +++ b/src/_base.sections.less @@ -28,8 +28,8 @@ footer { h1, h2, h3, h4, h5, h6 { font-weight: 700; } -h1 { .font-size-el(@g-font_size_h1); } -h2 { .font-size-el(@g-font_size_h2); } +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); } diff --git a/src/_base.text.data.less b/src/_base.text.data.less index 6f44f54..6ece378 100644 --- a/src/_base.text.data.less +++ b/src/_base.text.data.less @@ -10,7 +10,7 @@ data { time { } code, kbd, samp { - font-size: (@g-font_size_h6 * 1em); + font-size: (@g-font_size_mill * 1em); white-space: nowrap; code, kbd, samp { font-size: inherit; // undo compounding font sizes diff --git a/src/_base.text.doctext.less b/src/_base.text.doctext.less index 70f37c5..cf6fc4e 100644 --- a/src/_base.text.doctext.less +++ b/src/_base.text.doctext.less @@ -38,7 +38,7 @@ cite { font-style: italic; } sup, sub { - font-size: (@g-font_size_h6 * 1em); + font-size: (@g-font_size_mill * 1em); } sup { } diff --git a/src/_base.text.stress.less b/src/_base.text.stress.less index b1b12c5..7042908 100644 --- a/src/_base.text.stress.less +++ b/src/_base.text.stress.less @@ -21,7 +21,7 @@ u { color: #080; } small { - font-size: (@g-font_size_h6 * 1em); + font-size: (@g-font_size_mill * 1em); } s { text-decoration: line-through; diff --git a/xmeter.css b/xmeter.css index 10b8bb7..9709851 100644 --- a/xmeter.css +++ b/xmeter.css @@ -1,6 +1,6 @@ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ xmeter - Version: 5.0.0 + Version: 5.1.0 Licence: MIT Repo : https://github.com/chharvey/xmeter.git Home : https://github.com/chharvey/xmeter#readme @@ -653,29 +653,29 @@ h6 { font-weight: 700; } h1 { - font-size: 2em; - line-height: 0.75; + font-size: 3em; + line-height: 1; } h2 { - font-size: 1.5em; - line-height: 1; + font-size: 2em; + line-height: 1.5; } h3 { - font-size: 1.25em; - line-height: 1.2; + font-size: 1.5em; + line-height: 1; } h4 { font-size: 1em; line-height: 1.5; } h5 { - font-size: 0.875em; - line-height: 1.71428571; -} -h6 { font-size: 0.75em; line-height: 2; } +h6 { + font-size: 0.5em; + line-height: 3; +} h1 { margin-top: 0; } @@ -1568,4 +1568,480 @@ input[type="search"] { padding-top: 1.5rem; } } +.-fz-micr { + font-size: 0.5em; +} +.-fz-mill { + font-size: 0.75em; +} +.-fz-norm { + font-size: 1em; +} +.-fz-kilo { + font-size: 1.5em; +} +.-fz-mega { + font-size: 2em; +} +.-fz-giga { + font-size: 3em; +} +.-fz-tera { + font-size: 4em; +} +.-fz-peta { + font-size: 6em; +} +@media screen { + .-fz-micr-s { + font-size: 0.5em; + } + .-fz-mill-s { + font-size: 0.75em; + } + .-fz-norm-s { + font-size: 1em; + } + .-fz-kilo-s { + font-size: 1.5em; + } + .-fz-mega-s { + font-size: 2em; + } + .-fz-giga-s { + font-size: 3em; + } + .-fz-tera-s { + font-size: 4em; + } + .-fz-peta-s { + font-size: 6em; + } +} +@media print { + .-fz-micr-p { + font-size: 0.5em; + } + .-fz-mill-p { + font-size: 0.75em; + } + .-fz-norm-p { + font-size: 1em; + } + .-fz-kilo-p { + font-size: 1.5em; + } + .-fz-mega-p { + font-size: 2em; + } + .-fz-giga-p { + font-size: 3em; + } + .-fz-tera-p { + font-size: 4em; + } + .-fz-peta-p { + font-size: 6em; + } +} +@media screen and (min-width: 30em) { + .-fz-micr-sK { + font-size: 0.5em; + } + .-fz-mill-sK { + font-size: 0.75em; + } + .-fz-norm-sK { + font-size: 1em; + } + .-fz-kilo-sK { + font-size: 1.5em; + } + .-fz-mega-sK { + font-size: 2em; + } + .-fz-giga-sK { + font-size: 3em; + } + .-fz-tera-sK { + font-size: 4em; + } + .-fz-peta-sK { + font-size: 6em; + } +} +@media screen and (min-width: 45em) { + .-fz-micr-sM { + font-size: 0.5em; + } + .-fz-mill-sM { + font-size: 0.75em; + } + .-fz-norm-sM { + font-size: 1em; + } + .-fz-kilo-sM { + font-size: 1.5em; + } + .-fz-mega-sM { + font-size: 2em; + } + .-fz-giga-sM { + font-size: 3em; + } + .-fz-tera-sM { + font-size: 4em; + } + .-fz-peta-sM { + font-size: 6em; + } +} +@media screen and (min-width: 60em) { + .-fz-micr-sG { + font-size: 0.5em; + } + .-fz-mill-sG { + font-size: 0.75em; + } + .-fz-norm-sG { + font-size: 1em; + } + .-fz-kilo-sG { + font-size: 1.5em; + } + .-fz-mega-sG { + font-size: 2em; + } + .-fz-giga-sG { + font-size: 3em; + } + .-fz-tera-sG { + font-size: 4em; + } + .-fz-peta-sG { + font-size: 6em; + } +} +@media screen and (min-width: 75em) { + .-fz-micr-sT { + font-size: 0.5em; + } + .-fz-mill-sT { + font-size: 0.75em; + } + .-fz-norm-sT { + font-size: 1em; + } + .-fz-kilo-sT { + font-size: 1.5em; + } + .-fz-mega-sT { + font-size: 2em; + } + .-fz-giga-sT { + font-size: 3em; + } + .-fz-tera-sT { + font-size: 4em; + } + .-fz-peta-sT { + font-size: 6em; + } +} +@media screen and (min-width: 90em) { + .-fz-micr-sP { + font-size: 0.5em; + } + .-fz-mill-sP { + font-size: 0.75em; + } + .-fz-norm-sP { + font-size: 1em; + } + .-fz-kilo-sP { + font-size: 1.5em; + } + .-fz-mega-sP { + font-size: 2em; + } + .-fz-giga-sP { + font-size: 3em; + } + .-fz-tera-sP { + font-size: 4em; + } + .-fz-peta-sP { + font-size: 6em; + } +} +.-fz-el-micr { + font-size: 0.5em; + line-height: 3; +} +.-fz-el-mill { + font-size: 0.75em; + line-height: 2; +} +.-fz-el-norm { + font-size: 1em; + line-height: 1.5; +} +.-fz-el-kilo { + font-size: 1.5em; + line-height: 1; +} +.-fz-el-mega { + font-size: 2em; + line-height: 1.5; +} +.-fz-el-giga { + font-size: 3em; + line-height: 1; +} +.-fz-el-tera { + font-size: 4em; + line-height: 1.125; +} +.-fz-el-peta { + font-size: 6em; + line-height: 1; +} +@media screen { + .-fz-el-micr-s { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-s { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-s { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-s { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-s { + font-size: 2em; + line-height: 1.5; + } + .-fz-el-giga-s { + font-size: 3em; + line-height: 1; + } + .-fz-el-tera-s { + font-size: 4em; + line-height: 1.125; + } + .-fz-el-peta-s { + font-size: 6em; + line-height: 1; + } +} +@media print { + .-fz-el-micr-p { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-p { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-p { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-p { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-p { + font-size: 2em; + line-height: 1.5; + } + .-fz-el-giga-p { + font-size: 3em; + line-height: 1; + } + .-fz-el-tera-p { + font-size: 4em; + line-height: 1.125; + } + .-fz-el-peta-p { + font-size: 6em; + line-height: 1; + } +} +@media screen and (min-width: 30em) { + .-fz-el-micr-sK { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sK { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sK { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sK { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sK { + font-size: 2em; + line-height: 1.5; + } + .-fz-el-giga-sK { + font-size: 3em; + line-height: 1; + } + .-fz-el-tera-sK { + font-size: 4em; + line-height: 1.125; + } + .-fz-el-peta-sK { + font-size: 6em; + line-height: 1; + } +} +@media screen and (min-width: 45em) { + .-fz-el-micr-sM { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sM { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sM { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sM { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sM { + font-size: 2em; + line-height: 1.5; + } + .-fz-el-giga-sM { + font-size: 3em; + line-height: 1; + } + .-fz-el-tera-sM { + font-size: 4em; + line-height: 1.125; + } + .-fz-el-peta-sM { + font-size: 6em; + line-height: 1; + } +} +@media screen and (min-width: 60em) { + .-fz-el-micr-sG { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sG { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sG { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sG { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sG { + font-size: 2em; + line-height: 1.5; + } + .-fz-el-giga-sG { + font-size: 3em; + line-height: 1; + } + .-fz-el-tera-sG { + font-size: 4em; + line-height: 1.125; + } + .-fz-el-peta-sG { + font-size: 6em; + line-height: 1; + } +} +@media screen and (min-width: 75em) { + .-fz-el-micr-sT { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sT { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sT { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sT { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sT { + font-size: 2em; + line-height: 1.5; + } + .-fz-el-giga-sT { + font-size: 3em; + line-height: 1; + } + .-fz-el-tera-sT { + font-size: 4em; + line-height: 1.125; + } + .-fz-el-peta-sT { + font-size: 6em; + line-height: 1; + } +} +@media screen and (min-width: 90em) { + .-fz-el-micr-sP { + font-size: 0.5em; + line-height: 3; + } + .-fz-el-mill-sP { + font-size: 0.75em; + line-height: 2; + } + .-fz-el-norm-sP { + font-size: 1em; + line-height: 1.5; + } + .-fz-el-kilo-sP { + font-size: 1.5em; + line-height: 1; + } + .-fz-el-mega-sP { + font-size: 2em; + line-height: 1.5; + } + .-fz-el-giga-sP { + font-size: 3em; + line-height: 1; + } + .-fz-el-tera-sP { + font-size: 4em; + line-height: 1.125; + } + .-fz-el-peta-sP { + font-size: 6em; + line-height: 1; + } +} diff --git a/xmeter.less b/xmeter.less index dd93095..516c917 100644 --- a/xmeter.less +++ b/xmeter.less @@ -1,7 +1,7 @@ /*~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*\ xmeter - Version: 5.0.0 + Version: 5.1.0 Licence: MIT Repo : https://github.com/chharvey/xmeter.git Home : https://github.com/chharvey/xmeter#readme diff --git a/xmeter.min.css b/xmeter.min.css index ba78bf1..9099d76 100644 --- a/xmeter.min.css +++ b/xmeter.min.css @@ -1 +1 @@ -body,mark{color:#000}a,abbr[title],del,ins,s,u{text-decoration:none}progress,sub,sup{vertical-align:baseline}audio:not([controls]),hr{height:0;display:none}[hidden],hr,template{display:none}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend,ol,td,th,ul{padding:0}body,pre,table{text-align:left}caption,th{text-align:center}img,legend,table{max-width:100%}pre,textarea{overflow:auto}.o-List,ol,ul{list-style:none}body{background:#fff}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0}address,b,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,kbd,pre,samp,small,strong,sub,sup,th,var{font:inherit}mark{background:#ff0}ol,ul{padding:0 0 0 4rem}/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#00e}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;cursor:help}h1{margin:.67em 0}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace}figure{margin:0 0 1em}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}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}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;display:table;white-space:normal}[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-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h4,html{line-height:1.5}b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:700}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0 solid;content:' ';content:'';content:none}html{font-size:100%;font-size:16px}blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin-bottom:1.5rem}h1{padding-top:1.5rem;font-size:2em;line-height:.75;margin-top:0}abbr,b,br,cite,code,data,dfn,em,i,kbd,mark,q,s,samp,small,span,strong,sub,sup,time,u,var{line-height:0}a,del,ins{display:contents}h2{font-size:1.5em;line-height:1}h3{font-size:1.25em;line-height:1.2}h4{font-size:1em}h5{font-size:.875em;line-height:1.71428571}code,kbd,pre,samp,small,sub,sup{font-size:.75em}h6,input:not([type=button]):not([type=reset]):not([type=submit]),textarea{font-size:.75em;line-height:2}pre{line-height:2;text-indent:0;white-space:pre}dd>dl,dd>ol,dd>ul,dt>dl,dt>ol,dt>ul,li>dl,li>ol,li>ul{margin-bottom:0}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}cite,em,i,var{font-style:italic}u{text-decoration:underline;color:#080}s{text-decoration:line-through;color:#b00}ins{background:#a6f3a6}del{background:#f8cbcb}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}img{border-style:none;width:auto;height:auto;font-style:italic;vertical-align:middle}button,fieldset,input,select,textarea{border-width:1px;margin-top:-2px;border-style:solid;border-color:silver;border-color:rgba(0,0,0,.25)}fieldset{padding:0 1rem;margin-left:0;margin-right:0}button,input,select,textarea{padding:0 .25rem}textarea{width:30rem;height:9rem;line-height:1.5}.h-Block,.o-Flex,.o-Grid{line-height:inherit}button,input[type=button],input[type=reset],input[type=submit]{background-color:silver;background-color:rgba(0,0,0,.25)}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.o-List{padding-left:0}.o-Flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}@media screen{a:not([href]){opacity:.5}.o-List-s{padding-left:0;list-style:none}.o-Flex-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-s{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media print{*,::after,::before{background:0 0!important;box-shadow:none!important;text-shadow:none!important}.o-List-p{padding-left:0;list-style:none}.o-Flex-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-p{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sK{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sM{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sG{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sT{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sP{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}.o-Grid{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}@media screen{.o-Grid-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-s{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media print{.o-Grid-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-p{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:30em){.o-Grid-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sK{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:45em){.o-Grid-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sM{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:60em){.o-Grid-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sG{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:75em){.o-Grid-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sT{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:90em){.o-Grid-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sP{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}.h-Block-sP{display:block;line-height:inherit}}.h-Block{display:block}@media screen{.h-Block-s{display:block;line-height:inherit}}@media print{.h-Block-p{display:block;line-height:inherit}}@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}.h-Inline-sT{display:inline;line-height:0}}.h-Inline{display:inline;line-height:0}@media screen{.h-Inline-s{display:inline;line-height:0}}@media print{.h-Inline-p{display:inline;line-height:0}}@media screen and (min-width:30em){.h-Inline-sK{display:inline;line-height:0}}@media screen and (min-width:45em){.h-Inline-sM{display:inline;line-height:0}}@media screen and (min-width:60em){.h-Inline-sG{display:inline;line-height:0}}@media screen and (min-width:90em){.h-Inline-sP{display:inline;line-height:0}.h-Clearfix-sP::after{content:'';display:block;clear:both}}.h-Clearfix::after{content:'';display:block;clear:both}.-mb-1vru{margin-bottom:1.5rem}.-pt-1vru{padding-top:1.5rem}@media screen{.h-Clearfix-s::after{content:'';display:block;clear:both}.-mb-1vru-s{margin-bottom:1.5rem}.-pt-1vru-s{padding-top:1.5rem}}@media print{.h-Clearfix-p::after{content:'';display:block;clear:both}.-mb-1vru-p{margin-bottom:1.5rem}.-pt-1vru-p{padding-top:1.5rem}}@media screen and (min-width:30em){.h-Clearfix-sK::after{content:'';display:block;clear:both}.-mb-1vru-sK{margin-bottom:1.5rem}.-pt-1vru-sK{padding-top:1.5rem}}@media screen and (min-width:45em){.h-Clearfix-sM::after{content:'';display:block;clear:both}.-mb-1vru-sM{margin-bottom:1.5rem}.-pt-1vru-sM{padding-top:1.5rem}}@media screen and (min-width:60em){.h-Clearfix-sG::after{content:'';display:block;clear:both}.-mb-1vru-sG{margin-bottom:1.5rem}.-pt-1vru-sG{padding-top:1.5rem}}@media screen and (min-width:75em){.h-Clearfix-sT::after{content:'';display:block;clear:both}.-mb-1vru-sT{margin-bottom:1.5rem}.-pt-1vru-sT{padding-top:1.5rem}}@media screen and (min-width:90em){.-mb-1vru-sP{margin-bottom:1.5rem}.-pt-1vru-sP{padding-top:1.5rem}} \ No newline at end of file +body,mark{color:#000}a,abbr[title],del,ins,s,u{text-decoration:none}progress,sub,sup{vertical-align:baseline}audio:not([controls]),hr{height:0;display:none}[hidden],hr,template{display:none}button,hr,input{overflow:visible}[type=checkbox],[type=radio],legend{box-sizing:border-box;padding:0}legend,ol,td,th,ul{padding:0}body,pre,table{text-align:left}caption,th{text-align:center}img,legend,table{max-width:100%}pre,textarea{overflow:auto}.o-List,ol,ul{list-style:none}body{background:#fff}blockquote,body,dd,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,hr,ol,p,pre,ul{margin:0}address,b,cite,code,dfn,em,h1,h2,h3,h4,h5,h6,i,kbd,pre,samp,small,strong,sub,sup,th,var{font:inherit}mark{background:#ff0}ol,ul{padding:0 0 0 4rem}/*! normalize.css v4.1.1 | MIT License | github.com/necolas/normalize.css */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block}a{background-color:transparent;-webkit-text-decoration-skip:objects;color:#00e}a:active,a:hover{outline-width:0}abbr[title]{border-bottom:none;cursor:help}h1{margin:.67em 0}sub,sup{line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}svg:not(:root){overflow:hidden}code,kbd,pre,samp{font-family:monospace,monospace}figure{margin:0 0 1em}hr{box-sizing:content-box}button,input,select,textarea{font:inherit;margin:0}optgroup{font-weight:700}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}fieldset{border:1px solid silver;margin:0 2px}legend{color:inherit;display:table;white-space:normal}[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-input-placeholder{color:inherit;opacity:.54}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}h1,h3{line-height:1}h2,h4,html{line-height:1.5}b,dfn,h1,h2,h3,h4,h5,h6,strong,th{font-weight:700}*,::after,::before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;border:0 solid;content:' ';content:'';content:none}html{font-size:100%;font-size:16px}blockquote,dl,fieldset,figure,h1,h2,h3,h4,h5,h6,ol,p,pre,table,ul{margin-bottom:1.5rem}h1{padding-top:1.5rem;font-size:3em;margin-top:0}abbr,b,br,cite,code,data,dfn,em,i,kbd,mark,q,s,samp,small,span,strong,sub,sup,time,u,var{line-height:0}a,del,ins{display:contents}h2{font-size:2em}h3{font-size:1.5em}h4{font-size:1em}h5,input:not([type=button]):not([type=reset]):not([type=submit]),textarea{font-size:.75em;line-height:2}h6{font-size:.5em;line-height:3}code,kbd,pre,samp,small,sub,sup{font-size:.75em}pre{line-height:2;text-indent:0;white-space:pre}dd>dl,dd>ol,dd>ul,dt>dl,dt>ol,dt>ul,li>dl,li>ol,li>ul{margin-bottom:0}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}cite,em,i,var{font-style:italic}u{text-decoration:underline;color:#080}s{text-decoration:line-through;color:#b00}ins{background:#a6f3a6}del{background:#f8cbcb}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}img{border-style:none;width:auto;height:auto;font-style:italic;vertical-align:middle}button,fieldset,input,select,textarea{border-width:1px;margin-top:-2px;border-style:solid;border-color:silver;border-color:rgba(0,0,0,.25)}fieldset{padding:0 1rem;margin-left:0;margin-right:0}button,input,select,textarea{padding:0 .25rem}textarea{width:30rem;height:9rem;line-height:1.5}.h-Block,.o-Flex,.o-Grid{line-height:inherit}button,input[type=button],input[type=reset],input[type=submit]{background-color:silver;background-color:rgba(0,0,0,.25)}input[type=search]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.o-List{padding-left:0}.o-Flex{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}@media screen{a:not([href]){opacity:.5}.o-List-s{padding-left:0;list-style:none}.o-Flex-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-s{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}@media print{*,::after,::before{background:0 0!important;box-shadow:none!important;text-shadow:none!important}.o-List-p{padding-left:0;list-style:none}.o-Flex-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-p{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sK{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sM{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sG{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sT{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-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:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-justify-content:space-between;-moz-justify-content:space-between;-ms-justify-content:space-between;justify-content:space-between}.o-Flex__Item-sP{-webkit-box-flex:auto;-moz-box-flex:auto;-webkit-flex:auto;-moz-flex:auto;-ms-flex:auto;flex:auto}}.o-Grid{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}@media screen{.o-Grid-s{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-s{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media print{.o-Grid-p{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-p{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:30em){.o-Grid-sK{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sK{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:45em){.o-Grid-sM{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sM{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:60em){.o-Grid-sG{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sG{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:75em){.o-Grid-sT{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sT{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}}@media screen and (min-width:90em){.o-Grid-sP{display:-webkit-box;display:-moz-box;display:-ms-flexbox;display:-webkit-flex;display:flex;line-height:inherit;-webkit-flex-wrap:wrap;-moz-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap}.o-Grid__Item-sP{-webkit-box-flex:100%;-moz-box-flex:100%;-webkit-flex:100%;-moz-flex:100%;-ms-flex:100%;flex:100%}.h-Block-sP{display:block;line-height:inherit}}.h-Block{display:block}@media screen{.h-Block-s{display:block;line-height:inherit}}@media print{.h-Block-p{display:block;line-height:inherit}}@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}.h-Inline-sT{display:inline;line-height:0}}.h-Inline{display:inline;line-height:0}@media screen{.h-Inline-s{display:inline;line-height:0}}@media print{.h-Inline-p{display:inline;line-height:0}}@media screen and (min-width:30em){.h-Inline-sK{display:inline;line-height:0}}@media screen and (min-width:45em){.h-Inline-sM{display:inline;line-height:0}}@media screen and (min-width:60em){.h-Inline-sG{display:inline;line-height:0}}@media screen and (min-width:90em){.h-Inline-sP{display:inline;line-height:0}.h-Clearfix-sP::after{content:'';display:block;clear:both}}.h-Clearfix::after{content:'';display:block;clear:both}.-mb-1vru{margin-bottom:1.5rem}.-pt-1vru{padding-top:1.5rem}.-fz-micr{font-size:.5em}.-fz-mill{font-size:.75em}.-fz-norm{font-size:1em}.-fz-kilo{font-size:1.5em}.-fz-mega{font-size:2em}.-fz-giga{font-size:3em}.-fz-tera{font-size:4em}.-fz-peta{font-size:6em}@media screen{.h-Clearfix-s::after{content:'';display:block;clear:both}.-mb-1vru-s{margin-bottom:1.5rem}.-pt-1vru-s{padding-top:1.5rem}.-fz-micr-s{font-size:.5em}.-fz-mill-s{font-size:.75em}.-fz-norm-s{font-size:1em}.-fz-kilo-s{font-size:1.5em}.-fz-mega-s{font-size:2em}.-fz-giga-s{font-size:3em}.-fz-tera-s{font-size:4em}.-fz-peta-s{font-size:6em}}@media print{.h-Clearfix-p::after{content:'';display:block;clear:both}.-mb-1vru-p{margin-bottom:1.5rem}.-pt-1vru-p{padding-top:1.5rem}.-fz-micr-p{font-size:.5em}.-fz-mill-p{font-size:.75em}.-fz-norm-p{font-size:1em}.-fz-kilo-p{font-size:1.5em}.-fz-mega-p{font-size:2em}.-fz-giga-p{font-size:3em}.-fz-tera-p{font-size:4em}.-fz-peta-p{font-size:6em}}@media screen and (min-width:30em){.h-Clearfix-sK::after{content:'';display:block;clear:both}.-mb-1vru-sK{margin-bottom:1.5rem}.-pt-1vru-sK{padding-top:1.5rem}.-fz-micr-sK{font-size:.5em}.-fz-mill-sK{font-size:.75em}.-fz-norm-sK{font-size:1em}.-fz-kilo-sK{font-size:1.5em}.-fz-mega-sK{font-size:2em}.-fz-giga-sK{font-size:3em}.-fz-tera-sK{font-size:4em}.-fz-peta-sK{font-size:6em}}@media screen and (min-width:45em){.h-Clearfix-sM::after{content:'';display:block;clear:both}.-mb-1vru-sM{margin-bottom:1.5rem}.-pt-1vru-sM{padding-top:1.5rem}.-fz-micr-sM{font-size:.5em}.-fz-mill-sM{font-size:.75em}.-fz-norm-sM{font-size:1em}.-fz-kilo-sM{font-size:1.5em}.-fz-mega-sM{font-size:2em}.-fz-giga-sM{font-size:3em}.-fz-tera-sM{font-size:4em}.-fz-peta-sM{font-size:6em}}@media screen and (min-width:60em){.h-Clearfix-sG::after{content:'';display:block;clear:both}.-mb-1vru-sG{margin-bottom:1.5rem}.-pt-1vru-sG{padding-top:1.5rem}.-fz-micr-sG{font-size:.5em}.-fz-mill-sG{font-size:.75em}.-fz-norm-sG{font-size:1em}.-fz-kilo-sG{font-size:1.5em}.-fz-mega-sG{font-size:2em}.-fz-giga-sG{font-size:3em}.-fz-tera-sG{font-size:4em}.-fz-peta-sG{font-size:6em}}@media screen and (min-width:75em){.h-Clearfix-sT::after{content:'';display:block;clear:both}.-mb-1vru-sT{margin-bottom:1.5rem}.-pt-1vru-sT{padding-top:1.5rem}.-fz-micr-sT{font-size:.5em}.-fz-mill-sT{font-size:.75em}.-fz-norm-sT{font-size:1em}.-fz-kilo-sT{font-size:1.5em}.-fz-mega-sT{font-size:2em}.-fz-giga-sT{font-size:3em}.-fz-tera-sT{font-size:4em}.-fz-peta-sT{font-size:6em}}@media screen and (min-width:90em){.-mb-1vru-sP{margin-bottom:1.5rem}.-pt-1vru-sP{padding-top:1.5rem}.-fz-micr-sP{font-size:.5em}.-fz-mill-sP{font-size:.75em}.-fz-norm-sP{font-size:1em}.-fz-kilo-sP{font-size:1.5em}.-fz-mega-sP{font-size:2em}.-fz-giga-sP{font-size:3em}.-fz-tera-sP{font-size:4em}.-fz-peta-sP{font-size:6em}}.-fz-el-micr{font-size:.5em;line-height:3}.-fz-el-mill{font-size:.75em;line-height:2}.-fz-el-norm{font-size:1em;line-height:1.5}.-fz-el-kilo{font-size:1.5em;line-height:1}.-fz-el-mega{font-size:2em;line-height:1.5}.-fz-el-giga{font-size:3em;line-height:1}.-fz-el-tera{font-size:4em;line-height:1.125}.-fz-el-peta{font-size:6em;line-height:1}@media screen{.-fz-el-micr-s{font-size:.5em;line-height:3}.-fz-el-mill-s{font-size:.75em;line-height:2}.-fz-el-norm-s{font-size:1em;line-height:1.5}.-fz-el-kilo-s{font-size:1.5em;line-height:1}.-fz-el-mega-s{font-size:2em;line-height:1.5}.-fz-el-giga-s{font-size:3em;line-height:1}.-fz-el-tera-s{font-size:4em;line-height:1.125}.-fz-el-peta-s{font-size:6em;line-height:1}}@media print{.-fz-el-micr-p{font-size:.5em;line-height:3}.-fz-el-mill-p{font-size:.75em;line-height:2}.-fz-el-norm-p{font-size:1em;line-height:1.5}.-fz-el-kilo-p{font-size:1.5em;line-height:1}.-fz-el-mega-p{font-size:2em;line-height:1.5}.-fz-el-giga-p{font-size:3em;line-height:1}.-fz-el-tera-p{font-size:4em;line-height:1.125}.-fz-el-peta-p{font-size:6em;line-height:1}}@media screen and (min-width:30em){.-fz-el-micr-sK{font-size:.5em;line-height:3}.-fz-el-mill-sK{font-size:.75em;line-height:2}.-fz-el-norm-sK{font-size:1em;line-height:1.5}.-fz-el-kilo-sK{font-size:1.5em;line-height:1}.-fz-el-mega-sK{font-size:2em;line-height:1.5}.-fz-el-giga-sK{font-size:3em;line-height:1}.-fz-el-tera-sK{font-size:4em;line-height:1.125}.-fz-el-peta-sK{font-size:6em;line-height:1}}@media screen and (min-width:45em){.-fz-el-micr-sM{font-size:.5em;line-height:3}.-fz-el-mill-sM{font-size:.75em;line-height:2}.-fz-el-norm-sM{font-size:1em;line-height:1.5}.-fz-el-kilo-sM{font-size:1.5em;line-height:1}.-fz-el-mega-sM{font-size:2em;line-height:1.5}.-fz-el-giga-sM{font-size:3em;line-height:1}.-fz-el-tera-sM{font-size:4em;line-height:1.125}.-fz-el-peta-sM{font-size:6em;line-height:1}}@media screen and (min-width:60em){.-fz-el-micr-sG{font-size:.5em;line-height:3}.-fz-el-mill-sG{font-size:.75em;line-height:2}.-fz-el-norm-sG{font-size:1em;line-height:1.5}.-fz-el-kilo-sG{font-size:1.5em;line-height:1}.-fz-el-mega-sG{font-size:2em;line-height:1.5}.-fz-el-giga-sG{font-size:3em;line-height:1}.-fz-el-tera-sG{font-size:4em;line-height:1.125}.-fz-el-peta-sG{font-size:6em;line-height:1}}@media screen and (min-width:75em){.-fz-el-micr-sT{font-size:.5em;line-height:3}.-fz-el-mill-sT{font-size:.75em;line-height:2}.-fz-el-norm-sT{font-size:1em;line-height:1.5}.-fz-el-kilo-sT{font-size:1.5em;line-height:1}.-fz-el-mega-sT{font-size:2em;line-height:1.5}.-fz-el-giga-sT{font-size:3em;line-height:1}.-fz-el-tera-sT{font-size:4em;line-height:1.125}.-fz-el-peta-sT{font-size:6em;line-height:1}}@media screen and (min-width:90em){.-fz-el-micr-sP{font-size:.5em;line-height:3}.-fz-el-mill-sP{font-size:.75em;line-height:2}.-fz-el-norm-sP{font-size:1em;line-height:1.5}.-fz-el-kilo-sP{font-size:1.5em;line-height:1}.-fz-el-mega-sP{font-size:2em;line-height:1.5}.-fz-el-giga-sP{font-size:3em;line-height:1}.-fz-el-tera-sP{font-size:4em;line-height:1.125}.-fz-el-peta-sP{font-size:6em;line-height:1}} \ No newline at end of file