Commit 55

- Documentation

ChangeLog.md

@@ -1,6 +1,13 @@
 # Change Log
 
 
+## 3.1.4 (2022-08-06)
+
+Changes:
+
+* Documentation
+
+
 ## 3.1.3 (2021-10-20)
 
 Changes:

README.md

@@ -8,7 +8,7 @@ See:
 * [Live demo][1]
 * [Manual][2]
 
-Please refer to the `dist` subdirectory for the current release of the CSS.
+Please refer to the `dist` subdirectory for the latest release of the CSS.
 
 
 Free software

dev/takefive-dev.css

@@ -7,7 +7,7 @@
 |*|
 |*|	https://github.com/madmurphy/takefive.css/
 |*|
-|*|	Version 3.1.2
+|*|	Version 3.1.4
 |*|
 |*|	(c) [email protected]
 |*|
@@ -39,7 +39,7 @@
 
 	Although beautiful, unfortunately these fonts do not support
 	accented characters. If you make successful experiments with
-	other custom fonts, please consider to share them.
+	other custom fonts, please consider sharing your findings.
 
 */
 /*@@@@@@@@@@@@@@@@@@@@@@@@@@ !END_DEV_ONLY! @@@@@@@@@@@@@@@@@@@@@@@@@*/

dist/takefive.css

@@ -7,7 +7,7 @@
 |*|
 |*|	https://github.com/madmurphy/takefive.css/
 |*|
-|*|	Version 3.1.2
+|*|	Version 3.1.4
 |*|
 |*|	(c) [email protected]
 |*|

docs/man.html

@@ -24,45 +24,45 @@ <h2>Getting started</h2>
 <p>In order to create a slide with <strong>Take Five!</strong> all you need to do is to include <code>takefive(.min).css</code> in your document, then use one of the following basic syntaxes:</p>
 <ul class="panel-list">
 <li>
-<pre class="example">&lt;p&gt;&lt;a href="#my_hash"&gt;My slide&lt;/a&gt;&lt;/p&gt;
+<pre class="example">&lt;p&gt;&lt;a href="#<em>my-hashtag</em>"&gt;My slide&lt;/a&gt;&lt;/p&gt;
 
-&lt;article id="my_hash" class="slide"&gt;
+&lt;article id="<em>my-hashtag</em>" class="slide"&gt;
     <mark>&lt;element-to-be-slided /&gt;</mark>
 &lt;/article&gt;</pre>
 </li>
 <li>
-<pre class="example">&lt;p&gt;&lt;a href="#my_hash"&gt;My slide&lt;/a&gt;&lt;/p&gt;
+<pre class="example">&lt;p&gt;&lt;a href="#<em>my-hashtag</em>"&gt;My slide&lt;/a&gt;&lt;/p&gt;
 
-&lt;article id="my_hash" class="slide"&gt;
+&lt;article id="<em>my-hashtag</em>" class="slide"&gt;
     &lt;nav&gt;
         &lt;a href="#nowhere" rel="parent"&gt;&lt;/a&gt;
     &lt;/nav&gt;
     <mark>&lt;element-to-be-slided /&gt;</mark>
 &lt;/article&gt;</pre>
 </li>
 <li>
-<pre class="example">&lt;p&gt;&lt;a href="#my_hash"&gt;My slide&lt;/a&gt;&lt;/p&gt;
+<pre class="example">&lt;p&gt;&lt;a href="#<em>my-hashtag</em>"&gt;My slide&lt;/a&gt;&lt;/p&gt;
 
-&lt;article id="my_hash" class="slide"&gt;
+&lt;article id="<em>my-hashtag</em>" class="slide"&gt;
     <mark>&lt;element-to-be-slided /&gt;</mark>
     &lt;nav&gt;
         &lt;a href="#nowhere" rel="parent"&gt;My diary&lt;/a&gt;
     &lt;/nav&gt;
 &lt;/article&gt;</pre>
 </li>
 <li>
-<pre class="example">&lt;p&gt;&lt;a href="#my_hash5"&gt;My slide&lt;/a&gt;&lt;/p&gt;
+<pre class="example">&lt;p&gt;&lt;a href="#<em>my-hashtag-5</em>"&gt;My slide&lt;/a&gt;&lt;/p&gt;
 
-&lt;article id="my_hash5" class="slide"&gt;
+&lt;article id="<em>my-hashtag-5</em>" class="slide"&gt;
     &lt;header&gt;
         &lt;h2&gt;[title]&lt;/h2&gt;
     &lt;/header&gt;
     &lt;nav&gt;
         &lt;a href="#nowhere" rel="parent"&gt;My home page&lt;/a&gt;
-        &lt;a href="#my_hash4" rel="prev"&gt;[previous slide name]&lt;/a&gt;
-        &lt;a href="#my_hash6" rel="next"&gt;[next slide name]&lt;/a&gt;
-        &lt;a href="#my_hash1" rel="first"&gt;[first slide name]&lt;/a&gt;
-        &lt;a href="#my_hash10" rel="last"&gt;[last slide name]&lt;/a&gt;
+        &lt;a href="#<em>my-hashtag-4</em>" rel="prev"&gt;[previous slide name]&lt;/a&gt;
+        &lt;a href="#<em>my-hashtag-6</em>" rel="next"&gt;[next slide name]&lt;/a&gt;
+        &lt;a href="#<em>my-hashtag-1</em>" rel="first"&gt;[first slide name]&lt;/a&gt;
+        &lt;a href="#<em>my-hashtag-9</em>" rel="last"&gt;[last slide name]&lt;/a&gt;
         <mark class="bg1">Etc. etc.</mark>
     &lt;/nav&gt;
     <mark>&lt;this-element-will-be-slided /&gt;</mark>
@@ -98,9 +98,9 @@ <h2>Philosophy</h2>
 <p>The philosophy of <strong>Take Five!</strong> is that of facilitating a general semantics for expressing a slide with HTML (independently of how this is rendered), rather than focusing on means to express a layout.</p>
 <p>In the original meaning of the term a slide is a single page projected on a wall through a beamer or a lightbox. The term does not describe weather a slide is blue or red, or whether it contains a picture or text, but only that its content must fit in a single page and the lights in the room are usually switched off.</p>
 <p>A slide can also be taken in the hands and read in its physical form with the lights on, thus the most characterizing aspect of a slide is actually its conciseness and independence, not how it is displayed.</p>
-<p>With its inception HTML5 introduced six semantic elements (<code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> and <code>&lt;section&gt;</code>), one of which is well suited to represent a self-contained composition: the <code>&lt;article&gt;</code> element.</p>
+<p>With its inception HTML5 introduced six semantic elements (<code>&lt;article&gt;</code>, <code>&lt;aside&gt;</code>, <code>&lt;footer&gt;</code>, <code>&lt;header&gt;</code>, <code>&lt;nav&gt;</code> and <code>&lt;section&gt;</code>), one of which is well suited to represent self-contained compositions: the <code>&lt;article&gt;</code> element.</p>
 <blockquote>The <a href="https://www.w3.org/TR/html52/sections.html#elementdef-article" target="_blank" rel="noopener"><code>&lt;article&gt;</code></a> element <a href="https://www.w3.org/TR/html52/dom.html#represent" target="_blank" rel="noopener">represents</a> a complete, or self-contained, composition in a document, page, application, or site. This could be a magazine, newspaper, technical or scholarly article, an essay or report, a blog or other social media post.</blockquote>
-<p>For non-semantic aspects, HTML possesses also a <code>class</code> attribute, which although cannot describe what things are, can still be used to describe how they look. For describing an <code>&lt;article&gt;</code> that is projected on a wall it is then possible to write <code>&lt;article class="slide"&gt;</code>.</p>
+<p>For non-semantic properties, HTML possesses also a <code>class</code> attribute, which although cannot describe what things are, can still be used to describe how things look. For describing an <code>&lt;article&gt;</code> that is projected on a wall it is then possible to write <code>&lt;article class="slide"&gt;</code>.</p>
 <p>Since a <code>class</code> attribute does not express semantics, such a slide remains primarily an <code>&lt;article&gt;</code> element, and <code>&lt;article class="slide"&gt;</code> translates as &ldquo;<code>&lt;article&gt;</code> that <em>looks like</em> a slide&rdquo; (but not as &ldquo;<code>&lt;article&gt;</code> that <a href="https://www.w3.org/TR/html52/dom.html#represent" target="_blank" rel="noopener">represents</a> a slide&rdquo;).</p>
 <p><strong>Take Five!</strong> is a slide renderer written in CSS, which means that it can only decide how things look, not what they are. However, in deciding what to give a style to, <strong>Take Five!</strong> focuses on elements that have a meaning (semantic elements), instead of generic elements that simply claim a layout (as it would be, for instance <code>&lt;div class="i-want-a-layout"&gt; ... &lt;/div&gt;</code>).</p>
 <p>Concretely speaking this has two effects:</p>
@@ -111,7 +111,7 @@ <h2>Philosophy</h2>
 <p>A densely populated slide (<code>&lt;article&gt;</code>), besides its main content, can possess a title, a footer and some other information aside; therefore when this happens <strong>Take Five!</strong> gives a style to the <code>&lt;header&gt;</code>, <code>&lt;footer&gt;</code> and <code>&lt;aside&gt;</code> elements nested within it. In an internet context a slide can also be linked to other slides, hence <strong>Take Five!</strong> gives a layout to the <code>&lt;nav&gt;</code> element as well. A <code>&lt;nav&gt;</code> element however does not make much sense in a printed page, so when the slide is &ldquo;taken in the hands&rdquo; (printed) the <code>&lt;nav&gt;</code> element is not displayed.</p>
 <p>Elements are not the only things that can express semantics in HTML. A further place that conveys semantics is the <code>rel</code> attribute assigned to links. Therefore, when a slide is displayed on a screen and the <code>&lt;nav&gt;</code> element is shown, <strong>Take Five!</strong> relies on the <code>rel</code> attributes for deciding how to style each link and what role it has in the viewport.</p>
 <h2>The viewport</h2>
-<p>Each slide (<code>&lt;article <mark>id="my-hash-tag" class="slide"</mark>&gt; ... &lt;/article&gt;</code>)</p>
+<p>Each slide (<code>&lt;article <mark>id="<em>my-hashtag</em>" class="slide"</mark>&gt; ... &lt;/article&gt;</code>)</p>
 <ul>
 <li>is displayed fixed, covers the entire page and can be accessed through its hashtag (its <code>id</code> attribute)</li>
 <li>is independent and does not require any special container; can nevertheless link to other slides to form a gallery</li>
@@ -200,7 +200,7 @@ <h3>Classes for the <code>&lt;article&gt;</code> element (i.e., the slide)</h3>
 <tr>
 <td><code>"no-hashtag"</code></td>
 <td><code>article.slide.no-hashtag</code></td>
-<td>It is possible to prevent the hashtag from being displayed on the bottom-right corner of the viewport by using the <code>"no-hashtag"</code> class &ndash; as in <code>&lt;article class="slide <mark>no-hashtag</mark>" id="my-hash-name"&gt; ... &lt;/article&gt;</code>.</td>
+<td>It is possible to prevent the hashtag from being displayed on the bottom-right corner of the viewport by using the <code>"no-hashtag"</code> class &ndash; as in <code>&lt;article class="slide <mark>no-hashtag</mark>" id="<em>my-hashtag</em>"&gt; ... &lt;/article&gt;</code>.</td>
 </tr>
 <tr>
 <td><code>"nonadaptive"</code></td>
@@ -322,7 +322,7 @@ <h2>Supported <code>data-*</code> attributes</h2>
 <tr>
 <td><code>data-context</code></td>
 <td><code>article.slide[data-context]</code></td>
-<td>The slide container (<code>article.slide</code>) can optionally possess a <code>data-context</code> attribute, whose content will be displayed on the top left side of the viewport &ndash; as in <code>&lt;article class="slide" <mark>data-context="Hello world!"</mark> id="my-hash-name"&gt; ... &lt;/article&gt;</code> (it takes 2.5 seconds to show up, so you must wait to see it). See also note below.</td>
+<td>The slide container (<code>article.slide</code>) can optionally possess a <code>data-context</code> attribute, whose content will be displayed on the top left side of the viewport &ndash; as in <code>&lt;article class="slide" <mark>data-context="Hello world!"</mark> id="<em>my-hashtag</em>"&gt; ... &lt;/article&gt;</code> (it takes 2.5 seconds to show up, so you must wait to see it). See also note below.</td>
 </tr>
 <tr>
 <td><code>data-label</code></td>
@@ -545,10 +545,10 @@ <h3>All animations fire on page load</h3>
 <p>To test weather your browser is affected by the bug you can visit <a class="obvious" href="https://lab.laukstein.com/bug/input" target="_blank" rel="noopener">lab.laukstein.com/bug/input</a>.</p>
 <h3>The <code>z-index</code> collision</h3>
 <p>The <code>&lt;article class="slide"&gt;</code> element has the <code>z-index</code> property set to <code>10000</code>, hence no other elements within the document must have a <code>z-index</code> higher than <code>10000</code> in order not to be displayed above the slides. If there is no way to prevent that, it is possible to assign a higher <code>z-index</code> to the slides manually,</p>
-<pre class="example">&lt;article id="my_hashtag" class="slide" <mark>style="z-index: 99999;"</mark>&gt; ... &lt;/article&gt;</pre>
+<pre class="example">&lt;article id="<em>my-hashtag</em>" class="slide" <mark>style="z-index: 99999;"</mark>&gt; ... &lt;/article&gt;</pre>
 <p>or nest them within a higher stacking context.</p>
 <pre class="example"><mark>&lt;div style="position: relative; z-index: 99999;"&gt;</mark>
-    &lt;article id="my_hashtag" class="slide"&gt; ... &lt;/article&gt;
+    &lt;article id="<em>my-hashtag</em>" class="slide"&gt; ... &lt;/article&gt;
 &lt;/div&gt;</pre>
 <p>For more details, see <a href="z-index-table.html" target="_blank" rel="noopener" aria-invalid="true">the table of all the internal <code>z-indices</code> assigned by <strong>Take Five!</strong></a>.</p>
 <h3>Internet Explorer</h3>

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "Take Five!",
-	"version": "3.1.3",
+	"version": "3.1.4",
 	"description": "The most advanced pure CSS lightbox \u2014 not one single line of JavaScript has been wasted",
 	"author": "[email protected]",
 	"license": "GPL-3.0-or-later",