Skip to content

Commit a18fd87

Browse files
riccardoscalcoriccardoscalco
committed
close #3 | add section customisation
1 parent 3ed6431 commit a18fd87

File tree

5 files changed

+79
-15
lines changed

5 files changed

+79
-15
lines changed

‎index.html‎

Lines changed: 79 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -143,7 +143,7 @@ <h1>Code snippet for the document header.</h1>
143143

144144
<section>
145145
<h1>Side comments</h1>
146-
<p>This section describes how to add a <strong>side comment</strong>. Side comments typically show parenthetical content considered part of the main flow, like qualifying remarks directly related to the section.<small>Side comments are related to the paragraph, therefore they usually appear right or below the text of the paragraph. <img src="./media/ga.jpg" alt="Example of an image in a side comment.">.</small></p>
146+
<p>This section describes how to add a <strong>side comment</strong>. Side comments typically show parenthetical content considered part of the main flow, like qualifying remarks directly related to the section.<small>Side comments are related to the paragraph, therefore they usually appear right or below the text of the paragraph.</small></p>
147147
<p>A side comment should be inserted within the paragraph of a section, it will appear at the right of the paragraph and vertically aligned with it, or just below the paragraph on smaller screens.</p>
148148
<figure>
149149
<pre><code>&lt;section&gt;
@@ -163,11 +163,11 @@ <h1>Code snippet of a side comment.</h1>
163163

164164
<section>
165165
<h1 id="images-and-videos">Images and videos</h1>
166-
<p>Both images and videos are displayed within the <code>&lt;figure&gt;</code> element, possibly supplied with a caption. The <code>&lt;figure&gt;</code> element is supposed to be positioned near the paragraph where the image (or video) is mentioned. The <code>&lt;figcaption&gt;</code> element can contain a heading and one or more paragraphs.</p>
166+
<p>Images and videos are displayed using the <code>&lt;img&gt;</code> and <code>&lt;video&gt;</code> elements. If a caption is needed, wrap images and videos within the <code>&lt;figure&gt;</code> element. The <code>&lt;figcaption&gt;</code> element can contain a heading and one or more paragraphs.</p>
167167
<figure>
168-
<img src="./media/voronoi.jpg">
168+
<img style="width: 100%" src="./media/image.png">
169169
<figcaption>
170-
<p>Voronoi based artwork, written in GLSL.</p>
170+
<p>Artwork based on Perlin noise, written in GLSL.</p>
171171
</figcaption>
172172
</figure>
173173
<figure>
@@ -185,17 +185,11 @@ <h1 id="images-and-videos">Images and videos</h1>
185185
&lt;/section&gt;</code></pre>
186186
<figcaption>
187187
<h1>Code snippet of an image, with a descriptive caption.</h1>
188-
<p>The <code>&lt;figure&gt;</code> element may be avoided if there is no need for a caption, in such a case the <code>&lt;img&gt;</code> element is a child of the <code>&lt;section&gt;</code> element. The article header may contain a picture as well, which will be full width.</p>
188+
<p>The <code>&lt;figure&gt;</code> element may be avoided if there is no need for a caption, in such a case the <code>&lt;img&gt;</code> element is a child of the <code>&lt;section&gt;</code> element. The default width is 600px, authors can use inline style declarations to customise the width, as described in section <strong><a href="#customisations">Customisations</a></strong>.</p>
189189
</figcaption>
190190
</figure>
191191
<h2>Videos</h2>
192192
<p>Exactly the same HTML code snippet is used for displaying videos, with the obvious difference of using the <code>&lt;video&gt;</code> element in place of the <code>&lt;img&gt;</code> element, as shown below.</p>
193-
<figure>
194-
<video controls muted src="./media/smoke.mp4"></video>
195-
<figcaption>
196-
<p>Basic smoke effect emerging from a Perlin noise, written in GLSL.</p>
197-
</figcaption>
198-
</figure>
199193
<figure>
200194
<pre><code>&lt;section&gt;
201195
&lt;h1&gt;...&lt;/h1&gt;
@@ -211,7 +205,7 @@ <h2>Videos</h2>
211205
&lt;/section&gt;</code></pre>
212206
<figcaption>
213207
<h1>Code snippet of a video with a caption.</h1>
214-
<p>As with images, videos can be inserted in the article header.</p>
208+
<p>As with images, videos can be inserted in the article header and have a default width of 600px.</p>
215209
</figcaption>
216210
</figure>
217211
</section>
@@ -328,7 +322,7 @@ <h1>Tables</h1>
328322
&lt;/section&gt;</code></pre>
329323
<figcaption>
330324
<h1>Code snippet of a table.</h1>
331-
<p>The <code>&lt;thead&gt;</code> element defines the head of the table columns, instead, the <code>&lt;tbody&gt;</code> element is used for the table body. Note that, differently from images and videos, there is an extra <code>&lt;div&gt;</code> container wrapping the <code>&lt;table&gt;</code> element.</p>
325+
<p>The <code>&lt;thead&gt;</code> element defines the head of the table columns, instead, the <code>&lt;tbody&gt;</code> element is used for the table body. Note that, differently from images and videos, there is an extra <code>&lt;div&gt;</code> container wrapping the <code>&lt;table&gt;</code> element. The default width is 600px, authors can use inline style declarations to customise the table width, as described in section <strong><a href="#customisations">Customisations</a></strong>.</p>
332326
</figcaption>
333327
</figure>
334328
</section>
@@ -387,6 +381,7 @@ <h1>Code snippet of code listings.</h1>
387381
<p>Wrap the <code>&lt;code&gt;</code> element within the <code>&lt;pre&gt;</code> element to add multiple lines of code.</p>
388382
</figcaption>
389383
</figure>
384+
<p>As with images, videos and tables, the default width is 600px. You can use inline declarations to customise the width, for example setting 100% width with <code>&lt;pre style="width: 100%"&gt;</code>. See section <strong><a href="#customisations">Customisations</a></strong> for more details.</p>
390385
<h2>Example 1</h2>
391386
<figure id="listing1">
392387
<pre><code>const f = n => n ? n * f(n - 1) : 1;</code></pre>
@@ -495,7 +490,7 @@ <h2>Example 3</h2>
495490
<h1>Maxwell's equations in vacuum.</h1>
496491
<p>The equations can be reduced to the standard wave equation $$
497492
\frac{1}{c^2} \frac{\partial^2 \mathbf{F}}{\partial^2 t} - \nabla^2 \mathbf{F} = 0
498-
$$ providing the theoretical background for the electromagnetic waves <cite><a href="#ref-3">[3]</a></cite>.</p>
493+
$$ providing the theoretical background for the electromagnetic waves <cite><a href="#ref-3">[3]</a></cite>. </p>
499494
</figcaption>
500495
</figure>
501496
<figure>
@@ -510,10 +505,79 @@ <h1>Maxwell's equations in vacuum.</h1>
510505
&lt;/p&gt;
511506
&lt;/figure&gt;</code></pre>
512507
<figcaption>
513-
<p>Use TeX functions for more sophisticated math typesetting.</p>
508+
<p>Use TeX functions for more sophisticated math typesetting. Use the <code>&lt;figure&gt;</code> element if a caption is needed. The default width of the <code>&lt;p&gt;</code> element whitin the <code>&lt;figure&gt;</code> element is 600px. Authors can use inline style declarations to customise the width for larger formulas, as described in section <strong><a href="#customisations">Customisations</a></strong>.</p>
514509
</figcaption>
515510
</figure>
516511
</section>
512+
513+
<section>
514+
<h1 id="customisations">Customisations</h1>
515+
<p>Rapido focuses on semantic HTML, providing a default style for a variety of HTML elements. Being CSS classes out of scope, authors looking for a different style must opt for a customisation.</p>
516+
<p>You may change the default CSS rules or write new rules that have precedence over the default ones. As usual, this is possible both with <strong>inline declarations</strong> and <strong>stylesheets</strong>. The following examples show some common customisations.
517+
</p>
518+
<figure>
519+
<pre><code>&lt;head&gt;
520+
...</code>
521+
<mark><code> &lt;style&gt;
522+
article.rapido {
523+
font-family: "Helvetica Neue";
524+
}
525+
.rapido code {
526+
font-family: "Iosevka";
527+
}
528+
&lt;/style&gt;</code></mark>
529+
<code>&lt;/head&gt;</code></pre>
530+
<figcaption>
531+
<h1>Font families.</h1>
532+
<p>You can easily change the default font families, both for code and normal text.</p>
533+
</figcaption>
534+
</figure>
535+
<figure>
536+
<pre><code>&lt;head&gt;
537+
...</code>
538+
<mark><code> &lt;style&gt;
539+
.rapido code {
540+
color: rgba(0, 0, 255, 1);
541+
}
542+
.rapido pre > mark > code {
543+
border-left: 2px solid rgba(0, 0, 255, 1);
544+
background: rgba(0, 0, 255, 0.05);
545+
}
546+
.rapido mark {
547+
background: rgba(0, 0, 255, 0.1);
548+
}
549+
&lt;/style&gt;</code></mark>
550+
<code>&lt;/head&gt;</code></pre>
551+
<figcaption>
552+
<h1>Font colour on code snippets.</h1>
553+
<p>The default colour is blue, authors are encouraged to choose the colour that better adapts to the pre-existing style if any.</p>
554+
</figcaption>
555+
</figure>
556+
<figure>
557+
<pre><code>&lt;figure&gt;
558+
&lt;img src="..." <mark>style="width: 100%"</mark>&gt;
559+
...
560+
&lt;/figure&gt;</code></pre>
561+
<figcaption>
562+
<h1>Full-width images, videos, tables and code snippets.</h1>
563+
<p>The default width is 600 pixels, you can assign to an image a bigger or smaller width than the default one. Full width equals to 944 pixels.</p>
564+
</figcaption>
565+
</figure>
566+
<figure>
567+
<pre><code>&lt;head&gt;
568+
...</code>
569+
<mark><code> &lt;style&gt;
570+
.rapido .full-width {
571+
width: 100%;
572+
}
573+
&lt;/style&gt;</code></mark>
574+
<code>&lt;/head&gt;</code></pre>
575+
<figcaption>
576+
<p>Full-width images can be obtained also defining an apposite CSS class, which can be used with <code>&lt;img src="..." class="full-width"&gt;</code>. On the same way it can be used with videos (<code>&lt;video&gt;</code>), code snippets (<code>&lt;pre&gt;</code>) and tables (<code>&lt;div&gt;</code>).</p>
577+
</figcaption>
578+
</figure>
579+
</section>
580+
517581
<footer>
518582
<section>
519583
<h1>Footnotes</h1>

‎media/ga.jpg‎

-56.7 KB
Binary file not shown.

‎media/image.png‎

109 KB
Loading

‎media/smoke.mp4‎

-2.55 MB
Binary file not shown.

‎media/voronoi.jpg‎

-357 KB
Binary file not shown.

0 commit comments

Comments
 (0)