Merge branch 'fix'; tag v1.4.1

README.md

@@ -1,4 +1,57 @@
 # lux-nox
 A repository containing the Solarized and Lunarized color schemes.
 
-[Homepage](https://chharvey.github.io/lux-nox/)
+## Description
+
+Lux-Nox is a stylesheet containing 32 colors, and classes for using those colors.
+
+- 16 colors from the *Solarized* scheme (8 bases and 8 accents)
+- 16 colors from the *Lunarized* scheme (8 bases and 8 accents)
+- classes for setting the CSS properties:
+  - `color`
+  - `background-color`
+  - `border-color`
+
+## Usage
+1. Locally
+  ```
+  $ npm install bangs
+  ```
+  ```html
+  <link rel="stylesheet" href="/node_modules/lux-nox/lux-nox[.min].css"/>
+  ```
+
+2. Remotely from a CDN (not recommended)
+  ```html
+  <link rel="stylesheet" href="https://cdn.rawgit.com/chharvey/lux-nox/‹master›/lux-nox[.min].css"/>
+  ```
+
+3. Remotely from this site (not recommended)
+  ```html
+  <link rel="stylesheet" href="https://chharvey.github.io/lux-nox/lux-nox[.min].css"/>
+  ```
+
+where `‹master›` can be a branch or a tag, and optional `.min` is for the minified version.
+
+## Inspiration and Construction
+
+*Solarized* was developed by [Ethan Schoonover](http://ethanschoonover.com/solarized).
+Inspired by his work, I developed the *Lunarized* Scheme in an attempt to
+cool the Solarized Light background colors. The Light mode was appealing to me
+but I didn’t like the yellowish tint. So I inverted the background color and
+it gave me a bluish tint, like the full moon—hence, “lunar”.
+I tried inverting the accent colors as well,
+but got ugly results, so I complemented them instead.
+
+In the Lunarized Scheme, the bases are inverses of the Solarized Bases while
+the accents are complements of the Solarized Accents.
+(The inverse of a color is a 180˚ hue rotation of that color, while the complement, or negative,
+of a color is the difference between that color and white.)
+
+```
+inverse(@color)    : spin(@color, 180);
+complement(@color) : rgb( 255-red(@color), 255-green(@color), 255-blue(@color) );
+```
+
+## Homepage and Docs
+https://chharvey.github.io/lux-nox/

docs/index.html

@@ -4,111 +4,100 @@
 they can be applied <abbr title="practically">literally</abbr> anywhere.
 Import them into any project to use the variables and classes in your codebase.
 </p></header><footer><p>by <a href="https://github.com/chharvey/lux-nox/">Chris Harvey</a></p></footer><section><h2>Example</h2><figure class="o-Box a-bc-s3 a-c-s00"><pre><span class="-c-sb">&lt;h3 <span class="-c-sy">class=<span class="-c-sc"><span class="-c-sm">&quot;</span>-bc-s03  -c-lc<span class="-c-sm">&quot;</span></span></span>&gt;</span>Solarized Base03 background, Lunarized Cyan foreground!<span class="-c-sb">&lt;&#x002f;h3&gt;</span>
-<span class="-c-sb">&lt;h4 <span class="-c-sy">class=<span class="-c-sc"><span class="-c-sm">&quot;</span>-rc-sb<span class="-c-sm">&quot;</span></span></span>&gt;</span>Solarized Blue border!<span class="-c-sb">&lt;&#x002f;h4&gt;</span></pre><h3 class="o-Box -bc-s03 -c-lc">Solarized Base03 background, Lunarized Cyan foreground!</h3><h4 class="o-Box -rc-sb" style="border: 3px solid">Solarized Blue border!</h4></figure></section><section><h2>Usage</h2><p>Locally</p><pre>$ npm install bangs</pre><pre>&lt;link rel="stylesheet" href="/node_modules/lux-nox/lux-nox[.min].css"/&gt;</pre><p>Remotely from a CDN (not recommended)</p><pre>&lt;link rel="stylesheet" href="https://cdn.rawgit.com/chharvey/lux-nox/<var>‹master›</var>/lux-nox[.min].css"/&gt;</pre><p>Remotely from this site (not recommended)</p><pre>&lt;link rel="stylesheet" href="https://chharvey.github.io/lux-nox/lux-nox[.min].css"/&gt;</pre><p>where <code><var>‹master›</var></code> can be a branch or a tag, and optional <code>[.min</code>] is for the minified version.</p></section><section><h2>Description</h2><p>Each color scheme contains 16 colors total, shared among two modes:</p><ul><li>Dark mode<ul><li>medium-light text  (Base0)</li><li>light emphasis     (Base1)</li><li>dark de-emphasis   (Base01)</li><li>darker highlight   (Base02)</li><li>darkest background (Base03)</li></ul></li><li>Light mode<ul><li>medium-dark text    (Base00)</li><li>dark emphasis       (Base01)</li><li>light de-emphasis   (Base1)</li><li>lighter highlight   (Base2)</li><li>lightest background (Base3)</li></ul></li></ul><p>Of the 16 colors in each scheme, there are 8 base colors and 8 accent colors:</p><ul><li>Bases<ul><li>dull tones</li><li>foreground, emphasis, de-emphasis, highlight, background</li><li>interchanged based on the mode</li></ul></li><li>Accents<ul><li>sharp tones</li><li>syntax highlighting</li><li>remain constant, independent of mode</li></ul></li></ul></section><section><h2>The Colors</h2><section><h3><cite>Solarized</cite> Color Scheme</h3><ul class="o-List o-Grid"><li class="o-Grid__Item o-ColorBox -bc-s03 h-darkbg"><h4>Solarized Base03</h4><pre>#002b36
+<span class="-c-sb">&lt;h4 <span class="-c-sy">class=<span class="-c-sc"><span class="-c-sm">&quot;</span>-rc-sb<span class="-c-sm">&quot;</span></span></span>&gt;</span>Solarized Blue border!<span class="-c-sb">&lt;&#x002f;h4&gt;</span></pre><h3 class="o-Box -bc-s03 -c-lc">Solarized Base03 background, Lunarized Cyan foreground!</h3><h4 class="o-Box -rc-sb" style="border: 3px solid">Solarized Blue border!</h4></figure></section><section><h2>Description</h2><p>Each color scheme contains 16 colors total, shared among two modes:</p><ul><li>Dark mode<ul><li>medium-light text  (Base0)</li><li>light emphasis     (Base1)</li><li>dark de-emphasis   (Base01)</li><li>darker highlight   (Base02)</li><li>darkest background (Base03)</li></ul></li><li>Light mode<ul><li>medium-dark text    (Base00)</li><li>dark emphasis       (Base01)</li><li>light de-emphasis   (Base1)</li><li>lighter highlight   (Base2)</li><li>lightest background (Base3)</li></ul></li></ul><p>Of the 16 colors in each scheme, there are 8 base colors and 8 accent colors:</p><ul><li>Bases<ul><li>dull tones</li><li>foreground, emphasis, de-emphasis, highlight, background</li><li>interchanged based on the mode</li></ul></li><li>Accents<ul><li>sharp tones</li><li>syntax highlighting</li><li>remain constant, independent of mode</li></ul></li></ul></section><section><h2>The Colors</h2><section><h3><cite>Solarized</cite> Color Scheme</h3><ul class="o-List o-ColorBoxGrid"><li class="o-List__Item o-ColorBox -bc-s03 h-darkbg"><h4>Solarized Base03</h4><pre>#002b36
 -bc-s03
 -c-s03
--rc-s03</pre></li><li class="o-Grid__Item o-ColorBox -bc-s02 h-darkbg"><h4>Solarized Base02</h4><pre>#073642
+-rc-s03</pre></li><li class="o-List__Item o-ColorBox -bc-s02 h-darkbg"><h4>Solarized Base02</h4><pre>#073642
 -bc-s02
 -c-s02
--rc-s02</pre></li><li class="o-Grid__Item o-ColorBox -bc-s01"><h4>Solarized Base01</h4><pre>#586e75
+-rc-s02</pre></li><li class="o-List__Item o-ColorBox -bc-s01"><h4>Solarized Base01</h4><pre>#586e75
 -bc-s01
 -c-s01
--rc-s01</pre></li><li class="o-Grid__Item o-ColorBox -bc-s00"><h4>Solarized Base00</h4><pre>#657b83
+-rc-s01</pre></li><li class="o-List__Item o-ColorBox -bc-s00"><h4>Solarized Base00</h4><pre>#657b83
 -bc-s00
 -c-s00
--rc-s00</pre></li><li class="o-Grid__Item o-ColorBox -bc-s0"><h4>Solarized Base0</h4><pre>#839496
+-rc-s00</pre></li><li class="o-List__Item o-ColorBox -bc-s0"><h4>Solarized Base0</h4><pre>#839496
 -bc-s0
 -c-s0
--rc-s0</pre></li><li class="o-Grid__Item o-ColorBox -bc-s1"><h4>Solarized Base1</h4><pre>#93a1a1
+-rc-s0</pre></li><li class="o-List__Item o-ColorBox -bc-s1"><h4>Solarized Base1</h4><pre>#93a1a1
 -bc-s1
 -c-s1
--rc-s1</pre></li><li class="o-Grid__Item o-ColorBox -bc-s2"><h4>Solarized Base2</h4><pre>#eee8d5
+-rc-s1</pre></li><li class="o-List__Item o-ColorBox -bc-s2"><h4>Solarized Base2</h4><pre>#eee8d5
 -bc-s2
 -c-s2
--rc-s2</pre></li><li class="o-Grid__Item o-ColorBox -bc-s3"><h4>Solarized Base3</h4><pre>#fdf6e3
+-rc-s2</pre></li><li class="o-List__Item o-ColorBox -bc-s3"><h4>Solarized Base3</h4><pre>#fdf6e3
 -bc-s3
 -c-s3
--rc-s3</pre></li><li class="o-Grid__Item o-ColorBox -bc-sr"><h4>Solarized Red</h4><pre>#dc322f
+-rc-s3</pre></li><li class="o-List__Item o-ColorBox -bc-sr"><h4>Solarized Red</h4><pre>#dc322f
 -bc-sr
 -c-sr
--rc-sr</pre></li><li class="o-Grid__Item o-ColorBox -bc-so"><h4>Solarized Orange</h4><pre>#cb4b16
+-rc-sr</pre></li><li class="o-List__Item o-ColorBox -bc-so"><h4>Solarized Orange</h4><pre>#cb4b16
 -bc-so
 -c-so
--rc-so</pre></li><li class="o-Grid__Item o-ColorBox -bc-sy"><h4>Solarized Yellow</h4><pre>#b58900
+-rc-so</pre></li><li class="o-List__Item o-ColorBox -bc-sy"><h4>Solarized Yellow</h4><pre>#b58900
 -bc-sy
 -c-sy
--rc-sy</pre></li><li class="o-Grid__Item o-ColorBox -bc-sg"><h4>Solarized Green</h4><pre>#859900
+-rc-sy</pre></li><li class="o-List__Item o-ColorBox -bc-sg"><h4>Solarized Green</h4><pre>#859900
 -bc-sg
 -c-sg
--rc-sg</pre></li><li class="o-Grid__Item o-ColorBox -bc-sc"><h4>Solarized Cyan</h4><pre>#2aa198
+-rc-sg</pre></li><li class="o-List__Item o-ColorBox -bc-sc"><h4>Solarized Cyan</h4><pre>#2aa198
 -bc-sc
 -c-sc
--rc-sc</pre></li><li class="o-Grid__Item o-ColorBox -bc-sb"><h4>Solarized Blue</h4><pre>#268bd2
+-rc-sc</pre></li><li class="o-List__Item o-ColorBox -bc-sb"><h4>Solarized Blue</h4><pre>#268bd2
 -bc-sb
 -c-sb
--rc-sb</pre></li><li class="o-Grid__Item o-ColorBox -bc-sv"><h4>Solarized Violet</h4><pre>#6c71c4
+-rc-sb</pre></li><li class="o-List__Item o-ColorBox -bc-sv"><h4>Solarized Violet</h4><pre>#6c71c4
 -bc-sv
 -c-sv
--rc-sv</pre></li><li class="o-Grid__Item o-ColorBox -bc-sm"><h4>Solarized Magenta</h4><pre>#d33682
+-rc-sv</pre></li><li class="o-List__Item o-ColorBox -bc-sm"><h4>Solarized Magenta</h4><pre>#d33682
 -bc-sm
 -c-sm
--rc-sm</pre></li></ul></section><section><h3><cite>Lunarized</cite> Color Scheme</h3><ul class="o-List o-Grid"><li class="o-Grid__Item o-ColorBox -bc-l03 h-darkbg"><h4>Lunarized Base03</h4><pre>#360b00
+-rc-sm</pre></li></ul></section><section><h3><cite>Lunarized</cite> Color Scheme</h3><ul class="o-List o-ColorBoxGrid"><li class="o-List__Item o-ColorBox -bc-l03 h-darkbg"><h4>Lunarized Base03</h4><pre>#360b00
 -bc-l03
 -c-l03
--rc-l03</pre></li><li class="o-Grid__Item o-ColorBox -bc-l02 h-darkbg"><h4>Lunarized Base02</h4><pre>#421307
+-rc-l03</pre></li><li class="o-List__Item o-ColorBox -bc-l02 h-darkbg"><h4>Lunarized Base02</h4><pre>#421307
 -bc-l02
 -c-l02
--rc-l02</pre></li><li class="o-Grid__Item o-ColorBox -bc-l01"><h4>Lunarized Base01</h4><pre>#755f58
+-rc-l02</pre></li><li class="o-List__Item o-ColorBox -bc-l01"><h4>Lunarized Base01</h4><pre>#755f58
 -bc-l01
 -c-l01
--rc-l01</pre></li><li class="o-Grid__Item o-ColorBox -bc-l00"><h4>Lunarized Base00</h4><pre>#836d65
+-rc-l01</pre></li><li class="o-List__Item o-ColorBox -bc-l00"><h4>Lunarized Base00</h4><pre>#836d65
 -bc-l00
 -c-l00
--rc-l00</pre></li><li class="o-Grid__Item o-ColorBox -bc-l0"><h4>Lunarized Base0</h4><pre>#968583
+-rc-l00</pre></li><li class="o-List__Item o-ColorBox -bc-l0"><h4>Lunarized Base0</h4><pre>#968583
 -bc-l0
 -c-l0
--rc-l0</pre></li><li class="o-Grid__Item o-ColorBox -bc-l1"><h4>Lunarized Base1</h4><pre>#a19393
+-rc-l0</pre></li><li class="o-List__Item o-ColorBox -bc-l1"><h4>Lunarized Base1</h4><pre>#a19393
 -bc-l1
 -c-l1
--rc-l1</pre></li><li class="o-Grid__Item o-ColorBox -bc-l2"><h4>Lunarized Base2</h4><pre>#d5dbee
+-rc-l1</pre></li><li class="o-List__Item o-ColorBox -bc-l2"><h4>Lunarized Base2</h4><pre>#d5dbee
 -bc-l2
 -c-l2
--rc-l2</pre></li><li class="o-Grid__Item o-ColorBox -bc-l3"><h4>Lunarized Base3</h4><pre>#e3eafd
+-rc-l2</pre></li><li class="o-List__Item o-ColorBox -bc-l3"><h4>Lunarized Base3</h4><pre>#e3eafd
 -bc-l3
 -c-l3
--rc-l3</pre></li><li class="o-Grid__Item o-ColorBox -bc-lc"><h4>Lunarized Cyan</h4><pre>#23cdd0
+-rc-l3</pre></li><li class="o-List__Item o-ColorBox -bc-lc"><h4>Lunarized Cyan</h4><pre>#23cdd0
 -bc-lc
 -c-lc
--rc-lc</pre></li><li class="o-Grid__Item o-ColorBox -bc-lb"><h4>Lunarized Blue</h4><pre>#34b4e9
+-rc-lc</pre></li><li class="o-List__Item o-ColorBox -bc-lb"><h4>Lunarized Blue</h4><pre>#34b4e9
 -bc-lb
 -c-lb
--rc-lb</pre></li><li class="o-Grid__Item o-ColorBox -bc-li"><h4>Lunarized Indigo</h4><pre>#4a76ff
+-rc-lb</pre></li><li class="o-List__Item o-ColorBox -bc-li"><h4>Lunarized Indigo</h4><pre>#4a76ff
 -bc-li
 -c-li
--rc-li</pre></li><li class="o-Grid__Item o-ColorBox -bc-lv"><h4>Lunarized Violet</h4><pre>#7a66ff
+-rc-li</pre></li><li class="o-List__Item o-ColorBox -bc-lv"><h4>Lunarized Violet</h4><pre>#7a66ff
 -bc-lv
 -c-lv
--rc-lv</pre></li><li class="o-Grid__Item o-ColorBox -bc-lr"><h4>Lunarized Red</h4><pre>#d55e67
+-rc-lv</pre></li><li class="o-List__Item o-ColorBox -bc-lr"><h4>Lunarized Red</h4><pre>#d55e67
 -bc-lr
 -c-lr
--rc-lr</pre></li><li class="o-Grid__Item o-ColorBox -bc-lo"><h4>Lunarized Orange</h4><pre>#d9742d
+-rc-lr</pre></li><li class="o-List__Item o-ColorBox -bc-lo"><h4>Lunarized Orange</h4><pre>#d9742d
 -bc-lo
 -c-lo
--rc-lo</pre></li><li class="o-Grid__Item o-ColorBox -bc-ly"><h4>Lunarized Yellow</h4><pre>#938e3b
+-rc-lo</pre></li><li class="o-List__Item o-ColorBox -bc-ly"><h4>Lunarized Yellow</h4><pre>#938e3b
 -bc-ly
 -c-ly
--rc-ly</pre></li><li class="o-Grid__Item o-ColorBox -bc-lg"><h4>Lunarized Green</h4><pre>#2cc97d
+-rc-ly</pre></li><li class="o-List__Item o-ColorBox -bc-lg"><h4>Lunarized Green</h4><pre>#2cc97d
 -bc-lg
 -c-lg
--rc-lg</pre></li></ul></section><p><a href="sample.html">See samples in action.</a></p></section><section><h2>Inspiration and Construction</h2><p><cite>Solarized</cite> was developed by
-<a href="http://ethanschoonover.com/solarized">Ethan Schoonover</a>.
-Inspired by his work, I developed the <cite>Lunarized</cite> Scheme in an attempt to
-cool the Solarized Light background colors. The Light mode was appealing to me
-but I didn&rsquo;t like the yellowish tint. So I inverted the background color and
-it gave me a bluish tint, <strong title="hence, “lunar”">like the full moon</strong>.
-I tried inverting the accent colors as well,
-but got ugly results, so I complemented them instead.</p><p>In the Lunarized Scheme, the bases are inverses of the Solarized Bases while
-the accents are complements of the Solarized Accents.
-The inverse of a color is a 180&deg; hue rotation of that color, while the complement
-of a color is the difference between that color and white.</p><pre>inverse(@color)    : spin(@color, 180);
-complement(@color) : rgb( 255-red(@color), 255-green(@color), 255-blue(@color) );</pre></section><nav><h2>More Pages</h2><ul><li><a href="sample.html">Sample</a></li><li><a href="use.html">Suggested Use</a></li><li><a href="accessibility.html">Accessibiltiy</a></li></ul></nav></main><script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script></body></html>
+-rc-lg</pre></li></ul></section><p><a href="sample.html">See samples in action.</a></p></section><nav><h2>More Pages</h2><ul><li><a href="sample.html">Sample</a></li><li><a href="use.html">Suggested Use</a></li><li><a href="accessibility.html">Accessibiltiy</a></li></ul></nav></main><script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script></body></html>

docs/index.jade

@@ -21,20 +21,6 @@ block append main
         #[span.-c-sb <h4 #[span.-c-sy class=#[span.-c-sc #[span.-c-sm "]-rc-sb#[span.-c-sm "]]]>]Solarized Blue border!#[span.-c-sb </h4>]
       h3.o-Box.-bc-s03.-c-lc Solarized Base03 background, Lunarized Cyan foreground!
       h4.o-Box.-rc-sb(style="border: 3px solid;") Solarized Blue border!
-  section
-    h2 Usage
-    p Locally
-    pre.
-      $ npm install bangs
-    pre.
-      <link rel="stylesheet" href="/node_modules/lux-nox/lux-nox[.min].css"/>
-    p Remotely from a CDN (not recommended)
-    pre.
-      <link rel="stylesheet" href="https://cdn.rawgit.com/chharvey/lux-nox/#[var ‹master›]/lux-nox[.min].css"/>
-    p Remotely from this site (not recommended)
-    pre.
-      <link rel="stylesheet" href="https://chharvey.github.io/lux-nox/lux-nox[.min].css"/>
-    p where #[code #[var ‹master›]] can be a branch or a tag, and optional #[code [.min]] is for the minified version.
   section
     h2 Description
     p Each color scheme contains 16 colors total, shared among two modes:
@@ -67,47 +53,21 @@ block append main
           li remain constant, independent of mode
   section
     mixin colorBox($namedColor)
-      li.o-Grid__Item.o-ColorBox(class=[
-        $namedColor.bgClass()
-      , { 'h-darkbg': $namedColor.name().slice(14)==='03' || $namedColor.name().slice(14)==='02' }
-      ])
+      li.o-List__Item.o-ColorBox(class=[ $namedColor.bgClass(), { 'h-darkbg': ['03', '02'].indexOf($namedColor.name().slice(14)) >= 0 } ])
         h4= $namedColor.name()
         pre.
           #{$namedColor.toString('hex')}
           #{$namedColor.bgClass()}
           #{$namedColor.fgClass()}
           #{$namedColor.brClass()}
     h2 The Colors
-    section
-      h3 #[cite Solarized] Color Scheme
-      ul.o-List.o-Grid
-        each color in Docs.SOLARIZED._colors
-          +colorBox(color)
-    section
-      h3 #[cite Lunarized] Color Scheme
-      ul.o-List.o-Grid
-        each color in Docs.LUNARIZED._colors
-          +colorBox(color)
+    each scheme in [Docs.SOLARIZED, Docs.LUNARIZED]
+      section
+        h3 #[cite= scheme._NAME] Color Scheme
+        ul.o-List.o-ColorBoxGrid
+          each color in scheme._colors
+            +colorBox(color)
     p: a(href="sample.html") See samples in action.
-  section
-    h2 Inspiration and Construction
-    p.
-      #[cite Solarized] was developed by
-      #[a(href="http://ethanschoonover.com/solarized") Ethan Schoonover].
-      Inspired by his work, I developed the #[cite Lunarized] Scheme in an attempt to
-      cool the Solarized Light background colors. The Light mode was appealing to me
-      but I didn’t like the yellowish tint. So I inverted the background color and
-      it gave me a bluish tint, #[strong(title="hence, “lunar”") like the full moon].
-      I tried inverting the accent colors as well,
-      but got ugly results, so I complemented them instead.
-    p.
-      In the Lunarized Scheme, the bases are inverses of the Solarized Bases while
-      the accents are complements of the Solarized Accents.
-      The inverse of a color is a 180° hue rotation of that color, while the complement
-      of a color is the difference between that color and white.
-    pre.
-      inverse(@color)    : spin(@color, 180);
-      complement(@color) : rgb( 255-red(@color), 255-green(@color), 255-blue(@color) );
   nav
     h2 More Pages
     ul