summaryrefslogtreecommitdiff
path: root/public
diff options
context:
space:
mode:
authorpolo <ordipolo@gmx.fr>2022-02-17 18:13:00 +0100
committerpolo <ordipolo@gmx.fr>2022-02-17 18:13:00 +0100
commit787d03e48471ba62cd830379428f04d996f0b74b (patch)
treee9f98c7b9288c4530b50985688dd82622106ba2d /public
parent29df6f1362745eabf4fbcaedf309eb63795152fa (diff)
downloadmelaine-787d03e48471ba62cd830379428f04d996f0b74b.zip
model update
Diffstat (limited to 'public')
-rw-r--r--public/accueil.css991
-rw-r--r--public/discographie.css79
-rw-r--r--public/donnees_hors_editeur.css74
-rw-r--r--public/icone_supprimer.pngbin0 -> 7277 bytes
-rw-r--r--public/main.js163
-rw-r--r--public/melaine.css214
-rw-r--r--public/menu.css678
-rwxr-xr-xpublic/menu/redimensionnement.sh50
-rw-r--r--public/normalize.css698
9 files changed, 1519 insertions, 1428 deletions
diff --git a/public/accueil.css b/public/accueil.css
index dc79083..f951334 100644
--- a/public/accueil.css
+++ b/public/accueil.css
@@ -1,485 +1,506 @@
1/* public/accueil.css */ 1/* public/accueil.css */
2 2
3@font-face /* pour .police_titre */ 3@font-face /* pour .police_titre */
4{ 4{
5 font-family: "you_are_loved"; 5 font-family: "you_are_loved";
6 src: url('fonts/you_are_loved.ttf') format('truetype'), 6 src: url('fonts/you_are_loved.ttf') format('truetype'),
7 url('fonts/you_are_loved.eot'), 7 url('fonts/you_are_loved.eot'),
8 url('fonts/you_are_loved.eot?#iefix') format('embedded-opentype'), 8 url('fonts/you_are_loved.eot?#iefix') format('embedded-opentype'),
9 url('fonts/you_are_loved.woff2') format('woff2'), 9 url('fonts/you_are_loved.woff2') format('woff2'),
10 url('fonts/you_are_loved.woff') format('woff'); 10 url('fonts/you_are_loved.woff') format('woff');
11} 11}
12 12
13.no_underline 13.no_underline
14{ 14{
15 text-decoration: none; 15 text-decoration: none;
16} 16}
17 17
18body 18body
19{ 19{
20 margin: 0px; 20 margin: 0px;
21 background-color: #326892; 21 background-color: #326892;
22} 22}
23 23
24#bloc_page 24#bloc_page
25{ 25{
26 max-width: 700px; 26 max-width: 700px;
27 margin: auto; 27 margin: auto;
28 background-color: #FFFFFF; 28 background-color: #FFFFFF;
29 font-family: Sans-serif; 29 font-family: Sans-serif;
30 font-size: 100%; 30 font-size: 100%;
31} 31}
32 32
33nav 33nav
34{ 34{
35 position: fixed; 35 position: fixed;
36 z-index: 2; 36 z-index: 2;
37 background-color: white; 37 background-color: white;
38} 38}
39 39
40/* agir sur ul et li directement affecte le ckeditor */ 40/* agir sur ul et li directement affecte le ckeditor */
41#ul_menu 41#ul_menu
42{ 42{
43 margin: 0px; 43 margin: 0px;
44 padding: 5px; 44 padding: 5px;
45 display: flex; 45 display: flex;
46 flex-wrap: wrap; 46 flex-wrap: wrap;
47 justify-content: center; 47 justify-content: center;
48} 48}
49 49
50#ul_menu li 50#ul_menu li
51{ 51{
52 list-style-type: none; 52 list-style-type: none;
53 white-space: nowrap; 53 white-space: nowrap;
54} 54}
55 55
56li a 56li a
57{ 57{
58 text-decoration: none; 58 text-decoration: none;
59 color: #666; 59 color: #666;
60} 60}
61 61
62a:hover:not(.police_titre) /* :not() = sauf */ 62a:hover:not(.police_titre) /* :not() = sauf */
63{ 63{
64 color: #000000; 64 color: #000000;
65} 65}
66 66
67#actuelle 67#actuelle
68{ 68{
69 color: #463c3c; 69 color: #463c3c;
70 font-weight: bold; 70 font-weight: bold;
71} 71}
72 72
73img 73img
74{ 74{
75 vertical-align: bottom; 75 vertical-align: bottom;
76} 76}
77 77
78.boutonSubmitEditeur 78.boutonSubmitEditeur
79{ 79{
80 margin-top: 5px; 80 margin-top: 5px;
81} 81}
82 82
83form 83.boutonAnnuler:hover
84{ 84{
85 padding-bottom: 14px; 85 /*text-decoration: none;*/
86 border-bottom: 1px black solid; 86 border: none;
87} 87}
88 88
89#courriel 89h3
90{ 90{
91 padding-top: 30px; 91 margin: 5px;
92 font-size: 85%; 92}
93} 93.conteneur_article
94 94{
95#courriel * 95 margin: 3px;
96{ 96}
97 max-width: 220px; 97
98 color: black; 98.articleAvecEditeur
99 text-decoration: none; 99{
100} 100 background-color: #a8b3d9;
101 101 padding: 2px 0px;
102#courriel a:hover 102}
103{ 103
104 /*border: 1px blue solid;*/ 104form
105 padding: 5px; 105{
106} 106 padding-bottom: 14px;
107 107 border-bottom: 1px black solid;
108#courrielJS 108}
109{ 109
110 display: inline; 110#courriel
111 margin: 2px; 111{
112} 112 padding-top: 30px;
113 113 font-size: 85%;
114.zoneVideAdmin 114}
115{ 115
116 padding-top: 20px; 116#courriel *
117} 117{
118 118 max-width: 220px;
119#modeAdmin 119 color: black;
120{ 120 text-decoration: none;
121 background-color: orange; 121}
122 position: fixed; 122
123 bottom: 0px; 123#courriel a:hover
124 width: 700px; 124{
125 z-index: 2; 125 /*border: 1px blue solid;*/
126 padding-top: 5px; 126 padding: 5px;
127 text-align: center; 127}
128} 128
129 129#courrielJS
130#modeAdmin p 130{
131{ 131 display: inline;
132 text-align: center; 132 margin: 2px;
133 margin: 0px; 133}
134 padding: 2px; 134
135} 135.zoneVideAdmin
136#modeAdmin>div p 136{
137{ 137 padding-top: 20px;
138 /*border: 1px black solid;*/ 138}
139 margin: 5px; 139
140 padding: 0px; 140#modeAdmin
141} 141{
142#modeAdmin>p a 142 background-color: orange;
143{ 143 position: fixed;
144 padding: 2px; 144 bottom: 0px;
145} 145 width: 700px;
146 146 z-index: 2;
147#modeAdmin div 147 padding-top: 5px;
148{ 148 text-align: center;
149 display: flex; 149}
150 justify-content: space-around; 150
151 151#modeAdmin p
152 margin: 0px; 152{
153 font-size: 85%; 153 text-align: center;
154} 154 margin: 0px;
155 155 padding: 2px;
156#lienModeAdmin 156}
157{ 157#modeAdmin>div p
158 margin: 0px 20px; 158{
159 padding-bottom: 20px; 159 /*border: 1px black solid;*/
160} 160 margin: 5px;
161 161 padding: 0px;
162#lienModeAdmin p 162}
163{ 163#modeAdmin>p a
164 text-align: right; 164{
165} 165 padding: 2px;
166 166}
167#lienModeAdmin p a 167
168{ 168#modeAdmin div
169 color: #666; 169{
170 font-weight: bold; 170 display: flex;
171 padding: 2px; 171 justify-content: space-around;
172} 172
173 173 margin: 0px;
174#lienModeAdmin p a:hover 174 font-size: 85%;
175{ 175}
176 color: black; 176
177} 177#lienModeAdmin
178 178{
179.connexionTitre 179 margin: 0px 20px;
180{ 180 padding-bottom: 20px;
181 margin-top: 0px; 181}
182 text-align: center; 182
183} 183#lienModeAdmin p
184.avertissement 184{
185{ 185 text-align: right;
186 color: red; 186}
187 font-size: 90%; 187
188 text-align: center; 188#lienModeAdmin p a
189} 189{
190 190 color: #666;
191.connexionFormulaire 191 font-weight: bold;
192{ 192 padding: 2px;
193 margin: 30px; 193}
194} 194
195 195#lienModeAdmin p a:hover
196.connexionFooter 196{
197{ 197 color: black;
198 text-align: right; 198}
199 padding: 5px; 199
200} 200.connexionTitre
201 201{
202.connexionFooter a 202 margin-top: 0px;
203{ 203 text-align: center;
204 color: #666; 204}
205} 205.avertissement
206 206{
207 207 color: red;
208/* PC, y compris vieux écrans 800x600 */ 208 font-size: 90%;
209@media screen and (min-width: 700px) 209 text-align: center;
210{ 210}
211 .police_titre 211
212 { 212.connexionFormulaire
213 213{
214 font-family: you_are_loved, Arial, sans; 214 margin: 30px;
215 font-size: 250%; 215}
216 color: #ddc97a; 216
217 position: relative; 217.connexionFooter
218 top: 30px; 218{
219 left: 40px; 219 text-align: right;
220 } 220 padding: 5px;
221 221}
222 /* compensation des cibles de liens # superposées au "nav" hors flux */ 222
223 :target 223.connexionFooter a
224 { 224{
225 padding-top: 70px; 225 color: #666;
226 margin-top: -70px; 226}
227 } 227
228 228
229 nav 229/* PC, y compris vieux écrans 800x600 */
230 { 230@media screen and (min-width: 700px)
231 border-bottom: 1px black solid; 231{
232 margin: 0px 35px; 232 .police_titre
233 max-width: 630px; 233 {
234 } 234
235 235 font-family: you_are_loved, Arial, sans;
236 li 236 font-size: 250%;
237 { 237 color: #ddc97a;
238 margin: 6px 15px; 238 position: relative;
239 } 239 top: 30px;
240 240 left: 40px;
241 header 241 }
242 { 242
243 margin: 0px 35px; 243 /* compensation des cibles de liens # superposées au "nav" hors flux */
244 padding-top: 92px; 244 :target
245 } 245 {
246 246 padding-top: 70px;
247 #bienvenue 247 margin-top: -70px;
248 { 248 }
249 background-image: url("accueil/bienvenue.png"); 249
250 width: 630px; 250 nav
251 height: 596px; 251 {
252 } 252 border-bottom: 1px black solid;
253 253 margin: 0px 35px;
254 #contenu, footer 254 max-width: 630px;
255 { 255 }
256 width: 630px; 256
257 margin: auto; 257 li
258 } 258 {
259 259 margin: 6px 15px;
260 #courriel 260 }
261 { 261
262 margin: 0px 35px; 262 header
263 } 263 {
264 264 margin: 0px 35px;
265 .zoneVideAdmin, #modeAdmin 265 padding-top: 92px;
266 { 266 }
267 height: 70px; 267
268 } 268 #bienvenue
269} 269 {
270 270 background-image: url("accueil/bienvenue.png");
271/* "tablettes" et vieux écrans 640x480 */ 271 width: 630px;
272@media screen and (max-width: 699px) 272 height: 596px;
273{ 273 }
274 #bloc_page 274
275 { 275 #contenu, footer
276 max-width: 540px; 276 {
277 font-size: 90%; 277 width: 630px;
278 } 278 margin: auto;
279 279 }
280 .police_titre 280
281 { 281 #courriel
282 282 {
283 font-family: you_are_loved, Arial, sans; 283 margin: 0px 35px;
284 font-size: 200%; 284 }
285 color: #ddc97a; 285
286 286 .zoneVideAdmin, #modeAdmin
287 position: relative; 287 {
288 top: 20px; 288 height: 70px;
289 left: 30px; 289 }
290 } 290}
291 291
292 #bienvenue .police_titre 292/* "tablettes" et vieux écrans 640x480 */
293 { 293@media screen and (max-width: 699px)
294 font-size: 250%; 294{
295 top: 0px; 295 #bloc_page
296 left: 65px; 296 {
297 } 297 max-width: 540px;
298 298 font-size: 90%;
299 :target 299 }
300 { 300
301 padding-top: 59px; 301 .police_titre
302 margin-top: -59px; 302 {
303 } 303
304 304 font-family: you_are_loved, Arial, sans;
305 nav 305 font-size: 200%;
306 { 306 color: #ddc97a;
307 margin: 0px 30px; 307
308 max-width: 480px; 308 position: relative;
309 } 309 top: 20px;
310 310 left: 30px;
311 li 311 }
312 { 312
313 margin: 4px 10px; 313 #bienvenue .police_titre
314 } 314 {
315 315 font-size: 250%;
316 header 316 top: 0px;
317 { 317 left: 65px;
318 padding-top: 61px; 318 }
319 } 319
320 320 :target
321 #bienvenue 321 {
322 { 322 padding-top: 59px;
323 background-image: url("accueil/bienvenue_petit.png"); 323 margin-top: -59px;
324 width: 480px; 324 }
325 height: 463px; 325
326 margin: auto; 326 nav
327 } 327 {
328 328 margin: 0px 30px;
329 #contenu, footer 329 max-width: 480px;
330 { 330 }
331 width: 480px; 331
332 margin: auto; 332 li
333 } 333 {
334 334 margin: 4px 10px;
335 #courriel 335 }
336 { 336
337 margin: 0px 30px; 337 header
338 } 338 {
339 339 padding-top: 61px;
340 .zoneVideAdmin, #modeAdmin 340 }
341 { 341
342 height: 75px; 342 #bienvenue
343 } 343 {
344 344 background-image: url("accueil/bienvenue_petit.png");
345 #modeAdmin 345 width: 480px;
346 { 346 height: 463px;
347 max-width: 540px; 347 margin: auto;
348 } 348 }
349} 349
350 350 #contenu, footer
351 /* on grignote les colonnes autour du texte */ 351 {
352@media screen and (max-width: 539px) 352 width: 480px;
353{ 353 margin: auto;
354 #modeAdmin div 354 }
355 { 355
356 max-width: 480px; 356 #courriel
357 margin: 0px; 357 {
358 border: none; 358 margin: 0px 30px;
359 } 359 }
360 #modeAdmin 360
361 { 361 .zoneVideAdmin, #modeAdmin
362 font-size: 90%; 362 {
363 } 363 height: 75px;
364 .zoneVideAdmin, #modeAdmin 364 }
365 { 365
366 height: 70px; 366 #modeAdmin
367 } 367 {
368} 368 max-width: 540px;
369 369 }
370@media screen and (max-width: 479px) 370}
371{ 371
372 #bloc_page 372 /* on grignote les colonnes autour du texte */
373 { 373@media screen and (max-width: 539px)
374 max-width: 380px; 374{
375 font-size: 85%; 375 #modeAdmin div
376 } 376 {
377 377 max-width: 480px;
378 .police_titre 378 margin: 0px;
379 { 379 border: none;
380 380 }
381 font-family: you_are_loved, Arial, sans; 381 #modeAdmin
382 font-size: 150%; 382 {
383 color: #ddc97a; 383 font-size: 90%;
384 384 }
385 position: relative; 385 .zoneVideAdmin, #modeAdmin
386 top: 13px; 386 {
387 left: 18px; 387 height: 70px;
388 } 388 }
389 389}
390 #bienvenue .police_titre 390
391 { 391@media screen and (max-width: 479px)
392 font-size: 200%; 392{
393 top: 0px; 393 #bloc_page
394 left: 25px; 394 {
395 } 395 max-width: 380px;
396 396 font-size: 85%;
397 :target 397 }
398 { 398
399 padding-top: 56px; 399 .police_titre
400 margin-top: -56px; 400 {
401 } 401
402 402 font-family: you_are_loved, Arial, sans;
403 nav 403 font-size: 150%;
404 { 404 color: #ddc97a;
405 margin: 0px 30px; 405
406 max-width: 320px; 406 position: relative;
407 } 407 top: 13px;
408 408 left: 18px;
409 li 409 }
410 { 410
411 margin: 0px 10px; 411 #bienvenue .police_titre
412 } 412 {
413 413 font-size: 200%;
414 header 414 top: 0px;
415 { 415 left: 25px;
416 padding-top: 60px; 416 }
417 } 417
418 418 :target
419 #bienvenue 419 {
420 { 420 padding-top: 56px;
421 background-image: url("accueil/bienvenue_mini.png"); 421 margin-top: -56px;
422 width: 320px; 422 }
423 height: 316px; 423
424 } 424 nav
425 425 {
426 #contenu, footer 426 margin: 0px 30px;
427 { 427 max-width: 320px;
428 width: 320px; 428 }
429 margin: auto; 429
430 } 430 li
431 431 {
432 #courriel 432 margin: 0px 10px;
433 { 433 }
434 margin: 0px 20px; 434
435 } 435 header
436 436 {
437 #courriel * 437 padding-top: 60px;
438 { 438 }
439 max-width: 180px; 439
440 } 440 #bienvenue
441 441 {
442 .zoneVideAdmin, #modeAdmin 442 background-image: url("accueil/bienvenue_mini.png");
443 { 443 width: 320px;
444 height: 65px; 444 height: 316px;
445 } 445 }
446 446
447 #modeAdmin 447 #contenu, footer
448 { 448 {
449 max-width: 380px; 449 width: 320px;
450 } 450 margin: auto;
451 451 }
452 #modeAdmin div 452
453 { 453 #courriel
454 /*margin: 5px;*/ 454 {
455 } 455 margin: 0px 20px;
456} 456 }
457 457
458/* spécialement pour les petits smartphones*/ 458 #courriel *
459@media screen and (max-width: 379px) 459 {
460{ 460 max-width: 180px;
461 .zoneVideAdmin, #modeAdmin 461 }
462 { 462
463 height: 80px; 463 .zoneVideAdmin, #modeAdmin
464 } 464 {
465 465 height: 65px;
466 #modeAdmin 466 }
467 { 467
468 font-size: 95%; 468 #modeAdmin
469 padding: 0px; 469 {
470 } 470 max-width: 380px;
471 #modeAdmin>p 471 }
472 { 472
473 font-size: 90%; 473 #modeAdmin div
474 margin: 3px; 474 {
475 } 475 /*margin: 5px;*/
476 476 }
477 #modeAdmin div 477}
478 { 478
479 max-width: 320px; 479/* spécialement pour les petits smartphones*/
480 } 480@media screen and (max-width: 379px)
481 #modeAdmin>div p 481{
482 { 482 .zoneVideAdmin, #modeAdmin
483 margin: 0px 5px; 483 {
484 } 484 height: 80px;
485} 485 }
486
487 #modeAdmin
488 {
489 font-size: 95%;
490 padding: 0px;
491 }
492 #modeAdmin>p
493 {
494 font-size: 90%;
495 margin: 3px;
496 }
497
498 #modeAdmin div
499 {
500 max-width: 320px;
501 }
502 #modeAdmin>div p
503 {
504 margin: 0px 5px;
505 }
506}
diff --git a/public/discographie.css b/public/discographie.css
index f2e9a5b..b4c3d51 100644
--- a/public/discographie.css
+++ b/public/discographie.css
@@ -14,6 +14,8 @@ aside
14 font-family: 'Monospace'; 14 font-family: 'Monospace';
15 /*margin-right: 10px;*/ 15 /*margin-right: 10px;*/
16 /*position: absolute;*/ 16 /*position: absolute;*/
17 position: relative;
18 bottom: 30px;
17} 19}
18 20
19aside div 21aside div
@@ -29,7 +31,9 @@ aside div
29 font-weight: bold; 31 font-weight: bold;
30 /*text-decoration: underline;*/ 32 /*text-decoration: underline;*/
31 /*border: 1px red solid;*/ 33 /*border: 1px red solid;*/
32 margin: 13px 0 0 0; 34 margin: 0px;
35 /*position: relative;
36 bottom: 45px;*/
33} 37}
34 38
35#chronologie 39#chronologie
@@ -41,6 +45,7 @@ aside div
41 z-index: 1; /* placer le menu déroulant au dessus */ 45 z-index: 1; /* placer le menu déroulant au dessus */
42 /*background-color: #9fa8d0;*/ 46 /*background-color: #9fa8d0;*/
43 background-color: #a4afd4; 47 background-color: #a4afd4;
48 border: 2px #3d4c9d solid;
44} 49}
45 50
46#chronologie p 51#chronologie p
@@ -90,7 +95,7 @@ section
90 95
91h3 96h3
92{ 97{
93 margin-top: 45px; 98 /*margin-top: 45px;*/
94} 99}
95 100
96form p 101form p
@@ -115,12 +120,24 @@ input
115 border: 4px black groove; 120 border: 4px black groove;
116} 121}
117 122
123#articles
124{
125 display: flex;
126 justify-content: space-around;
127 flex-wrap: wrap;
128 align-items: flex-end;
129}
130
118article 131article
119{ 132{
120 margin: 5px 0px; 133 margin: 5px 0px;
121 width: 45%; 134 width: 32%;
122 /*min-width: 300px;*/ 135 /*min-width: 300px;*/
123} 136}
137.articleAvecEditeur
138{
139 width: 100%;
140}
124 141
125.vignette 142.vignette
126{ 143{
@@ -148,7 +165,11 @@ a
148 /*border: 2px white solid;*/ 165 /*border: 2px white solid;*/
149} 166}
150 167
151article a:hover 168.articleSansEditeur a
169{
170 border: 2px white solid;
171}
172.articleSansEditeur a:hover
152{ 173{
153 border: 2px blue solid; 174 border: 2px blue solid;
154} 175}
@@ -158,6 +179,24 @@ a:hover figure figcaption
158 text-decoration: underline; 179 text-decoration: underline;
159} 180}
160 181
182.articleSansEditeur p
183{
184 /*border: 1px black solid;*/
185 text-align: center;
186 margin-top: 0px;
187}
188
189.articleSansEditeur img
190{
191 vertical-align: middle;
192}
193
194/* image dans le formulaire */
195.imageFormulaire
196{
197 float: right;
198 max-width: 25%;
199}
161 200
162/* page dédiée à un album */ 201/* page dédiée à un album */
163#albumHTML 202#albumHTML
@@ -181,8 +220,8 @@ a:hover figure figcaption
181 220
182 #contenu 221 #contenu
183 { 222 {
184 position: relative; 223 /*position: relative;*/
185 bottom: 35px; 224 /*bottom: 35px;*/
186 } 225 }
187 226
188 #albumHTML 227 #albumHTML
@@ -204,8 +243,8 @@ a:hover figure figcaption
204 243
205 #contenu 244 #contenu
206 { 245 {
207 position: relative; 246 /*position: relative;
208 bottom: 24px; 247 bottom: 24px;*/
209 } 248 }
210 249
211 #albumHTML 250 #albumHTML
@@ -213,6 +252,10 @@ a:hover figure figcaption
213 /* annuler le positionnement du contenu */ 252 /* annuler le positionnement du contenu */
214 margin-top: 42px; 253 margin-top: 42px;
215 } 254 }
255 article
256 {
257 width: 40%;
258 }
216} 259}
217 260
218@media screen and (max-width: 479px) 261@media screen and (max-width: 479px)
@@ -235,22 +278,28 @@ a:hover figure figcaption
235 width: 320px; 278 width: 320px;
236 } 279 }
237 280
238 #chronologie 281 #bouton_chronologie
239 { 282 {
240 display: flex; 283 width: 130px;
284 font-size: initial; /* 150% est plus petit que "normal" */
285 padding-top: 5px;
286 }
241 287
288 #chronologie
289 {
290 /*display: flex;*/
242 } 291 }
243 292
244 #chronologie p 293 #chronologie p
245 { 294 {
246 max-width: 80px; 295 /*max-width: 80px;*/
247 margin: 2px; 296 margin: 5px;
248 } 297 }
249 298
250 #contenu 299 #contenu
251 { 300 {
252 /*position: relative;*/ 301 /*position: relative;*/
253 bottom: 15px; 302 /* bottom: 15px;*/
254 } 303 }
255 304
256 #albumHTML 305 #albumHTML
@@ -258,4 +307,8 @@ a:hover figure figcaption
258 /* annuler le positionnement du contenu */ 307 /* annuler le positionnement du contenu */
259 margin-top: 32px; 308 margin-top: 32px;
260 } 309 }
310 article
311 {
312 width: 48%;
313 }
261} 314}
diff --git a/public/donnees_hors_editeur.css b/public/donnees_hors_editeur.css
index fdb12b5..754453b 100644
--- a/public/donnees_hors_editeur.css
+++ b/public/donnees_hors_editeur.css
@@ -1,38 +1,38 @@
1img{vertical-align: bottom;} 1img{vertical-align: bottom;}
2@media screen and (max-width: 1000px) 2@media screen and (max-width: 1000px)
3{img{max-width: 900px;}} 3{img{max-width: 900px;}}
4 4
5.text-tiny{font-size: x-small;} 5.text-tiny{font-size: x-small;}
6.text-small{font-size: small;} 6.text-small{font-size: small;}
7.text-big{font-size: large;} 7.text-big{font-size: large;}
8.text-huge{font-size: x-large;} 8.text-huge{font-size: x-large;}
9 9
10blockquote{border-left: 5px #cccccc solid; margin: 14px 0px; padding: 2px 25px; font-style: italic;} 10blockquote{border-left: 5px #cccccc solid; margin: 14px 0px; padding: 2px 25px; font-style: italic;}
11 11
12.marker-yellow{background-color: #fdfd77;} 12.marker-yellow{background-color: #fdfd77;}
13.marker-green{background-color: #62f962;} 13.marker-green{background-color: #62f962;}
14.marker-pink{background-color: #fc7899;} 14.marker-pink{background-color: #fc7899;}
15.marker-blue{background-color: #72ccfd;} 15.marker-blue{background-color: #72ccfd;}
16.pen-red{background-color: white; color: red;} 16.pen-red{background-color: white; color: red;}
17.pen-green{background-color: white; color: green;} 17.pen-green{background-color: white; color: green;}
18 18
19ul{padding-left: 10px;} 19ul{padding-left: 10px;}
20.todo-list>li{list-style-type : none;} 20.todo-list>li{list-style-type : none;}
21input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none; 21input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;
22 height: 16px; width: 16px; border: 1px solid black; border-radius: 2px; position: relative; top: 5px; margin-right: 10px;} 22 height: 16px; width: 16px; border: 1px solid black; border-radius: 2px; position: relative; top: 5px; margin-right: 10px;}
23input[type="checkbox"]:checked{border: none; background: #26ab33;} 23input[type="checkbox"]:checked{border: none; background: #26ab33;}
24 24
25.table>table{border-collapse: collapse;} 25.table>table{border-collapse: collapse;}
26.table td{border: 1px grey solid; padding: 7px; min-width: 30px;} 26.table td{border: 1px grey solid; padding: 7px; min-width: 30px;}
27td p{margin: 0px;} 27td p{margin: 0px;}
28 28
29.image{margin: 0px; text-align: center; display: inline-block;} 29.image{margin: 0px; text-align: center; display: inline-block;}
30.image img{max-width: 630px;} 30.image img{max-width: 630px;}
31.image-style-side{float: right;} 31.image-style-side{float: right;}
32.image-style-side img{max-width: 315px;} 32.image-style-side img{max-width: 315px;}
33.image>figcaption{padding: 7px; text-align: center; font-size: small; background-color: #f0f0f0;} 33.image>figcaption{padding: 7px; text-align: center; font-size: small; background-color: #f0f0f0;}
34 34
35.boutonArticle{clear: both; padding: 10px 0px;} 35.boutonArticle{clear: both; padding: 20px 0px;}
36article:after{content: ""; display: block; clear: both;} 36article:after{content: ""; display: block; clear: both;}
37 37
38iframe{min-width: 400px; min-height: 300px; max-width: 1200px; max-height: 900px;} \ No newline at end of file 38iframe{min-width: 400px; min-height: 300px; max-width: 1200px; max-height: 900px;} \ No newline at end of file
diff --git a/public/icone_supprimer.png b/public/icone_supprimer.png
new file mode 100644
index 0000000..bfcf263
--- /dev/null
+++ b/public/icone_supprimer.png
Binary files differ
diff --git a/public/main.js b/public/main.js
index c392590..9764394 100644
--- a/public/main.js
+++ b/public/main.js
@@ -1,74 +1,91 @@
1// public/main.js 1// public/main.js
2 2
3function versMenu() 3function versMenu()
4{ 4{
5 // ergonomique 5 // ergonomique
6 window.setTimeout("location=('index.php?page=menu');", 10000); 6 window.setTimeout("location=('index.php?page=menu');", 10000);
7 window.setTimeout(function(){location.href="index.php?page=menu"}, 3000); 7 window.setTimeout(function(){location.href="index.php?page=menu"}, 3000);
8} 8}
9 9
10function deconnexionAutomatique() 10function deconnexionAutomatique()
11{ 11{
12 // minuterie réinitialisée après une action de l'utilisateur 12 // minuterie réinitialisée après une action de l'utilisateur
13 // 600000 ms = 10 min 13 // 600000 ms = 10 min
14 //window.setTimeout("location=('index.php?action=deconnexion');", 600000); 14 //window.setTimeout("location=('index.php?action=deconnexion');", 600000);
15 15
16 // sauvegarde de la rédaction en cours avec le plugin "autosave" de l'éditeur 16 // sauvegarde de la rédaction en cours avec le plugin "autosave" de l'éditeur
17} 17}
18 18
19// fonction appelée avec onClick dans un lien, 19// fonction appelée avec onClick dans un lien,
20// si JS est activé, on ne suit le lien qu'avec un "oui" 20// si JS est activé, on ne suit le lien qu'avec un "oui"
21// si JS est désactivé, le lien fonctionne 21// si JS est désactivé, le lien fonctionne
22function confirmerSuppression() 22function confirmerSuppression()
23{ 23{
24 var oui = confirm('Confirmer la suppression de cet article.'); 24 var oui = confirm('Confirmer la suppression de cet article.');
25 if(!oui) 25 if(!oui)
26 { 26 {
27 event.preventDefault(); 27 event.preventDefault();
28 } 28 }
29} 29}
30 30
31// bouton "mailto", le visiteur ne quitte pas la page 31// code exécuté à la validation du formulaire
32function clientCourriel() 32function envoiDonnees()
33{ 33{
34 var adresse = "melaine.favennec@wanadoo.fr"; 34 // supprimer le positionnement absolu de l'iframe
35 var objet = "?subject=visite%20du%20site"; 35 /*let balisesIframe = document.getElementsByTagName("iframe");
36 var link = "mailto:" + adresse + objet; 36 for(var i = 0; i < balisesIframe.length; i++)
37 document.location.href = link; 37 {
38} 38 alert(balisesIframe[i].getAttribute("style")); // affiche le CSS
39 39 balisesIframe[i].removeAttribute("style");
40// bouton pour "copier" dans le presse-papier 40 alert(balisesIframe[i].getAttribute("style")); // affiche null
41function copierAdresse() 41 }*/
42{ 42}
43 var adresse = "melaine.favennec@wanadoo.fr"; 43
44 44// bouton "mailto", le visiteur ne quitte pas la page
45 // une balise <input> avec des attributs 45function clientCourriel()
46 var element = document.createElement("input"); 46{
47 element.setAttribute("id", "copyMe"); 47 var adresse = "melaine.favennec@wanadoo.fr";
48 element.setAttribute("value", adresse); 48 var objet = "?subject=visite%20du%20site";
49 49 var link = "mailto:" + adresse + objet;
50 // placement dans la page (= le "document") 50 document.location.href = link;
51 document.body.appendChild(element); 51}
52 var cible = document.getElementById('copyMe'); 52
53 53// bouton pour "copier" dans le presse-papier
54 // selection comme on le ferait à la souris 54function copierAdresse()
55 cible.select(); 55{
56 // copie (= Ctrl + C) 56 var adresse = "melaine.favennec@wanadoo.fr";
57 document.execCommand("copy"); 57
58 58 // une balise <input> avec des attributs
59 // nettoyage 59 var element = document.createElement("input");
60 element.parentNode.removeChild(element); 60 element.setAttribute("id", "copyMe");
61} 61 element.setAttribute("value", adresse);
62 62
63// cacher le lien #nouvelArticle quand le ckeditor est appelé 63 // placement dans la page (= le "document")
64// function cacherLienArticle() 64 document.body.appendChild(element);
65// { 65 var cible = document.getElementById('copyMe');
66// var cible = document.getElementById('nouvelArticle'); 66
67// cible.setAttribute("style", "display: none;"); 67 // selection comme on le ferait à la souris
68// } 68 cible.select();
69 69 // copie (= Ctrl + C)
70function nouveauMotdepasse(page) 70 document.execCommand("copy");
71{ 71
72 confirm('Le mot de passe a été modifié.'); 72 // nettoyage
73 window.setTimeout(location=('index.php?page=' + page + '&message=nouveau_mdp'), 0); 73 element.parentNode.removeChild(element);
74
75 // test optionnel
76 // essayer un document.execCommand("paste"); dans une variable
77 // mais depuis une deuxième fonction
78}
79
80// cacher le lien #nouvelArticle quand le ckeditor est appelé
81// function cacherLienArticle()
82// {
83// var cible = document.getElementById('nouvelArticle');
84// cible.setAttribute("style", "display: none;");
85// }
86
87function nouveauMotdepasse(page)
88{
89 confirm('Le mot de passe a été modifié.');
90 window.setTimeout(location=('index.php?page=' + page + '&message=nouveau_mdp'), 0);
74} \ No newline at end of file 91} \ No newline at end of file
diff --git a/public/melaine.css b/public/melaine.css
index f7faf99..dcb218c 100644
--- a/public/melaine.css
+++ b/public/melaine.css
@@ -1,107 +1,107 @@
1/* public/melaine.css */ 1/* public/melaine.css */
2 2
3.police_titre 3.police_titre
4{ 4{
5 color: #e9d4be; 5 color: #e9d4be;
6} 6}
7 7
8td 8td
9{ 9{
10 vertical-align: top; 10 vertical-align: top;
11} 11}
12 12
13pre 13pre
14{ 14{
15 font-family: 'Arial', 'sans'; 15 font-family: 'Arial', 'sans';
16 white-space: pre-wrap; 16 white-space: pre-wrap;
17} 17}
18 18
19figure 19figure
20{ 20{
21 /*margin: 5px;*/ 21 /*margin: 5px;*/
22} 22}
23.boutonArticle 23.boutonArticle
24{ 24{
25 border-bottom: 1px black solid; 25 border-bottom: 3px black double;
26} 26}
27.boutonArticle a 27.boutonArticle a
28{ 28{
29 padding: 2px; 29 padding: 2px;
30 border: 4px black groove; 30 border: 4px black groove;
31} 31}
32 32
33@media screen and (min-width: 700px) 33@media screen and (min-width: 700px)
34{ 34{
35 #titre 35 #titre
36 { 36 {
37 width: 630px; 37 width: 630px;
38 height: 171px; 38 height: 171px;
39 background-image: url("mouette.png"); 39 background-image: url("mouette.png");
40 } 40 }
41 41
42 #photo 42 #photo
43 { 43 {
44 width: 630px; 44 width: 630px;
45 height: 230px; 45 height: 230px;
46 background-image: url("melaine/photo.png"); 46 background-image: url("melaine/photo.png");
47 position: relative; 47 position: relative;
48 bottom: 30px; 48 bottom: 30px;
49 } 49 }
50 50
51 img 51 img
52 { 52 {
53 max-width: 630px; 53 max-width: 630px;
54 } 54 }
55} 55}
56 56
57@media screen and (max-width: 699px) 57@media screen and (max-width: 699px)
58{ 58{
59 #titre 59 #titre
60 { 60 {
61 width: 480px; 61 width: 480px;
62 height: 131px; 62 height: 131px;
63 background-image: url("mouette_petit.png"); 63 background-image: url("mouette_petit.png");
64 margin: auto; 64 margin: auto;
65 } 65 }
66 66
67 #photo 67 #photo
68 { 68 {
69 width: 480px; 69 width: 480px;
70 height: 191px; 70 height: 191px;
71 background-image: url("melaine/photo_petit.png"); 71 background-image: url("melaine/photo_petit.png");
72 margin: auto; 72 margin: auto;
73 position: relative; 73 position: relative;
74 bottom: 24px; 74 bottom: 24px;
75 } 75 }
76 76
77 img 77 img
78 { 78 {
79 max-width: 480px; 79 max-width: 480px;
80 } 80 }
81} 81}
82 82
83@media screen and (max-width: 479px) 83@media screen and (max-width: 479px)
84{ 84{
85 #titre 85 #titre
86 { 86 {
87 width: 320px; 87 width: 320px;
88 height: 88px; 88 height: 88px;
89 background-image: url("mouette_mini.png"); 89 background-image: url("mouette_mini.png");
90 margin: auto; 90 margin: auto;
91 } 91 }
92 92
93 #photo 93 #photo
94 { 94 {
95 width: 320px; 95 width: 320px;
96 height: 127px; 96 height: 127px;
97 background-image: url("melaine/photo_mini.png"); 97 background-image: url("melaine/photo_mini.png");
98 margin: auto; 98 margin: auto;
99 position: relative; 99 position: relative;
100 bottom: 17px; 100 bottom: 17px;
101 } 101 }
102 102
103 img 103 img
104 { 104 {
105 max-width: 320px; 105 max-width: 320px;
106 } 106 }
107} 107}
diff --git a/public/menu.css b/public/menu.css
index 5ae1b5c..0e17e34 100644
--- a/public/menu.css
+++ b/public/menu.css
@@ -1,339 +1,339 @@
1/* public/menu.css */ 1/* public/menu.css */
2 2
3.police_titre 3.police_titre
4{ 4{
5 color: #e8c5c0; 5 color: #e8c5c0;
6} 6}
7 7
8#contenu 8#contenu
9{ 9{
10 display: flex; 10 display: flex;
11 justify-content: space-between; 11 justify-content: space-between;
12} 12}
13 13
14#colonne1 14#colonne1
15{ 15{
16 display: flex; 16 display: flex;
17 flex-wrap: wrap; 17 flex-wrap: wrap;
18 flex-direction: column-reverse; 18 flex-direction: column-reverse;
19} 19}
20 20
21#colonne2 21#colonne2
22{ 22{
23 display: flex; 23 display: flex;
24 flex-wrap: wrap; 24 flex-wrap: wrap;
25 align-items: flex-end; 25 align-items: flex-end;
26 flex-direction: column; 26 flex-direction: column;
27} 27}
28 28
29#pommes 29#pommes
30{ 30{
31 position: relative; 31 position: relative;
32 left: 3px; 32 left: 3px;
33} 33}
34 34
35#mon_blog 35#mon_blog
36{ 36{
37 margin: 0px 35px; 37 margin: 0px 35px;
38} 38}
39 39
40 40
41@media screen and (min-width: 700px) 41@media screen and (min-width: 700px)
42{ 42{
43 #titre 43 #titre
44 { 44 {
45 width: 630px; 45 width: 630px;
46 height: 171px; 46 height: 171px;
47 background-image: url("mouette.png"); 47 background-image: url("mouette.png");
48 } 48 }
49 49
50 #contenu 50 #contenu
51 { 51 {
52 position: relative; 52 position: relative;
53 bottom: 15px; 53 bottom: 15px;
54 } 54 }
55 55
56 #colonne1, #colonne2 56 #colonne1, #colonne2
57 { 57 {
58 height: 588px; 58 height: 588px;
59 } 59 }
60 60
61 /* pour IE, 61 /* pour IE,
62 indique la bonne taille du bloc pour que la colonne 2 se place correctement */ 62 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
63 #colonne1 63 #colonne1
64 { 64 {
65 min-width: 310px; 65 min-width: 310px;
66 } 66 }
67 67
68 #pochette 68 #pochette
69 { 69 {
70 background-image: url("menu/pochette.png"); 70 background-image: url("menu/pochette.png");
71 width: 308px; 71 width: 308px;
72 height: 271px; 72 height: 271px;
73 } 73 }
74 74
75 #fille_qui_tombe 75 #fille_qui_tombe
76 { 76 {
77 background-image: url("menu/fille_qui_tombe.jpg"); 77 background-image: url("menu/fille_qui_tombe.jpg");
78 width: 208px; 78 width: 208px;
79 height: 163px; 79 height: 163px;
80 margin: 5px 0px; 80 margin: 5px 0px;
81 } 81 }
82 82
83 #canoe 83 #canoe
84 { 84 {
85 background-image: url("menu/canoe.png"); 85 background-image: url("menu/canoe.png");
86 width: 207px; 86 width: 207px;
87 height: 144px; 87 height: 144px;
88 } 88 }
89 89
90 #cavalier 90 #cavalier
91 { 91 {
92 background-image: url("menu/cavalier.jpg"); 92 background-image: url("menu/cavalier.jpg");
93 width: 159px; 93 width: 159px;
94 height: 312px; 94 height: 312px;
95 position: relative; 95 position: relative;
96 right: 97px; 96 right: 97px;
97 } 97 }
98 98
99 #pommes 99 #pommes
100 { 100 {
101 background-image: url("menu/pommes.jpg"); 101 background-image: url("menu/pommes.jpg");
102 width: 59px; 102 width: 59px;
103 height: 97px; 103 height: 97px;
104 position: relative; 104 position: relative;
105 bottom: 3px; 105 bottom: 3px;
106 } 106 }
107 107
108 #sirene 108 #sirene
109 { 109 {
110 background-image: url("menu/sirene.jpg"); 110 background-image: url("menu/sirene.jpg");
111 width: 320px; 111 width: 320px;
112 height: 174px; 112 height: 174px;
113 } 113 }
114 114
115 #mouette_ocean 115 #mouette_ocean
116 { 116 {
117 background-image: url("menu/mouette_ocean.jpg"); 117 background-image: url("menu/mouette_ocean.jpg");
118 width: 257px; 118 width: 257px;
119 height: 171px; 119 height: 171px;
120 margin: 5px 0px; 120 margin: 5px 0px;
121 } 121 }
122 122
123 #blonde 123 #blonde
124 { 124 {
125 background-image: url("menu/blonde.jpg"); 125 background-image: url("menu/blonde.jpg");
126 width: 257px; 126 width: 257px;
127 height: 233px; 127 height: 233px;
128 } 128 }
129 129
130 #hey_ho 130 #hey_ho
131 { 131 {
132 width: 69px; 132 width: 69px;
133 height: 154px; 133 height: 154px;
134 position: relative; 134 position: relative;
135 right: 401px; 135 right: 401px;
136 top: 107px; 136 top: 107px;
137 } 137 }
138} 138}
139 139
140@media screen and (max-width: 699px) 140@media screen and (max-width: 699px)
141{ 141{
142 #titre 142 #titre
143 { 143 {
144 width: 480px; 144 width: 480px;
145 height: 131px; 145 height: 131px;
146 background-image: url("mouette_petit.png"); 146 background-image: url("mouette_petit.png");
147 margin: auto; 147 margin: auto;
148 } 148 }
149 149
150 #contenu 150 #contenu
151 { 151 {
152 position: relative; 152 position: relative;
153 bottom: 12px; 153 bottom: 12px;
154 } 154 }
155 155
156 #colonne1, #colonne2 156 #colonne1, #colonne2
157 { 157 {
158 height: 447px; 158 height: 447px;
159 } 159 }
160 160
161 /* pour IE, 161 /* pour IE,
162 indique la bonne taille du bloc pour que la colonne 2 se place correctement */ 162 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
163 #colonne1 163 #colonne1
164 { 164 {
165 min-width: 237px; 165 min-width: 237px;
166 } 166 }
167 167
168 #pochette 168 #pochette
169 { 169 {
170 background-image: url("menu/pochette_petit.png"); 170 background-image: url("menu/pochette_petit.png");
171 width: 234px; 171 width: 234px;
172 height: 206px; 172 height: 206px;
173 } 173 }
174 174
175 #fille_qui_tombe 175 #fille_qui_tombe
176 { 176 {
177 background-image: url("menu/fille_qui_tombe_petit.jpg"); 177 background-image: url("menu/fille_qui_tombe_petit.jpg");
178 width: 158px; 178 width: 158px;
179 height: 124px; 179 height: 124px;
180 margin: 4px 0px; 180 margin: 4px 0px;
181 } 181 }
182 182
183 #canoe 183 #canoe
184 { 184 {
185 background-image: url("menu/canoe_petit.png"); 185 background-image: url("menu/canoe_petit.png");
186 width: 157px; 186 width: 157px;
187 height: 109px; 187 height: 109px;
188 } 188 }
189 189
190 #cavalier 190 #cavalier
191 { 191 {
192 background-image: url("menu/cavalier_petit.jpg"); 192 background-image: url("menu/cavalier_petit.jpg");
193 width: 121px; 193 width: 121px;
194 height: 237px; 194 height: 237px;
195 position: relative; 195 position: relative;
196 right: 73px; 196 right: 73px;
197 } 197 }
198 198
199 #pommes 199 #pommes
200 { 200 {
201 background-image: url("menu/pommes_petit.jpg"); 201 background-image: url("menu/pommes_petit.jpg");
202 width: 45px; 202 width: 45px;
203 height: 74px; 203 height: 74px;
204 position: relative; 204 position: relative;
205 bottom: 2px; 205 bottom: 2px;
206 } 206 }
207 207
208 #sirene 208 #sirene
209 { 209 {
210 background-image: url("menu/sirene_petit.jpg"); 210 background-image: url("menu/sirene_petit.jpg");
211 width: 243px; 211 width: 243px;
212 height: 132px; 212 height: 132px;
213 } 213 }
214 214
215 #mouette_ocean 215 #mouette_ocean
216 { 216 {
217 background-image: url("menu/mouette_ocean_petit.jpg"); 217 background-image: url("menu/mouette_ocean_petit.jpg");
218 width: 195px; 218 width: 195px;
219 height: 130px; 219 height: 130px;
220 margin: 4px 0px; 220 margin: 4px 0px;
221 } 221 }
222 222
223 #blonde 223 #blonde
224 { 224 {
225 background-image: url("menu/blonde_petit.jpg"); 225 background-image: url("menu/blonde_petit.jpg");
226 width: 195px; 226 width: 195px;
227 height: 177px; 227 height: 177px;
228 } 228 }
229 229
230 #hey_ho 230 #hey_ho
231 { 231 {
232 width: 53px; 232 width: 53px;
233 height: 117px; 233 height: 117px;
234 position: relative; 234 position: relative;
235 right: 306px; 235 right: 306px;
236 top: 82px; 236 top: 82px;
237 } 237 }
238} 238}
239 239
240@media screen and (max-width: 479px) 240@media screen and (max-width: 479px)
241{ 241{
242 #titre 242 #titre
243 { 243 {
244 width: 320px; 244 width: 320px;
245 height: 88px; 245 height: 88px;
246 background-image: url("mouette_mini.png"); 246 background-image: url("mouette_mini.png");
247 margin: auto; 247 margin: auto;
248 } 248 }
249 249
250 #contenu 250 #contenu
251 { 251 {
252 position: relative; 252 position: relative;
253 bottom: 8px; 253 bottom: 8px;
254 } 254 }
255 255
256 #colonne1, #colonne2 256 #colonne1, #colonne2
257 { 257 {
258 height: 298px; 258 height: 298px;
259 } 259 }
260 260
261 /* pour IE, 261 /* pour IE,
262 indique la bonne taille du bloc pour que la colonne 2 se place correctement */ 262 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
263 #colonne1 263 #colonne1
264 { 264 {
265 min-width: 158px; 265 min-width: 158px;
266 } 266 }
267 267
268 #pochette 268 #pochette
269 { 269 {
270 background-image: url("menu/pochette_mini.png"); 270 background-image: url("menu/pochette_mini.png");
271 width: 156px; 271 width: 156px;
272 height: 137px; 272 height: 137px;
273 } 273 }
274 274
275 #fille_qui_tombe 275 #fille_qui_tombe
276 { 276 {
277 background-image: url("menu/fille_qui_tombe_mini.jpg"); 277 background-image: url("menu/fille_qui_tombe_mini.jpg");
278 width: 105px; 278 width: 105px;
279 height: 82px; 279 height: 82px;
280 margin: 3px 0px; 280 margin: 3px 0px;
281 } 281 }
282 282
283 #canoe 283 #canoe
284 { 284 {
285 background-image: url("menu/canoe_mini.png"); 285 background-image: url("menu/canoe_mini.png");
286 width: 105px; 286 width: 105px;
287 height: 73px; 287 height: 73px;
288 } 288 }
289 289
290 #cavalier 290 #cavalier
291 { 291 {
292 background-image: url("menu/cavalier_mini.jpg"); 292 background-image: url("menu/cavalier_mini.jpg");
293 width: 80px; 293 width: 80px;
294 height: 158px; 294 height: 158px;
295 position: relative; 295 position: relative;
296 right: 48px; 296 right: 48px;
297 } 297 }
298 298
299 #pommes 299 #pommes
300 { 300 {
301 background-image: url("menu/pommes_mini.jpg"); 301 background-image: url("menu/pommes_mini.jpg");
302 width: 30px; 302 width: 30px;
303 height: 49px; 303 height: 49px;
304 position: relative; 304 position: relative;
305 bottom: 2px; 305 bottom: 2px;
306 left: 2px; 306 left: 2px;
307 } 307 }
308 308
309 #sirene 309 #sirene
310 { 310 {
311 background-image: url("menu/sirene_mini.jpg"); 311 background-image: url("menu/sirene_mini.jpg");
312 width: 162px; 312 width: 162px;
313 height: 88px; 313 height: 88px;
314 } 314 }
315 315
316 #mouette_ocean 316 #mouette_ocean
317 { 317 {
318 background-image: url("menu/mouette_ocean_mini.jpg"); 318 background-image: url("menu/mouette_ocean_mini.jpg");
319 width: 130px; 319 width: 130px;
320 height: 86px; 320 height: 86px;
321 margin: 3px 0px; 321 margin: 3px 0px;
322 } 322 }
323 323
324 #blonde 324 #blonde
325 { 325 {
326 background-image: url("menu/blonde_mini.jpg"); 326 background-image: url("menu/blonde_mini.jpg");
327 width: 130px; 327 width: 130px;
328 height: 118px; 328 height: 118px;
329 } 329 }
330 330
331 #hey_ho 331 #hey_ho
332 { 332 {
333 width: 36px; 333 width: 36px;
334 height: 77px; 334 height: 77px;
335 position: relative; 335 position: relative;
336 right: 204px; 336 right: 204px;
337 top: 56px; 337 top: 56px;
338 } 338 }
339} 339}
diff --git a/public/menu/redimensionnement.sh b/public/menu/redimensionnement.sh
index fb78510..a108e56 100755
--- a/public/menu/redimensionnement.sh
+++ b/public/menu/redimensionnement.sh
@@ -1,25 +1,25 @@
1#!/bin/bash 1#!/bin/bash
2 2
3a=0 3a=0
4 4
5b=".jpg" 5b=".jpg"
6for a in `ls | grep $b` 6for a in `ls | grep $b`
7do 7do
8 # retire l'extention 8 # retire l'extention
9 a=`echo $a | cut -f1 -d'.'` 9 a=`echo $a | cut -f1 -d'.'`
10 10
11 # les guillemets permettent la concaténation 11 # les guillemets permettent la concaténation
12 magick $a$b -scale 76% "$a"_petit"$b" 12 magick $a$b -scale 76% "$a"_petit"$b"
13 magick $a$b -scale 50.5% "$a"_mini"$b" 13 magick $a$b -scale 50.5% "$a"_mini"$b"
14done 14done
15 15
16b=".png" 16b=".png"
17for a in `ls | grep $b` 17for a in `ls | grep $b`
18do 18do
19 # retire l'extention 19 # retire l'extention
20 a=`echo $a | cut -f1 -d'.'` 20 a=`echo $a | cut -f1 -d'.'`
21 21
22 # les guillemets permettent la concaténation 22 # les guillemets permettent la concaténation
23 magick $a$b -scale 76% "$a"_petit"$b" 23 magick $a$b -scale 76% "$a"_petit"$b"
24 magick $a$b -scale 50.5% "$a"_mini"$b" 24 magick $a$b -scale 50.5% "$a"_mini"$b"
25done 25done
diff --git a/public/normalize.css b/public/normalize.css
index 192eb9c..784422c 100644
--- a/public/normalize.css
+++ b/public/normalize.css
@@ -1,349 +1,349 @@
1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2 2
3/* Document 3/* Document
4 ========================================================================== */ 4 ========================================================================== */
5 5
6/** 6/**
7 * 1. Correct the line height in all browsers. 7 * 1. Correct the line height in all browsers.
8 * 2. Prevent adjustments of font size after orientation changes in iOS. 8 * 2. Prevent adjustments of font size after orientation changes in iOS.
9 */ 9 */
10 10
11html { 11html {
12 line-height: 1.15; /* 1 */ 12 line-height: 1.15; /* 1 */
13 -webkit-text-size-adjust: 100%; /* 2 */ 13 -webkit-text-size-adjust: 100%; /* 2 */
14} 14}
15 15
16/* Sections 16/* Sections
17 ========================================================================== */ 17 ========================================================================== */
18 18
19/** 19/**
20 * Remove the margin in all browsers. 20 * Remove the margin in all browsers.
21 */ 21 */
22 22
23body { 23body {
24 margin: 0; 24 margin: 0;
25} 25}
26 26
27/** 27/**
28 * Render the `main` element consistently in IE. 28 * Render the `main` element consistently in IE.
29 */ 29 */
30 30
31main { 31main {
32 display: block; 32 display: block;
33} 33}
34 34
35/** 35/**
36 * Correct the font size and margin on `h1` elements within `section` and 36 * Correct the font size and margin on `h1` elements within `section` and
37 * `article` contexts in Chrome, Firefox, and Safari. 37 * `article` contexts in Chrome, Firefox, and Safari.
38 */ 38 */
39 39
40h1 { 40h1 {
41 font-size: 2em; 41 font-size: 2em;
42 margin: 0.67em 0; 42 margin: 0.67em 0;
43} 43}
44 44
45/* Grouping content 45/* Grouping content
46 ========================================================================== */ 46 ========================================================================== */
47 47
48/** 48/**
49 * 1. Add the correct box sizing in Firefox. 49 * 1. Add the correct box sizing in Firefox.
50 * 2. Show the overflow in Edge and IE. 50 * 2. Show the overflow in Edge and IE.
51 */ 51 */
52 52
53hr { 53hr {
54 box-sizing: content-box; /* 1 */ 54 box-sizing: content-box; /* 1 */
55 height: 0; /* 1 */ 55 height: 0; /* 1 */
56 overflow: visible; /* 2 */ 56 overflow: visible; /* 2 */
57} 57}
58 58
59/** 59/**
60 * 1. Correct the inheritance and scaling of font size in all browsers. 60 * 1. Correct the inheritance and scaling of font size in all browsers.
61 * 2. Correct the odd `em` font sizing in all browsers. 61 * 2. Correct the odd `em` font sizing in all browsers.
62 */ 62 */
63 63
64pre { 64pre {
65 font-family: monospace, monospace; /* 1 */ 65 font-family: monospace, monospace; /* 1 */
66 font-size: 1em; /* 2 */ 66 font-size: 1em; /* 2 */
67} 67}
68 68
69/* Text-level semantics 69/* Text-level semantics
70 ========================================================================== */ 70 ========================================================================== */
71 71
72/** 72/**
73 * Remove the gray background on active links in IE 10. 73 * Remove the gray background on active links in IE 10.
74 */ 74 */
75 75
76a { 76a {
77 background-color: transparent; 77 background-color: transparent;
78} 78}
79 79
80/** 80/**
81 * 1. Remove the bottom border in Chrome 57- 81 * 1. Remove the bottom border in Chrome 57-
82 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. 82 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 */ 83 */
84 84
85abbr[title] { 85abbr[title] {
86 border-bottom: none; /* 1 */ 86 border-bottom: none; /* 1 */
87 text-decoration: underline; /* 2 */ 87 text-decoration: underline; /* 2 */
88 text-decoration: underline dotted; /* 2 */ 88 text-decoration: underline dotted; /* 2 */
89} 89}
90 90
91/** 91/**
92 * Add the correct font weight in Chrome, Edge, and Safari. 92 * Add the correct font weight in Chrome, Edge, and Safari.
93 */ 93 */
94 94
95b, 95b,
96strong { 96strong {
97 font-weight: bolder; 97 font-weight: bolder;
98} 98}
99 99
100/** 100/**
101 * 1. Correct the inheritance and scaling of font size in all browsers. 101 * 1. Correct the inheritance and scaling of font size in all browsers.
102 * 2. Correct the odd `em` font sizing in all browsers. 102 * 2. Correct the odd `em` font sizing in all browsers.
103 */ 103 */
104 104
105code, 105code,
106kbd, 106kbd,
107samp { 107samp {
108 font-family: monospace, monospace; /* 1 */ 108 font-family: monospace, monospace; /* 1 */
109 font-size: 1em; /* 2 */ 109 font-size: 1em; /* 2 */
110} 110}
111 111
112/** 112/**
113 * Add the correct font size in all browsers. 113 * Add the correct font size in all browsers.
114 */ 114 */
115 115
116small { 116small {
117 font-size: 80%; 117 font-size: 80%;
118} 118}
119 119
120/** 120/**
121 * Prevent `sub` and `sup` elements from affecting the line height in 121 * Prevent `sub` and `sup` elements from affecting the line height in
122 * all browsers. 122 * all browsers.
123 */ 123 */
124 124
125sub, 125sub,
126sup { 126sup {
127 font-size: 75%; 127 font-size: 75%;
128 line-height: 0; 128 line-height: 0;
129 position: relative; 129 position: relative;
130 vertical-align: baseline; 130 vertical-align: baseline;
131} 131}
132 132
133sub { 133sub {
134 bottom: -0.25em; 134 bottom: -0.25em;
135} 135}
136 136
137sup { 137sup {
138 top: -0.5em; 138 top: -0.5em;
139} 139}
140 140
141/* Embedded content 141/* Embedded content
142 ========================================================================== */ 142 ========================================================================== */
143 143
144/** 144/**
145 * Remove the border on images inside links in IE 10. 145 * Remove the border on images inside links in IE 10.
146 */ 146 */
147 147
148img { 148img {
149 border-style: none; 149 border-style: none;
150} 150}
151 151
152/* Forms 152/* Forms
153 ========================================================================== */ 153 ========================================================================== */
154 154
155/** 155/**
156 * 1. Change the font styles in all browsers. 156 * 1. Change the font styles in all browsers.
157 * 2. Remove the margin in Firefox and Safari. 157 * 2. Remove the margin in Firefox and Safari.
158 */ 158 */
159 159
160button, 160button,
161input, 161input,
162optgroup, 162optgroup,
163select, 163select,
164textarea { 164textarea {
165 font-family: inherit; /* 1 */ 165 font-family: inherit; /* 1 */
166 font-size: 100%; /* 1 */ 166 font-size: 100%; /* 1 */
167 line-height: 1.15; /* 1 */ 167 line-height: 1.15; /* 1 */
168 margin: 0; /* 2 */ 168 margin: 0; /* 2 */
169} 169}
170 170
171/** 171/**
172 * Show the overflow in IE. 172 * Show the overflow in IE.
173 * 1. Show the overflow in Edge. 173 * 1. Show the overflow in Edge.
174 */ 174 */
175 175
176button, 176button,
177input { /* 1 */ 177input { /* 1 */
178 overflow: visible; 178 overflow: visible;
179} 179}
180 180
181/** 181/**
182 * Remove the inheritance of text transform in Edge, Firefox, and IE. 182 * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 * 1. Remove the inheritance of text transform in Firefox. 183 * 1. Remove the inheritance of text transform in Firefox.
184 */ 184 */
185 185
186button, 186button,
187select { /* 1 */ 187select { /* 1 */
188 text-transform: none; 188 text-transform: none;
189} 189}
190 190
191/** 191/**
192 * Correct the inability to style clickable types in iOS and Safari. 192 * Correct the inability to style clickable types in iOS and Safari.
193 */ 193 */
194 194
195button, 195button,
196[type="button"], 196[type="button"],
197[type="reset"], 197[type="reset"],
198[type="submit"] { 198[type="submit"] {
199 -webkit-appearance: button; 199 -webkit-appearance: button;
200} 200}
201 201
202/** 202/**
203 * Remove the inner border and padding in Firefox. 203 * Remove the inner border and padding in Firefox.
204 */ 204 */
205 205
206button::-moz-focus-inner, 206button::-moz-focus-inner,
207[type="button"]::-moz-focus-inner, 207[type="button"]::-moz-focus-inner,
208[type="reset"]::-moz-focus-inner, 208[type="reset"]::-moz-focus-inner,
209[type="submit"]::-moz-focus-inner { 209[type="submit"]::-moz-focus-inner {
210 border-style: none; 210 border-style: none;
211 padding: 0; 211 padding: 0;
212} 212}
213 213
214/** 214/**
215 * Restore the focus styles unset by the previous rule. 215 * Restore the focus styles unset by the previous rule.
216 */ 216 */
217 217
218button:-moz-focusring, 218button:-moz-focusring,
219[type="button"]:-moz-focusring, 219[type="button"]:-moz-focusring,
220[type="reset"]:-moz-focusring, 220[type="reset"]:-moz-focusring,
221[type="submit"]:-moz-focusring { 221[type="submit"]:-moz-focusring {
222 outline: 1px dotted ButtonText; 222 outline: 1px dotted ButtonText;
223} 223}
224 224
225/** 225/**
226 * Correct the padding in Firefox. 226 * Correct the padding in Firefox.
227 */ 227 */
228 228
229fieldset { 229fieldset {
230 padding: 0.35em 0.75em 0.625em; 230 padding: 0.35em 0.75em 0.625em;
231} 231}
232 232
233/** 233/**
234 * 1. Correct the text wrapping in Edge and IE. 234 * 1. Correct the text wrapping in Edge and IE.
235 * 2. Correct the color inheritance from `fieldset` elements in IE. 235 * 2. Correct the color inheritance from `fieldset` elements in IE.
236 * 3. Remove the padding so developers are not caught out when they zero out 236 * 3. Remove the padding so developers are not caught out when they zero out
237 * `fieldset` elements in all browsers. 237 * `fieldset` elements in all browsers.
238 */ 238 */
239 239
240legend { 240legend {
241 box-sizing: border-box; /* 1 */ 241 box-sizing: border-box; /* 1 */
242 color: inherit; /* 2 */ 242 color: inherit; /* 2 */
243 display: table; /* 1 */ 243 display: table; /* 1 */
244 max-width: 100%; /* 1 */ 244 max-width: 100%; /* 1 */
245 padding: 0; /* 3 */ 245 padding: 0; /* 3 */
246 white-space: normal; /* 1 */ 246 white-space: normal; /* 1 */
247} 247}
248 248
249/** 249/**
250 * Add the correct vertical alignment in Chrome, Firefox, and Opera. 250 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 */ 251 */
252 252
253progress { 253progress {
254 vertical-align: baseline; 254 vertical-align: baseline;
255} 255}
256 256
257/** 257/**
258 * Remove the default vertical scrollbar in IE 10+. 258 * Remove the default vertical scrollbar in IE 10+.
259 */ 259 */
260 260
261textarea { 261textarea {
262 overflow: auto; 262 overflow: auto;
263} 263}
264 264
265/** 265/**
266 * 1. Add the correct box sizing in IE 10. 266 * 1. Add the correct box sizing in IE 10.
267 * 2. Remove the padding in IE 10. 267 * 2. Remove the padding in IE 10.
268 */ 268 */
269 269
270[type="checkbox"], 270[type="checkbox"],
271[type="radio"] { 271[type="radio"] {
272 box-sizing: border-box; /* 1 */ 272 box-sizing: border-box; /* 1 */
273 padding: 0; /* 2 */ 273 padding: 0; /* 2 */
274} 274}
275 275
276/** 276/**
277 * Correct the cursor style of increment and decrement buttons in Chrome. 277 * Correct the cursor style of increment and decrement buttons in Chrome.
278 */ 278 */
279 279
280[type="number"]::-webkit-inner-spin-button, 280[type="number"]::-webkit-inner-spin-button,
281[type="number"]::-webkit-outer-spin-button { 281[type="number"]::-webkit-outer-spin-button {
282 height: auto; 282 height: auto;
283} 283}
284 284
285/** 285/**
286 * 1. Correct the odd appearance in Chrome and Safari. 286 * 1. Correct the odd appearance in Chrome and Safari.
287 * 2. Correct the outline style in Safari. 287 * 2. Correct the outline style in Safari.
288 */ 288 */
289 289
290[type="search"] { 290[type="search"] {
291 -webkit-appearance: textfield; /* 1 */ 291 -webkit-appearance: textfield; /* 1 */
292 outline-offset: -2px; /* 2 */ 292 outline-offset: -2px; /* 2 */
293} 293}
294 294
295/** 295/**
296 * Remove the inner padding in Chrome and Safari on macOS. 296 * Remove the inner padding in Chrome and Safari on macOS.
297 */ 297 */
298 298
299[type="search"]::-webkit-search-decoration { 299[type="search"]::-webkit-search-decoration {
300 -webkit-appearance: none; 300 -webkit-appearance: none;
301} 301}
302 302
303/** 303/**
304 * 1. Correct the inability to style clickable types in iOS and Safari. 304 * 1. Correct the inability to style clickable types in iOS and Safari.
305 * 2. Change font properties to `inherit` in Safari. 305 * 2. Change font properties to `inherit` in Safari.
306 */ 306 */
307 307
308::-webkit-file-upload-button { 308::-webkit-file-upload-button {
309 -webkit-appearance: button; /* 1 */ 309 -webkit-appearance: button; /* 1 */
310 font: inherit; /* 2 */ 310 font: inherit; /* 2 */
311} 311}
312 312
313/* Interactive 313/* Interactive
314 ========================================================================== */ 314 ========================================================================== */
315 315
316/* 316/*
317 * Add the correct display in Edge, IE 10+, and Firefox. 317 * Add the correct display in Edge, IE 10+, and Firefox.
318 */ 318 */
319 319
320details { 320details {
321 display: block; 321 display: block;
322} 322}
323 323
324/* 324/*
325 * Add the correct display in all browsers. 325 * Add the correct display in all browsers.
326 */ 326 */
327 327
328summary { 328summary {
329 display: list-item; 329 display: list-item;
330} 330}
331 331
332/* Misc 332/* Misc
333 ========================================================================== */ 333 ========================================================================== */
334 334
335/** 335/**
336 * Add the correct display in IE 10+. 336 * Add the correct display in IE 10+.
337 */ 337 */
338 338
339template { 339template {
340 display: none; 340 display: none;
341} 341}
342 342
343/** 343/**
344 * Add the correct display in IE 10. 344 * Add the correct display in IE 10.
345 */ 345 */
346 346
347[hidden] { 347[hidden] {
348 display: none; 348 display: none;
349} 349}
generated by cgit v1.2.3 (git 2.25.1) at 2025-08-14 04:15:27 +0000