diff --git a/docs/layouts/default.html b/docs/layouts/default.html index 62c8c2a..d78dfcd 100644 --- a/docs/layouts/default.html +++ b/docs/layouts/default.html @@ -7,31 +7,31 @@ <%include "meta.html">& - -
- -
    + +
    + +
      {% .site.menu[] %} -
    1. +
    2. {{.name}}
      3. {% end %}
    -
    +
    <%ifndef BODY_TITLE>&

    {{.snippets.title}}

    <%else><%call BODY_TITLE><%endif>& <%ifndef BODY_BLOCK>& -
    +
    {{.page._content}}
    <%else><%call BODY_BLOCK><%endif>&
    -
    +
    <%include "footer.html">
    diff --git a/docs/layouts/footer.html b/docs/layouts/footer.html index a9e18fb..856d0aa 100644 --- a/docs/layouts/footer.html +++ b/docs/layouts/footer.html @@ -2,17 +2,17 @@ <# # License, etc. #> -
    +
    {{.snippets.footer}}
    <# # Links to GitHub #> -
      -
    1. code
      2. -
    2. issues
      3. -
    3. wiki
      4. -
    4. releases
      5. +
        +
      1. code
        2. +
      2. issues
        3. +
      3. wiki
        4. +
      4. releases
      <# vim:ts=2:sw=2:ai:et:fileencoding=utf8:syntax=html diff --git a/docs/layouts/page.html b/docs/layouts/page.html index 39c18a4..39b1952 100644 --- a/docs/layouts/page.html +++ b/docs/layouts/page.html @@ -4,12 +4,12 @@ #> <%define BODY_BLOCK <# Table of contents #> -
      -

      {{.snippets."toc-title"}}

      +
      +

      {{.snippets."toc-title"}}

      {{.page._toc}}
      <# Document body #> -
      +
      {{.page._content}}
      >& diff --git a/docs/styles/blocks.css b/docs/styles/blocks.css index f3fd7fe..bb01fca 100644 --- a/docs/styles/blocks.css +++ b/docs/styles/blocks.css @@ -8,7 +8,7 @@ ** Header ***********************************************************************/ -&BEM{#Header} { +&BEM{#header} { border-bottom: &HorizontalRule; margin-bottom: 1.5rem; } @@ -17,17 +17,17 @@ ** Body ***********************************************************************/ -&BEM{#Panel} { +&BEM{#panel} { border: 0.3rem solid &ColorQuaternary; } -&BEM{#Panel}{}{side-right} { +&BEM{#panel}{}{side-right} { float: right; margin: 0 0 0 1rem; } /* -&BEM{#Panel}{}{side-left} { +&BEM{#panel}{}{side-left} { float: left; margin: 0 1rem 0 0; } @@ -37,7 +37,7 @@ ** Footer ***********************************************************************/ -&BEM{#Footer} { +&BEM{#footer} { border-top: &HorizontalRule; } @@ -45,7 +45,7 @@ // Logo //////////////////////////////////////////////////////////////////////// -&BEM{Logo} { +&BEM{logo} { font-size: 2.6rem; } @@ -53,16 +53,16 @@ // Version //////////////////////////////////////////////////////////////////////// -&BEM{Version} { +&BEM{version} { font-size: 1.2rem; font-weight: bold; } //////////////////////////////////////////////////////////////////////// -// MenuBar +// Menu Bar //////////////////////////////////////////////////////////////////////// -&BEM{MenuBar} { +&BEM{menu-bar} { display: inline; padding: 0; font-variant: small-caps; @@ -70,21 +70,21 @@ list-style: none; } -&BEM{MenuBar}{Item} { +&BEM{menu-bar}{item} { display: inline; font-size: 120%; font-weight: bold; } -&BEM{MenuBar}{Item}:first-child { +&BEM{menu-bar}{item}:first-child { margin-left: 1rem; } -&BEM{MenuBar}{Item}:not(:last-child) { +&BEM{menu-bar}{item}:not(:last-child) { margin-right: 2rem; } -&BEM{MenuBar}{Item}{active}{> a} { +&BEM{menu-bar}{item}{active}{> a} { text-decoration: underline; } @@ -92,20 +92,20 @@ // Toc //////////////////////////////////////////////////////////////////////// -&BEM{Toc} { +&BEM{toc} { width: 16em; padding: 0 1em; text-align: center; font-size: 80%; } -&BEM{Toc}{Title} { +&BEM{toc}{title} { margin-bottom: 0.5em; border-bottom: 0.1rem solid &ColorQuaternary; font-weight: bold; } -&BEM{Toc} ul { +&BEM{toc} ul { margin-top: 0; margin-bottom: 0; list-style-type: square; @@ -114,7 +114,7 @@ line-height: 1.4; } -&BEM{Toc} li { +&BEM{toc} li { margin: 0; } @@ -122,11 +122,11 @@ // License //////////////////////////////////////////////////////////////////////// -&BEM{License} { +&BEM{license} { text-align: center; } -&BEM{License} > p { +&BEM{license} > p { margin-bottom: 0; } @@ -134,28 +134,28 @@ // Repository //////////////////////////////////////////////////////////////////////// -&BEM{Repository} { +&BEM{repository} { text-align: center; list-style: none; } -&BEM{Repository}{Section} { +&BEM{repository}{section} { display: inline; font-variant: small-caps; font-weight: bold; } -&BEM{Repository}{Section}:first-child:before { +&BEM{repository}{section}:first-child:before { content: "❲ "; color: &ColorSecondary; } -&BEM{Repository}{Section}:not(last-child):after { +&BEM{repository}{section}:not(last-child):after { content: " ❘ "; color: &ColorSecondary; } -&BEM{Repository}{Section}:last-child:after { +&BEM{repository}{section}:last-child:after { content: " ❳"; color: &ColorSecondary; } diff --git a/docs/styles/jqt.css b/docs/styles/jqt.css index 08b938b..bf8f79b 100644 --- a/docs/styles/jqt.css +++ b/docs/styles/jqt.css @@ -28,7 +28,7 @@ * Content **********************************************************************/ -body.Container { +body.\#container { max-width: 800px; } @@ -37,7 +37,7 @@ body { } h2:target::after, -h3:target::after, +h2:target::after, h4:target::after { content: " §"; color: &ColorQuaternary; @@ -81,7 +81,7 @@ pre > code { // TODO: posar id en blockquote:first-child { +.\#content > blockquote:first-child { float: right; margin: 0 0 0 auto; padding-top: 0; @@ -89,11 +89,11 @@ pre > code { max-width: 20em; font-family: "Liberation Serif", "Times New Roman", Times, serif; } -.Content > blockquote:first-child > p { +.\#content > blockquote:first-child > p { margin: 0; padding: 0; } -.Content > blockquote:first-child > p + p { +.\#content > blockquote:first-child > p + p { text-align: right; } diff --git a/docs/styles/milligram.css b/docs/styles/milligram.css index c88b381..ad7d5d4 100644 --- a/docs/styles/milligram.css +++ b/docs/styles/milligram.css @@ -6,7 +6,7 @@ &define{ColorInitial}{&White} &define{ColorPrimary}{&DarkCyan} &define{ColorSecondary}{&Black} -&define{ColorTertiary}{&LightGrey} +&define{ColorTertiary}{&Lavender} &define{ColorQuaternary}{&LightGrey} &define{Scale}{1} diff --git a/docs/styles/new/button.css b/docs/styles/new/button.css index c3d8595..4d21179 100644 --- a/docs/styles/new/button.css +++ b/docs/styles/new/button.css @@ -13,7 +13,7 @@ // Macros &define{_buttons}{ - .Button&1, + .button&1, button&1, input[type='button']&1, input[type='reset']&1, @@ -53,49 +53,49 @@ outline: 0; } -&_buttons{.Button-disabled}, +&_buttons{.button--disabled}, &_buttons{[disabled]} { cursor: default; opacity: .5; } -&_buttons_active{.Button-disabled}, +&_buttons_active{.button--disabled}, &_buttons_active{[disabled]} { background-color: &ColorPrimary; border-color: &ColorPrimary; } -&_buttons{.Button-outline} { +&_buttons{.button--outline} { background-color: transparent; color: &ColorPrimary; } -&_buttons_active{.Button-outline} { +&_buttons_active{.button--outline} { background-color: transparent; border-color: &ColorSecondary; color: &ColorSecondary; } -&_buttons_active{.Button-outline.Button-disabled}, -&_buttons_active{.Button-outline[disabled]} { +&_buttons_active{.button--outline.button--disabled}, +&_buttons_active{.button--outline[disabled]} { color: &ColorPrimary; border-color: inherit; } -&_buttons{.Button-clear} { +&_buttons{.button--clear} { color: &ColorPrimary; background-color: transparent; border-color: transparent; } -&_buttons_active{.Button-clear} { +&_buttons_active{.button--clear} { color: &ColorSecondary; background-color: transparent; border-color: transparent; } -&_buttons_active{.Button-clear.Button-disabled}, -&_buttons_active{.Button-clear[disabled]} { +&_buttons_active{.button--clear.button--disabled}, +&_buttons_active{.button--clear[disabled]} { color: &ColorPrimary; } diff --git a/docs/styles/new/default.css b/docs/styles/new/default.css index 141f78e..04ea2a8 100644 --- a/docs/styles/new/default.css +++ b/docs/styles/new/default.css @@ -6,7 +6,7 @@ &include{new/colornames.css} &define{Esep}{__} -&define{Msep}{_} +&define{Msep}{-\-} &define{B}{.&if{&1 =~ [A-Za-z_-]*}&1&else\&1&endif} &define{E}{&ifneq{&1}{}&Esep&1&endif} diff --git a/docs/styles/new/form.css b/docs/styles/new/form.css index 6b7ef39..08f3b2c 100644 --- a/docs/styles/new/form.css +++ b/docs/styles/new/form.css @@ -72,7 +72,7 @@ input[type='radio'] { display: inline; } -&BEM{Label}{}{inline} { +&BEM{label}{}{inline} { display: inline-block; font-weight: normal; margin-left: .5rem; diff --git a/docs/styles/new/grid.css b/docs/styles/new/grid.css index 737ed6f..e9ea137 100644 --- a/docs/styles/new/grid.css +++ b/docs/styles/new/grid.css @@ -10,8 +10,8 @@ // Grid // –––––––––––––––––––––––––––––––––––––––––––––––––– -// .Container is main centered wrapper with a max width of 112.0rem (1120px) -&BEM{Container} { +// .container is main centered wrapper with a max width of 112.0rem (1120px) +&BEM{#container} { margin: 0 auto; max-width: 112.0rem; padding: 0 2.0rem; @@ -21,57 +21,57 @@ // Using flexbox for the grid, inspired by Philip Walton: // http://philipwalton.github.io/solved-by-flexbox/demos/grids/ -// By default each .Column within a .Row will evenly take up -// available width, and the height of each .Column with take -// up the height of the tallest .Column in the same .Row -&BEM{Row} { +// By default each .column within a .row will evenly take up +// available width, and the height of each .column with take +// up the height of the tallest .column in the same .row +&BEM{#row} { display: flex; flex-direction: column; padding: 0; width: 100%; } -&BEM{Row}{}{noPadding} { +&BEM{#row}{}{noPadding} { padding: 0; } -&BEM{Row}{}{noPadding}{> &BEM{Column}} { +&BEM{#row}{}{noPadding}{> &BEM{#column}} { padding: 0; } -&BEM{Row}{}{wrap} { +&BEM{#row}{}{wrap} { flex-wrap: wrap; } // Vertically Align Columns -// .Row-align-* vertically aligns every .Column in the .Row -&BEM{Row}{}{align-top} { +// .row-align-* vertically aligns every .column in the .row +&BEM{#row}{}{align-top} { -ms-grid-row-align: flex-start; align-items: flex-start; } -&BEM{Row}{}{align-bottom} { +&BEM{#row}{}{align-bottom} { -ms-grid-row-align: flex-end; align-items: flex-end; } -&BEM{Row}{}{align-center} { +&BEM{#row}{}{align-center} { -ms-grid-row-align: center; align-items: center; } -&BEM{Row}{}{align-stretch} { +&BEM{#row}{}{align-stretch} { -ms-grid-row-align: stretch; align-items: stretch; } -&BEM{Row}{}{align-baseline} { +&BEM{#row}{}{align-baseline} { -ms-grid-row-align: baseline; align-items: baseline; } -// JJOR: original = .Row .Col..., removed .Row -&BEM{Column} { +// JJOR: original = .row .col..., removed .row +&BEM{#column} { display: block; flex: 1; margin-left: 0; @@ -81,8 +81,8 @@ // Column Offsets &define{_col_offset}{ -// JJOR: original = .Row .Col..., removed .Row - &BEM{Column}{}{offset-&1} { +// JJOR: original = .row .col..., removed .row + &BEM{#column}{}{offset-&1} { margin-left: &2; } } @@ -104,8 +104,8 @@ // across the grid. However, you can specify individual // columns to take up a certain size of the available area &define{_col_size}{ -// JJOR: original = .Row .Col..., removed .Row - &BEM{Column}{}{size-&1} { +// JJOR: original = .row .Col..., removed .row + &BEM{#column}{}{size-&1} { flex: 0 0 &2; max-width: &2; } @@ -123,30 +123,30 @@ &_col_size{80}{80%} &_col_size{90}{90%} -// .Column-align-* vertically aligns an individual .Column +// .column-align-* vertically aligns an individual .column // JJOR: original = .C .C-m (bug?), changed to .C.C-m -// JJOR: original = .Row .Col..., removed .Row -&BEM{Column}{}{align-top} { +// JJOR: original = .row .Col..., removed .row +&BEM{#column}{}{align-top} { align-self: flex-start; } -&BEM{Column}{}{align-bottom} { +&BEM{#column}{}{align-bottom} { align-self: flex-end; } -&BEM{Column}{}{align-center} { +&BEM{#column}{}{align-center} { align-self: center; } // Larger than mobile screen @media (min-width: 40rem) { // Safari desktop has a bug using `rem`, but Safari mobile works - &BEM{Row} { + &BEM{#row} { flex-direction: row; margin-left: -1.0rem; width: calc(100% + 2.0rem); } - // JJOR: original = .Row .Col..., removed .Row - &BEM{Column} { + // JJOR: original = .row .Col..., removed .row + &BEM{#column} { margin-bottom: inherit; padding: 0 1.0rem; } diff --git a/docs/styles/new/spacing.css b/docs/styles/new/spacing.css index 165513e..2fc0a2f 100644 --- a/docs/styles/new/spacing.css +++ b/docs/styles/new/spacing.css @@ -18,7 +18,7 @@ // Spacing // –––––––––––––––––––––––––––––––––––––––––––––––––– -&BEM{Button}, +&BEM{button}, button, dd, dt,