diff options
Diffstat (limited to 'layouts/partials/elements_reference.html')
| -rw-r--r-- | layouts/partials/elements_reference.html | 2009 |
1 files changed, 2009 insertions, 0 deletions
diff --git a/layouts/partials/elements_reference.html b/layouts/partials/elements_reference.html new file mode 100644 index 0000000..73ad7c6 --- /dev/null +++ b/layouts/partials/elements_reference.html @@ -0,0 +1,2009 @@ + <!-- Modifiers --> + <section class="wrapper style1 align-center" id="reference"> + <div class="inner"> + <h2>Elements Reference</h2> + <p>Oh, and this: a handy reference to all the modifiers supported by various elements.</p> + <div class="index align-left"> + + <!-- Banner --> + <section id="reference-banner"> + <header> + <h3>Banner</h3> + </header> + <div class="content"> + + <h4>HTML</h4> + <pre><code><section class="banner style<em>(N)</em> <em>(optional modifiers)</em>"> + <div class="content"> + <em>(content)</em> + </div> + <div class="image"> + <img src="<em>(image URL)</em>" alt="Alternate text" /> + </div> + </section></code></pre> + + <hr /> + + <!-- style1 --> + <section> + <h4><code>banner style1</code></h4> + <p>A 50/50 vertical split between content and an image. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Fills the height of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>orient-left</code></td> + <td>Shows content on the left, image on the right.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Shows content on the right, image on the left.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style2 --> + <section> + <h4><code>banner style2</code></h4> + <p>Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Fills the height of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>orient-left</code></td> + <td>Attaches the content box to the left edge of the screen.</td> + </tr> + <tr> + <td><code>orient-center</code></td> + <td>Places the content box in the center of the screen.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Attaches the content box to the right edge of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style3 --> + <section> + <h4><code>banner style3</code></h4> + <p>An image within a circular frame placed to the side of content. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Fills the height of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>orient-left</code></td> + <td>Places the content on the left, image on the right.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Places the content on the right, image on the left.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-up</code></td> + <td>Fades image up on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-down</code></td> + <td>Fades image down on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-left</code></td> + <td>Fades image left on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-right</code></td> + <td>Fades image right on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-up</code></td> + <td>Fades image up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-down</code></td> + <td>Fades image down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-left</code></td> + <td>Fades image left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-right</code></td> + <td>Fades image right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style4 --> + <section> + <h4><code>banner style4</code></h4> + <p>An image within a phone-shaped frame placed to the side of content. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Fills the height of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>iphone</code></td> + <td>Uses iPhone styling for image frame.</td> + </tr> + <tr> + <td><code>android</code></td> + <td>Uses Android styling for image frame.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>orient-left</code></td> + <td>Places the content on the left, image on the right.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Places the content on the right, image on the left.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-up</code></td> + <td>Fades image up on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-down</code></td> + <td>Fades image down on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-left</code></td> + <td>Fades image left on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-right</code></td> + <td>Fades image right on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-up</code></td> + <td>Fades image up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-down</code></td> + <td>Fades image down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-left</code></td> + <td>Fades image left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-right</code></td> + <td>Fades image right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style5 --> + <section> + <h4><code>banner style5</code></h4> + <p>Content set directly against an image background. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Fills the height of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + </div> + </section> + + <!-- Spotlight --> + <section id="reference-spotlight"> + <header> + <h3>Spotlight</h3> + </header> + <div class="content"> + + <h4>HTML</h4> + <pre><code><section class="spotlight style<em>(N)</em> <em>(optional modifiers)</em>"> + <div class="content"> + <em>(content)</em> + </div> + <div class="image"> + <img src="<em>(image URL)</em>" alt="Alternate text" /> + </div> + </section></code></pre> + + <hr /> + + <!-- style1 --> + <section> + <h4><code>spotlight style1</code></h4> + <p>A 30/70 (or 70/30, depending on orientation) vertical split between content and an image. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>orient-left</code></td> + <td>Shows content on the left, image on the right.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Shows content on the right, image on the left.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style2 --> + <section> + <h4><code>spotlight style2</code></h4> + <p>An image within a circular frame placed to the side of content. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>orient-left</code></td> + <td>Places the content on the left, image on the right.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Places the content on the right, image on the left.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-up</code></td> + <td>Fades image up on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-down</code></td> + <td>Fades image down on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-left</code></td> + <td>Fades image left on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-right</code></td> + <td>Fades image right on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-up</code></td> + <td>Fades image up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-down</code></td> + <td>Fades image down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-left</code></td> + <td>Fades image left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-right</code></td> + <td>Fades image right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style3 --> + <section> + <h4><code>spotlight style3</code></h4> + <p>An image within a phone-shaped frame placed to the side of content. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>orient-left</code></td> + <td>Places the content on the left, image on the right.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Places the content on the right, image on the left.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-up</code></td> + <td>Fades image up on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-down</code></td> + <td>Fades image down on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-left</code></td> + <td>Fades image left on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-right</code></td> + <td>Fades image right on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-up</code></td> + <td>Fades image up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-down</code></td> + <td>Fades image down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-left</code></td> + <td>Fades image left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-right</code></td> + <td>Fades image right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style4 --> + <section> + <h4><code>spotlight style4</code></h4> + <p>Boxed-in content set against an image background, and attached to either side of the screen or centered. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Fills the height of the screen.</td> + </tr> + <tr> + <td><code>halfscreen</code></td> + <td>Fills half the height of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>orient-left</code></td> + <td>Attaches the content box to the left edge of the screen.</td> + </tr> + <tr> + <td><code>orient-center</code></td> + <td>Places the content box in the center of the screen.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Attaches the content box to the right edge of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style5 --> + <section> + <h4><code>spotlight style5</code></h4> + <p>Boxed-in content set against an image background. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>fullscreen</code></td> + <td>Fills the height of the screen.</td> + </tr> + <tr> + <td><code>halfscreen</code></td> + <td>Fills half the height of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>orient-left</code></td> + <td>Places the content box on the left of the screen.</td> + </tr> + <tr> + <td><code>orient-center</code></td> + <td>Places the content box in the center of the screen.</td> + </tr> + <tr> + <td><code>orient-right</code></td> + <td>Places the content box on the right side of the screen.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>content-align-left</code></td> + <td>Left-aligns content.</td> + </tr> + <tr> + <td><code>content-align-center</code></td> + <td>Center-aligns content.</td> + </tr> + <tr> + <td><code>content-align-right</code></td> + <td>Right-aligns content.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>image-position-left</code></td> + <td>Left-positions image.</td> + </tr> + <tr> + <td><code>image-position-center</code></td> + <td>Center-positions image.</td> + </tr> + <tr> + <td><code>image-position-right</code></td> + <td>Right-positions image.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-content-fade-up</code></td> + <td>Fades content up on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-down</code></td> + <td>Fades content down on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-left</code></td> + <td>Fades content left on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-right</code></td> + <td>Fades content right on page load.</td> + </tr> + <tr> + <td><code>onload-content-fade-in</code></td> + <td>Fades in content on page load.</td> + </tr> + <tr> + <td><code>onload-image-fade-in</code></td> + <td>Fades in image on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-content-fade-up</code></td> + <td>Fades content up on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-down</code></td> + <td>Fades content down on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-left</code></td> + <td>Fades content left on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-right</code></td> + <td>Fades content right on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-content-fade-in</code></td> + <td>Fades in content on page scroll.</td> + </tr> + <tr> + <td><code>onscroll-image-fade-in</code></td> + <td>Fades in image on page scroll.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + </section> + + </div> + </section> + + <!-- Gallery --> + <section id="reference-gallery"> + <header> + <h3>Gallery</h3> + </header> + <div class="content"> + + <h4>HTML</h4> + <pre><code><div class="gallery style<em>(N)</em> <em>(optional modifiers)</em>"> + <article> + <a href="<em>(full image URL)</em>" class="image"> + <img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /> + </a> + <div class="caption"> + <em>(caption)</em> + </div> + </article> + <article> + <a href="<em>(full image URL)</em>" class="image"> + <img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /> + </a> + <div class="caption"> + <em>(caption)</em> + </div> + </article> + <article> + <a href="<em>(full image URL)</em>" class="image"> + <img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /> + </a> + <div class="caption"> + <em>(caption)</em> + </div> + </article> + <em>...</em> + </div></code></pre> + + <hr /> + + <!-- style1 --> + <section> + <h4><code>gallery style1</code></h4> + <p>A grid of thumbnails with optional lightbox support. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>small</code></td> + <td>Uses small thumbnails.</td> + </tr> + <tr> + <td><code>medium</code></td> + <td>Uses medium thumbnails.</td> + </tr> + <tr> + <td><code>big</code></td> + <td>Uses big thumbnails.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>lightbox</code></td> + <td>Enables lightbox behavior.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-fade-in</code></td> + <td>Fades in thumbnails on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-fade-in</code></td> + <td>Fades in thumbnails on page scroll.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style2 --> + <section> + <h4><code>gallery style2</code></h4> + <p>A carousel of thumbnails with optional lightbox support. Supports these modifiers:</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>small</code></td> + <td>Uses small thumbnails.</td> + </tr> + <tr> + <td><code>medium</code></td> + <td>Uses medium thumbnails.</td> + </tr> + <tr> + <td><code>big</code></td> + <td>Uses big thumbnails.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>lightbox</code></td> + <td>Enables lightbox behavior.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-fade-in</code></td> + <td>Fades in thumbnails on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-fade-in</code></td> + <td>Fades in thumbnails on page scroll.</td> + </tr> + </tbody> + </table> + </div> + </section> + + </div> + </section> + + <!-- Items --> + <section id="reference-items"> + <header> + <h3>Items</h3> + </header> + <div class="content"> + + <h4>HTML</h4> + <pre><code><div class="items style<em>(N)</em> <em>(size modifier)</em> <em>(optional modifiers)</em>"> + <section> + <em>(content)</em> + </section> + <section> + <em>(content)</em> + </section> + <section> + <em>(content)</em> + </section> + <section> + <em>(content)</em> + </section> + <em>...</em> + </div></code></pre> + + <hr /> + + <!-- style1 --> + <section> + <h4><code>items style1</code></h4> + <p>A grid of items separated by borders.</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>small</code></td> + <td>Uses small items.</td> + </tr> + <tr> + <td><code>medium</code></td> + <td>Uses medium items.</td> + </tr> + <tr> + <td><code>big</code></td> + <td>Uses big items.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-fade-in</code></td> + <td>Fades in items on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-fade-in</code></td> + <td>Fades in items on page scroll.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style2 --> + <section> + <h4><code>items style2</code></h4> + <p>An outlined grid of items separated by borders.</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>small</code></td> + <td>Uses small items.</td> + </tr> + <tr> + <td><code>medium</code></td> + <td>Uses medium items.</td> + </tr> + <tr> + <td><code>big</code></td> + <td>Uses big items.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-fade-in</code></td> + <td>Fades in items on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-fade-in</code></td> + <td>Fades in items on page scroll.</td> + </tr> + </tbody> + </table> + </div> + </section> + + <hr /> + + <!-- style3 --> + <section> + <h4><code>items style3</code></h4> + <p>A borderless grid of items.</p> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>small</code></td> + <td>Uses small items.</td> + </tr> + <tr> + <td><code>medium</code></td> + <td>Uses medium items.</td> + </tr> + <tr> + <td><code>big</code></td> + <td>Uses big items.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onload-fade-in</code></td> + <td>Fades in items on page load.</td> + </tr> + <tr class="alt"> + <td colspan="2"></td> + </tr> + <tr> + <td><code>onscroll-fade-in</code></td> + <td>Fades in items on page scroll.</td> + </tr> + </tbody> + </table> + </div> + </section> + + </div> + </section> + + <!-- Wrapper --> + <section id="reference-wrapper"> + <header> + <h3>Wrapper</h3> + </header> + <div class="content"> + + <h4>HTML</h4> + <pre><code><div class="wrapper <em>(optional modifiers)</em>"> + <em>(content)</em> + </div></code></pre> + + <h4>Modifiers</h4> + + <div class="table-wrapper"> + <table class="alt uniform fixed"> + <tbody> + <tr> + <td><code>invert</code></td> + <td>Inverts the color scheme.</td> + </tr> + <tr> + <td><code>color1</code></td> + <td>Uses background color #1.</td> + </tr> + <tr> + <td><code>color2</code></td> + <td>Uses background color #2.</td> + </tr> + <tr> + <td><code>color3</code></td> + <td>Uses background color #3.</td> + </tr> + <tr> + <td><code>color4</code></td> + <td>Uses background color #4.</td> + </tr> + <tr> + <td><code>color5</code></td> + <td>Uses background color #5.</td> + </tr> + <tr> + <td><code>color6</code></td> + <td>Uses background color #6.</td> + </tr> + <tr> + <td><code>color7</code></td> + <td>Uses background color #7.</td> + </tr> + </tbody> + </table> + </div> + + </div> + </section> + + </div> + + </div> + </section>
\ No newline at end of file |