diff options
Diffstat (limited to 'public/css/main.css')
-rw-r--r-- | public/css/main.css | 555 |
1 files changed, 555 insertions, 0 deletions
diff --git a/public/css/main.css b/public/css/main.css new file mode 100644 index 0000000..77ab7ff --- /dev/null +++ b/public/css/main.css | |||
@@ -0,0 +1,555 @@ | |||
1 | /* public/main.css */ | ||
2 | |||
3 | /*@font-face | ||
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 | @font-face /* pour .police_titre */ | ||
14 | { | ||
15 | font-family: "IMPACTED"; | ||
16 | src: url('../fonts/IMPACTED.TTF') format('truetype'); | ||
17 | } | ||
18 | |||
19 | .no_underline | ||
20 | { | ||
21 | text-decoration: none; | ||
22 | } | ||
23 | |||
24 | body | ||
25 | { | ||
26 | margin: 0px; | ||
27 | background-color: #326892; | ||
28 | } | ||
29 | |||
30 | #bloc_page | ||
31 | { | ||
32 | max-width: 700px; | ||
33 | margin: auto; | ||
34 | background-color: #FFFFFF; | ||
35 | font-family: Sans-serif; | ||
36 | font-size: 100%; | ||
37 | } | ||
38 | |||
39 | nav | ||
40 | { | ||
41 | position: fixed; | ||
42 | z-index: 2; | ||
43 | background-color: white; | ||
44 | } | ||
45 | |||
46 | /* agir sur ul et li directement affecte le ckeditor */ | ||
47 | #ul_menu | ||
48 | { | ||
49 | margin: 0px; | ||
50 | padding: 5px; | ||
51 | display: flex; | ||
52 | flex-wrap: wrap; | ||
53 | justify-content: center; | ||
54 | } | ||
55 | |||
56 | #ul_menu li | ||
57 | { | ||
58 | list-style-type: none; | ||
59 | white-space: nowrap; | ||
60 | } | ||
61 | |||
62 | li a | ||
63 | { | ||
64 | text-decoration: none; | ||
65 | color: #666; | ||
66 | } | ||
67 | |||
68 | .police_titre | ||
69 | { | ||
70 | font-family: IMPACTED, Arial, sans; | ||
71 | color: #ddc97a; | ||
72 | } | ||
73 | |||
74 | a:hover:not(.police_titre) /* :not() = sauf */ | ||
75 | { | ||
76 | color: #000000; | ||
77 | } | ||
78 | |||
79 | #actuelle | ||
80 | { | ||
81 | color: #463c3c; | ||
82 | font-weight: bold; | ||
83 | } | ||
84 | |||
85 | img | ||
86 | { | ||
87 | vertical-align: bottom; | ||
88 | } | ||
89 | |||
90 | .boutonArticle span | ||
91 | { | ||
92 | padding: 2px; | ||
93 | border: 4px black groove; | ||
94 | } | ||
95 | .boutonSubmitEditeur | ||
96 | { | ||
97 | margin-top: 5px; | ||
98 | } | ||
99 | |||
100 | .boutonAnnuler:hover | ||
101 | { | ||
102 | border: none; | ||
103 | } | ||
104 | |||
105 | h3 | ||
106 | { | ||
107 | margin: 5px; | ||
108 | } | ||
109 | .conteneur_article | ||
110 | { | ||
111 | margin: 3px; | ||
112 | } | ||
113 | |||
114 | article | ||
115 | { | ||
116 | font-size: 90%; | ||
117 | margin: 5px 0; | ||
118 | } | ||
119 | /* Eviter la superposition d’une entête fixe sur une ancre */ | ||
120 | article:target | ||
121 | { | ||
122 | padding-top: 71px; | ||
123 | margin-top: -71px; | ||
124 | } | ||
125 | .articleAvecEditeur | ||
126 | { | ||
127 | background-color: #a8b3d9; | ||
128 | padding: 2px 0px; | ||
129 | margin-bottom: 15px; | ||
130 | } | ||
131 | |||
132 | form | ||
133 | { | ||
134 | padding-bottom: 14px; | ||
135 | /*border-bottom: 1px black solid;*/ | ||
136 | } | ||
137 | |||
138 | #courriel | ||
139 | { | ||
140 | /*padding-top: 30px;*/ | ||
141 | font-size: 90%; | ||
142 | } | ||
143 | |||
144 | #courriel * | ||
145 | { | ||
146 | max-width: 220px; | ||
147 | color: black; | ||
148 | text-decoration: none; | ||
149 | } | ||
150 | |||
151 | #courriel>button /* bouton pour remonter */ | ||
152 | { | ||
153 | float: right; | ||
154 | } | ||
155 | |||
156 | #courrielJS | ||
157 | { | ||
158 | display: inline; | ||
159 | margin: 2px; | ||
160 | } | ||
161 | |||
162 | .zoneVideAdmin | ||
163 | { | ||
164 | padding-top: 10px; | ||
165 | } | ||
166 | |||
167 | #modeAdmin | ||
168 | { | ||
169 | background-color: orange; | ||
170 | position: fixed; | ||
171 | bottom: 0px; | ||
172 | width: 700px; | ||
173 | z-index: 2; | ||
174 | padding-top: 2px; | ||
175 | font-size: 90%; | ||
176 | } | ||
177 | |||
178 | #modeAdmin p | ||
179 | { | ||
180 | text-align: center; | ||
181 | margin: 0px; | ||
182 | padding: 2px; | ||
183 | } | ||
184 | #modeAdmin>p a | ||
185 | { | ||
186 | text-decoration: none; | ||
187 | color: initial; | ||
188 | } | ||
189 | |||
190 | #lienModeAdmin | ||
191 | { | ||
192 | font-size: 90%; | ||
193 | margin-top: 10px; | ||
194 | margin-right: 30px; | ||
195 | text-align: right; | ||
196 | /* enlever la bande bleue en dessous du bloc_page */ | ||
197 | /*margin-bottom: 0;*/ | ||
198 | padding-bottom: 8px; | ||
199 | } | ||
200 | |||
201 | #lienModeAdmin a | ||
202 | { | ||
203 | text-decoration: none; | ||
204 | color: black; | ||
205 | } | ||
206 | |||
207 | .connexionTitre | ||
208 | { | ||
209 | margin-top: 0px; | ||
210 | text-align: center; | ||
211 | } | ||
212 | .connexionP | ||
213 | { | ||
214 | margin: 20px; | ||
215 | text-align: center; | ||
216 | } | ||
217 | .avertissement | ||
218 | { | ||
219 | color: red; | ||
220 | font-size: 90%; | ||
221 | text-align: center; | ||
222 | padding-bottom: 10px; | ||
223 | } | ||
224 | |||
225 | .connexionFormulaire | ||
226 | { | ||
227 | margin: 30px; | ||
228 | } | ||
229 | |||
230 | .connexionFooter | ||
231 | { | ||
232 | text-align: right; | ||
233 | padding: 5px; | ||
234 | } | ||
235 | |||
236 | .connexionFooter a | ||
237 | { | ||
238 | color: #666; | ||
239 | } | ||
240 | |||
241 | .boutonBackup | ||
242 | { | ||
243 | /*font-size: initial;*/ /* corrigé par normalize.css */ | ||
244 | margin: 2px; | ||
245 | } | ||
246 | .boutonBackup a | ||
247 | { | ||
248 | text-decoration: none; | ||
249 | color: initial; | ||
250 | } | ||
251 | |||
252 | button | ||
253 | { | ||
254 | padding: 1px; | ||
255 | } | ||
256 | |||
257 | /* options au survol */ | ||
258 | #options | ||
259 | { | ||
260 | /*display: none;*/ | ||
261 | display: flex; | ||
262 | } | ||
263 | |||
264 | |||
265 | /* PC, y compris vieux écrans 800x600 */ | ||
266 | @media screen and (min-width: 700px) | ||
267 | { | ||
268 | .police_titre | ||
269 | { | ||
270 | max-width: 550px; | ||
271 | font-size: 250%; | ||
272 | margin-left: 30px; | ||
273 | padding-top: 20px; | ||
274 | } | ||
275 | |||
276 | /* compensation des cibles de liens # | ||
277 | superposées au "nav" hors flux */ | ||
278 | .articleSansEditeur:target | ||
279 | { | ||
280 | padding-top: 70px; | ||
281 | margin-top: -70px; | ||
282 | } | ||
283 | |||
284 | nav | ||
285 | { | ||
286 | border-bottom: 1px black solid; | ||
287 | margin: 0px 35px; | ||
288 | max-width: 630px; | ||
289 | } | ||
290 | |||
291 | li | ||
292 | { | ||
293 | margin: 6px 15px; | ||
294 | } | ||
295 | |||
296 | header | ||
297 | { | ||
298 | margin: 0px 35px; | ||
299 | padding-top: 92px; | ||
300 | } | ||
301 | |||
302 | #bienvenue | ||
303 | { | ||
304 | background-image: url("../accueil/bienvenue.png"); | ||
305 | width: 630px; | ||
306 | height: 596px; | ||
307 | } | ||
308 | |||
309 | #contenu | ||
310 | { | ||
311 | width: 630px; | ||
312 | margin: auto; | ||
313 | padding-bottom: 40px; | ||
314 | } | ||
315 | |||
316 | #courriel | ||
317 | { | ||
318 | margin: 0px 35px; | ||
319 | } | ||
320 | |||
321 | .zoneVideAdmin, #modeAdmin | ||
322 | { | ||
323 | /*height: 30px;*/ | ||
324 | height: 76px; | ||
325 | } | ||
326 | |||
327 | /*#modeAdmin:hover | ||
328 | { | ||
329 | height: 76px; | ||
330 | }*/ | ||
331 | } | ||
332 | |||
333 | /* "tablettes" et vieux écrans 640x480 */ | ||
334 | @media screen and (max-width: 699px) | ||
335 | { | ||
336 | #bloc_page | ||
337 | { | ||
338 | max-width: 540px; | ||
339 | font-size: 90%; | ||
340 | } | ||
341 | |||
342 | .police_titre | ||
343 | { | ||
344 | font-size: 200%; | ||
345 | margin-left: 25px; | ||
346 | } | ||
347 | .police_titre:not(.police_titre_header) | ||
348 | { | ||
349 | padding-top: 20px; | ||
350 | } | ||
351 | |||
352 | #bienvenue .police_titre | ||
353 | { | ||
354 | font-size: 250%; | ||
355 | top: 0px; | ||
356 | left: 65px; | ||
357 | } | ||
358 | |||
359 | .articleSansEditeur:target | ||
360 | { | ||
361 | padding-top: 59px; | ||
362 | margin-top: -59px; | ||
363 | } | ||
364 | |||
365 | nav | ||
366 | { | ||
367 | margin: 0px 30px; | ||
368 | max-width: 480px; | ||
369 | } | ||
370 | |||
371 | li | ||
372 | { | ||
373 | margin: 4px 10px; | ||
374 | } | ||
375 | |||
376 | header | ||
377 | { | ||
378 | margin: 0px 30px; | ||
379 | padding-top: 61px; | ||
380 | } | ||
381 | |||
382 | #bienvenue | ||
383 | { | ||
384 | background-image: url("../accueil/bienvenue_petit.png"); | ||
385 | width: 480px; | ||
386 | height: 463px; | ||
387 | margin: auto; | ||
388 | } | ||
389 | |||
390 | #contenu | ||
391 | { | ||
392 | width: 480px; | ||
393 | margin: auto; | ||
394 | padding-bottom: 30px; | ||
395 | } | ||
396 | |||
397 | #courriel | ||
398 | { | ||
399 | margin: 0px 30px; | ||
400 | } | ||
401 | |||
402 | .zoneVideAdmin, #modeAdmin | ||
403 | { | ||
404 | height: 71px; | ||
405 | } | ||
406 | |||
407 | #modeAdmin | ||
408 | { | ||
409 | max-width: 540px; | ||
410 | } | ||
411 | } | ||
412 | |||
413 | /* on grignote les colonnes autour du texte */ | ||
414 | @media screen and (max-width: 539px) | ||
415 | { | ||
416 | #modeAdmin div | ||
417 | { | ||
418 | max-width: 480px; | ||
419 | margin: 0px; | ||
420 | border: none; | ||
421 | } | ||
422 | #modeAdmin | ||
423 | { | ||
424 | font-size: 90%; | ||
425 | } | ||
426 | .zoneVideAdmin, #modeAdmin | ||
427 | { | ||
428 | height: 66px; | ||
429 | } | ||
430 | } | ||
431 | |||
432 | @media screen and (max-width: 479px) | ||
433 | { | ||
434 | #bloc_page | ||
435 | { | ||
436 | max-width: 380px; | ||
437 | font-size: 85%; | ||
438 | } | ||
439 | |||
440 | .police_titre | ||
441 | { | ||
442 | font-size: 150%; | ||
443 | margin-left: 15px; | ||
444 | } | ||
445 | .police_titre:not(.police_titre_header) | ||
446 | { | ||
447 | /*padding-top: 10px;*/ | ||
448 | } | ||
449 | |||
450 | #bienvenue .police_titre | ||
451 | { | ||
452 | font-size: 200%; | ||
453 | top: 0px; | ||
454 | left: 25px; | ||
455 | } | ||
456 | |||
457 | .articleSansEditeur:target | ||
458 | { | ||
459 | padding-top: 56px; | ||
460 | margin-top: -56px; | ||
461 | } | ||
462 | |||
463 | nav | ||
464 | { | ||
465 | margin: 0px 30px; | ||
466 | max-width: 320px; | ||
467 | } | ||
468 | |||
469 | li | ||
470 | { | ||
471 | margin: 0px 10px; | ||
472 | } | ||
473 | |||
474 | header | ||
475 | { | ||
476 | padding-top: 60px; | ||
477 | } | ||
478 | |||
479 | #bienvenue | ||
480 | { | ||
481 | background-image: url("../accueil/bienvenue_mini.png"); | ||
482 | width: 320px; | ||
483 | height: 316px; | ||
484 | } | ||
485 | |||
486 | #contenu | ||
487 | { | ||
488 | width: 320px; | ||
489 | margin: auto; | ||
490 | } | ||
491 | |||
492 | #courriel | ||
493 | { | ||
494 | margin: 0px 20px; | ||
495 | } | ||
496 | |||
497 | #courriel * | ||
498 | { | ||
499 | max-width: 180px; | ||
500 | } | ||
501 | |||
502 | #lienModeAdmin | ||
503 | { | ||
504 | margin-right: 20px; | ||
505 | } | ||
506 | |||
507 | .zoneVideAdmin, #modeAdmin | ||
508 | { | ||
509 | height: 61px; | ||
510 | } | ||
511 | |||
512 | #modeAdmin | ||
513 | { | ||
514 | max-width: 380px; | ||
515 | } | ||
516 | } | ||
517 | |||
518 | /* spécialement pour les petits smartphones*/ | ||
519 | @media screen and (max-width: 379px) | ||
520 | { | ||
521 | .zoneVideAdmin, #modeAdmin | ||
522 | { | ||
523 | height: 76px; | ||
524 | } | ||
525 | |||
526 | #modeAdmin | ||
527 | { | ||
528 | /*font-size: 95%;*/ | ||
529 | padding: 0px; | ||
530 | } | ||
531 | #modeAdmin>p | ||
532 | { | ||
533 | /*font-size: 90%;*/ | ||
534 | /*margin: 1px;*/ | ||
535 | text-align: left; | ||
536 | } | ||
537 | |||
538 | #modeAdmin div | ||
539 | { | ||
540 | max-width: 320px; | ||
541 | } | ||
542 | #modeAdmin>div p | ||
543 | { | ||
544 | /*margin: 0px 5px;*/ | ||
545 | } | ||
546 | } | ||
547 | |||
548 | /* spécial */ | ||
549 | @media screen and (max-width: 320px) | ||
550 | { | ||
551 | nav | ||
552 | { | ||
553 | margin: auto; | ||
554 | } | ||
555 | } \ No newline at end of file | ||