New release

ChangeLog.md

@@ -1,6 +1,14 @@
 # Change Log
 
-## [1.2.4] - 2017-04-7
+## [1.2.5] - 2017-09-05
+
+Changes:
+
+* Attached Satie's _Gymnopedie_
+* Documentation
+
+
+## [1.2.4] - 2017-04-07
 
 Changes:
 

docs/index.html

@@ -469,8 +469,8 @@ <h1>Slide 9 of 10</h1>
 			<h1>Slide 10 of 10</h1>
 		</header>
 		<figure>
-			<audio src="https://upload.wikimedia.org/wikipedia/commons/9/90/Erik_Satie_-_gymnopedies_-_la_1_ere._lent_et_douloureux.ogg" controls="controls" itemprop="audio"><p>Sorry, your browser doesn't support embedded audio, but don't worry, you can <a href="https://upload.wikimedia.org/wikipedia/commons/9/90/Erik_Satie_-_gymnopedies_-_la_1_ere._lent_et_douloureux.ogg">download it</a> and listen to it with your favorite video player!</p></audio>
-			<figcaption itemprop="caption">Erik Satie, <em>Gymnopedies</em> &ndash; La 1ere. Lent et douloureux</figcaption>
+			<audio src="audio/satie_-_gymnopedies_-_la_1_ere._lent_et_douloureux.ogg" controls="controls" itemprop="audio"><p>Sorry, your browser doesn't support embedded audio, but don't worry, you can <a href="audio/satie_-_gymnopedies_-_la_1_ere._lent_et_douloureux.ogg">download it</a> and listen to it with your favorite video player!</p></audio>
+			<figcaption itemprop="caption">Erik Satie, <em>Gymnopedies</em> &ndash; La 1ere. Lent et douloureux.<br />Performed by Robin Alciatore. Courtesy of <a href="http://musopen.com" target="_blank">Musopen</a>.</figcaption>
 		</figure>
 		<aside>
 			<p>The <code>&lt;aside&gt;</code> element is the perfect place for additional <code>&lt;nav&gt;</code> containers!</p>

docs/man.html

@@ -15,7 +15,7 @@ <h2>Manual</h2>
 <h3>Introduction</h3>
 <p><a href="https://github.com/madmurphy/takefive.css" target="_blank"><strong>Take five!</strong></a> is a slide renderer written in pure CSS (no JavaScript required), oriented to the semantics of HTML (<a href="http://www.w3schools.com/html/html5_semantic_elements.asp" target="_blank">semantic nodes</a>, <a href="https://en.wikipedia.org/wiki/Microdata_(HTML)" target="_blank">microdata</a>, <a href="http://microformats.org/wiki/what-are-microformats">microformats</a>, <a href="https://en.wikipedia.org/wiki/RDFa" target="_blank">RDFa</a>). It can be used as a simple lightbox for images and videos, or as a complete slide viewer for complex contents. Before further reading, please consider to see the <a href="index.html">live demo</a>.</p>
 <h3>Getting started</h3>
-<p>For creating a slide with <strong>Take five!</strong>, all you need to do is to include <strong>takefive.css</strong> in your document, then use one of the following basic syntaxes:</p>
+<p>In order to create a slide with <strong>Take five!</strong> all you need to do is to include <strong>takefive.css</strong> in your document, then use one of the following basic syntaxes:</p>
 <ul>
 <li>
 <pre class="example">&lt;article id="my_hash1" class="slide"&gt;<br />&nbsp;&nbsp;&nbsp;&nbsp;<span style="background-color: #ffff00;">&lt;element-to-be-slided /&gt;</span><br />&lt;/article&gt;</pre>
@@ -57,7 +57,7 @@ <h4>Direct children of the viewport</h4>
 </ol>
 <p>All the elements listed above, with the exception of the <code><em>&lt;leeloo&gt;</em></code> element, are optional and can be omitted. Note also that their order is free.</p>
 <h4>Non-direct children of the viewport (sub-children)</h4>
-<p>Sub-children of the viewport will be displayed normally, in their natural order. The only exception concerns link elements that are children of the main <code>&lt;nav&gt;</code>, which will be considered as internal navigation links and styled consequently.</p>
+<p>Sub-children of the viewport will be displayed normally, in their natural order. The only exception concerns link elements that are children of the main <code>&lt;nav&gt;</code>, which will be considered as internal navigation links and styled consequently (see below).</p>
 <h5>Children of the main <code>&lt;nav&gt;</code> (the <code>rel</code> attribute)</h5>
 <p>Within the main <code>&lt;nav&gt;</code> container &ndash; and in one case within the <code><em>&lt;leeloo&gt;</em></code> element (see below) &ndash; <strong>Take five!</strong> is sensitive to the <code>rel</code> attribute. In particular:</p>
 <ol>
@@ -71,11 +71,11 @@ <h5>Children of the main <code>&lt;nav&gt;</code> (the <code>rel</code> attribut
 <li><code>article.slide &gt; nav:first-of-type a[rel~="<span style="background-color: #ffff00;">tag</span>"]</code> will be accompained by the label &ldquo;Tagged content&rdquo;</li>
 <li><code>article.slide &gt; nav:first-of-type a[rel~="<span style="background-color: #ffff00;">child</span>"]</code> will be accompained by the label &ldquo;More&rdquo; and styled differently</li>
 <li><code>article.slide &gt; nav:first-of-type a[rel~="<span style="background-color: #ffff00;">parent</span>"],</code> will be showed in background and accompanied by the label &ldquo;Back to&rdquo; when not empty, or by the label &ldquo;Click to exit&rdquo; when empty</li>
-<li><code><em>leeloo</em> a[rel~="parent"]:empty</code> will entirely cover the <code><em>&lt;leeeloo&gt;</em></code> element</li>
+<li><code><span style="background-color: #0098ff;"><em>leeloo</em></span> a[rel~="<span style="background-color: #ffff00;">parent</span>"]:empty</code> will entirely cover the <code><em>&lt;leeeloo&gt;</em></code> element</li>
 </ol>
-<p>Each of the elements matching the selectors 1-11 of the previous point can be omitted (but either 10 or 11 should be present in order to give the possibility to exit from the slide), and all of them can cohabitate together (note: also elements 10 and 11).</p>
+<p>Each of the elements matching the selectors 1-11 above may be omitted (but either 10 or 11 should be present in order to give the possibility to exit from the slide), and all of them can cohabitate together (note: also elements 10 and 11).</p>
 <p>Other <code>a[rel="&hellip;"]</code> elements not listed above, but placed inside the main <code>&lt;nav&gt;</code>, will be accompanied by a label containing their <code>rel</code> attribute. Tag links <em>placed anywhere else within the slide</em> (i.e., <code>article.slide a[rel="tag"]</code>) will be styled with a star preceding the text.</p>
-<p><code></code>Custom labels can express a pseudo-relationship for links without a <code>rel</code> attribute, or replace the default labels (or tag links' stars), by setting a <code>data-label</code> attribute on the link &ndash; as in <code>&lt;a href="#about" <span style="background-color: #ffff00;">data-label="See also"</span>&gt;About&lt;/a&gt;</code> or <code>&lt;a href="#my-sweetheart" <span style="background-color: #0098ff;">rel="sweetheart"</span> <span style="background-color: #ffff00;">data-label="Thanks to"</span>&gt;Carla&lt;/a&gt;</code>. Furthermore, it is possible to remove the default labels by assigning a <code>"no-label"</code> class to the link &ndash; as in: <code>&lt;a href="#sample-photo" rel="next" <span style="background-color: #ffff00;">class="no-label"</span>&gt;Sample photo&lt;/a&gt;</code>.</p>
+<p><code></code>Custom labels can express a pseudo-relationship in links without a <code>rel</code> attribute or replace default labels in links with a <code>rel</code> attribute (tags' stars as well), by setting a <code>data-label</code> attribute on the link &ndash; as in <code>&lt;a href="#about" <span style="background-color: #ffff00;">data-label="See also"</span>&gt;About&lt;/a&gt;</code> or <code>&lt;a href="#my-sweetheart" <span style="background-color: #0098ff;">rel="sweetheart"</span> <span style="background-color: #ffff00;">data-label="Thanks to"</span>&gt;Carla&lt;/a&gt;</code>. Furthermore, it is possible to remove the default labels by assigning a <code>"no-label"</code> class to the link &ndash; as in: <code>&lt;a href="#sample-photo" rel="next" <span style="background-color: #ffff00;">class="no-label"</span>&gt;Sample photo&lt;/a&gt;</code>.</p>
 <p>Elements matching the following selectors will generate navigation buttons.</p>
 <ol>
 <li><code>article.slide &gt; nav:first-of-type a[rel~="<span style="background-color: #ffff00;">parent</span>"]:not(.no-nav)</code> generates the &times; button</li>
@@ -87,7 +87,7 @@ <h5>Children of the main <code>&lt;nav&gt;</code> (the <code>rel</code> attribut
 <li><code>article.slide &gt; nav:first-of-type a[rel~="<span style="background-color: #ffff00;">bookmark</span>"]:not(.no-nav)</code> generates the 🔗 button</li>
 <li><code>article.slide &gt; nav:first-of-type a[rel~="<span style="background-color: #ffff00;">author</span>"]:not(.no-nav)</code> generates the @ button</li>
 </ol>
-<p>When present, it is very important that each of them occur <strong>only once for each slide<code></code></strong>, or the button will be generated twice in the same position. As one can see, setting a <code>"no-nav"</code> class on the links will prevent the creation of buttons and will allow duplications &ndash; a typical case is the duplication of <code>a[rel~="author"]</code> in slides with more than one author (but consider to use a dedicated slide for listing more than one author). Other <code>a[rel="&hellip;"]</code> elements (for example, <code>a[rel="archives"]</code>, or <code>a[rel="child"]</code>, or <code>a[rel="tag"]</code>), do not generate buttons and can occur more the once within the main <code>&lt;nav&gt;</code>. Moreover, additional duplications of the above cited <code>a[rel="&hellip;"]</code> elements, but placed elsewhere (e.g.: <code>article.slide &gt; div a[rel="next"]</code>), are irrelevant for this CSS.</p>
+<p>When present, it is very important that each of them occur <strong>only once for each slide<code></code></strong>, or the button will be generated twice in the same position. As one can see, setting a <code>"no-nav"</code> class on the links will prevent the creation of buttons and will allow duplications &ndash; a typical case is the duplication of <code>a[rel~="author"]</code> in slides with more than one author (but consider to use a dedicated slide for listing more than one author). Other <code>a[rel="&hellip;"]</code> elements (for example, <code>a[rel="archives"]</code>, or <code>a[rel="child"]</code>, or <code>a[rel="tag"]</code>), do not generate buttons and may occur more the once within the main <code>&lt;nav&gt;</code>. Moreover, additional duplications of the above cited <code>a[rel="&hellip;"]</code> elements, but placed elsewhere (e.g.: <code>article.slide &gt; div a[rel="next"]</code>), are irrelevant for this CSS.</p>
 <h5>The <code>a[rel~="parent"]</code> element</h5>
 <p>In order to exit from the viewport the <code>a[rel~="parent"]</code> element is used (see above). <em>Normally this links to any unexisting hash</em> (in our examples we used the hash <code>"#nowhere"</code>, but a simple <code>"#"</code> can be enough), but in the case of nested galleries it can optionally link to the parent gallery (see below).</p>
 <p>The special link <code>a[rel~="parent"]</code> complies with the following rule:</p>
@@ -98,7 +98,7 @@ <h5>The <code>a[rel~="parent"]</code> element</h5>
 <ul>
 <li>it is inside the <code><em>&lt;leeloo&gt;</em></code> element but is <em>not empty</em>,</li>
 <li>or it is outside both the main <code>&lt;nav&gt;</code> and the <code><em>&lt;leeloo&gt;</em></code> element (empty or not empty),</li>
-<li>or <code>a[rel~="parent"]</code> *is* the <code><em>&lt;leeloo&gt;</em></code> element iself &ndash; very unlikely&hellip;</li>
+<li>or <code>a[rel~="parent"]</code> *is* the <code><em>&lt;leeloo&gt;</em></code> element iself</li>
 </ul>
 then &rArr; it will be ignored by this CSS and displayed as a normal link.</li>
 </ul>
@@ -180,7 +180,7 @@ <h3>Notes</h3>
 <li>For learning more about the <code>itemscope</code> attribute and microdata, please see <a href="http://schema.org/" target="_blank">schema.org</a>. A lists of the main <code>rel</code> attributes can be found <a href="https://www.w3.org/wiki/HTML/Elements/link#HTML_Attributes" target="_blank">here</a>, while its extension, together with information about microformats, can be found <a href="http://microformats.org/wiki/existing-rel-values" target="_blank">here</a>.</li>
 <li><strong>Take five!</strong> aims to be compatible with microdata, microformats and RDFa. But <em>neither microdata, nor microformats, nor RDFa are required by <strong>Take five!</strong></em>: the only required condition is a <code>class="slide"</code> assigned to an <code>&lt;article&gt;</code> element.</li>
 <li>It is possible to prevent the hashtag from being displayed in the viewport by using the class <code>"no-hashtag"</code> &ndash; as in <code>&lt;article class="slide <span style="background-color: #ffff00;">no-hashtag</span>" id="my-hash-name"&gt; &hellip; &lt;/article&gt;</code>.</li>
-<li>It is possible to prevent the creation of the navigation buttons by main <code>&lt;nav&gt;</code>'s links by assigning the class <code>"no-nav"</code> to them &ndash; as in <code>&lt;a href="#sample-slide" rel="next" class="<span style="background-color: #ffff00;">no-nav</span>"&gt;Sample slide&lt;/a&gt;</code> or <code>&lt;a href="#sample-slide" rel="next" class="no-label <span style="background-color: #ffff00;">no-nav</span>"&gt;Sample slide&lt;/a&gt;</code>.</li>
+<li>It is possible to prevent the creation of navigation buttons by main <code>&lt;nav&gt;</code>'s links by assigning the class <code>"no-nav"</code> to them &ndash; as in <code>&lt;a href="#sample-slide" rel="next" class="<span style="background-color: #ffff00;">no-nav</span>"&gt;Sample slide&lt;/a&gt;</code> or <code>&lt;a href="#sample-slide" rel="next" class="no-label <span style="background-color: #ffff00;">no-nav</span>"&gt;Sample slide&lt;/a&gt;</code>.</li>
 <li>The opposite, i.e. generating the navigation buttons without showing the links they refer to, can be obtained by leaving empty the content of the link &ndash; as in <code>&lt;a href="#sample-slide" rel="prev"&gt;&lt;/a&gt;</code>.</li>
 <li>The slide container (<code>article.slide</code>) can optionally possess a <code>data-context</code> attribute, whose content will be displayed on the left-bottom of the viewport &ndash; as in <code>&lt;article class="slide" <span style="background-color: #ffff00;">data-context="Hello world!"</span> id="my-hash-name"&gt; &hellip; &lt;/article&gt;</code>.</li>
 <li><strong>Take five!</strong> does not require JavaScript, but it does not discourage its usage. JavaScript can be useful in many ways, such as touch events for navigating through the slides, printing of single contents, etc.</li>
@@ -189,7 +189,7 @@ <h3>Notes</h3>
 <h3>FAQ</h3>
 <dl class="faq_list"><dt>I have many images in my page. How can I avoid that the browser preloads all of them?</dt><dd>If you are interested in this slide renderer, probably you don't want to leave any semantic content out of your HTML (as it would be to load the slides through JavaScript, for example). But if you really need to, consider to use the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/template" target="_blank"><code>&lt;template&gt;</code></a> element.</dd><dt>How can I enable the <code>escape</code> key for closing the slides?</dt><dd>You need to use JavaScript. I intentionally did not write any line of JavaScript code for this CSS, but you can work around it. Here follows a basic script for closing the slides by pressing the <code>escape</code> key.<br />
 <pre class="example">/* closes the slide currently open or does nothing */<br />function closeCurrentSlide () {<br />&nbsp;&nbsp;&nbsp; var oSlide = document.querySelector("article.slide:target");<br />&nbsp;&nbsp;&nbsp; if (oSlide) {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var oExitLink = oSlide.querySelector("nav:first-of-type a[href][rel~=\"parent\"]");<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; location.assign(oExitLink ? oExitLink.href : "#");<br />&nbsp;&nbsp;&nbsp; }<br />}<br /><br />document.addEventListener("keyup", function (oEvt) {<br />&nbsp;&nbsp;&nbsp; if (oEvt.key === "Escape") {<br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; closeCurrentSlide();<br />&nbsp;&nbsp;&nbsp; }<br />}, false);</pre>
-</dd><dt>How will the slides look on a printed page?</dt><dd>They wont, probably. Consider to use <strong>Take five!</strong> only for the view on screen, then write a custom CSS for the printed version of your page:<br />
+</dd><dt>How will the slides look on a printed page?</dt><dd>They won't, probably. Consider to use <strong>Take five!</strong> only for the view on screen, then write a custom CSS for the printed version of your page:<br />
 <pre class="example">&lt;link rel="stylesheet" type="text/css" href="takefive_min.css" <span style="background-color: #ffff00;">media="screen"</span> /&gt;<br />&lt;link rel="stylesheet" type="text/css" href="<span style="background-color: #0098ff;">print.css</span>" <span style="background-color: #ffff00;">media="print"</span> /&gt;</pre>
 A good starting point for your <code>print.css</code> might be:<br />
 <pre class="example">a {<br />&nbsp;&nbsp; &nbsp;color: #000000;<br />&nbsp;&nbsp; &nbsp;text-decoration: none;<br />}<br /><br />a[href^="http"]::after {<br />&nbsp;&nbsp; &nbsp;content: "(" attr(href) ")";<br />&nbsp;&nbsp; &nbsp;vertical-align: super;<br />&nbsp;&nbsp; &nbsp;font-size: x-small;<br />}<br /><br />nav, aside {<br />&nbsp;&nbsp; &nbsp;display: none;<br />}<br /><br />article.slide {<br />&nbsp;&nbsp; &nbsp;page-break-before: always;<br />&nbsp;&nbsp; &nbsp;page-break-after: always;<br />&nbsp;&nbsp; &nbsp;page-break-inside: avoid;<br />&nbsp;&nbsp; &nbsp;background-color: #ffffff;<br />&nbsp;&nbsp; &nbsp;color: #000000;<br />&nbsp;&nbsp; &nbsp;font-family: inherit;<br />&nbsp;&nbsp; &nbsp;text-align: justify;<br />}</pre>

takefive.css

@@ -346,7 +346,7 @@ article.slide > nav:first-of-type a[href][rel~="child"]:not([rel~="parent"]):hov
 
 	(Cond. 3.) If a[href][rel~="parent"] is inside the <leeloo> element but is NOT EMPTY,
 	(Cond. 4.) or if a[href][rel~="parent"] is outside both the main <nav> and the <leeloo> element (empty or not empty),
-	(Cond. 5.) or if a[href][rel~="parent"] *is* <leeloo> itself -- very unlikely...:
+	(Cond. 5.) or if a[href][rel~="parent"] *is* <leeloo> itself:
 
 		--> it will be ignored by this CSS and displayed as a normal link.