summaryrefslogtreecommitdiff
path: root/public/css
diff options
context:
space:
mode:
authorpolo <ordipolo@gmx.fr>2022-02-24 02:29:14 +0100
committerpolo <ordipolo@gmx.fr>2022-02-24 02:29:14 +0100
commitf19db76cc3b21785619ffd24bfb34692a3aaa66a (patch)
tree7a715c3bc89232a981f3150caa46e61cba7850f2 /public/css
parent2c5dc14a9cd8bd847c724c0d43ddce8be0069013 (diff)
downloadmelaine-f19db76cc3b21785619ffd24bfb34692a3aaa66a.tar.gz
melaine-f19db76cc3b21785619ffd24bfb34692a3aaa66a.tar.bz2
melaine-f19db76cc3b21785619ffd24bfb34692a3aaa66a.zip
recursiveIterator
Diffstat (limited to 'public/css')
-rw-r--r--public/css/accueil.css506
-rw-r--r--public/css/discographie.css314
-rw-r--r--public/css/donnees_hors_editeur.css56
-rw-r--r--public/css/melaine.css107
-rw-r--r--public/css/menu.css339
-rw-r--r--public/css/normalize.css349
6 files changed, 1671 insertions, 0 deletions
diff --git a/public/css/accueil.css b/public/css/accueil.css
new file mode 100644
index 0000000..622ce1f
--- /dev/null
+++ b/public/css/accueil.css
@@ -0,0 +1,506 @@
1/* public/accueil.css */
2
3@font-face /* pour .police_titre */
4{
5 font-family: "you_are_loved";
6 src: url('../fonts/you_are_loved.ttf') format('truetype'),
7 url('../fonts/you_are_loved.eot'),
8 url('../fonts/you_are_loved.eot?#iefix') format('embedded-opentype'),
9 url('../fonts/you_are_loved.woff2') format('woff2'),
10 url('../fonts/you_are_loved.woff') format('woff');
11}
12
13.no_underline
14{
15 text-decoration: none;
16}
17
18body
19{
20 margin: 0px;
21 background-color: #326892;
22}
23
24#bloc_page
25{
26 max-width: 700px;
27 margin: auto;
28 background-color: #FFFFFF;
29 font-family: Sans-serif;
30 font-size: 100%;
31}
32
33nav
34{
35 position: fixed;
36 z-index: 2;
37 background-color: white;
38}
39
40/* agir sur ul et li directement affecte le ckeditor */
41#ul_menu
42{
43 margin: 0px;
44 padding: 5px;
45 display: flex;
46 flex-wrap: wrap;
47 justify-content: center;
48}
49
50#ul_menu li
51{
52 list-style-type: none;
53 white-space: nowrap;
54}
55
56li a
57{
58 text-decoration: none;
59 color: #666;
60}
61
62a:hover:not(.police_titre) /* :not() = sauf */
63{
64 color: #000000;
65}
66
67#actuelle
68{
69 color: #463c3c;
70 font-weight: bold;
71}
72
73img
74{
75 vertical-align: bottom;
76}
77
78.boutonSubmitEditeur
79{
80 margin-top: 5px;
81}
82
83.boutonAnnuler:hover
84{
85 /*text-decoration: none;*/
86 border: none;
87}
88
89h3
90{
91 margin: 5px;
92}
93.conteneur_article
94{
95 margin: 3px;
96}
97
98.articleAvecEditeur
99{
100 background-color: #a8b3d9;
101 padding: 2px 0px;
102}
103
104form
105{
106 padding-bottom: 14px;
107 border-bottom: 1px black solid;
108}
109
110#courriel
111{
112 padding-top: 30px;
113 font-size: 85%;
114}
115
116#courriel *
117{
118 max-width: 220px;
119 color: black;
120 text-decoration: none;
121}
122
123#courriel a:hover
124{
125 /*border: 1px blue solid;*/
126 padding: 5px;
127}
128
129#courrielJS
130{
131 display: inline;
132 margin: 2px;
133}
134
135.zoneVideAdmin
136{
137 padding-top: 20px;
138}
139
140#modeAdmin
141{
142 background-color: orange;
143 position: fixed;
144 bottom: 0px;
145 width: 700px;
146 z-index: 2;
147 padding-top: 5px;
148 text-align: center;
149}
150
151#modeAdmin p
152{
153 text-align: center;
154 margin: 0px;
155 padding: 2px;
156}
157#modeAdmin>div p
158{
159 /*border: 1px black solid;*/
160 margin: 5px;
161 padding: 0px;
162}
163#modeAdmin>p a
164{
165 padding: 2px;
166}
167
168#modeAdmin div
169{
170 display: flex;
171 justify-content: space-around;
172
173 margin: 0px;
174 font-size: 85%;
175}
176
177#lienModeAdmin
178{
179 margin: 0px 20px;
180 padding-bottom: 20px;
181}
182
183#lienModeAdmin p
184{
185 text-align: right;
186}
187
188#lienModeAdmin p a
189{
190 color: #666;
191 font-weight: bold;
192 padding: 2px;
193}
194
195#lienModeAdmin p a:hover
196{
197 color: black;
198}
199
200.connexionTitre
201{
202 margin-top: 0px;
203 text-align: center;
204}
205.avertissement
206{
207 color: red;
208 font-size: 90%;
209 text-align: center;
210}
211
212.connexionFormulaire
213{
214 margin: 30px;
215}
216
217.connexionFooter
218{
219 text-align: right;
220 padding: 5px;
221}
222
223.connexionFooter a
224{
225 color: #666;
226}
227
228
229/* PC, y compris vieux écrans 800x600 */
230@media screen and (min-width: 700px)
231{
232 .police_titre
233 {
234
235 font-family: you_are_loved, Arial, sans;
236 font-size: 250%;
237 color: #ddc97a;
238 position: relative;
239 top: 30px;
240 left: 40px;
241 }
242
243 /* compensation des cibles de liens # superposées au "nav" hors flux */
244 :target
245 {
246 padding-top: 70px;
247 margin-top: -70px;
248 }
249
250 nav
251 {
252 border-bottom: 1px black solid;
253 margin: 0px 35px;
254 max-width: 630px;
255 }
256
257 li
258 {
259 margin: 6px 15px;
260 }
261
262 header
263 {
264 margin: 0px 35px;
265 padding-top: 92px;
266 }
267
268 #bienvenue
269 {
270 background-image: url("accueil/bienvenue.png");
271 width: 630px;
272 height: 596px;
273 }
274
275 #contenu, footer
276 {
277 width: 630px;
278 margin: auto;
279 }
280
281 #courriel
282 {
283 margin: 0px 35px;
284 }
285
286 .zoneVideAdmin, #modeAdmin
287 {
288 height: 70px;
289 }
290}
291
292/* "tablettes" et vieux écrans 640x480 */
293@media screen and (max-width: 699px)
294{
295 #bloc_page
296 {
297 max-width: 540px;
298 font-size: 90%;
299 }
300
301 .police_titre
302 {
303
304 font-family: you_are_loved, Arial, sans;
305 font-size: 200%;
306 color: #ddc97a;
307
308 position: relative;
309 top: 20px;
310 left: 30px;
311 }
312
313 #bienvenue .police_titre
314 {
315 font-size: 250%;
316 top: 0px;
317 left: 65px;
318 }
319
320 :target
321 {
322 padding-top: 59px;
323 margin-top: -59px;
324 }
325
326 nav
327 {
328 margin: 0px 30px;
329 max-width: 480px;
330 }
331
332 li
333 {
334 margin: 4px 10px;
335 }
336
337 header
338 {
339 padding-top: 61px;
340 }
341
342 #bienvenue
343 {
344 background-image: url("accueil/bienvenue_petit.png");
345 width: 480px;
346 height: 463px;
347 margin: auto;
348 }
349
350 #contenu, footer
351 {
352 width: 480px;
353 margin: auto;
354 }
355
356 #courriel
357 {
358 margin: 0px 30px;
359 }
360
361 .zoneVideAdmin, #modeAdmin
362 {
363 height: 75px;
364 }
365
366 #modeAdmin
367 {
368 max-width: 540px;
369 }
370}
371
372 /* on grignote les colonnes autour du texte */
373@media screen and (max-width: 539px)
374{
375 #modeAdmin div
376 {
377 max-width: 480px;
378 margin: 0px;
379 border: none;
380 }
381 #modeAdmin
382 {
383 font-size: 90%;
384 }
385 .zoneVideAdmin, #modeAdmin
386 {
387 height: 70px;
388 }
389}
390
391@media screen and (max-width: 479px)
392{
393 #bloc_page
394 {
395 max-width: 380px;
396 font-size: 85%;
397 }
398
399 .police_titre
400 {
401
402 font-family: you_are_loved, Arial, sans;
403 font-size: 150%;
404 color: #ddc97a;
405
406 position: relative;
407 top: 13px;
408 left: 18px;
409 }
410
411 #bienvenue .police_titre
412 {
413 font-size: 200%;
414 top: 0px;
415 left: 25px;
416 }
417
418 :target
419 {
420 padding-top: 56px;
421 margin-top: -56px;
422 }
423
424 nav
425 {
426 margin: 0px 30px;
427 max-width: 320px;
428 }
429
430 li
431 {
432 margin: 0px 10px;
433 }
434
435 header
436 {
437 padding-top: 60px;
438 }
439
440 #bienvenue
441 {
442 background-image: url("accueil/bienvenue_mini.png");
443 width: 320px;
444 height: 316px;
445 }
446
447 #contenu, footer
448 {
449 width: 320px;
450 margin: auto;
451 }
452
453 #courriel
454 {
455 margin: 0px 20px;
456 }
457
458 #courriel *
459 {
460 max-width: 180px;
461 }
462
463 .zoneVideAdmin, #modeAdmin
464 {
465 height: 65px;
466 }
467
468 #modeAdmin
469 {
470 max-width: 380px;
471 }
472
473 #modeAdmin div
474 {
475 /*margin: 5px;*/
476 }
477}
478
479/* spécialement pour les petits smartphones*/
480@media screen and (max-width: 379px)
481{
482 .zoneVideAdmin, #modeAdmin
483 {
484 height: 80px;
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/css/discographie.css b/public/css/discographie.css
new file mode 100644
index 0000000..8ed3700
--- /dev/null
+++ b/public/css/discographie.css
@@ -0,0 +1,314 @@
1/* public/discographie.css */
2
3.police_titre
4{
5 color: #c9a068;
6}
7
8aside
9{
10 display: flex;
11 flex-direction: column;
12 align-items: flex-end;
13 font-size: 80%;
14 font-family: 'Monospace';
15 /*margin-right: 10px;*/
16 /*position: absolute;*/
17 position: relative;
18 bottom: 30px;
19}
20
21aside div
22{
23 position: absolute;
24}
25
26#bouton_chronologie
27{
28 width: 200px;
29 text-align: center;
30 font-size: large;
31 font-weight: bold;
32 /*text-decoration: underline;*/
33 /*border: 1px red solid;*/
34 margin: 0px;
35 /*position: relative;
36 bottom: 45px;*/
37}
38
39#chronologie
40{
41 width: 200px;
42 font-weight: bold;
43 /*padding: 5px;*/
44 display: none;
45 z-index: 1; /* placer le menu déroulant au dessus */
46 /*background-color: #9fa8d0;*/
47 background-color: #a4afd4;
48 border: 2px #3d4c9d solid;
49}
50
51#chronologie p
52{
53 margin: 8px;
54}
55
56#chronologie p a:visited
57{
58 color: blue;
59}
60#chronologie p a:hover
61{
62 color: black;
63}
64
65.linkChrono
66{
67 text-decoration: none;
68}
69.linkChrono:hover
70{
71 text-decoration: underline;
72}
73.noLinkChrono
74{
75 text-decoration: none;
76 color: black;
77}
78
79/* PC uniquement, pour les smartphones prévoir un clic
80=> :checked et une checkbox
81=> ou la balise select qui crée un menu déroulant */
82aside:hover #chronologie
83{
84 display: block;
85}
86
87section
88{
89 /*border: 1px red solid;*/
90}
91.flexArticles
92{
93 /*display: flex;*/
94}
95
96h3
97{
98 /*margin-top: 45px;*/
99}
100
101form p
102{
103 margin: 0px;
104}
105
106input
107{
108 margin: 2px 0;
109}
110
111.boutonAlbum
112{
113 margin-top: 45px;
114 padding-bottom: 20px;
115 border-bottom: 1px black solid;
116}
117.boutonAlbum a
118{
119 padding: 2px;
120 border: 4px black groove;
121}
122
123#articles
124{
125 display: flex;
126 justify-content: space-around;
127 flex-wrap: wrap;
128 align-items: flex-end;
129}
130
131article
132{
133 margin: 5px 0px;
134 width: 32%;
135 /*min-width: 300px;*/
136}
137.articleAvecEditeur
138{
139 width: 100%;
140}
141
142.vignette
143{
144 width: 100%;
145}
146
147figure
148{
149 margin: 0px;
150 /*display: inline-block;*/
151}
152
153figcaption
154{
155 margin: 2px;
156 color: #666;
157 font-size: small;
158 font-weight: bold;
159 text-align: center;
160}
161
162a
163{
164 display: inline-block;
165 /*border: 2px white solid;*/
166}
167
168.articleSansEditeur a
169{
170 border: 2px white solid;
171}
172.articleSansEditeur a:hover
173{
174 border: 2px blue solid;
175}
176
177a:hover figure figcaption
178{
179 text-decoration: underline;
180}
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}
200
201/* page dédiée à un album */
202#albumHTML
203{
204 width: 100%;
205}
206.linkAlbumHTML
207{
208 color: blue;
209}
210
211
212@media screen and (min-width: 700px)
213{
214 #titre
215 {
216 width: 630px;
217 height: 171px;
218 background-image: url("../mouette.png");
219 }
220
221 #contenu
222 {
223 /*position: relative;*/
224 /*bottom: 35px;*/
225 }
226
227 #albumHTML
228 {
229 /* annuler le positionnement du contenu */
230 margin-top: 55px;
231 }
232}
233
234@media screen and (max-width: 699px)
235{
236 #titre
237 {
238 width: 480px;
239 height: 131px;
240 background-image: url("../mouette_petit.png");
241 margin: auto;
242 }
243
244 #contenu
245 {
246 /*position: relative;
247 bottom: 24px;*/
248 }
249
250 #albumHTML
251 {
252 /* annuler le positionnement du contenu */
253 margin-top: 42px;
254 }
255 article
256 {
257 width: 40%;
258 }
259}
260
261@media screen and (max-width: 479px)
262{
263 #titre
264 {
265 width: 320px;
266 height: 88px;
267 background-image: url("../mouette_mini.png");
268 margin: auto;
269 }
270
271 #multicolonnes
272 {
273 flex-direction: column;
274 }
275
276 aside
277 {
278 width: 320px;
279 }
280
281 #bouton_chronologie
282 {
283 width: 130px;
284 font-size: initial; /* 150% est plus petit que "normal" */
285 padding-top: 5px;
286 }
287
288 #chronologie
289 {
290 /*display: flex;*/
291 }
292
293 #chronologie p
294 {
295 /*max-width: 80px;*/
296 margin: 5px;
297 }
298
299 #contenu
300 {
301 /*position: relative;*/
302 /* bottom: 15px;*/
303 }
304
305 #albumHTML
306 {
307 /* annuler le positionnement du contenu */
308 margin-top: 32px;
309 }
310 article
311 {
312 width: 48%;
313 }
314}
diff --git a/public/css/donnees_hors_editeur.css b/public/css/donnees_hors_editeur.css
new file mode 100644
index 0000000..7b377ea
--- /dev/null
+++ b/public/css/donnees_hors_editeur.css
@@ -0,0 +1,56 @@
1/*img{vertical-align: bottom;}*/
2
3.text-tiny{font-size: x-small;}
4.text-small{font-size: small;}
5.text-big{font-size: large;}
6.text-huge{font-size: x-large;}
7
8blockquote{border-left: 5px #cccccc solid; margin: 14px 0px; padding: 2px 25px; font-style: italic;}
9
10.marker-yellow{background-color: #fdfd77;}
11.marker-green{background-color: #62f962;}
12.marker-pink{background-color: #fc7899;}
13.marker-blue{background-color: #72ccfd;}
14.pen-red{background-color: white; color: red;}
15.pen-green{background-color: white; color: green;}
16
17ul{padding-left: 10px;}
18.todo-list>li{list-style-type : none;}
19input[type=checkbox]{-webkit-appearance: none;-moz-appearance: none;-ms-appearance: none;
20 height: 16px; width: 16px; border: 1px solid black; border-radius: 2px; position: relative; top: 5px; margin-right: 10px;}
21input[type="checkbox"]:checked{border: none; background: #26ab33;}
22
23.table>table{border-collapse: collapse;}
24.table td{border: 1px grey solid; padding: 7px; min-width: 30px;}
25td p{margin: 0px;}
26
27.image{margin: 0px;text-align: center;margin: auto;height: 100%;}
28.image img{width: 100%;}
29.image-style-side{float: right;}
30.image-style-side:not(.image_resized){max-width: 50%;}
31.image>figcaption{padding: 7px; text-align: center; font-size: small; background-color: #f0f0f0;}
32
33.boutonArticle{clear: both; padding: 20px 0px;}
34article:after{content: ""; display: block; clear: both;}
35
36iframe{min-width: 400px; min-height: 300px; max-width: 1200px; max-height: 900px;}
37
38/*@media screen and (max-width: 1000px)
39{
40 img{max-width: 900px;}
41}*/
42
43@media screen and (min-width: 700px)
44{
45 .image{/*max-width: 630px;*/width: auto;}
46}
47
48@media screen and (max-width: 699px)
49{
50 .image{max-width: 480px;}
51}
52
53@media screen and (max-width: 479px)
54{
55 .image{max-width: 320px;}
56} \ No newline at end of file
diff --git a/public/css/melaine.css b/public/css/melaine.css
new file mode 100644
index 0000000..429ccec
--- /dev/null
+++ b/public/css/melaine.css
@@ -0,0 +1,107 @@
1/* public/melaine.css */
2
3.police_titre
4{
5 color: #e9d4be;
6}
7
8td
9{
10 vertical-align: top;
11}
12
13pre
14{
15 font-family: 'Arial', 'sans';
16 white-space: pre-wrap;
17}
18
19figure
20{
21 /*margin: 5px;*/
22}
23.boutonArticle
24{
25 border-bottom: 3px black double;
26}
27.boutonArticle a
28{
29 padding: 2px;
30 border: 4px black groove;
31}
32
33@media screen and (min-width: 700px)
34{
35 #titre
36 {
37 width: 630px;
38 height: 171px;
39 background-image: url("../mouette.png");
40 }
41
42 #photo
43 {
44 width: 630px;
45 height: 230px;
46 background-image: url("../melaine/photo.png");
47 position: relative;
48 bottom: 30px;
49 }
50
51 /*img
52 {
53 max-width: 630px;
54 }*/
55}
56
57@media screen and (max-width: 699px)
58{
59 #titre
60 {
61 width: 480px;
62 height: 131px;
63 background-image: url("../mouette_petit.png");
64 margin: auto;
65 }
66
67 #photo
68 {
69 width: 480px;
70 height: 191px;
71 background-image: url("../melaine/photo_petit.png");
72 margin: auto;
73 position: relative;
74 bottom: 24px;
75 }
76
77 /*img
78 {
79 max-width: 480px;
80 }*/
81}
82
83@media screen and (max-width: 479px)
84{
85 #titre
86 {
87 width: 320px;
88 height: 88px;
89 background-image: url("../mouette_mini.png");
90 margin: auto;
91 }
92
93 #photo
94 {
95 width: 320px;
96 height: 127px;
97 background-image: url("../melaine/photo_mini.png");
98 margin: auto;
99 position: relative;
100 bottom: 17px;
101 }
102
103 /*img
104 {
105 max-width: 320px;
106 }*/
107}
diff --git a/public/css/menu.css b/public/css/menu.css
new file mode 100644
index 0000000..0e17e34
--- /dev/null
+++ b/public/css/menu.css
@@ -0,0 +1,339 @@
1/* public/menu.css */
2
3.police_titre
4{
5 color: #e8c5c0;
6}
7
8#contenu
9{
10 display: flex;
11 justify-content: space-between;
12}
13
14#colonne1
15{
16 display: flex;
17 flex-wrap: wrap;
18 flex-direction: column-reverse;
19}
20
21#colonne2
22{
23 display: flex;
24 flex-wrap: wrap;
25 align-items: flex-end;
26 flex-direction: column;
27}
28
29#pommes
30{
31 position: relative;
32 left: 3px;
33}
34
35#mon_blog
36{
37 margin: 0px 35px;
38}
39
40
41@media screen and (min-width: 700px)
42{
43 #titre
44 {
45 width: 630px;
46 height: 171px;
47 background-image: url("mouette.png");
48 }
49
50 #contenu
51 {
52 position: relative;
53 bottom: 15px;
54 }
55
56 #colonne1, #colonne2
57 {
58 height: 588px;
59 }
60
61 /* pour IE,
62 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
63 #colonne1
64 {
65 min-width: 310px;
66 }
67
68 #pochette
69 {
70 background-image: url("menu/pochette.png");
71 width: 308px;
72 height: 271px;
73 }
74
75 #fille_qui_tombe
76 {
77 background-image: url("menu/fille_qui_tombe.jpg");
78 width: 208px;
79 height: 163px;
80 margin: 5px 0px;
81 }
82
83 #canoe
84 {
85 background-image: url("menu/canoe.png");
86 width: 207px;
87 height: 144px;
88 }
89
90 #cavalier
91 {
92 background-image: url("menu/cavalier.jpg");
93 width: 159px;
94 height: 312px;
95 position: relative;
96 right: 97px;
97 }
98
99 #pommes
100 {
101 background-image: url("menu/pommes.jpg");
102 width: 59px;
103 height: 97px;
104 position: relative;
105 bottom: 3px;
106 }
107
108 #sirene
109 {
110 background-image: url("menu/sirene.jpg");
111 width: 320px;
112 height: 174px;
113 }
114
115 #mouette_ocean
116 {
117 background-image: url("menu/mouette_ocean.jpg");
118 width: 257px;
119 height: 171px;
120 margin: 5px 0px;
121 }
122
123 #blonde
124 {
125 background-image: url("menu/blonde.jpg");
126 width: 257px;
127 height: 233px;
128 }
129
130 #hey_ho
131 {
132 width: 69px;
133 height: 154px;
134 position: relative;
135 right: 401px;
136 top: 107px;
137 }
138}
139
140@media screen and (max-width: 699px)
141{
142 #titre
143 {
144 width: 480px;
145 height: 131px;
146 background-image: url("mouette_petit.png");
147 margin: auto;
148 }
149
150 #contenu
151 {
152 position: relative;
153 bottom: 12px;
154 }
155
156 #colonne1, #colonne2
157 {
158 height: 447px;
159 }
160
161 /* pour IE,
162 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
163 #colonne1
164 {
165 min-width: 237px;
166 }
167
168 #pochette
169 {
170 background-image: url("menu/pochette_petit.png");
171 width: 234px;
172 height: 206px;
173 }
174
175 #fille_qui_tombe
176 {
177 background-image: url("menu/fille_qui_tombe_petit.jpg");
178 width: 158px;
179 height: 124px;
180 margin: 4px 0px;
181 }
182
183 #canoe
184 {
185 background-image: url("menu/canoe_petit.png");
186 width: 157px;
187 height: 109px;
188 }
189
190 #cavalier
191 {
192 background-image: url("menu/cavalier_petit.jpg");
193 width: 121px;
194 height: 237px;
195 position: relative;
196 right: 73px;
197 }
198
199 #pommes
200 {
201 background-image: url("menu/pommes_petit.jpg");
202 width: 45px;
203 height: 74px;
204 position: relative;
205 bottom: 2px;
206 }
207
208 #sirene
209 {
210 background-image: url("menu/sirene_petit.jpg");
211 width: 243px;
212 height: 132px;
213 }
214
215 #mouette_ocean
216 {
217 background-image: url("menu/mouette_ocean_petit.jpg");
218 width: 195px;
219 height: 130px;
220 margin: 4px 0px;
221 }
222
223 #blonde
224 {
225 background-image: url("menu/blonde_petit.jpg");
226 width: 195px;
227 height: 177px;
228 }
229
230 #hey_ho
231 {
232 width: 53px;
233 height: 117px;
234 position: relative;
235 right: 306px;
236 top: 82px;
237 }
238}
239
240@media screen and (max-width: 479px)
241{
242 #titre
243 {
244 width: 320px;
245 height: 88px;
246 background-image: url("mouette_mini.png");
247 margin: auto;
248 }
249
250 #contenu
251 {
252 position: relative;
253 bottom: 8px;
254 }
255
256 #colonne1, #colonne2
257 {
258 height: 298px;
259 }
260
261 /* pour IE,
262 indique la bonne taille du bloc pour que la colonne 2 se place correctement */
263 #colonne1
264 {
265 min-width: 158px;
266 }
267
268 #pochette
269 {
270 background-image: url("menu/pochette_mini.png");
271 width: 156px;
272 height: 137px;
273 }
274
275 #fille_qui_tombe
276 {
277 background-image: url("menu/fille_qui_tombe_mini.jpg");
278 width: 105px;
279 height: 82px;
280 margin: 3px 0px;
281 }
282
283 #canoe
284 {
285 background-image: url("menu/canoe_mini.png");
286 width: 105px;
287 height: 73px;
288 }
289
290 #cavalier
291 {
292 background-image: url("menu/cavalier_mini.jpg");
293 width: 80px;
294 height: 158px;
295 position: relative;
296 right: 48px;
297 }
298
299 #pommes
300 {
301 background-image: url("menu/pommes_mini.jpg");
302 width: 30px;
303 height: 49px;
304 position: relative;
305 bottom: 2px;
306 left: 2px;
307 }
308
309 #sirene
310 {
311 background-image: url("menu/sirene_mini.jpg");
312 width: 162px;
313 height: 88px;
314 }
315
316 #mouette_ocean
317 {
318 background-image: url("menu/mouette_ocean_mini.jpg");
319 width: 130px;
320 height: 86px;
321 margin: 3px 0px;
322 }
323
324 #blonde
325 {
326 background-image: url("menu/blonde_mini.jpg");
327 width: 130px;
328 height: 118px;
329 }
330
331 #hey_ho
332 {
333 width: 36px;
334 height: 77px;
335 position: relative;
336 right: 204px;
337 top: 56px;
338 }
339}
diff --git a/public/css/normalize.css b/public/css/normalize.css
new file mode 100644
index 0000000..784422c
--- /dev/null
+++ b/public/css/normalize.css
@@ -0,0 +1,349 @@
1/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
2
3/* Document
4 ========================================================================== */
5
6/**
7 * 1. Correct the line height in all browsers.
8 * 2. Prevent adjustments of font size after orientation changes in iOS.
9 */
10
11html {
12 line-height: 1.15; /* 1 */
13 -webkit-text-size-adjust: 100%; /* 2 */
14}
15
16/* Sections
17 ========================================================================== */
18
19/**
20 * Remove the margin in all browsers.
21 */
22
23body {
24 margin: 0;
25}
26
27/**
28 * Render the `main` element consistently in IE.
29 */
30
31main {
32 display: block;
33}
34
35/**
36 * Correct the font size and margin on `h1` elements within `section` and
37 * `article` contexts in Chrome, Firefox, and Safari.
38 */
39
40h1 {
41 font-size: 2em;
42 margin: 0.67em 0;
43}
44
45/* Grouping content
46 ========================================================================== */
47
48/**
49 * 1. Add the correct box sizing in Firefox.
50 * 2. Show the overflow in Edge and IE.
51 */
52
53hr {
54 box-sizing: content-box; /* 1 */
55 height: 0; /* 1 */
56 overflow: visible; /* 2 */
57}
58
59/**
60 * 1. Correct the inheritance and scaling of font size in all browsers.
61 * 2. Correct the odd `em` font sizing in all browsers.
62 */
63
64pre {
65 font-family: monospace, monospace; /* 1 */
66 font-size: 1em; /* 2 */
67}
68
69/* Text-level semantics
70 ========================================================================== */
71
72/**
73 * Remove the gray background on active links in IE 10.
74 */
75
76a {
77 background-color: transparent;
78}
79
80/**
81 * 1. Remove the bottom border in Chrome 57-
82 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
83 */
84
85abbr[title] {
86 border-bottom: none; /* 1 */
87 text-decoration: underline; /* 2 */
88 text-decoration: underline dotted; /* 2 */
89}
90
91/**
92 * Add the correct font weight in Chrome, Edge, and Safari.
93 */
94
95b,
96strong {
97 font-weight: bolder;
98}
99
100/**
101 * 1. Correct the inheritance and scaling of font size in all browsers.
102 * 2. Correct the odd `em` font sizing in all browsers.
103 */
104
105code,
106kbd,
107samp {
108 font-family: monospace, monospace; /* 1 */
109 font-size: 1em; /* 2 */
110}
111
112/**
113 * Add the correct font size in all browsers.
114 */
115
116small {
117 font-size: 80%;
118}
119
120/**
121 * Prevent `sub` and `sup` elements from affecting the line height in
122 * all browsers.
123 */
124
125sub,
126sup {
127 font-size: 75%;
128 line-height: 0;
129 position: relative;
130 vertical-align: baseline;
131}
132
133sub {
134 bottom: -0.25em;
135}
136
137sup {
138 top: -0.5em;
139}
140
141/* Embedded content
142 ========================================================================== */
143
144/**
145 * Remove the border on images inside links in IE 10.
146 */
147
148img {
149 border-style: none;
150}
151
152/* Forms
153 ========================================================================== */
154
155/**
156 * 1. Change the font styles in all browsers.
157 * 2. Remove the margin in Firefox and Safari.
158 */
159
160button,
161input,
162optgroup,
163select,
164textarea {
165 font-family: inherit; /* 1 */
166 font-size: 100%; /* 1 */
167 line-height: 1.15; /* 1 */
168 margin: 0; /* 2 */
169}
170
171/**
172 * Show the overflow in IE.
173 * 1. Show the overflow in Edge.
174 */
175
176button,
177input { /* 1 */
178 overflow: visible;
179}
180
181/**
182 * Remove the inheritance of text transform in Edge, Firefox, and IE.
183 * 1. Remove the inheritance of text transform in Firefox.
184 */
185
186button,
187select { /* 1 */
188 text-transform: none;
189}
190
191/**
192 * Correct the inability to style clickable types in iOS and Safari.
193 */
194
195button,
196[type="button"],
197[type="reset"],
198[type="submit"] {
199 -webkit-appearance: button;
200}
201
202/**
203 * Remove the inner border and padding in Firefox.
204 */
205
206button::-moz-focus-inner,
207[type="button"]::-moz-focus-inner,
208[type="reset"]::-moz-focus-inner,
209[type="submit"]::-moz-focus-inner {
210 border-style: none;
211 padding: 0;
212}
213
214/**
215 * Restore the focus styles unset by the previous rule.
216 */
217
218button:-moz-focusring,
219[type="button"]:-moz-focusring,
220[type="reset"]:-moz-focusring,
221[type="submit"]:-moz-focusring {
222 outline: 1px dotted ButtonText;
223}
224
225/**
226 * Correct the padding in Firefox.
227 */
228
229fieldset {
230 padding: 0.35em 0.75em 0.625em;
231}
232
233/**
234 * 1. Correct the text wrapping in Edge and 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
237 * `fieldset` elements in all browsers.
238 */
239
240legend {
241 box-sizing: border-box; /* 1 */
242 color: inherit; /* 2 */
243 display: table; /* 1 */
244 max-width: 100%; /* 1 */
245 padding: 0; /* 3 */
246 white-space: normal; /* 1 */
247}
248
249/**
250 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
251 */
252
253progress {
254 vertical-align: baseline;
255}
256
257/**
258 * Remove the default vertical scrollbar in IE 10+.
259 */
260
261textarea {
262 overflow: auto;
263}
264
265/**
266 * 1. Add the correct box sizing in IE 10.
267 * 2. Remove the padding in IE 10.
268 */
269
270[type="checkbox"],
271[type="radio"] {
272 box-sizing: border-box; /* 1 */
273 padding: 0; /* 2 */
274}
275
276/**
277 * Correct the cursor style of increment and decrement buttons in Chrome.
278 */
279
280[type="number"]::-webkit-inner-spin-button,
281[type="number"]::-webkit-outer-spin-button {
282 height: auto;
283}
284
285/**
286 * 1. Correct the odd appearance in Chrome and Safari.
287 * 2. Correct the outline style in Safari.
288 */
289
290[type="search"] {
291 -webkit-appearance: textfield; /* 1 */
292 outline-offset: -2px; /* 2 */
293}
294
295/**
296 * Remove the inner padding in Chrome and Safari on macOS.
297 */
298
299[type="search"]::-webkit-search-decoration {
300 -webkit-appearance: none;
301}
302
303/**
304 * 1. Correct the inability to style clickable types in iOS and Safari.
305 * 2. Change font properties to `inherit` in Safari.
306 */
307
308::-webkit-file-upload-button {
309 -webkit-appearance: button; /* 1 */
310 font: inherit; /* 2 */
311}
312
313/* Interactive
314 ========================================================================== */
315
316/*
317 * Add the correct display in Edge, IE 10+, and Firefox.
318 */
319
320details {
321 display: block;
322}
323
324/*
325 * Add the correct display in all browsers.
326 */
327
328summary {
329 display: list-item;
330}
331
332/* Misc
333 ========================================================================== */
334
335/**
336 * Add the correct display in IE 10+.
337 */
338
339template {
340 display: none;
341}
342
343/**
344 * Add the correct display in IE 10.
345 */
346
347[hidden] {
348 display: none;
349}
generated by cgit v1.2.3 (git 2.25.1) at 2025-12-15 14:11:17 +0000