William Daniau / wize

Download as
Browse Code »

Commit 5aacce24dffab6b45d74b469bc6d11631a954bd8

Authored by William Daniau
1 parent fdb370fcc5
Exists in master

+ Ajout d'une couleur de fond 

+ Couleur et positionnement de hr
+ Décalage du menu de 20px
+ Titres de fin de pages colorés

Showing 1 changed file with 20 additions and 4 deletions Inline Diff

templates/html/Default_with_index.html
Diff comments   View file @ 5aacce2
<!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>[% title %]</title> 5 5 <title>[% title %]</title>
<meta name='Generator' content='[% generator.name %]'> 6 6 <meta name='Generator' content='[% generator.name %]'>
<link rel="stylesheet" 7 7 <link rel="stylesheet"
href="[% resource('common/zim-style.css') %]" > 8 8 href="[% resource('common/zim-style.css') %]" >
<link rel="stylesheet" 9 9 <link rel="stylesheet"
href="[% resource('common/zim-table-style.css') %]" > 10 10 href="[% resource('common/zim-table-style.css') %]" >
<link rel="stylesheet" 11 11 <link rel="stylesheet"
href="[% resource('common/zim-special.css') %]" > 12 12 href="[% resource('common/zim-special.css') %]" >
<link rel="stylesheet" 13 13 <link rel="stylesheet"
href="[% resource('common/zim-hljs.css') %]" > 14 14 href="[% resource('common/zim-hljs.css') %]" >
15 15
<style type='text/css'> 16 16 <style type='text/css'>
* { font-family: sans-serif } 17 17 * { font-family: sans-serif }
18 18
a:hover { text-decoration: underline; } 19 19 a:hover { text-decoration: underline; }
20 20
/* Centre les images mais elles sont coupées aux sauts de page à l'impression */ 21 21 /* Centre les images mais elles sont coupées aux sauts de page à l'impression */
img { 22 22 img {
display: block; 23 23 display: block;
margin-left: auto; 24 24 margin-left: auto;
margin-right: auto; 25 25 margin-right: auto;
} 26 26 }
27 27
/* Specifique au with index */ 28 28 /* Specifique au with index */
span.insen { color: grey } 29 29 span.insen { color: grey }
30 30
.pages { 31 31 .pages {
/*max-width: 1000px;*/ 32 32 /*max-width: 1000px;*/
/*padding-left: 320px;*/ 33 33 /*padding-left: 320px;*/
width: inherit; 34 34 width: inherit;
transition: margin-left .3s; 35 35 transition: margin-left .3s;
background: white; 36 36 background: white;
padding-left: 10px; 37 37 padding-left: 10px;
padding-right: 10px; 38 38 padding-right: 10px;
padding-bottom: 20px; 39 39 padding-bottom: 20px;
40 padding-top: 10px;
} 40 41 }
41 42
.menu{ 42 43 .menu{
/*float:left; */ 43 44 /*float:left; */
width: 0; 44 45 width: 0;
color:#4e9a06; 45 46 color:#4e9a06;
overflow-x: hidden; 46 47 overflow-x: hidden;
position: absolute; 47 48 position: absolute;
transition:.3s; 48 49 transition:.3s;
background: #fafafa; 49 50 background: #fafafa;
border-style: solid; 50 51 border-style: solid;
border-width: 1px; 51 52 border-width: 1px;
53 margin-left:-20px;
} 52 54 }
53 55
.menu a,.menu a:link,.menu a:hover,.menu a:active,.menu a:visited { 54 56 .menu a,.menu a:link,.menu a:hover,.menu a:active,.menu a:visited {
color: #4e9a06; 55 57 color: #4e9a06;
} 56 58 }
57 59
.menuOpen { 58 60 .menuOpen {
/*display: block;*/ 59 61 /*display: block;*/
} 60 62 }
61 63
.menuClosed { 62 64 .menuClosed {
border-style: unset; 63 65 border-style: unset;
} 64 66 }
65 67
.header{ 66 68 .header{
max-width: 63em; 67 69 max-width: 63em;
position: fixed; 68 70 position: fixed;
width: 100%; 69 71 width: 100%;
top:0; 70 72 top:0;
background:white; 71 73 background:white;
z-index: 1; 72 74 z-index: 1;
} 73 75 }
74 76
hr{clear:both;} 75 77 hr{
78 clear:both;
79 border-style: solid;
80 border-width: 1px;
81 border-color: #4e9a06;
82 }
76 83
body { 77 84 body {
max-width:63em; 78 85 max-width:63em;
display:block; 79 86 display:block;
margin-left:auto; 80 87 margin-left:auto;
margin-right:auto; 81 88 margin-right:auto;
89 background: lightslategrey;
} 82 90 }
83 91
.intercalaire { 84 92 .intercalaire {
background:white; 85 93 background:white;
margin-top: 48px; 86 94 margin-top: 48px;
padding: 5px; 87 95 padding: 10px;
} 88 96 }
89 97
98 .bold-footer {
99 color: #4e9a06;
100 }
101
</style> 90 102 </style>
91 103
<!-- Themes clair : 92 104 <!-- Themes clair :
atom-one-light.css, vs.css googlecode.css github.css 93 105 atom-one-light.css, vs.css googlecode.css github.css
qtcreator_light.css 94 106 qtcreator_light.css
Themes sombres : 95 107 Themes sombres :
agate.css vs2015.css atom-one-dark.css hybrid.css 96 108 agate.css vs2015.css atom-one-dark.css hybrid.css
ir-black.css sunburst.css tomorrow-night-bright.css 97 109 ir-black.css sunburst.css tomorrow-night-bright.css
qtcreator_dark.css 98 110 qtcreator_dark.css
Demo live : https://highlightjs.org/static/demo/ --> 99 111 Demo live : https://highlightjs.org/static/demo/ -->
<link rel="stylesheet" 100 112 <link rel="stylesheet"
href="[% resource('common/hljs/styles/sunburst.css') %]" > 101 113 href="[% resource('common/hljs/styles/sunburst.css') %]" >
102 114
<!-- hljs --> 103 115 <!-- hljs -->
<script src="[% resource('common/hljs/highlight.pack.js') %]"></script> 104 116 <script src="[% resource('common/hljs/highlight.pack.js') %]"></script>
105 117
<script> 106 118 <script>
function openNav() { 107 119 function openNav() {
if (document.getElementById("mySidenav").getAttribute("class").split(' ')[1] == "menuClosed") { 108 120 if (document.getElementById("mySidenav").getAttribute("class").split(' ')[1] == "menuClosed") {
document.getElementById("mySidenav").style.width = "300px"; 109 121 document.getElementById("mySidenav").style.width = "300px";
/*document.getElementById("main").style.marginLeft = "300px";*/ 110 122 /*document.getElementById("main").style.marginLeft = "300px";*/
document.getElementById("mySidenav").setAttribute("class","menu menuOpen"); 111 123 document.getElementById("mySidenav").setAttribute("class","menu menuOpen");
/* Scroll to top when opening menu */ 112 124 /* Scroll to top when opening menu */
document.body.scrollTop = 0 113 125 document.body.scrollTop = 0
document.documentElement.scrollTop = 0; 114 126 document.documentElement.scrollTop = 0;
} else { 115 127 } else {
document.getElementById("mySidenav").style.width = "0"; 116 128 document.getElementById("mySidenav").style.width = "0";
/*document.getElementById("main").style.marginLeft = "0";*/ 117 129 /*document.getElementById("main").style.marginLeft = "0";*/
document.getElementById("mySidenav").setAttribute("class","menu menuClosed"); 118 130 document.getElementById("mySidenav").setAttribute("class","menu menuClosed");
119 131
} 120 132 }
} 121 133 }
</script> 122 134 </script>
123 135
124 136
</head> 125 137 </head>
<body> 126 138 <body>
127 139
<!-- Header --> 128 140 <!-- Header -->
<div class='header'> 129 141 <div class='header'>
<table class='navigation' style="float:left"> 130 142 <table class='navigation' style="float:left">
<tr class='navigation'> 131 143 <tr class='navigation'>
<td class='navigation'> 132 144 <td class='navigation'>
<span style="font-size:30px;cursor:pointer;color: #4e9a06;" onclick="openNav()">&#9776;</span> 133 145 <span style="font-size:30px;cursor:pointer;color: #4e9a06;" onclick="openNav()">&#9776;</span>
</td> 134 146 </td>
<td class='navigation'> 135 147 <td class='navigation'>
[% IF navigation.prev %] 136 148 [% IF navigation.prev %]
<a href='[% uri(navigation.prev) %]'> 137 149 <a href='[% uri(navigation.prev) %]'>
<img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> 138 150 <img src="[% resource('common/arrow-left.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]">
</a> 139 151 </a>
[% ELSE %] 140 152 [% ELSE %]
<img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]"> 141 153 <img src="[% resource('common/arrow-left-inact.png') %]" alt="[% gettext('Prev') %]" title="[% gettext('Prev') %]">
[% END %] 142 154 [% END %]
</td> 143 155 </td>
<td class='navigation'> 144 156 <td class='navigation'>
[% IF links.get("index") %] 145 157 [% IF links.get("index") %]
<a href='[% uri(links.get("index")) %]'> 146 158 <a href='[% uri(links.get("index")) %]'>
<img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> 147 159 <img src="[% resource('common/arrow-up.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]">
</a> 148 160 </a>
[% ELSE %] 149 161 [% ELSE %]
<img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]"> 150 162 <img src="[% resource('common/arrow-up-inact.png') %]" alt="[% gettext('Index') %]" title="[% gettext('Index') %]">
[% END %] 151 163 [% END %]
</td> 152 164 </td>
<td class='navigation'> 153 165 <td class='navigation'>
[% IF navigation.next %] 154 166 [% IF navigation.next %]
<a href='[% uri(navigation.next) %]'> 155 167 <a href='[% uri(navigation.next) %]'>
<img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> 156 168 <img src="[% resource('common/arrow-right.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]">
</a> 157 169 </a>
[% ELSE %] 158 170 [% ELSE %]
<img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]"> 159 171 <img src="[% resource('common/arrow-right-inact.png') %]" alt="[% gettext('Next') %]" title="[% gettext('Next') %]">
[% END %] 160 172 [% END %]
</td> 161 173 </td>
</tr> 162 174 </tr>
</table> 163 175 </table>
164 176
<span> 165 177 <span>
[% FOR page IN pages %] 166 178 [% FOR page IN pages %]
<a name='[% anchor(page) %]'></a> 167 179 <a name='[% anchor(page) %]'></a>
<h1 style="display:inline-block;margin-left:20px;margin-top:5px;"> 168 180 <h1 style="display:inline-block;margin-left:20px;margin-top:5px;">
[% page.title %]</h1> 169 181 [% page.title %]</h1>
[% END %] 170 182 [% END %]
</span> 171 183 </span>
172 184
<table class='navigation' style="float:right;margin-right:10px;"> 173 185 <table class='navigation' style="float:right;margin-right:10px;">
<tr class='navigation'> 174 186 <tr class='navigation'>
<td class='navigation'> 175 187 <td class='navigation'>
[% FOR page IN pages %] 176 188 [% FOR page IN pages %]
[% FOR link IN page.backlinks %] 177 189 [% FOR link IN page.backlinks %]
[% IF loop.first %]<a href="#backlinks"> 178 190 [% IF loop.first %]<a href="#backlinks">
<img src='[% resource("common/backlink.png") %]' alt='[% gettext("Backlinks:") %]' title='[% gettext("Backlinks:") %]'> 179 191 <img src='[% resource("common/backlink.png") %]' alt='[% gettext("Backlinks:") %]' title='[% gettext("Backlinks:") %]'>
</a>[% END %] 180 192 </a>[% END %]
[% END %] 181 193 [% END %]
[% END %] 182 194 [% END %]
</td> 183 195 </td>
<td class='navigation'> 184 196 <td class='navigation'>
[% FOR page IN pages %] 185 197 [% FOR page IN pages %]
[% FOR file IN page.attachments %] 186 198 [% FOR file IN page.attachments %]
[% IF loop.first %]<a href="#attach"> 187 199 [% IF loop.first %]<a href="#attach">
<img src='[% resource("common/attachment.png") %]' alt='[% gettext("Attachments:") %]' title='[% gettext("Attachments:") %]'> 188 200 <img src='[% resource("common/attachment.png") %]' alt='[% gettext("Attachments:") %]' title='[% gettext("Attachments:") %]'>
</a>[% END %] 189 201 </a>[% END %]
[% END %] 190 202 [% END %]
[% END %] 191 203 [% END %]
</td> 192 204 </td>
</tr> 193 205 </tr>
</table> 194 206 </table>
</div> 195 207 </div>
196 208
<div class="intercalaire"> 197 209 <div class="intercalaire">
<hr /> 198 210 <hr />
</div> 199 211 </div>
200 212
<div id="mySidenav" class="menu menuClosed"> 201 213 <div id="mySidenav" class="menu menuClosed">
[% index() %] 202 214 [% index() %]
</div> 203 215 </div>
204 216
[% options.empty_lines = "default" %] 205 217 [% options.empty_lines = "default" %]
206 218
<!-- Wiki content --> 207 219 <!-- Wiki content -->
208 220
<div id="main" class='pages'> 209 221 <div id="main" class='pages'>
<!--[% FOR page IN pages %]--> 210 222 <!--[% FOR page IN pages %]-->
<!-- 211 223 <!--
<div class='heading'> 212 224 <div class='heading'>
<h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1> 213 225 <h1>[% page.title %] <a name='[% anchor(page) %]'></a></h1>
</div> 214 226 </div>
--> 215 227 -->
<div class='content'> 216 228 <div class='content'>
[% page.body %] 217 229 [% page.body %]
</div> 218 230 </div>
219 231
<br /> 220 232 <br />
233
234 <div style="padding-bottom:10px;">
235 <hr />
236 </div>
221 237
<div class='page-footer'> 222 238 <div class='page-footer'>