William Daniau / wize

Download as
Browse Code »

Commit d57a06f066a3ac56080838c6feacb741eca64c36

Authored by William Daniau
1 parent a6614bd016
Exists in master

Mise à jour de la doc

Showing 5 changed files with 19 additions and 17 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>Wize Doc</title> 5 5 <title>Wize Doc</title>
<meta name='Generator' content='Zim 0.72.0'> 6 6 <meta name='Generator' content='Zim 0.72.0'>
<link rel="shortcut icon" 7 7 <link rel="shortcut icon"
href="./Wize_Doc_files/_resources/common-spec/favicon.ico" > 8 8 href="./Wize_Doc_files/_resources/common-spec/favicon.ico" >
<link rel="stylesheet" 9 9 <link rel="stylesheet"
href="./Wize_Doc_files/_resources/common-spec/zim-variables.css" > 10 10 href="./Wize_Doc_files/_resources/common-spec/zim-variables.css" >
<link rel="stylesheet" 11 11 <link rel="stylesheet"
href="./Wize_Doc_files/_resources/common/zim-style.css" > 12 12 href="./Wize_Doc_files/_resources/common/zim-style.css" >
<link rel="stylesheet" 13 13 <link rel="stylesheet"
href="./Wize_Doc_files/_resources/common/zim-table-style.css" > 14 14 href="./Wize_Doc_files/_resources/common/zim-table-style.css" >
<link rel="stylesheet" 15 15 <link rel="stylesheet"
href="./Wize_Doc_files/_resources/common/zim-special.css" > 16 16 href="./Wize_Doc_files/_resources/common/zim-special.css" >
<link rel="stylesheet" 17 17 <link rel="stylesheet"
href="./Wize_Doc_files/_resources/common/zim-hljs.css" > 18 18 href="./Wize_Doc_files/_resources/common/zim-hljs.css" >
<link rel="stylesheet" 19 19 <link rel="stylesheet"
href="./Wize_Doc_files/_resources/common-spec/zim-override.css" > 20 20 href="./Wize_Doc_files/_resources/common-spec/zim-override.css" >
21 21
22 22
<style type='text/css'> 23 23 <style type='text/css'>
* { font-family: sans-serif } 24 24 * { font-family: sans-serif }
25 25
a:hover { text-decoration: underline; } 26 26 a:hover { text-decoration: underline; }
27 27
/* Centre les images mais elles sont coupées aux sauts de page à l'impression */ 28 28 /* Centre les images mais elles sont coupées aux sauts de page à l'impression */
img { 29 29 img {
display: block; 30 30 display: block;
margin-left: auto; 31 31 margin-left: auto;
margin-right: auto; 32 32 margin-right: auto;
} 33 33 }
34 34
.pages { 35 35 .pages {
/*max-width: 1000px;*/ 36 36 /*max-width: 1000px;*/
/*padding-left: 320px;*/ 37 37 /*padding-left: 320px;*/
width: inherit; 38 38 width: inherit;
transition: margin-left .3s; 39 39 transition: margin-left .3s;
background: white; 40 40 background: white;
padding-left: 10px; 41 41 padding-left: 10px;
padding-right: 10px; 42 42 padding-right: 10px;
padding-bottom: 20px; 43 43 padding-bottom: 20px;
padding-top: 10px; 44 44 padding-top: 10px;
} 45 45 }
46 46
.header{ 47 47 .header{
max-width: var(--main-page-width); 48 48 max-width: var(--main-page-width);
position: fixed; 49 49 position: fixed;
width: 100%; 50 50 width: 100%;
top:0; 51 51 top:0;
background:white; 52 52 background:white;
z-index: 1; 53 53 z-index: 1;
min-height:48px; 54 54 min-height:48px;
} 55 55 }
56 56
hr{ 57 57 hr{
clear:both; 58 58 clear:both;
border-style: solid; 59 59 border-style: solid;
border-width: 1px; 60 60 border-width: 1px;
border-color: var(--main-header-color); 61 61 border-color: var(--main-header-color);
} 62 62 }
63 63
body { 64 64 body {
max-width: var(--main-page-width); 65 65 max-width: var(--main-page-width);
display:block; 66 66 display:block;
margin-left:auto; 67 67 margin-left:auto;
margin-right:auto; 68 68 margin-right:auto;
background: var(--main-body-background-color); 69 69 background: var(--main-body-background-color);
background-image: url('./Wize_Doc_files/_resources/common-spec/fond.jpg'); 70 70 background-image: url('./Wize_Doc_files/_resources/common-spec/fond.jpg');
background-position: var(--main-body-background-position); 71 71 background-position: var(--main-body-background-position);
background-repeat: var(--main-body-background-repeat); 72 72 background-repeat: var(--main-body-background-repeat);
} 73 73 }
74 74
.intercalaire { 75 75 .intercalaire {
background:white; 76 76 background:white;
margin-top: 48px; 77 77 margin-top: 48px;
padding: 10px; 78 78 padding: 10px;
} 79 79 }
80 80
.bold-footer { 81 81 .bold-footer {
color: var(--main-header-color); 82 82 color: var(--main-header-color);
} 83 83 }
84 84
</style> 85 85 </style>
86 86
<!-- Themes clair : 87 87 <!-- Themes clair :
atom-one-light.css, vs.css googlecode.css github.css 88 88 atom-one-light.css, vs.css googlecode.css github.css
qtcreator_light.css 89 89 qtcreator_light.css
Themes sombres : 90 90 Themes sombres :
agate.css vs2015.css atom-one-dark.css hybrid.css 91 91 agate.css vs2015.css atom-one-dark.css hybrid.css
ir-black.css sunburst.css tomorrow-night-bright.css 92 92 ir-black.css sunburst.css tomorrow-night-bright.css
qtcreator_dark.css 93 93 qtcreator_dark.css
Demo live : https://highlightjs.org/static/demo/ --> 94 94 Demo live : https://highlightjs.org/static/demo/ -->
<link rel="stylesheet" 95 95 <link rel="stylesheet"
href="./Wize_Doc_files/_resources/common/hljs/styles/sunburst.css" > 96 96 href="./Wize_Doc_files/_resources/common/hljs/styles/sunburst.css" >
97 97
<!-- hljs --> 98 98 <!-- hljs -->
<script src="./Wize_Doc_files/_resources/common/hljs/highlight.pack.js"></script> 99 99 <script src="./Wize_Doc_files/_resources/common/hljs/highlight.pack.js"></script>
100 100
<script src="./Wize_Doc_files/_resources/common/wizefunc.js"></script> 101 101 <script src="./Wize_Doc_files/_resources/common/wizefunc.js"></script>
102 102
<script src="./Wize_Doc_files/_resources/common-spec/notice.js"></script> 103 103 <script src="./Wize_Doc_files/_resources/common-spec/notice.js"></script>
104 104
</head> 105 105 </head>
<body onload="testLogo()"> 106 106 <body onload="testLogo()">
<button onclick="topFunction()" id="upBtn" title="Go to top"></button> 107 107 <button onclick="topFunction()" id="upBtn" title="Go to top"></button>
<div class='header'> 108 108 <div class='header'>
<table class='navigation' style="float:left"> 109 109 <table class='navigation' style="float:left">
<tr class='navigation'> 110 110 <tr class='navigation'>
<td class='navigation'> 111 111 <td class='navigation'>
<!-- 112 112 <!--
<img src="./Wize_Doc_files/_resources/common/arrow-left-inact.png" alt="Préc." title="Préc."> 113 113 <img src="./Wize_Doc_files/_resources/common/arrow-left-inact.png" alt="Préc." title="Préc.">
--> 114 114 -->
</td> 115 115 </td>
<td class='navigation'> 116 116 <td class='navigation'>
<!-- 117 117 <!--
<img src="./Wize_Doc_files/_resources/common/arrow-up-inact.png" alt="Index" title="Index"> 118 118 <img src="./Wize_Doc_files/_resources/common/arrow-up-inact.png" alt="Index" title="Index">
--> 119 119 -->
</td> 120 120 </td>
<td class='navigation'> 121 121 <td class='navigation'>
<!-- 122 122 <!--
<img src="./Wize_Doc_files/_resources/common/arrow-right-inact.png" alt="Suivant" title="Suivant"> 123 123 <img src="./Wize_Doc_files/_resources/common/arrow-right-inact.png" alt="Suivant" title="Suivant">
--> 124 124 -->
</td> 125 125 </td>
</tr> 126 126 </tr>
</table> 127 127 </table>
128 128
<span> 129 129 <span>
<a name='Tests:Wize Doc'></a> 130 130 <a name='Tests:Wize Doc'></a>
<h1 style="display:inline-block;margin-left:20px;margin-top:5px;"> 131 131 <h1 style="display:inline-block;margin-left:20px;margin-top:5px;">
Wize Doc</h1> 132 132 Wize Doc</h1>
</span> 133 133 </span>
134 134
<table class='navigation' style="float:right;margin-right:10px;"> 135 135 <table class='navigation' style="float:right;margin-right:10px;">
<tr class='navigation'> 136 136 <tr class='navigation'>
<td class='navigation'> 137 137 <td class='navigation'>
</td> 138 138 </td>
<td class='navigation'> 139 139 <td class='navigation'>
<a href="#attach"> 140 140 <a href="#attach">
<img src='./Wize_Doc_files/_resources/common-spec/attachment.png' alt='Fichiers liés' title='Fichiers liés'> 141 141 <img src='./Wize_Doc_files/_resources/common-spec/attachment.png' alt='Fichiers liés' title='Fichiers liés'>
</a> 142 142 </a>
143 143
144 144
145 145
146 146
147 147
148 148
149 149
150 150
151 151
152 152
153 153
154 154
155 155
156 156
157 157
158 158
</td> 159 159 </td>
</tr> 160 160 </tr>
</table> 161 161 </table>
</div> 162 162 </div>
163 163
<div class="intercalaire"> 164 164 <div class="intercalaire">
<hr /> 165 165 <hr />
</div> 166 166 </div>
167 167
<div id="logoDivId" style="float:right"> 168 168 <div id="logoDivId" style="float:right">
<img id="logoImgId" src='./Wize_Doc_files/_resources/common-spec/logo.png' alt=' '> 169 169 <img id="logoImgId" src='./Wize_Doc_files/_resources/common-spec/logo.png' alt=' '>
</div> 170 170 </div>
171 171
<!-- Wiki content --> 172 172 <!-- Wiki content -->
173 173
<div class='pages'> 174 174 <div class='pages'>
<!-- 175 175 <!--
<div class='heading'> 176 176 <div class='heading'>
<h1>Wize Doc <a name='Tests:Wize Doc'></a></h1> 177 177 <h1>Wize Doc <a name='Tests:Wize Doc'></a></h1>
</div> 178 178 </div>
--> 179 179 -->
180 180
<div class='content'> 181 181 <div class='content'>
<p> 182 182 <p>
Created Wednesday 16 October 2019 183 183 Created Wednesday 16 October 2019
</p> 184 184 </p>
185 185
<p> 186 186 <p>
<b>Wize</b> stands for <b>W</b>ill's <b>I</b>mproved <b>Z</b>im <b>E</b>xports, it is composed of five html exports templates :<br> 187 187 <b>Wize</b> stands for <b>W</b>ill's <b>I</b>mproved <b>Z</b>im <b>E</b>xports, it is composed of five html exports templates :<br>
<ul style='padding-left: 30pt'> 188 188 <ul style='padding-left: 30pt'>
<li>Wize</li> 189 189 <li>Wize</li>
<li>Wize_with_index</li> 190 190 <li>Wize_with_index</li>
<li>Wize_with_index_sod</li> 191 191 <li>Wize_with_index_sod</li>
<li>Wize_Print</li> 192 192 <li>Wize_Print</li>
<li>Wize_S5</li> 193 193 <li>Wize_S5</li>
</ul> 194 194 </ul>
</p> 195 195 </p>
196 196
<h2>Installation</h2> 197 197 <h2>Installation</h2>
198 198
<p> 199 199 <p>
First close zim, then checkout the git repository and move it to <tt>$HOME/.local/share/zim</tt> : 200 200 First close zim, then checkout the git repository and move it to <tt>$HOME/.local/share/zim</tt> :
</p> 201 201 </p>
202 202
<pre> 203 203 <pre>
rm -rf $HOME/.local/share/zim 204 204 rm -rf $HOME/.local/share/zim
mv wize $HOME/.local/share/zim 205 205 mv wize $HOME/.local/share/zim
</pre> 206 206 </pre>
207 207
<br> 208 208 <br>
209 209
<p> 210 210 <p>
After that, link the wize.rb program present in the wize directory to a place in your <b>PATH</b>, for example <tt>$HOME/bin</tt> 211 211 After that, link the wize.rb program present in the wize directory to a place in your <b>PATH</b>, for example <tt>$HOME/bin</tt>
</p> 212 212 </p>
213 213
<pre> 214 214 <pre>
cd $HOME/bin 215 215 cd $HOME/bin
ln -s $HOME/.local/share/zim/wize.rb 216 216 ln -s $HOME/.local/share/zim/wize.rb
</pre> 217 217 </pre>
218 218
<p> 219 219 <p>
Then run the wize.rb program with the -i flag : 220 220 Then run the wize.rb program with the -i flag :
</p> 221 221 </p>
222 222
<pre> 223 223 <pre>
wize.rb -i 224 224 wize.rb -i
</pre> 225 225 </pre>
226 226
<p> 227 227 <p>
You can now restart zim. 228 228 You can now restart zim.
</p> 229 229 </p>
230 230
<h2>Features</h2> 231 231 <h2>Features</h2>
232 232
<p> 233 233 <p>
<b>Wize</b> is a customizable export template for zim, it also modify the <tt>style.conf</tt> file in <tt>$HOME/.config/zim/</tt> to have corresponding colors between zim and the export. This modification is made based on the file <tt>style-template.conf</tt> located in <tt>$HOME/.local/share/zim</tt>. So if there's something you don't like or want to add, you may modify this one. The style.conf file will be generated every time you applied a theme. Also the Wize_Print export will be used when using "Print to browser". 234 234 <b>Wize</b> is a customizable export template for zim, it also modify the <tt>style.conf</tt> file in <tt>$HOME/.config/zim/</tt> to have corresponding colors between zim and the export. This modification is made based on the file <tt>style-template.conf</tt> located in <tt>$HOME/.local/share/zim</tt>. So if there's something you don't like or want to add, you may modify this one. The style.conf file will be generated every time you applied a theme. Also the Wize_Print export will be used when using "Print to browser".
</p> 235 235 </p>
236 236
<p> 237 237 <p>
On the following is a list of the features, mentionning where it is applied, that can be :<br> 238 238 On the following is a list of the features, mentionning where it is applied, that can be :<br>
<ul> 239 239 <ul>
<li>zim : applied in zim itself</li> 240 240 <li>zim : applied in zim itself</li>
<li>html : applied in the main html exports :Wize, Wize_with_index, Wize_with_index_sod</li> 241 241 <li>html : applied in the main html exports :Wize, Wize_with_index, Wize_with_index_sod</li>
<li>print : applied in the special Wize_Print html export</li> 242 242 <li>print : applied in the special Wize_Print html export</li>
<li>S5 : applied in the special Wize_S5 html export</li> 243 243 <li>S5 : applied in the special Wize_S5 html export</li>
</ul> 244 244 </ul>
</p> 245 245 </p>
246 246
<h3>Headers</h3> 247 247 <h3>Headers</h3>
248 248
<p> 249 249 <p>
<b>Applied in :</b> zim, html, print, S5 250 250 <b>Applied in :</b> zim, html, print, S5
</p> 251 251 </p>
252 252
<p> 253 253 <p>
To have a better visibility on which kind of section the reader is, All headers are indented<br> 254 254 To have a better visibility on which kind of section the reader is, All headers are indented<br>
<img src="./Wize_Doc_files/wize_headers.png"> 255 255 <img src="./Wize_Doc_files/wize_headers.png">
</p> 256 256 </p>
257 257
<h3>Underlined text</h3> 258 258 <h3>Underlined text</h3>
259 259
<p> 260 260 <p>
<b>Applied in :</b> zim, html, print, S5 261 261 <b>Applied in :</b> zim, html, print, S5
</p> 262 262 </p>
263 263
<p> 264 264 <p>
As a matter of personal taste, I do not like the highlighted behavior of the underline marking. Thus <u>underlined</u> text is <u>underlined</u>. This original behavior can be easyly restored as we will see later in the customization part. 265 265 As a matter of personal taste, I do not like the highlighted behavior of the underline marking. Thus <u>underlined</u> text is <u>underlined</u>. This original behavior can be easyly restored as we will see later in the customization part.
</p> 266 266 </p>
267 267
<h3>Verbatim</h3> 268 268 <h3>Verbatim</h3>
269 269
<p> 270 270 <p>
<b>Applied in :</b> zim, html, print, S5 271 271 <b>Applied in :</b> zim, html, print, S5
</p> 272 272 </p>
273 273
<p> 274 274 <p>
To emphasized it, <tt>inline</tt> verbatim is colored in (customizable) darkmagenta. 275 275 To emphasized it, <tt>inline</tt> verbatim is colored in (customizable) darkmagenta.
</p> 276 276 </p>
277 277
<pre> 278 278 <pre>
as well as 279 279 as well as
block verbatim 280 280 block verbatim
</pre> 281 281 </pre>
282 282
<p> 283 283 <p>
Note that block verbatim is indented. Zim make the difference between inline and block when there's at least two lines selected when applying the style by pressing <b>&lt;Ctrl&gt;T</b>. 284 284 Note that block verbatim is indented. Zim make the difference between inline and block when there's at least two lines selected when applying the style by pressing <b>&lt;Ctrl&gt;T</b>.
</p> 285 285 </p>
286 286
<h3>Tables</h3> 287 287 <h3>Tables</h3>
288 288
<p> 289 289 <p>
<b>Applied in :</b> html, print, S5 290 290 <b>Applied in :</b> html, print, S5
</p> 291 291 </p>
292 292
<p> 293 293 <p>
Tables in zim using the table plugin are not very practical, but with the adequate styling it can be nice on exports. 294 294 Tables in zim using the table plugin are not very practical, but with the adequate styling it can be nice on exports.
</p> 295 295 </p>
<table> 296 296 <table>
<thead><tr> 297 297 <thead><tr>
<th align="left">First Name</th> 298 298 <th align="left">First Name</th>
<th align="left">Name</th> 299 299 <th align="left">Name</th>
<th align="left">email</th> 300 300 <th align="left">email</th>
<th align="left">Fav. Color</th> 301 301 <th align="left">Fav. Color</th>
</tr></thead> 302 302 </tr></thead>
<tr> 303 303 <tr>
<td align="left">Nathalie</td> 304 304 <td align="left">Nathalie</td>
<td align="left">Charpentier</td> 305 305 <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> 306 306 <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">Green</td> 307 307 <td align="left">Green</td>
</tr> 308 308 </tr>
<tr> 309 309 <tr>
<td align="left">Electra</td> 310 310 <td align="left">Electra</td>
<td align="left">Cigales</td> 311 311 <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> 312 312 <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">Red</td> 313 313 <td align="left">Red</td>
</tr> 314 314 </tr>
<tr> 315 315 <tr>
<td align="left">Marcel</td> 316 316 <td align="left">Marcel</td>
<td align="left">Dupont</td> 317 317 <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> 318 318 <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">Blue</td> 319 319 <td align="left">Blue</td>
</tr> 320 320 </tr>
<tr> 321 321 <tr>
<td align="left">Joe</td> 322 322 <td align="left">Joe</td>
<td align="left">Smith</td> 323 323 <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> 324 324 <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> 325 325 <td align="left">Orange</td>
</tr> 326 326 </tr>
</table> 327 327 </table>
328 328
<br> 329 329 <br>
330 330
<p> 331 331 <p>
One interesting thing to know in that in zim source (which you can view using the entry in the Tools menu), tables are in "MarkDown" syntax. The table above is represented by the following text. 332 332 One interesting thing to know in that in zim source (which you can view using the entry in the Tools menu), tables are in "MarkDown" syntax. The table above is represented by the following text.
</p> 333 333 </p>
334 334
<pre> 335 335 <pre>
| First Name | Name | email | Fav. Color | 336 336 | First Name | Name | email | Fav. Color |
|:-----------|:------------|:--------------------------------|:-----------| 337 337 |:-----------|:------------|:--------------------------------|:-----------|
| Nathalie | Charpentier | nathalie.charpentier@lasbas.com | Green | 338 338 | Nathalie | Charpentier | nathalie.charpentier@lasbas.com | Green |
| Electra | Cigales | electra.cigales@nowhere.com | Red | 339 339 | Electra | Cigales | electra.cigales@nowhere.com | Red |
| Marcel | Dupont | marcel.dupont@nothere.com | Blue | 340 340 | Marcel | Dupont | marcel.dupont@nothere.com | Blue |
| Joe | Smith | joe.smith@here.com | Orange | 341 341 | Joe | Smith | joe.smith@here.com | Orange |
</pre> 342 342 </pre>
343 343
<p> 344 344 <p>
It is possible to paste a text like that (without verbatim of course) and then press <b>&lt;Ctrl&gt;R</b>, zim will recognize it and display the table using the plugin. This can be really usefull if you use a table generator such as the excellent <a href="https://www.tablesgenerator.com/" title="https://www.tablesgenerator.com/" class="https">https://www.tablesgenerator.com/</a> which can export in MarkDown format. 345 345 It is possible to paste a text like that (without verbatim of course) and then press <b>&lt;Ctrl&gt;R</b>, zim will recognize it and display the table using the plugin. This can be really usefull if you use a table generator such as the excellent <a href="https://www.tablesgenerator.com/" title="https://www.tablesgenerator.com/" class="https">https://www.tablesgenerator.com/</a> which can export in MarkDown format.
</p> 346 346 </p>
347 347
<h3>Pictures</h3> 348 348 <h3>Pictures</h3>
349 349
<p> 350 350 <p>
<b>Applied in :</b> html, S5 351 351 <b>Applied in :</b> html, S5
</p> 352 352 </p>
353 353
<p> 354 354 <p>
<img src="./Wize_Doc_files/tournesol.jpeg"> 355 355 <img src="./Wize_Doc_files/tournesol.jpeg">
</p> 356 356 </p>
357 357
<p> 358 358 <p>
In the exports, pictures will appeared centered. It is not applied within the print export because as a side effect, pictures can be cutted during print. 359 359 In the exports, pictures will appeared centered. It is not applied within the print export because as a side effect, pictures can be cutted during print.
</p> 360 360 </p>
361 361
<h3>Syntax Highlighting</h3> 362 362 <h3>Syntax Highlighting</h3>
363 363
<p> 364 364 <p>
<b>Applied in :</b> html, print, S5 365 365 <b>Applied in :</b> html, print, S5
</p> 366 366 </p>
367 367
<p> 368 368 <p>
Code blocks inserted with the source view plugin will be syntax highlighted in the exports. 369 369 Code blocks inserted with the source view plugin will be syntax highlighted in the exports.
</p> 370 370 </p>
<div class="zim-object"> 371 371 <div class="zim-object">
<pre><code class="cpp">#include &lt;iostream&gt; 372 372 <pre><code class="cpp">#include &lt;iostream&gt;
373 373
int main(int argc, char *argv[]) { 374 374 int main(int argc, char *argv[]) {
/* An annoying "Hello World" example */ 375 375 /* An annoying "Hello World" example */
for (auto i = 0; i &lt; 0xFFFF; i++) 376 376 for (auto i = 0; i &lt; 0xFFFF; i++)
cout &lt;&lt; "Hello, World!" &lt;&lt; endl; 377 377 cout &lt;&lt; "Hello, World!" &lt;&lt; endl;
char c = '\n'; 378 378 char c = '\n';
unordered_map &lt;string, vector&lt;string&gt; &gt; m; 379 379 unordered_map &lt;string, vector&lt;string&gt; &gt; m;
m["key"] = "\\\\"; // this is an error 380 380 m["key"] = "\\\\"; // this is an error
381 381
return -2e3 + 12l; 382 382 return -2e3 + 12l;
} 383 383 }
</code></pre> 384 384 </code></pre>
</div> 385 385 </div>
386 386
<br> 387 387 <br>
388 388
<p> 389 389 <p>
This is achieved by integrating <a href="https://highlightjs.org/" title="https://highlightjs.org/" class="https">https://highlightjs.org/</a> . There are a number of possible themes. These are not really customisable but they can be modified inside the main templates. 390 390 This is achieved by integrating <a href="https://highlightjs.org/" title="https://highlightjs.org/" class="https">https://highlightjs.org/</a> . There are a number of possible themes. These are not really customisable but they can be modified inside the main templates.
</p> 391 391 </p>
392 392
<p> 393 393 <p>
By default a light theme is used for the print export, and a dark one for the others. 394 394 By default a light theme is used for the print export, and a dark one for the others.
</p> 395 395 </p>
396 396
<br> 397 397 <br>
398 398
<h3>Font</h3> 399 399 <h3>Font</h3>
400 400
<p> 401 401 <p>
<b>Applied in :</b> html, print, S5 402 402 <b>Applied in :</b> html, print, S5
</p> 403 403 </p>
404 404
<p> 405 405 <p>
The font for the print export is "serif" and "sans serif" for the others. 406 406 The font for the print export is "serif" and "sans serif" for the others.
</p> 407 407 </p>
408 408
<h3>Navigation</h3> 409 409 <h3>Navigation</h3>
410 410
<p> 411 411 <p>
<b>Applied in :</b> html, print, S5 412 412 <b>Applied in :</b> html, print, S5
</p> 413 413 </p>
414 414
<p> 415 415 <p>
The navigation menu and icons are depending depends on the actual export. 416 416 The navigation menu and icons are depending depends on the actual export.
</p> 417 417 </p>
418 418
<h4>Wize_Print</h4> 419 419 <h4>Wize_Print</h4>
420 420
<p> 421 421 <p>
No navigation added. 422 422 No navigation added.
</p> 423 423 </p>
424 424
<h4>Wize</h4> 425 425 <h4>Wize</h4>
426 426
<p> 427 427 <p>
Minimalistic navigation :<br> 428 428 Minimalistic navigation :<br>
There's a permanent header in which the page title is reported, as well as navigation arrows, backlinks and attachments icons but only displayed if needed. For single page export this might be the best one. 429 429 There's a permanent header in which the page title is reported, as well as navigation arrows, backlinks and attachments icons but only displayed if needed. For single page export this might be the best one.
</p> 430 430 </p>
431 431
<p> 432 432 <p>
The following pictures shows different situtations (actual width has been shrinked to take screenshot) 433 433 The following pictures shows different situtations (actual width has been shrinked to take screenshot)
</p> 434 434 </p>
435 435
<p> 436 436 <p>
<img src="./Wize_Doc_files/wise_demo_example1.png"> 437 437 <img src="./Wize_Doc_files/wise_demo_example1.png">
</p> 438 438 </p>
439 439
<p> 440 440 <p>
<img src="./Wize_Doc_files/wise_demo_example2.png"> 441 441 <img src="./Wize_Doc_files/wise_demo_example2.png">
</p> 442 442 </p>
443 443
<p> 444 444 <p>
<img src="./Wize_Doc_files/wise_demo_example3.png"><br> 445 445 <img src="./Wize_Doc_files/wise_demo_example3.png"><br>
<img src="./Wize_Doc_files/wise_demo_example4.png"> 446 446 <img src="./Wize_Doc_files/wise_demo_example4.png">
</p> 447 447 </p>
448 448
<br> 449 449 <br>
450 450
<h4>Wize_with_index</h4> 451 451 <h4>Wize_with_index</h4>
452 452
<p> 453 453 <p>
There's a permanent header in which the page title is reported, as well as navigation arows and a menu button that will open/close the index menu. Backlinks and attachments icons are only displayed if needed. 454 454 There's a permanent header in which the page title is reported, as well as navigation arows and a menu button that will open/close the index menu. Backlinks and attachments icons are only displayed if needed.
</p> 455 455 </p>
456 456
<p> 457 457 <p>
<img src="./Wize_Doc_files/wise_demo_example5.png"> 458 458 <img src="./Wize_Doc_files/wise_demo_example5.png">
</p> 459 459 </p>
460 460
<p> 461 461 <p>
<img src="./Wize_Doc_files/wise_demo_example6.png"> 462 462 <img src="./Wize_Doc_files/wise_demo_example6.png">
</p> 463 463 </p>
464 464
<br> 465 465 <br>
466 466
<h4>Wize_with_index_sod</h4> 467 467 <h4>Wize_with_index_sod</h4>
468 468
<p> 469 469 <p>
A variation of the previous one. The difference is that the side menu is opened by default and can be closed to increased the reading width.<br> 470 470 A variation of the previous one. The difference is that the side menu is opened by default and can be closed to increased the reading width.<br>
<img src="./Wize_Doc_files/wise_demo_example7.png"> 471 471 <img src="./Wize_Doc_files/wise_demo_example7.png">
</p> 472 472 </p>
473 473
<p> 474 474 <p>
<img src="./Wize_Doc_files/wise_demo_example8.png"> 475 475 <img src="./Wize_Doc_files/wise_demo_example8.png">
</p> 476 476 </p>
477 477
<br> 478 478 <br>
479 479
<h4>Wize_S5</h4> 480 480 <h4>Wize_S5</h4>
481 481
<p> 482 482 <p>
This is a special export to make slide-show presentation, it is based on the provided SlideShow_(S5) export adapted to wize.<br> 483 483 This is a special export to make slide-show presentation, it is based on the provided SlideShow_(S5) export adapted to wize.<br>
Please look at the page describing it : <a href="./Wize_Presentation.html" title="Wize Presentation" class="page">Wize Presentation</a> 484 484 Please look at the page describing it : <a href=".Wize_Presentation.html" title="Wize Presentation" class="page">Wize Presentation</a>
</p> 485 485 </p>
486 486
<br> 487 487 <br>
488 488
<h3>Go to top Button</h3> 489 489 <h3>Go to top Button</h3>
490 490
<p> 491 491 <p>
As soon as you scroll, a "Go to top" button will appear on the bottom right :<br> 492 492 As soon as you scroll, a "Go to top" button will appear on the bottom right :<br>
<img src="./Wize_Doc_files/wise_demo_gototop.png"> 493 493 <img src="./Wize_Doc_files/wise_demo_gototop.png">
</p> 494 494 </p>
495 495
<h3>Theme switching</h3> 496 496 <h3>Theme switching</h3>
497 497
<p> 498 498 <p>
The script <tt>wize.rb</tt> is used to managed the differents themes : 499 499 The script <tt>wize.rb</tt> is used to managed the differents themes :
</p> 500 500 </p>
501 501
<p> 502 502 <p>
<b>Display available themes :</b> 503 503 <b>Display available themes :</b>
</p> 504 504 </p>
<pre> 505 505 <pre>
$ wize.rb -l 506 506 $ wize.rb -l
blue 507 507 blue
wize 508 508 wize
</pre> 509 509 </pre>
510 510
<p> 511 511 <p>
<b>Show current theme :</b> 512 512 <b>Show current theme :</b>
</p> 513 513 </p>
<pre> 514 514 <pre>
$ wize.rb -p 515 515 $ wize.rb -p
wize 516 516 wize
</pre> 517 517 </pre>
518 518
<br> 519 519 <br>
520 520
<p> 521 521 <p>
<b>Apply an other theme :</b> 522 522 <b>Apply an other theme :</b>
</p> 523 523 </p>
<pre> 524 524 <pre>
$ wize.rb -a blue 525 525 $ wize.rb -a blue
All done! 526 526 All done!
</pre> 527 527 </pre>
528 528
<p> 529 529 <p>
The modifications to the exports are immediately available however for the new colors to be applied in zim itself, you must restart it. 530 530 The modifications to the exports are immediately available however for the new colors to be applied in zim itself, you must restart it.
</p> 531 531 </p>
532 532
<br> 533 533 <br>
534 534
<h2>Customization</h2> 535 535 <h2>Customization</h2>
536 536
<p> 537 537 <p>
Each theme is defined by the directory <tt>common-theme</tt> located in <tt>$HOME/.local/share/zim/templates/html</tt>. To create a new theme based on the wize theme, copy the directory : 538 538 Each theme is defined by the directory <tt>common-theme</tt> located in <tt>$HOME/.local/share/zim/templates/html</tt>. To create a new theme based on the wize theme, copy the directory :
</p> 539 539 </p>
540 540
<pre> 541 541 <pre>
cp -r common-wize common-mytheme 542 542 cp -r common-wize common-mytheme
</pre> 543 543 </pre>
544 544
<p> 545 545 <p>
Let's have a look at its content now : 546 546 Let's have a look at its content now :
</p> 547 547 </p>
548 548
<pre> 549 549 <pre>
$ ls common-mytheme 550 550 $ ls common-mytheme
arrow-left-inact.png arrow-up.png zim-pres-override.css 551 551 arrow-left-inact.png arrow-up.png zim-pres-override.css
arrow-left.png attachment.png zim-pres-variables.css 552 552 arrow-left.png attachment.png zim-pres-variables.css
arrow-right-inact.png backlink.png zim-print-override.css 553 553 arrow-right-inact.png backlink.png zim-print-override.css
arrow-right.png notice.js zim-variables.css 554 554 arrow-right.png notice.js zim-variables.css
arrow-up-inact.png zim-override.css 555 555 arrow-up-inact.png zim-override.css
</pre> 556 556 </pre>
557 557
<br> 558 558 <br>
559 559
<h3>Pictures</h3> 560 560 <h3>Pictures</h3>
561 561
<p> 562 562 <p>
The names of the different pictures are self explanatory, replace them with the ones you wish, however every picture must be present in the directory even if it's not modified and their size is better be 48 pixels. 563 563 The names of the different pictures are self explanatory, replace them with the ones you wish, however every picture must be present in the directory even if it's not modified and their size is better be 48 pixels.
</p> 564 564 </p>
565 565
<h4>Optional pictures</h4> 566 566 <h4>Optional pictures</h4>
567 567
<p> 568 568 <p>
There are five optional pictures that will be used if they are present :<br> 569 569 There are five optional pictures that will be used if they are present :<br>
<ul style='padding-left: 30pt'> 570 570 <ul style='padding-left: 30pt'>
<li><tt>logo.png</tt> : this logo will be placed on the top right of each page</li> 571 571 <li><tt>logo.png</tt> : this logo will be placed on the top right of each page</li>
<li><tt>logo-pres.png</tt> : this logo will be placed on the top right of each slide with Wize_S5</li> 572 572 <li><tt>logo-pres.png</tt> : this logo will be placed on the top right of each slide with Wize_S5</li>
<li><tt>fond.jpg</tt> : this picture will be used as background image instead of the background color</li> 573 573 <li><tt>fond.jpg</tt> : this picture will be used as background image instead of the background color</li>
<li><tt>fond-pres.jpg</tt> : this picture will be used as background on each slide with Wize_S5</li> 574 574 <li><tt>fond-pres.jpg</tt> : this picture will be used as background on each slide with Wize_S5</li>
<li><tt>favicon.ico</tt> : this will be used as the favourite icon in the browser</li> 575 575 <li><tt>favicon.ico</tt> : this will be used as the favourite icon in the browser</li>
</ul> 576 576 </ul>
</p> 577 577 </p>
578 578
<p> 579 579 <p>
Example use of logo.png :<br> 580 580 Example use of logo.png :<br>
<img src="./Wize_Doc_files/wise_demo_logo.png"> 581 581 <img src="./Wize_Doc_files/wise_demo_logo.png">
</p> 582 582 </p>
583 583
<p> 584 584 <p>
Example use of fond.jpg<br> 585 585 Example use of fond.jpg<br>
<img src="./Wize_Doc_files/wise_demo_fond.png"> 586 586 <img src="./Wize_Doc_files/wise_demo_fond.png">
</p> 587 587 </p>
588 588
<h3>CSSs</h3> 589 589 <h3>CSSs</h3>
590 590
<p> 591 591 <p>
There are 5 CSSs files in the directory : 592 592 There are 5 CSSs files in the directory :
</p> 593 593 </p>
594 594
<p> 595 595 <p>
<ul style='padding-left: 30pt'> 596 596 <ul style='padding-left: 30pt'>
<li><tt>zim-variables.css </tt>is used to defined variables for most of the theme</li> 597 597 <li><tt>zim-variables.css </tt>is used to defined variables for most of the theme</li>
<li><tt>zim-pres-variables.css</tt> contains variables specific to Wize_S5</li> 598 598 <li><tt>zim-pres-variables.css</tt> contains variables specific to Wize_S5</li>
<li><tt>zim-override.css </tt>is used to override some behaviors</li> 599 599 <li><tt>zim-override.css </tt>is used to override some behaviors</li>
<li><tt>zim-pres-override.css </tt>has the same purpose but for Wize_S5</li> 600 600 <li><tt>zim-pres-override.css </tt>has the same purpose but for Wize_S5</li>
<li><tt>zim-print-override.css</tt> same purpose also but for Wize_Print</li> 601 601 <li><tt>zim-print-override.css</tt> same purpose also but for Wize_Print</li>
</ul> 602 602 </ul>
</p> 603 603 </p>
604 604
<h4>zim-variables.css</h4> 605 605 <h4>zim-variables.css</h4>
606 606
<p> 607 607 <p>
All variables have comments and have generally self explanatory names, for example : 608 608 All variables have comments and have generally self explanatory names, for example :
</p> 609 609 </p>
<div class="zim-object"> 610 610 <div class="zim-object">
<pre><code class="css"> --main-header-color: #4e9a06; /* Headers color */ 611 611 <pre><code class="css"> --main-header-color: #4e9a06; /* Headers color */
</code></pre> 612 612 </code></pre>
</div> 613 613 </div>
614 614
<p> 615 615 <p>
You may look at some sites like the excellent <a href="https://www.w3schools.com/cssref/css_colors.asp" title="w3schools.com" class="https">w3schools.com</a> to know more about css colors and css in general. 616 616 You may look at some sites like the excellent <a href="https://www.w3schools.com/cssref/css_colors.asp" title="w3schools.com" class="https">w3schools.com</a> to know more about css colors and css in general.
</p> 617 617 </p>
618 618
<p> 619 619 <p>
As an example you may replace : 620 620 As an example you may replace :
doc/Wize_Doc_files/_resources/common-spec/zim-variables.css
Diff comments   View file @ d57a06f
1 1
/* Variables */ 2 2 /* Variables */
3 3
:root { 4 4 :root {
/* General */ 5 5 /* General */
--main-header-color: #4e9a06; /* Headers color */ 6 6 --main-header-color: #4e9a06; /* Headers color */
--main-link-color: blue; /* Links color */ 7 7 --main-link-color: blue; /* Links color */
--main-strike-color: grey; /* Strike color */ 8 8 --main-strike-color: grey; /* Strike color */
--main-pre-color: darkmagenta; /* Verbatim bloc color */ 9 9 --main-pre-color: darkmagenta; /* Verbatim bloc color */
--main-tt-color: darkmagenta; /* Inline verbatim */ 10 10 --main-tt-color: darkmagenta; /* Inline verbatim */
--main-code-color: saddlebrown; /* Code color (if hljs not used) */ 11 11 --main-code-color: saddlebrown; /* Code color (if hljs not used) */
12 12
/* Background 13 13 /* Background
* 14 14 *
* if fond.jpg exists in the resource directory, it will be used as backround 15 15 * if fond.jpg exists in the resource directory, it will be used as backround
* image with position and repetition given by : 16 16 * image with position and repetition given by :
* --main-body-background-position an --main-body-background-repeat 17 17 * --main-body-background-position an --main-body-background-repeat
* 18 18 *
* if the image does not exists the color defined by 19 19 * if the image does not exists the color defined by
* --main-body-background-color 20 20 * --main-body-background-color
* will be used 21 21 * will be used
*/ 22 22 */
--main-body-background-color: #779988; /* Color of the background body */ 23 23 --main-body-background-color: #779988; /* Color of the background body */
--main-body-background-position: center; 24 24 --main-body-background-position: center;
--main-body-background-repeat: repeat; 25 25 --main-body-background-repeat: repeat;
26 26
--main-menu-background-color: #fafafa; /* Backroung color of side menu */ 27 27 --main-menu-background-color: #fafafa; /* Backroung color of side menu */
/* Underline really underlined */ 28 28 /* Underline really underlined */
--main-menu-u-decoration: underline; 29 29 --main-u-decoration: underline;
--main-menu-u-background-color: white; 30 30 --main-u-background-color: white;
/* Underline Stabilo Version */ 31 31 /* Underline Stabilo Version */
/*--main-menu-u-decoration: none; 32 32 /*--main-u-decoration: none;
--main-menu-u-background-color: yellow;*/ 33 33 --main-u-background-color: yellow;*/
--main-page-width: 72em; /* Page width */ 34 34 --main-page-width: 72em; /* Page width */
35 --main-page-width-sod: 80em; /* Page width for sod version */
35 36
36 37
/* Tables */ 37 38 /* Tables */
/* Table headers */ 38 39 /* Table headers */
--main-th-color: black; /* Table header text color */ 39 40 --main-th-color: black; /* Table header text color */
--main-th-background-color: #bbb; /* Table header background */ 40 41 --main-th-background-color: #bbb; /* Table header background */
/* Table Row and Data */ 41 42 /* Table Row and Data */
--main-tr-even-background-color: #f2f2f2; /* Even row background color */ 42 43 --main-tr-even-background-color: #f2f2f2; /* Even row background color */
--main-tr-odd-background-color: white; /* Odd row background color */ 43 44 --main-tr-odd-background-color: white; /* Odd row background color */
--main-tr-hover-background-color: #ddd; /* Row background color when hover */ 44 45 --main-tr-hover-background-color: #ddd; /* Row background color when hover */
doc/Wize_Doc_files/_resources/common/zim-style.css
Diff comments   View file @ d57a06f
/* Common zim definitions */ 1 1 /* Common zim definitions */
2 2
a { text-decoration: none; 3 3 a { text-decoration: none;
color: var(--main-link-color);} 4 4 color: var(--main-link-color);}
a:link { text-decoration: none; 5 5 a:link { text-decoration: none;
color: var(--main-link-color);} 6 6 color: var(--main-link-color);}
a:hover { text-decoration: none; 7 7 a:hover { text-decoration: none;
color: var(--main-link-color);} 8 8 color: var(--main-link-color);}
a:active { text-decoration: none; 9 9 a:active { text-decoration: none;
color: var(--main-link-color);} 10 10 color: var(--main-link-color);}
a:visited { text-decoration: none; 11 11 a:visited { text-decoration: none;
color: var(--main-link-color);} 12 12 color: var(--main-link-color);}
13 13
strike { color: var(--main-strike-color);} 14 14 strike { color: var(--main-strike-color);}
15 15
u { text-decoration: var(--main-menu-u-decoration); 16 16 u { text-decoration: var(--main-u-decoration);
background-color: var(--main-menu-u-background-color);} 17 17 background-color: var(--main-u-background-color);}
18 18
tt { color: var(--main-tt-color); 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: var(--main-pre-color); 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: var(--main-code-color)} 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: var(--main-header-color); 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: var(--main-header-color); 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: var(--main-header-color); 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: var(--main-header-color); 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: var(--main-header-color); 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
.notice { 61 61 .notice {
margin-top:20px; 62 62 margin-top:20px;
font-size:small; 63 63 font-size:small;
} 64 64 }
65 65
#upBtn { 66 66 #upBtn {
display: none; 67 67 display: none;
position: fixed; 68 68 position: fixed;
bottom: 20px; 69 69 bottom: 20px;
right: 30px; 70 70 right: 30px;
z-index: 99; 71 71 z-index: 99;
font-size: 18px; 72 72 font-size: 18px;
border: none; 73 73 border: none;
outline: none; 74 74 outline: none;
background-color: #7777; 75 75 background-color: #7777;
color: white; 76 76 color: white;
cursor: pointer; 77 77 cursor: pointer;
padding: 15px; 78 78 padding: 15px;
border-radius: 4px; 79 79 border-radius: 4px;
} 80 80 }
81 81
#upBtn::before { 82 82 #upBtn::before {
doc/Wize_Presentation_files/_resources/common-spec/zim-variables.css
Diff comments   View file @ d57a06f
1 1
/* Variables */ 2 2 /* Variables */
3 3
:root { 4 4 :root {
/* General */ 5 5 /* General */
--main-header-color: #4e9a06; /* Headers color */ 6 6 --main-header-color: #4e9a06; /* Headers color */
--main-link-color: blue; /* Links color */ 7 7 --main-link-color: blue; /* Links color */
--main-strike-color: grey; /* Strike color */ 8 8 --main-strike-color: grey; /* Strike color */
--main-pre-color: darkmagenta; /* Verbatim bloc color */ 9 9 --main-pre-color: darkmagenta; /* Verbatim bloc color */
--main-tt-color: darkmagenta; /* Inline verbatim */ 10 10 --main-tt-color: darkmagenta; /* Inline verbatim */
--main-code-color: saddlebrown; /* Code color (if hljs not used) */ 11 11 --main-code-color: saddlebrown; /* Code color (if hljs not used) */
12 12
/* Background 13 13 /* Background
* 14 14 *
* if fond.jpg exists in the resource directory, it will be used as backround 15 15 * if fond.jpg exists in the resource directory, it will be used as backround
* image with position and repetition given by : 16 16 * image with position and repetition given by :
* --main-body-background-position an --main-body-background-repeat 17 17 * --main-body-background-position an --main-body-background-repeat
* 18 18 *
* if the image does not exists the color defined by 19 19 * if the image does not exists the color defined by
* --main-body-background-color 20 20 * --main-body-background-color
* will be used 21 21 * will be used
*/ 22 22 */
--main-body-background-color: #779988; /* Color of the background body */ 23 23 --main-body-background-color: #779988; /* Color of the background body */
--main-body-background-position: center; 24 24 --main-body-background-position: center;
--main-body-background-repeat: repeat; 25 25 --main-body-background-repeat: repeat;
26 26
--main-menu-background-color: #fafafa; /* Backroung color of side menu */ 27 27 --main-menu-background-color: #fafafa; /* Backroung color of side menu */
/* Underline really underlined */ 28 28 /* Underline really underlined */
--main-menu-u-decoration: underline; 29 29 --main-u-decoration: underline;
--main-menu-u-background-color: white; 30 30 --main-u-background-color: white;
/* Underline Stabilo Version */ 31 31 /* Underline Stabilo Version */
/*--main-menu-u-decoration: none; 32 32 /*--main-u-decoration: none;
--main-menu-u-background-color: yellow;*/ 33 33 --main-u-background-color: yellow;*/
--main-page-width: 72em; /* Page width */ 34 34 --main-page-width: 72em; /* Page width */
35 --main-page-width-sod: 80em; /* Page width for sod version */
35 36
36 37
/* Tables */ 37 38 /* Tables */
/* Table headers */ 38 39 /* Table headers */
--main-th-color: black; /* Table header text color */ 39 40 --main-th-color: black; /* Table header text color */
--main-th-background-color: #bbb; /* Table header background */ 40 41 --main-th-background-color: #bbb; /* Table header background */
/* Table Row and Data */ 41 42 /* Table Row and Data */
--main-tr-even-background-color: #f2f2f2; /* Even row background color */ 42 43 --main-tr-even-background-color: #f2f2f2; /* Even row background color */
--main-tr-odd-background-color: white; /* Odd row background color */ 43 44 --main-tr-odd-background-color: white; /* Odd row background color */
--main-tr-hover-background-color: #ddd; /* Row background color when hover */ 44 45 --main-tr-hover-background-color: #ddd; /* Row background color when hover */
doc/Wize_Presentation_files/_resources/common/zim-style.css
Diff comments   View file @ d57a06f
/* Common zim definitions */ 1 1 /* Common zim definitions */
2 2
a { text-decoration: none; 3 3 a { text-decoration: none;
color: var(--main-link-color);} 4 4 color: var(--main-link-color);}
a:link { text-decoration: none; 5 5 a:link { text-decoration: none;
color: var(--main-link-color);} 6 6 color: var(--main-link-color);}
a:hover { text-decoration: none; 7 7 a:hover { text-decoration: none;
color: var(--main-link-color);} 8 8 color: var(--main-link-color);}
a:active { text-decoration: none; 9 9 a:active { text-decoration: none;
color: var(--main-link-color);} 10 10 color: var(--main-link-color);}
a:visited { text-decoration: none; 11 11 a:visited { text-decoration: none;
color: var(--main-link-color);} 12 12 color: var(--main-link-color);}
13 13
strike { color: var(--main-strike-color);} 14 14 strike { color: var(--main-strike-color);}
15 15
u { text-decoration: var(--main-menu-u-decoration); 16 16 u { text-decoration: var(--main-u-decoration);
background-color: var(--main-menu-u-background-color);} 17 17 background-color: var(--main-u-background-color);}
18 18
tt { color: var(--main-tt-color); 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: var(--main-pre-color); 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: var(--main-code-color)} 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: var(--main-header-color); 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: var(--main-header-color); 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: var(--main-header-color); 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: var(--main-header-color); 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: var(--main-header-color); 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
.notice { 61 61 .notice {
margin-top:20px; 62 62 margin-top:20px;
font-size:small; 63 63 font-size:small;
} 64 64 }
65 65
#upBtn { 66 66 #upBtn {
display: none; 67 67 display: none;
position: fixed; 68 68 position: fixed;
bottom: 20px; 69 69 bottom: 20px;
right: 30px; 70 70 right: 30px;
z-index: 99; 71 71 z-index: 99;
font-size: 18px; 72 72 font-size: 18px;
border: none; 73 73 border: none;
outline: none; 74 74 outline: none;
background-color: #7777; 75 75 background-color: #7777;
color: white; 76 76 color: white;
cursor: pointer; 77 77 cursor: pointer;
padding: 15px; 78 78 padding: 15px;
border-radius: 4px; 79 79 border-radius: 4px;
} 80 80 }
81 81
#upBtn::before { 82 82 #upBtn::before {