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 Side-by-side Diff

1 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2 2 <html>
3 3 <head>
4   - <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5   - <title>Demo</title>
6   - <meta name='Generator' content='Zim 0.68-rc1'>
  4 + <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  5 + <title>Demo</title>
  6 + <meta name='Generator' content='Zim 0.68-rc1'>
7 7 <link rel="stylesheet"
8   - href="./Demo_files/_resources/common/zim-style.css" >
  8 + href="./Demo_files/_resources/common/zim-variables.css" >
9 9 <link rel="stylesheet"
10   - href="./Demo_files/_resources/common/zim-table-style.css" >
  10 + href="./Demo_files/_resources/common/zim-style.css" >
11 11 <link rel="stylesheet"
12   - href="./Demo_files/_resources/common/zim-special.css" >
  12 + href="./Demo_files/_resources/common/zim-table-style.css" >
13 13 <link rel="stylesheet"
14   - href="./Demo_files/_resources/common/zim-hljs.css" >
  14 + href="./Demo_files/_resources/common/zim-special.css" >
  15 + <link rel="stylesheet"
  16 + href="./Demo_files/_resources/common/zim-hljs.css" >
15 17  
16 18 <style type='text/css'>
17   - * { font-family: sans-serif }
  19 + * { font-family: sans-serif }
18 20  
19   - a:hover { text-decoration: underline; }
  21 + a:hover { text-decoration: underline; }
20 22  
21 23 /* Centre les images mais elles sont coupées aux sauts de page à l'impression */
22 24 img {
23 25 display: block;
24 26 margin-left: auto;
25 27 margin-right: auto;
26   - }
  28 + }
  29 +
  30 + /* Specifique au with index */
  31 + span.insen { color: grey }
27 32  
28   -
29   - </style>
30   -
31   - <!-- Themes clair :
32   - atom-one-light.css, vs.css googlecode.css github.css
33   - qtcreator_light.css
34   - Themes sombres :
  33 + .pages {
  34 + /*max-width: 1000px;*/
  35 + /*padding-left: 320px;*/
  36 + width: inherit;
  37 + transition: margin-left .3s;
  38 + background: white;
  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 :
35 110 agate.css vs2015.css atom-one-dark.css hybrid.css
36 111 ir-black.css sunburst.css tomorrow-night-bright.css
37 112 qtcreator_dark.css
38 113 Demo live : https://highlightjs.org/static/demo/ -->
39   - <link rel="stylesheet"
40   - href="./Demo_files/_resources/common/hljs/styles/sunburst.css" >
41   -
  114 + <link rel="stylesheet"
  115 + href="./Demo_files/_resources/common/hljs/styles/sunburst.css" >
  116 +
42 117 <!-- hljs -->
43   - <script src="./Demo_files/_resources/common/hljs/highlight.pack.js"></script>
44   -
  118 + <script src="./Demo_files/_resources/common/hljs/highlight.pack.js"></script>
  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>
45 136 </head>
46 137 <body>
47 138  
48 139 <!-- Header -->
49 140 <div class='header'>
50   -<table class='navigation'>
  141 +<table class='navigation' style="float:left">
51 142 <tr 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'>
53 147 <img src="./Demo_files/_resources/common/arrow-left-inact.png" alt="Préc." title="Préc.">
54 148 </td>
55 149 <td class='navigation'>
56 150  
57 151  
58 152  
59 153  
60 154  
... ... @@ -60,19 +154,51 @@
60 154 </td>
61 155 </tr>
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>
63 179 </div>
64 180  
  181 +<div class="intercalaire">
65 182 <hr />
  183 +</div>
66 184  
67   -<!-- Wiki content -->
  185 +<div id="mySidenav" class="menu menuClosed">
  186 +<ul>
  187 +<li><b>Demo</b></li>
  188 +</ul>
68 189  
69   -<div class='pages'>
70   - <div class='heading'>
71   - <h1>Demo <a name='Tests:Demo'></a></h1>
72   - </div>
  190 +</div>
73 191  
74   - <div class='content'>
75   - <p>
  192 +<!-- Wiki content -->
  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>
76 202 Créée le mardi 01 octobre 2019
77 203 </p>
78 204  
79 205  
... ... @@ -125,12 +251,14 @@
125 251 le bloc verbatim
126 252 </pre>
127 253  
128   -<br>
129   -
130 254 <p>
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).
132 256 </p>
133 257  
  258 +<p>
  259 +Les textes barrés sont en fait surlignés.
  260 +</p>
  261 +
134 262 <h1>Tableaux</h1>
135 263  
136 264 <p>
... ... @@ -175,6 +303,28 @@
175 303  
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 +
178 328 <h1>Images</h1>
179 329  
180 330 <p>
181 331  
182 332  
183 333  
184 334  
185 335  
186 336  
187 337  
188 338  
189 339  
190 340  
191 341  
... ... @@ -284,35 +434,55 @@
284 434 </p>
285 435  
286 436 <p>
287   -<img src="./Demo_files/zim_navigation.png">
  437 +<img src="./Demo_files/zim_navigation_3.png">
288 438 </p>
289 439  
290 440 <p>
291   -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.
  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.
292 447 </p>
293 448  
294 449 <br>
295 450 <br>
  451 +<br>
  452 +<br>
  453 +<br>
  454 +<br>
296 455  
297 456  
298   - </div>
  457 + </div>
299 458  
300   - <br />
  459 + <br />
  460 +
  461 + <div style="padding-bottom:10px;">
  462 + <hr />
  463 + </div>
301 464  
302   - <div class='page-footer'>
  465 + <div class='page-footer'>
  466 + <a name="backlinks"></a>
  467 + <b class="bold-footer">Rétroliens</b>
303 468  
304   - <b>Fichiers liés</b>
305   - <table>
  469 + <a href=''>Tests</a>
306 470  
307   - <tr><td><a href='./Demo_files/tournesol.jpeg'>tournesol.jpeg</a></td><td>&nbsp;</td><td>16.0kb</td></tr>
  471 + <br /><br />
308 472  
  473 + <a name="attach"></a>
  474 + <b class="bold-footer">Fichiers liés</b>
  475 + <table>
309 476  
310   - <tr><td><a href='./Demo_files/zim_navigation.png'>zim_navigation.png</a></td><td>&nbsp;</td><td>6.06kb</td></tr>
  477 + <tr><td><a href='./Demo_files/tournesol.jpeg'>tournesol.jpeg</a></td><td>&nbsp;</td><td>16.0kb</td></tr>
311 478  
312   - </table>
313   - </div>
314 479  
315   -
  480 + <tr><td><a href='./Demo_files/zim_navigation_3.png'>zim_navigation_3.png</a></td><td>&nbsp;</td><td>17.2kb</td></tr>
  481 +
  482 + </table>
  483 + </div>
  484 +
  485 +
316 486  
317 487 </div>
318 488  
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
... ... @@ -7,6 +7,7 @@
7 7 div.zim-object {
8 8 border-style:solid;
9 9 border-width:1px;
  10 + border-color: var(--main-header-color);
10 11 }
11 12  
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)}
demo/Demo_files/_resources/common/zim-style.css
Diff comments   View file @ 2bcae7c
1 1 /* Common zim definitions */
2 2  
3 3 a { text-decoration: none;
4   - color: blue;}
  4 + color: var(--main-link-color);}
5 5 a:link { text-decoration: none;
6   - color: blue;}
  6 + color: var(--main-link-color);}
7 7 a:hover { text-decoration: none;
8   - color: blue;}
  8 + color: var(--main-link-color);}
9 9 a:active { text-decoration: none;
10   - color: blue;}
  10 + color: var(--main-link-color);}
11 11 a:visited { text-decoration: none;
12   - color: blue;}
  12 + color: var(--main-link-color);}
13 13  
14   - strike { color: grey }
  14 + strike { color: var(--main-strike-color);}
15 15  
16   - u { text-decoration: underline;
17   - background-color: white }
  16 + u { text-decoration: var(--main-menu-u-decoration);
  17 + background-color: var(--main-menu-u-background-color);}
18 18  
19   - tt { color: darkmagenta;
  19 + tt { color: var(--main-tt-color);
20 20 font-family: monospace;
21 21 font-size: large}
22 22  
23   - pre { color: darkmagenta;
  23 + pre { color: var(--main-pre-color);
24 24 margin-left: 20px;
25 25 margin-right: 5px;
26 26 margin-bottom: 5px;
27 27  
28 28  
29 29  
30 30  
31 31  
... ... @@ -28,30 +28,30 @@
28 28 font-family: monospace;
29 29 font-size: large }
30 30  
31   - code { font-size: large; font-family: monospace; color: saddlebrown}
  31 + code { font-size: large; font-family: monospace; color: var(--main-code-color)}
32 32  
33 33 h1 { text-decoration: underline;
34   - color: #4e9a06;
  34 + color: var(--main-header-color);
35 35 margin-bottom: 0;
36 36 margin-top: 1em; }
37 37  
38   - h2 { color: #4e9a06;
  38 + h2 { color: var(--main-header-color);
39 39 margin-bottom: 0;
40 40 margin-left: 20px;
41 41 margin-top: 1em;}
42 42  
43   - h3 { color: #4e9a06;
  43 + h3 { color: var(--main-header-color);
44 44 margin-bottom: 0;
45 45 margin-left: 40px;
46 46 margin-top: 1em;
47 47 font-style: italic; }
48 48  
49   - h4 { color: #4e9a06;
  49 + h4 { color: var(--main-header-color);
50 50 margin-bottom: 0;
51 51 margin-left: 60px;
52 52 margin-top: 1em;}
53 53  
54   - h5 { color: #4e9a06;
  54 + h5 { color: var(--main-header-color);
55 55 margin-bottom: 0;
56 56 margin-left: 80px;
57 57 margin-top: 1em;}
demo/Demo_files/_resources/common/zim-table-style.css
Diff comments   View file @ 2bcae7c
... ... @@ -8,15 +8,16 @@
8 8 }
9 9  
10 10 td,th {
11   - border: 1px solid #ddd;
  11 + border: 1px solid var(--main-td-th-border-color);
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  
16   - tr:nth-child(even){background-color: #f2f2f2;}
  19 + tr:hover {background-color: var(--main-tr-hover-background-color);}
17 20  
18   - tr:hover {background-color: #ddd;}
19   -
20 21 th {
21 22 padding-top: 6px;
22 23 padding-bottom: 6px;
23 24  
... ... @@ -28,10 +29,11 @@
28 29 /*color: white;*/
29 30  
30 31 /*background-color: #d1e1c1;*/
31   - background-color: #bbb;
32   - color: black;
  32 + background-color: var(--main-th-background-color);
  33 + color: var(--main-th-color);
33 34 }
34 35  
  36 + /* Overriding for the navigation table in header */
35 37 table.navigation {
36 38 border-collapse: collapse;
37 39 width: auto;
... ... @@ -42,6 +44,10 @@
42 44 td.navigation, th.navigation {
43 45 border: 0;
44 46 padding: 0;
  47 + }
  48 +
  49 + tr.navigation {
  50 + background-color: white;
45 51 }
46 52  
47 53 tr.navigation:hover {
demo/Demo_files/_resources/common/zim-variables.css
Diff comments   View file @ 2bcae7c
  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 */
  28 + --main-tr-odd-background-color: white; /* Odd row background color */
  29 + --main-tr-hover-background-color: #ddd; /* Row background color when hover */
  30 + --main-td-th-border-color: #ddd; /* Cell's Border color */
  31 + }
demo/Demo_files/zim_navigation_3.png
Diff comments   View file @ 2bcae7c

16.8 KB