website
/
drs
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Die Runde Stunde
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
3 Commits
1 Branch
0 Tags
11 MiB
 
 
 
 
 
 
Tree: e30bbe24b2
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'e30bbe24b2'
${ noResults }
drs/themes/hugo-story/layouts/partials/elements_reference.html

2009 lines
153 KiB
Raw Blame History

<!-- 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>&lt;section class="banner style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
&lt;div class="content"&gt;
<em>(content)</em>
&lt;/div&gt;
&lt;div class="image"&gt;
&lt;img src="<em>(image URL)</em>" alt="Alternate text" /&gt;
&lt;/div&gt;
&lt;/section&gt;</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>&lt;section class="spotlight style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
&lt;div class="content"&gt;
<em>(content)</em>
&lt;/div&gt;
&lt;div class="image"&gt;
&lt;img src="<em>(image URL)</em>" alt="Alternate text" /&gt;
&lt;/div&gt;
&lt;/section&gt;</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>&lt;div class="gallery style<em>(N)</em> <em>(optional modifiers)</em>"&gt;
&lt;article&gt;
&lt;a href="<em>(full image URL)</em>" class="image"&gt;
&lt;img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /&gt;
&lt;/a&gt;
&lt;div class="caption"&gt;
<em>(caption)</em>
&lt;/div&gt;
&lt;/article&gt;
&lt;article&gt;
&lt;a href="<em>(full image URL)</em>" class="image"&gt;
&lt;img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /&gt;
&lt;/a&gt;
&lt;div class="caption"&gt;
<em>(caption)</em>
&lt;/div&gt;
&lt;/article&gt;
&lt;article&gt;
&lt;a href="<em>(full image URL)</em>" class="image"&gt;
&lt;img src="<em>(thumbnail image URL)</em>" alt="Alternate text" /&gt;
&lt;/a&gt;
&lt;div class="caption"&gt;
<em>(caption)</em>
&lt;/div&gt;
&lt;/article&gt;
<em>...</em>
&lt;/div&gt;</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>&lt;div class="items style<em>(N)</em> <em>(size modifier)</em> <em>(optional modifiers)</em>"&gt;
&lt;section&gt;
<em>(content)</em>
&lt;/section&gt;
&lt;section&gt;
<em>(content)</em>
&lt;/section&gt;
&lt;section&gt;
<em>(content)</em>
&lt;/section&gt;
&lt;section&gt;
<em>(content)</em>
&lt;/section&gt;
<em>...</em>
&lt;/div&gt;</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>&lt;div class="wrapper <em>(optional modifiers)</em>"&gt;
<em>(content)</em>
&lt;/div&gt;</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>