William Daniau / wize

Download as
Browse Code »

Commit 2bcae7c85ce0203bf40b564c4e48d2d2a8b188e6

Authored by William Daniau
1 parent bcd7223e8d
Exists in master

Update demo

Showing 9 changed files with 274 additions and 66 deletions Inline Diff

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 1 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html> 2 2 <html>
<head> 3 3 <head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 4 4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Demo</title> 5 5 <title>Demo</title>
<meta name='Generator' content='Zim 0.68-rc1'> 6 6 <meta name='Generator' content='Zim 0.68-rc1'>
<link rel="stylesheet" 7 7 <link rel="stylesheet"
href="./Demo_files/_resources/common/zim-style.css" > 8 8 href="./Demo_files/_resources/common/zim-variables.css" >
<link rel="stylesheet" 9 9 <link rel="stylesheet"
href="./Demo_files/_resources/common/zim-table-style.css" > 10 10 href="./Demo_files/_resources/common/zim-style.css" >
<link rel="stylesheet" 11 11 <link rel="stylesheet"
href="./Demo_files/_resources/common/zim-special.css" > 12 12 href="./Demo_files/_resources/common/zim-table-style.css" >
<link rel="stylesheet" 13 13 <link rel="stylesheet"
href="./Demo_files/_resources/common/zim-hljs.css" > 14 14 href="./Demo_files/_resources/common/zim-special.css" >
15 <link rel="stylesheet"
16 href="./Demo_files/_resources/common/zim-hljs.css" >
15 17
<style type='text/css'> 16 18 <style type='text/css'>
* { font-family: sans-serif } 17 19 * { font-family: sans-serif }
18 20
a:hover { text-decoration: underline; } 19 21 a:hover { text-decoration: underline; }
20 22
/* Centre les images mais elles sont coupées aux sauts de page à l'impression */ 21 23 /* Centre les images mais elles sont coupées aux sauts de page à l'impression */
img { 22 24 img {
display: block; 23 25 display: block;
margin-left: auto; 24 26 margin-left: auto;
margin-right: auto; 25 27 margin-right: auto;
} 26 28 }
29
30 /* Specifique au with index */
31 span.insen { color: grey }
27 32
28 33 .pages {
</style> 29 34 /*max-width: 1000px;*/
30 35 /*padding-left: 320px;*/
<!-- Themes clair : 31 36 width: inherit;
atom-one-light.css, vs.css googlecode.css github.css 32 37 transition: margin-left .3s;
qtcreator_light.css 33 38 background: white;
Themes sombres : 34 39 padding-left: 10px;
40 padding-right: 10px;
41 padding-bottom: 20px;
42 padding-top: 10px;
43 }
44
45 .menu{
46 /*float:left; */
47 width: 0;
48 color:var(--main-header-color);
49 overflow-x: hidden;
50 position: absolute;
51 transition:.3s;
52 background: var(--main-menu-background-color);
53 border-style: solid;
54 border-width: 1px;
55 margin-left:-20px;
56 }
57
58 .menu a,.menu a:link,.menu a:hover,.menu a:active,.menu a:visited {
59 color: var(--main-header-color);
60 }
61
62 .menuOpen {
63 /*display: block;*/
64 }
65
66 .menuClosed {
67 border-style: unset;
68 }
69
70 .header{
71 max-width: 63em;
72 position: fixed;
73 width: 100%;
74 top:0;
75 background:white;
76 z-index: 1;
77 }
78
79 hr{
80 clear:both;
81 border-style: solid;
82 border-width: 1px;
83 border-color: var(--main-header-color);
84 }
85
86 body {
87 max-width:63em;
88 display:block;
89 margin-left:auto;
90 margin-right:auto;
91 background: var(--main-body-background-color);
92 }
93
94 .intercalaire {
95 background:white;
96 margin-top: 48px;
97 padding: 10px;
98 }
99
100 .bold-footer {
101 color: var(--main-header-color);
102 }
103
104 </style>
105
106 <!-- Themes clair :
107 atom-one-light.css, vs.css googlecode.css github.css
108 qtcreator_light.css
109 Themes sombres :
agate.css vs2015.css atom-one-dark.css hybrid.css 35 110 agate.css vs2015.css atom-one-dark.css hybrid.css
ir-black.css sunburst.css tomorrow-night-bright.css 36 111 ir-black.css sunburst.css tomorrow-night-bright.css
qtcreator_dark.css 37 112 qtcreator_dark.css
Demo live : https://highlightjs.org/static/demo/ --> 38 113 Demo live : https://highlightjs.org/static/demo/ -->
<link rel="stylesheet" 39 114 <link rel="stylesheet"
href="./Demo_files/_resources/common/hljs/styles/sunburst.css" > 40 115 href="./Demo_files/_resources/common/hljs/styles/sunburst.css" >
41 116
<!-- hljs --> 42 117 <!-- hljs -->
<script src="./Demo_files/_resources/common/hljs/highlight.pack.js"></script> 43 118 <script src="./Demo_files/_resources/common/hljs/highlight.pack.js"></script>
44 119
120 <script>
121 function openNav() {
122 if (document.getElementById("mySidenav").getAttribute("class").split(' ')[1] == "menuClosed") {
123 document.getElementById("mySidenav").style.width = "300px";
124 /*document.getElementById("main").style.marginLeft = "300px";*/
125 document.getElementById("mySidenav").setAttribute("class","menu menuOpen");
126 /* Scroll to top when opening menu */
127 document.body.scrollTop = 0
128 document.documentElement.scrollTop = 0;
129 } else {
130 document.getElementById("mySidenav").style.width = "0";
131 /*document.getElementById("main").style.marginLeft = "0";*/
132 document.getElementById("mySidenav").setAttribute("class","menu menuClosed");
133 }
134 }
135 </script>
</head> 45 136 </head>
<body> 46 137 <body>
47 138
<!-- Header --> 48 139 <!-- Header -->
<div class='header'> 49 140 <div class='header'>
<table class='navigation'> 50 141 <table class='navigation' style="float:left">
<tr class='navigation'> 51 142 <tr class='navigation'>
<td class='navigation'> 52 143 <td class='navigation'>
144 <span style="font-size:30px;cursor:pointer;color: var(--main-header-color);" onclick="openNav()">&#9776;</span>
145 </td>
146 <td class='navigation'>
<img src="./Demo_files/_resources/common/arrow-left-inact.png" alt="Préc." title="Préc."> 53 147 <img src="./Demo_files/_resources/common/arrow-left-inact.png" alt="Préc." title="Préc.">
</td> 54 148 </td>
<td class='navigation'> 55 149 <td class='navigation'>
<img src="./Demo_files/_resources/common/arrow-up-inact.png" alt="Index" title="Index"> 56 150 <img src="./Demo_files/_resources/common/arrow-up-inact.png" alt="Index" title="Index">
</td> 57 151 </td>
<td class='navigation'> 58 152 <td class='navigation'>
<img src="./Demo_files/_resources/common/arrow-right-inact.png" alt="Suivant" title="Suivant"> 59 153 <img src="./Demo_files/_resources/common/arrow-right-inact.png" alt="Suivant" title="Suivant">
</td> 60 154 </td>
</tr> 61 155 </tr>
</table> 62 156 </table>
157
158 <span>
159 <a name='Tests:Demo'></a>
160 <h1 style="display:inline-block;margin-left:20px;margin-top:5px;">
161 Demo</h1>
162 </span>
163
164 <table class='navigation' style="float:right;margin-right:10px;">
165 <tr class='navigation'>
166 <td class='navigation'>
167 <a href="#backlinks">
168 <img src='./Demo_files/_resources/common/backlink.png' alt='Rétroliens' title='Rétroliens'>
169 </a>
170 </td>
171 <td class='navigation'>
172 <a href="#attach">
173 <img src='./Demo_files/_resources/common/attachment.png' alt='Fichiers liés' title='Fichiers liés'>
174 </a>
175
176 </td>
177 </tr>
178 </table>
</div> 63 179 </div>
64 180
181 <div class="intercalaire">
<hr /> 65 182 <hr />
183 </div>
66 184
<!-- Wiki content --> 67 185 <div id="mySidenav" class="menu menuClosed">
186 <ul>
187 <li><b>Demo</b></li>
188 </ul>
68 189
<div class='pages'> 69 190 </div>
<div class='heading'> 70
<h1>Demo <a name='Tests:Demo'></a></h1> 71
</div> 72
73 191
<div class='content'> 74 192 <!-- Wiki content -->
<p> 75 193
194 <div id="main" class='pages'>
195 <!--
196 <div class='heading'>
197 <h1>Demo <a name='Tests:Demo'></a></h1>
198 </div>
199 -->
200 <div class='content'>
201 <p>
Créée le mardi 01 octobre 2019 76 202 Créée le mardi 01 octobre 2019
</p> 77 203 </p>
78 204
<h1>Headers</h1> 79 205 <h1>Headers</h1>
80 206
<p> 81 207 <p>
Appliqué sur : zim, htmlexport, print<br> 82 208 Appliqué sur : zim, htmlexport, print<br>
Les headers sont décalés pour une meilleure visibilité du niveau de section où on se trouve 83 209 Les headers sont décalés pour une meilleure visibilité du niveau de section où on se trouve
</p> 84 210 </p>
85 211
<h1>Header H1</h1> 86 212 <h1>Header H1</h1>
87 213
<br> 88 214 <br>
89 215
<h2>Header H2</h2> 90 216 <h2>Header H2</h2>
91 217
<br> 92 218 <br>
93 219
<h3>Header H3</h3> 94 220 <h3>Header H3</h3>
95 221
<br> 96 222 <br>
97 223
<h4>Header H4</h4> 98 224 <h4>Header H4</h4>
99 225
<br> 100 226 <br>
101 227
<h5>Header H5</h5> 102 228 <h5>Header H5</h5>
103 229
<br> 104 230 <br>
105 231
<h1>Souligné</h1> 106 232 <h1>Souligné</h1>
107 233
<p> 108 234 <p>
Appliqué sur : zim, htmlexport, print 109 235 Appliqué sur : zim, htmlexport, print
</p> 110 236 </p>
111 237
<p> 112 238 <p>
Les <u>textes</u> soulignés sont soulignés et non surlignés. 113 239 Les <u>textes</u> soulignés sont soulignés et non surlignés.
</p> 114 240 </p>
115 241
<h1>Verbatim</h1> 116 242 <h1>Verbatim</h1>
117 243
<p> 118 244 <p>
Appliqué sur : zim, htmlexport, print<br> 119 245 Appliqué sur : zim, htmlexport, print<br>
Pour bien le mettre en évidence, le verbatim <tt>inline</tt> est coloré en darkmagenta. 120 246 Pour bien le mettre en évidence, le verbatim <tt>inline</tt> est coloré en darkmagenta.
</p> 121 247 </p>
122 248
<pre> 123 249 <pre>
Tout comme 124 250 Tout comme
le bloc verbatim 125 251 le bloc verbatim
</pre> 126 252 </pre>
127 253
<br> 128
129
<p> 130 254 <p>
A noter que le bloc verbatim est indenté, zim fait la différence par le fait de sélectionner plusieurs lignes avant d'appliquer le style (&lt;Ctrl&gt;T). 131 255 A noter que le bloc verbatim est indenté, zim fait la différence par le fait de sélectionner plusieurs lignes avant d'appliquer le style (&lt;Ctrl&gt;T).
</p> 132 256 </p>
133 257
258 <p>
259 Les textes barrés sont en fait surlignés.
260 </p>
261
<h1>Tableaux</h1> 134 262 <h1>Tableaux</h1>
135 263
<p> 136 264 <p>
Appliqué sur : htmlexport, print 137 265 Appliqué sur : htmlexport, print
</p> 138 266 </p>
139 267
<p> 140 268 <p>
Les tableaux dans zim ne sont vraiment pas terribles, mais on peut avoir quelquechose de sympa une fois exportés. 141 269 Les tableaux dans zim ne sont vraiment pas terribles, mais on peut avoir quelquechose de sympa une fois exportés.
</p> 142 270 </p>
<table> 143 271 <table>
<thead><tr> 144 272 <thead><tr>
<th align="left">Prénom</th> 145 273 <th align="left">Prénom</th>
<th align="left">Nom</th> 146 274 <th align="left">Nom</th>
<th align="left">email</th> 147 275 <th align="left">email</th>
<th align="left">Couleur préférée</th> 148 276 <th align="left">Couleur préférée</th>
</tr></thead> 149 277 </tr></thead>
<tr> 150 278 <tr>
<td align="left">Joe</td> 151 279 <td align="left">Joe</td>
<td align="left">Smith</td> 152 280 <td align="left">Smith</td>
<td align="left"><a href="mailto:joe.smith@here.com" title="joe.smith@here.com" class="mailto">joe.smith@here.com</a></td> 153 281 <td align="left"><a href="mailto:joe.smith@here.com" title="joe.smith@here.com" class="mailto">joe.smith@here.com</a></td>
<td align="left">Orange</td> 154 282 <td align="left">Orange</td>
</tr> 155 283 </tr>
<tr> 156 284 <tr>
<td align="left">Marcel</td> 157 285 <td align="left">Marcel</td>
<td align="left">Dupont</td> 158 286 <td align="left">Dupont</td>
<td align="left"><a href="mailto:marcel.dupont@nothere.com" title="marcel.dupont@nothere.com" class="mailto">marcel.dupont@nothere.com</a></td> 159 287 <td align="left"><a href="mailto:marcel.dupont@nothere.com" title="marcel.dupont@nothere.com" class="mailto">marcel.dupont@nothere.com</a></td>
<td align="left">Bleu</td> 160 288 <td align="left">Bleu</td>
</tr> 161 289 </tr>
<tr> 162 290 <tr>
<td align="left">Nathalie</td> 163 291 <td align="left">Nathalie</td>
<td align="left">Charpentier</td> 164 292 <td align="left">Charpentier</td>
<td align="left"><a href="mailto:nathalie.charpentier@lasbas.com" title="nathalie.charpentier@lasbas.com" class="mailto">nathalie.charpentier@lasbas.com</a></td> 165 293 <td align="left"><a href="mailto:nathalie.charpentier@lasbas.com" title="nathalie.charpentier@lasbas.com" class="mailto">nathalie.charpentier@lasbas.com</a></td>
<td align="left">Vert</td> 166 294 <td align="left">Vert</td>
</tr> 167 295 </tr>
<tr> 168 296 <tr>
<td align="left">Electra</td> 169 297 <td align="left">Electra</td>
<td align="left">Cigales</td> 170 298 <td align="left">Cigales</td>
<td align="left"><a href="mailto:electra.cigales@nowhere.com" title="electra.cigales@nowhere.com" class="mailto">electra.cigales@nowhere.com</a></td> 171 299 <td align="left"><a href="mailto:electra.cigales@nowhere.com" title="electra.cigales@nowhere.com" class="mailto">electra.cigales@nowhere.com</a></td>
<td align="left">Rouge</td> 172 300 <td align="left">Rouge</td>
</tr> 173 301 </tr>
</table> 174 302 </table>
175 303
<br> 176 304 <br>
177 305
306 <p>
307 En pratique, les tableaux dans le "source" zim sont des tableaux avec la syntaxe "MarkDown", le tableau ci-dessus a comme source :
308 </p>
309 <pre>
310 | Prénom | Nom | email | Couleur préférée |
311 |:---------|:------------|:--------------------------------|:-----------------|
312 | Joe | Smith | joe.smith@here.com | Orange |
313 | Marcel | Dupont | marcel.dupont@nothere.com | Bleu |
314 | Nathalie | Charpentier | nathalie.charpentier@lasbas.com | Vert |
315 | Electra | Cigales | electra.cigales@nowhere.com | Rouge |
316 </pre>
317
318 <br>
319
320 <p>
321 On peux très bien écrire directement ces caractères (en texte normal, pas verbatim) puis taper <tt>&lt;Ctrl&gt;R</tt>, indiquant à zim de réinterpréter le document, le tableau apparaitra alors comme ci-dessus.
322 </p>
323
324 <p>
325 L'interet de cette information est que par conséquent on peut utiliser un générateur de tableaux comme l'excellent <a href="https://www.tablesgenerator.com/" title="https://www.tablesgenerator.com/" class="https">https://www.tablesgenerator.com/</a> qui permet de générer des tableaux LaTeX, HTML ou MarkDown, puis coller le tableau et actualiser.
326 </p>
327
<h1>Images</h1> 178 328 <h1>Images</h1>
179 329
<p> 180 330 <p>
Appliqué sur : htmlexport 181 331 Appliqué sur : htmlexport
</p> 182 332 </p>
183 333
<p> 184 334 <p>
<img src="./Demo_files/tournesol.jpeg"> 185 335 <img src="./Demo_files/tournesol.jpeg">
</p> 186 336 </p>
187 337
<p> 188 338 <p>
Lors de l'export html, les images sont centrées, c'est plus beau. Elles ne le sont pas lors du print parcequ'en effet secondaire, les images peuvent être coupées à l'impression. 189 339 Lors de l'export html, les images sont centrées, c'est plus beau. Elles ne le sont pas lors du print parcequ'en effet secondaire, les images peuvent être coupées à l'impression.
</p> 190 340 </p>
191 341
<h1>Coloration syntaxique</h1> 192 342 <h1>Coloration syntaxique</h1>
193 343
<p> 194 344 <p>
Appliqué sur : htmlexport, print 195 345 Appliqué sur : htmlexport, print
</p> 196 346 </p>
197 347
<p> 198 348 <p>
Il s'agit des bloc de code insérés dans zim avec le plugin adéquat. 199 349 Il s'agit des bloc de code insérés dans zim avec le plugin adéquat.
</p> 200 350 </p>
201 351
<p> 202 352 <p>
Un exemple en C++ 203 353 Un exemple en C++
</p> 204 354 </p>
<div class="zim-object"> 205 355 <div class="zim-object">
<pre><code class="cpp">#include &lt;iostream&gt; 206 356 <pre><code class="cpp">#include &lt;iostream&gt;
207 357
int main(int argc, char *argv[]) { 208 358 int main(int argc, char *argv[]) {
209 359
/* An annoying "Hello World" example */ 210 360 /* An annoying "Hello World" example */
for (auto i = 0; i &lt; 0xFFFF; i++) 211 361 for (auto i = 0; i &lt; 0xFFFF; i++)
cout &lt;&lt; "Hello, World!" &lt;&lt; endl; 212 362 cout &lt;&lt; "Hello, World!" &lt;&lt; endl;
213 363
char c = '\n'; 214 364 char c = '\n';
unordered_map &lt;string, vector&lt;string&gt; &gt; m; 215 365 unordered_map &lt;string, vector&lt;string&gt; &gt; m;
m["key"] = "\\\\"; // this is an error 216 366 m["key"] = "\\\\"; // this is an error
217 367
return -2e3 + 12l; 218 368 return -2e3 + 12l;
} 219 369 }
</code></pre> 220 370 </code></pre>
</div> 221 371 </div>
222 372
<br> 223 373 <br>
224 374
<p> 225 375 <p>
Un exemple en Python 226 376 Un exemple en Python
</p> 227 377 </p>
<div class="zim-object"> 228 378 <div class="zim-object">
<pre><code class="python">@requires_authorization 229 379 <pre><code class="python">@requires_authorization
def somefunc(param1='', param2=0): 230 380 def somefunc(param1='', param2=0):
r'''A docstring''' 231 381 r'''A docstring'''
if param1 &gt; param2: # interesting 232 382 if param1 &gt; param2: # interesting
print 'Gre\'ater' 233 383 print 'Gre\'ater'
return (param2 - param1 + 1 + 0b10l) or None 234 384 return (param2 - param1 + 1 + 0b10l) or None
235 385
class SomeClass: 236 386 class SomeClass:
pass 237 387 pass
238 388
&gt;&gt;&gt; message = '''interpreter 239 389 &gt;&gt;&gt; message = '''interpreter
... prompt''' 240 390 ... prompt'''
</code></pre> 241 391 </code></pre>
</div> 242 392 </div>
243 393
<br> 244 394 <br>
245 395
<p> 246 396 <p>
Un exemple en Ruby 247 397 Un exemple en Ruby
</p> 248 398 </p>
<div class="zim-object"> 249 399 <div class="zim-object">
<pre><code class="ruby"># The Greeter class 250 400 <pre><code class="ruby"># The Greeter class
class Greeter 251 401 class Greeter
def initialize(name) 252 402 def initialize(name)
@name = name.capitalize 253 403 @name = name.capitalize
end 254 404 end
255 405
def salute 256 406 def salute
puts "Hello #{@name}!" 257 407 puts "Hello #{@name}!"
end 258 408 end
end 259 409 end
260 410
g = Greeter.new("world") 261 411 g = Greeter.new("world")
g.salute 262 412 g.salute
</code></pre> 263 413 </code></pre>
</div> 264 414 </div>
265 415
<p> 266 416 <p>
la coloration syntaxique est appliquée avec un thème sombre lors de l'export et avec thème clair lors du print. 267 417 la coloration syntaxique est appliquée avec un thème sombre lors de l'export et avec thème clair lors du print.
</p> 268 418 </p>
269 419
<h1>Police</h1> 270 420 <h1>Police</h1>
271 421
<p> 272 422 <p>
Appliqué sur : htmlexport, print 273 423 Appliqué sur : htmlexport, print
</p> 274 424 </p>
275 425
<p> 276 426 <p>
Comme il est recommandé d'avoir une police sans empattement suur un écran et inversement avec empattement sur papier, lors de l'export html, la police est "sans serif" et lors du print, la police est "serif". 277 427 Comme il est recommandé d'avoir une police sans empattement suur un écran et inversement avec empattement sur papier, lors de l'export html, la police est "sans serif" et lors du print, la police est "serif".
</p> 278 428 </p>
279 429
<h1>Navigation</h1> 280 430 <h1>Navigation</h1>
281 431
<p> 282 432 <p>
Appliqué sur : htmlexport 283 433 Appliqué sur : htmlexport
</p> 284 434 </p>
285 435
<p> 286 436 <p>
<img src="./Demo_files/zim_navigation.png"> 287 437 <img src="./Demo_files/zim_navigation_3.png">
</p> 288 438 </p>
289 439
<p> 290 440 <p>
Les textes de navigation sont remplacés par des icones représentant des flêches, le texte apparait néanmoins lors d'un survol du pointeur de la souris. 291 441 <ul>
442 <li>Les textes de navigation sont remplacés par des icônes représentant des flèches, le texte apparaît néanmoins lors d'un survol du pointeur de la souris.</li>
443 </ul>
444 Le titre de la page est reporté en en-tête.<br>
445 Dans le cas de l'export avec index, un clic sur le bouton de menu ≡ affiche ou referme l'index navigable des pages.<br>
446 Sur la droite de la barre supérieure, une icône renvoie sur les rétroliens, et une autre vers les fichiers liés. Ces icônes ne sont présentes que s'il y a effectivement des rétroliens ou des fichiers liés.
</p> 292 447 </p>
293 448
<br> 294 449 <br>
<br> 295 450 <br>
451 <br>
No preview for this file type
demo/Demo_files/_resources/common/attachment.png
Diff comments   View file @ 2bcae7c

1.74 KB
demo/Demo_files/_resources/common/backlink.png
Diff comments   View file @ 2bcae7c

4.94 KB
demo/Demo_files/_resources/common/zim-special.css
Diff comments   View file @ 2bcae7c
1 1
span.zim-tag { 2 2 span.zim-tag {
color: #ce5c00; 3 3 color: #ce5c00;
width: 98%; 4 4 width: 98%;
} 5 5 }
6 6
div.zim-object { 7 7 div.zim-object {
border-style:solid; 8 8 border-style:solid;
border-width:1px; 9 9 border-width:1px;
10 border-color: var(--main-header-color);
} 10 11 }
11 12
.checked-box {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8sMEGsKGkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAEBUlEQVRIx62V22tdRRTGf7Nn73P2ybntnNOe3NqkPTGgLTVUUZF6QatSLOKTPgqCIqLgQ0H/A1sQQbBYCBb1QfAxiC8tSO1FqHkwJVKtjdTGNraUmObsc9nXmfGh7cGYpM1D5nHWzPetteZb3wg2eB2YqYm4zSadsMtoboiNBH/3TE0awx6j+MRoxoTg/IYRvP19TQrJS0bzhdHGSyKFkLTtjSKwMjyiEz43ynhtP6bdjBCWyFobAf7eT7VhNF/q1FRbjYjmUohlCVPwnB+6FUxMTJipqSmUUhhjEGKd3bMT4ks/Y6oLBK2Yth8hHYtCJXOix7Nf7xLMzc0xOzvLzp078TyPNE3viW3QJPXzhNWbxFFKHCmMhoLn/FHodd48vGfhapdAacXQlkFK5dL6wIUm6fuTZPuvqDQhaMUYYyiVyuQr6rXDexYuAdi3tSv1ZJNs/R/CaszzT+1na88uXFnCEnJVgivBNN8uTJKmHQI/ptOOcXNZzMz9mOqFs90OHpipWcYwlo5P4ebnuOkrvr5wgrH+h3im7y36MzuwRXYZeKha/OhP0EkadFoxQSdGSotedR/+XwMc2XvKdNUFOFqZx6LKZWIiwjgkikNmLp/hm8sH+K1zjFTHXfBYdTi+eJArzXM0GxFxoBDCopLvo/fqEwi1XPkWkGqjFo2TgB1jOYZUKZTS/D1/ncmLh7jon0IbRWoiTi59ymzzJEEQE3cStNZsGxqlfPE57MBbOR8fP3hDGalOO9fq2DlBvmZw8xa2IxACGn6TydlD/O6f5OzSV/zif0cYhLQaEXGkKBbz7Ov/AOlXV1cxgBJRI3fuSTrpTawt18kWIZN1CFuaONI0w0WOXfsI43YIggh/KUSlhqxrMz74AkOZcWBm9QkH+Gw8NDLuITi+m0yzhluSyJzBLcpblUhFxywSRAEtPwQjsKVN30CNh0uvYuOubSHLtN3J0TO1j0pmBNuFbFWRK0gyPRZpktL2I5JQkclKakNlnh54g6ocvevUr/Ai2a7wineEkcJupA3S1Wg0nVZM2E6wbEF5U5G9Q++wI7sfR7h3N8HVNstykBfzH+KJEZwiWD0aIwxCgJ0R1Mu7GXOeJSuK93bZtQIle4D9pUNU5DC5jEsu55AvZakM5NicGyEj8uuz8bUCQgj67QfY671P3vEoeC69gy695U1U7NG7XV0pUwBjDJa1/JJlWWxzHuflzQe5FJ/GsgUVuZ2t8lEkTvfc0aNHb72flBhjVicQQqCUuvM3/M+WDVguWBrMVdDXEGZlBVEUrVCU9d9s5+fnaTQa2PZyPxEIhJaI1EEoZwX4ncynp6fXrmB4eJjR0VFarRbNZnP9P9rt9gohqNVq1Ov1ZbF/AZGev3hLJ2/zAAAAAElFTkSuQmCC)} 12 13 .checked-box {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8sMEGsKGkAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAEBUlEQVRIx62V22tdRRTGf7Nn73P2ybntnNOe3NqkPTGgLTVUUZF6QatSLOKTPgqCIqLgQ0H/A1sQQbBYCBb1QfAxiC8tSO1FqHkwJVKtjdTGNraUmObsc9nXmfGh7cGYpM1D5nHWzPetteZb3wg2eB2YqYm4zSadsMtoboiNBH/3TE0awx6j+MRoxoTg/IYRvP19TQrJS0bzhdHGSyKFkLTtjSKwMjyiEz43ynhtP6bdjBCWyFobAf7eT7VhNF/q1FRbjYjmUohlCVPwnB+6FUxMTJipqSmUUhhjEGKd3bMT4ks/Y6oLBK2Yth8hHYtCJXOix7Nf7xLMzc0xOzvLzp078TyPNE3viW3QJPXzhNWbxFFKHCmMhoLn/FHodd48vGfhapdAacXQlkFK5dL6wIUm6fuTZPuvqDQhaMUYYyiVyuQr6rXDexYuAdi3tSv1ZJNs/R/CaszzT+1na88uXFnCEnJVgivBNN8uTJKmHQI/ptOOcXNZzMz9mOqFs90OHpipWcYwlo5P4ebnuOkrvr5wgrH+h3im7y36MzuwRXYZeKha/OhP0EkadFoxQSdGSotedR/+XwMc2XvKdNUFOFqZx6LKZWIiwjgkikNmLp/hm8sH+K1zjFTHXfBYdTi+eJArzXM0GxFxoBDCopLvo/fqEwi1XPkWkGqjFo2TgB1jOYZUKZTS/D1/ncmLh7jon0IbRWoiTi59ymzzJEEQE3cStNZsGxqlfPE57MBbOR8fP3hDGalOO9fq2DlBvmZw8xa2IxACGn6TydlD/O6f5OzSV/zif0cYhLQaEXGkKBbz7Ov/AOlXV1cxgBJRI3fuSTrpTawt18kWIZN1CFuaONI0w0WOXfsI43YIggh/KUSlhqxrMz74AkOZcWBm9QkH+Gw8NDLuITi+m0yzhluSyJzBLcpblUhFxywSRAEtPwQjsKVN30CNh0uvYuOubSHLtN3J0TO1j0pmBNuFbFWRK0gyPRZpktL2I5JQkclKakNlnh54g6ocvevUr/Ai2a7wineEkcJupA3S1Wg0nVZM2E6wbEF5U5G9Q++wI7sfR7h3N8HVNstykBfzH+KJEZwiWD0aIwxCgJ0R1Mu7GXOeJSuK93bZtQIle4D9pUNU5DC5jEsu55AvZakM5NicGyEj8uuz8bUCQgj67QfY671P3vEoeC69gy695U1U7NG7XV0pUwBjDJa1/JJlWWxzHuflzQe5FJ/GsgUVuZ2t8lEkTvfc0aNHb72flBhjVicQQqCUuvM3/M+WDVguWBrMVdDXEGZlBVEUrVCU9d9s5+fnaTQa2PZyPxEIhJaI1EEoZwX4ncynp6fXrmB4eJjR0VFarRbNZnP9P9rt9gohqNVq1Ov1ZbF/AZGev3hLJ2/zAAAAAElFTkSuQmCC)}
.xchecked-box {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8bDYnDxEwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAEK0lEQVRIx9WVS2hTWRjHf/eR3CY1nbxMH2YiZRQS6qO13YlMVxY3SnVcuNIBFezGpSADLoQqLu1sHJCqdCFSXFpw4YOCSH3BtFqttTNamabX3DS5bfO6uffMoglja3RGcDMHzuac7/z/53++//cd+L8P6VuCPQYZ8ADNgBd4J31DcDcQs+GnHByRocEDv0kfBSjAOlYCs11Q+gpwDegS8LMJ+3QIK0ATzEhV8Odnz5bzw8P4dJ25aJQ/WlvJ1df/K7hSLtOcTNI+Pk69rpMTgqIQhCDvh1/VSpw79+gRrRMTmLZNezLJJsPg+a5dmOEwQlFqg1sWG16/Jv7sGWXDwBACFQjC9HcwIMONKkGp4PGAJGEDS0IQmZlhnWnye3c3eiyGo6qr3WHbrJ+dJf7gAXI6zSIr72T7/fgzmT4FHnTBsgrQBfYvTU0km5vxz86iADnAm0rRPTWFt7cXZccOJJcLAGHb2K9ekT93jmwmwwdAAFpjI6Ntbfxw5879ag7l6o1sr5eHHR3IsRgeQK/M4sQE+YEB7JcvEY6zAj45SWFgAPPxYwzHoQxIkQjTPT0kIxE+Noj8sexFn4/xnh58iQTeSpHkHAdrbIzi0BCOrmNPTpK/eJHM3bt8sCyKQCiR4NWePWSiUZw1+ZLXJm4pFKLhzBlCsRh2RUXacVgeGaF47RrL58+zcP8+RrmMkCQinZ1EL1zAjERqmkH+tLYl1G3bCJw4QUjT0IA0MJfLMX/5MqmHD0nZNiUgtGULG/r7ccXjINWuWbnmqsuFu7sb/4EDNLlcBIEioNs2KUAFGmMxmk6dQm1tRZI+3xBqEkiShBQOox05Ql1nJ26gvuIUAWiKQnj/ftStW5Fk+YuF+NldsbBA4cYN9KdPmaso8Fc62ZJtk7l1C2t0FGdxESHE1xE4hkHh6lX0oSHSpRIewC/LrPf7CSgKNpCamkI/fZr8pUuIZBIcpyaBunahPp1mub+fDyMjGKUSChCsq6Nh717q9u2jbnSU0uAgRrFIwTThyhUCqRS+hgZKLS1fJvDm87SNjZGcnsYUAjcQ8vsJ9/Xh7u1FDgRQN20iks3iDA+zZFmYhQLqzZtsj8WY3L0baY2Sf55ICCKpFHUzM2SEQAJCHg+hY8fQDh5EDgRWDoRC1J88SePRo2geD0XAcBy8b98Sv3ePYDZbbf2rFQjLIphMsmDbaEBQVQkePox26BCSz7e6i4bDrDt+nGYhmBscpFAskheC4Js3bPR4qHphFYEnlcI7P4/jdqNpGu8TCe4oCsXr1z//F2ga3+/cSfTJE0qmSVYIsKzaOZDcbjKyzFIiwfvt21kMBLA07YsetzWNd+3tLLW0sH5igvT8PH9Go/z44kX+E4LGjg7GDYOcy4XlOEgLC//5P/5LCFzxOPLmzWyIx+m6fduu7v0NVGqyTSycKksAAAAASUVORK5CYII=)} 13 14 .xchecked-box {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8bDYnDxEwAAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAEK0lEQVRIx9WVS2hTWRjHf/eR3CY1nbxMH2YiZRQS6qO13YlMVxY3SnVcuNIBFezGpSADLoQqLu1sHJCqdCFSXFpw4YOCSH3BtFqttTNamabX3DS5bfO6uffMoglja3RGcDMHzuac7/z/53++//cd+L8P6VuCPQYZ8ADNgBd4J31DcDcQs+GnHByRocEDv0kfBSjAOlYCs11Q+gpwDegS8LMJ+3QIK0ATzEhV8Odnz5bzw8P4dJ25aJQ/WlvJ1df/K7hSLtOcTNI+Pk69rpMTgqIQhCDvh1/VSpw79+gRrRMTmLZNezLJJsPg+a5dmOEwQlFqg1sWG16/Jv7sGWXDwBACFQjC9HcwIMONKkGp4PGAJGEDS0IQmZlhnWnye3c3eiyGo6qr3WHbrJ+dJf7gAXI6zSIr72T7/fgzmT4FHnTBsgrQBfYvTU0km5vxz86iADnAm0rRPTWFt7cXZccOJJcLAGHb2K9ekT93jmwmwwdAAFpjI6Ntbfxw5879ag7l6o1sr5eHHR3IsRgeQK/M4sQE+YEB7JcvEY6zAj45SWFgAPPxYwzHoQxIkQjTPT0kIxE+Noj8sexFn4/xnh58iQTeSpHkHAdrbIzi0BCOrmNPTpK/eJHM3bt8sCyKQCiR4NWePWSiUZw1+ZLXJm4pFKLhzBlCsRh2RUXacVgeGaF47RrL58+zcP8+RrmMkCQinZ1EL1zAjERqmkH+tLYl1G3bCJw4QUjT0IA0MJfLMX/5MqmHD0nZNiUgtGULG/r7ccXjINWuWbnmqsuFu7sb/4EDNLlcBIEioNs2KUAFGmMxmk6dQm1tRZI+3xBqEkiShBQOox05Ql1nJ26gvuIUAWiKQnj/ftStW5Fk+YuF+NldsbBA4cYN9KdPmaso8Fc62ZJtk7l1C2t0FGdxESHE1xE4hkHh6lX0oSHSpRIewC/LrPf7CSgKNpCamkI/fZr8pUuIZBIcpyaBunahPp1mub+fDyMjGKUSChCsq6Nh717q9u2jbnSU0uAgRrFIwTThyhUCqRS+hgZKLS1fJvDm87SNjZGcnsYUAjcQ8vsJ9/Xh7u1FDgRQN20iks3iDA+zZFmYhQLqzZtsj8WY3L0baY2Sf55ICCKpFHUzM2SEQAJCHg+hY8fQDh5EDgRWDoRC1J88SePRo2geD0XAcBy8b98Sv3ePYDZbbf2rFQjLIphMsmDbaEBQVQkePox26BCSz7e6i4bDrDt+nGYhmBscpFAskheC4Js3bPR4qHphFYEnlcI7P4/jdqNpGu8TCe4oCsXr1z//F2ga3+/cSfTJE0qmSVYIsKzaOZDcbjKyzFIiwfvt21kMBLA07YsetzWNd+3tLLW0sH5igvT8PH9Go/z44kX+E4LGjg7GDYOcy4XlOEgLC//5P/5LCFzxOPLmzWyIx+m6fduu7v0NVGqyTSycKksAAAAASUVORK5CYII=)}
.unchecked-box {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8qAt8h3m8AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA60lEQVRIx+2VsQqDMBRF70sCLg5OLoKgjk7+lJ/hh+STXBwcnRz8ArMEkrxOFktbaC3tULzTg5e8k5vADXDq70VbobXmvu/hvQczg4heHrJfXxQFuq67blZbMc8zpmlCXddIkgTOuZcBUko45zCOI6y1Nz2xFSEEZFmGOI7fGg4A3nsQEZqmuXOu9jallACAtm3fvmutNaIoAjM/dkBECCF89KCbk4eAb+kEnIAT8EsAM0OIz3hSyrssUvss8t5fg+uIrLXPs0gIgWVZYIyBUurQyYdheO4gz3NUVQVjDNZ1PfSjpWmKsixvehfB9GBZ3NndrgAAAABJRU5ErkJggg==)} 14 15 .unchecked-box {list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAANOgAADMQBiN+4gQAAAAd0SU1FB9gKGQ8qAt8h3m8AAAAZdEVYdENvbW1lbnQAQ3JlYXRlZCB3aXRoIEdJTVBXgQ4XAAAA60lEQVRIx+2VsQqDMBRF70sCLg5OLoKgjk7+lJ/hh+STXBwcnRz8ArMEkrxOFktbaC3tULzTg5e8k5vADXDq70VbobXmvu/hvQczg4heHrJfXxQFuq67blZbMc8zpmlCXddIkgTOuZcBUko45zCOI6y1Nz2xFSEEZFmGOI7fGg4A3nsQEZqmuXOu9jallACAtm3fvmutNaIoAjM/dkBECCF89KCbk4eAb+kEnIAT8EsAM0OIz3hSyrssUvss8t5fg+uIrLXPs0gIgWVZYIyBUurQyYdheO4gz3NUVQVjDNZ1PfSjpWmKsixvehfB9GBZ3NndrgAAAABJRU5ErkJggg==)}
demo/Demo_files/_resources/common/zim-style.css
Diff comments   View file @ 2bcae7c
/* Common zim definitions */ 1 1 /* Common zim definitions */
2 2
a { text-decoration: none; 3 3 a { text-decoration: none;
color: blue;} 4 4 color: var(--main-link-color);}
a:link { text-decoration: none; 5 5 a:link { text-decoration: none;
color: blue;} 6 6 color: var(--main-link-color);}
a:hover { text-decoration: none; 7 7 a:hover { text-decoration: none;
color: blue;} 8 8 color: var(--main-link-color);}
a:active { text-decoration: none; 9 9 a:active { text-decoration: none;
color: blue;} 10 10 color: var(--main-link-color);}
a:visited { text-decoration: none; 11 11 a:visited { text-decoration: none;
color: blue;} 12 12 color: var(--main-link-color);}
13 13
strike { color: grey } 14 14 strike { color: var(--main-strike-color);}
15 15
u { text-decoration: underline; 16 16 u { text-decoration: var(--main-menu-u-decoration);
background-color: white } 17 17 background-color: var(--main-menu-u-background-color);}
18 18
tt { color: darkmagenta; 19 19 tt { color: var(--main-tt-color);
font-family: monospace; 20 20 font-family: monospace;
font-size: large} 21 21 font-size: large}
22 22
pre { color: darkmagenta; 23 23 pre { color: var(--main-pre-color);
margin-left: 20px; 24 24 margin-left: 20px;
margin-right: 5px; 25 25 margin-right: 5px;
margin-bottom: 5px; 26 26 margin-bottom: 5px;
margin-top: 5px; 27 27 margin-top: 5px;
font-family: monospace; 28 28 font-family: monospace;
font-size: large } 29 29 font-size: large }
30 30
code { font-size: large; font-family: monospace; color: saddlebrown} 31 31 code { font-size: large; font-family: monospace; color: var(--main-code-color)}
32 32
h1 { text-decoration: underline; 33 33 h1 { text-decoration: underline;
color: #4e9a06; 34 34 color: var(--main-header-color);
margin-bottom: 0; 35 35 margin-bottom: 0;
margin-top: 1em; } 36 36 margin-top: 1em; }
37 37
h2 { color: #4e9a06; 38 38 h2 { color: var(--main-header-color);
margin-bottom: 0; 39 39 margin-bottom: 0;
margin-left: 20px; 40 40 margin-left: 20px;
margin-top: 1em;} 41 41 margin-top: 1em;}
42 42
h3 { color: #4e9a06; 43 43 h3 { color: var(--main-header-color);
margin-bottom: 0; 44 44 margin-bottom: 0;
margin-left: 40px; 45 45 margin-left: 40px;
margin-top: 1em; 46 46 margin-top: 1em;
font-style: italic; } 47 47 font-style: italic; }
48 48
h4 { color: #4e9a06; 49 49 h4 { color: var(--main-header-color);
margin-bottom: 0; 50 50 margin-bottom: 0;
margin-left: 60px; 51 51 margin-left: 60px;
margin-top: 1em;} 52 52 margin-top: 1em;}
53 53
h5 { color: #4e9a06; 54 54 h5 { color: var(--main-header-color);
margin-bottom: 0; 55 55 margin-bottom: 0;
margin-left: 80px; 56 56 margin-left: 80px;
margin-top: 1em;} 57 57 margin-top: 1em;}
58 58
p { margin-top: 0 } 59 59 p { margin-top: 0 }
60 60
61 61
62 62
demo/Demo_files/_resources/common/zim-table-style.css
Diff comments   View file @ 2bcae7c
/* Table definition */ 1 1 /* Table definition */
2 2
table { 3 3 table {
border-collapse: collapse; 4 4 border-collapse: collapse;
width: 98%; 5 5 width: 98%;
margin-left: auto; 6 6 margin-left: auto;
margin-right: auto; 7 7 margin-right: auto;
} 8 8 }
9 9
td,th { 10 10 td,th {
border: 1px solid #ddd; 11 11 border: 1px solid var(--main-td-th-border-color);
padding: 4px; 12 12 padding: 4px;
} 13 13 }
14 14
15 tr:nth-child(odd){background-color: var(--main-tr-odd-background-color);}
16
17 tr:nth-child(even){background-color: var(--main-tr-even-background-color);}
15 18
tr:nth-child(even){background-color: #f2f2f2;} 16 19 tr:hover {background-color: var(--main-tr-hover-background-color);}
17 20
tr:hover {background-color: #ddd;} 18
19
th { 20 21 th {
padding-top: 6px; 21 22 padding-top: 6px;
padding-bottom: 6px; 22 23 padding-bottom: 6px;
/*background-color: #4CAF50;*/ 23 24 /*background-color: #4CAF50;*/
/*background-color: #3a853c;*/ 24 25 /*background-color: #3a853c;*/
/*background-color: #85733a;*/ 25 26 /*background-color: #85733a;*/
/*background-color: #3a7685;*/ 26 27 /*background-color: #3a7685;*/
/*background-color: #295e2a;*/ 27 28 /*background-color: #295e2a;*/
/*color: white;*/ 28 29 /*color: white;*/
29 30
/*background-color: #d1e1c1;*/ 30 31 /*background-color: #d1e1c1;*/
background-color: #bbb; 31 32 background-color: var(--main-th-background-color);
color: black; 32 33 color: var(--main-th-color);
} 33 34 }
34 35
36 /* Overriding for the navigation table in header */
table.navigation { 35 37 table.navigation {
border-collapse: collapse; 36 38 border-collapse: collapse;
width: auto; 37 39 width: auto;
margin-left: 0; 38 40 margin-left: 0;
margin-right: auto; 39 41 margin-right: auto;
} 40 42 }
41 43
td.navigation, th.navigation { 42 44 td.navigation, th.navigation {
border: 0; 43 45 border: 0;
padding: 0; 44 46 padding: 0;
47 }
48
49 tr.navigation {
demo/Demo_files/_resources/common/zim-variables.css
Diff comments   View file @ 2bcae7c
File was created 1
2 /* Variables */
3
4 :root {
5 /* General */
6 --main-header-color: #4e9a06; /* Headers color */
7 --main-link-color: blue; /* Links color */
8 --main-strike-color: grey; /* Strike color */
9 --main-pre-color: darkmagenta; /* Verbatim bloc color */
10 --main-tt-color: darkmagenta; /* Inline verbatim */
11 --main-code-color: saddlebrown; /* Code color (if hljs not used) */
12 --main-body-background-color: #779988; /* Color of the background body */
13 --main-menu-background-color: #fafafa; /* Backroung color of side menu */
14 /* Underline really underlined */
15 --main-menu-u-decoration: underline;
16 --main-menu-u-background-color: white;
17 /* Underline Stabilo Version */
18 /*--main-menu-u-decoration: none;
19 --main-menu-u-background-color: yellow;*/
20
21
22 /* Tables */
23 /* Table headers */
24 --main-th-color: black; /* Table header text color */
25 --main-th-background-color: #bbb; /* Table header background */
26 /* Table Row and Data */
27 --main-tr-even-background-color: #f2f2f2; /* Even row background color */
demo/Demo_files/zim_navigation_3.png
Diff comments   View file @ 2bcae7c

16.8 KB