]> Raphaƫl G. Git Repositories - airbundle/blob - Resources/public/css/screen.css
Add around locations translations
[airbundle] / Resources / public / css / screen.css
1 /* Reset link */
2 a {
3 /*text-decoration: none;*/
4 color: #136;
5 }
6
7 a:hover {
8 text-decoration: underline solid #00c3f9;
9 }
10
11 /* Font styling */
12 html, body, dd, li, p, td {
13 /* DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
14 font-family: 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
15 }
16
17 button, code, input, option, optgroup, pre, select, textarea {
18 font-family: 'Droid Sans Mono', monospace;
19 }
20
21 dt, h1, h2, h3, h4, h5, h6, label, legend, th, details {
22 font-family: 'Droid Serif', serif;
23 }
24
25 /* Default styling */
26 h1 {
27 font-size: 1.5rem;
28 margin: 0 0 .5rem;
29 padding: .5rem;
30 }
31
32 h2 {
33 font-size: 1.17rem;
34 margin: 0 0 .5rem;
35 padding: .4rem;
36 }
37
38 h3 {
39 font-size: 1rem;
40 margin: 0 0 .5rem;
41 padding: .4rem;
42 }
43
44 h4 {
45 font-size: .85rem;
46 margin: 0 0 .5rem;
47 padding: .3rem;
48 }
49
50 h5 {
51 font-size: .67rem;
52 margin: 0 0 .5rem;
53 padding: .2rem;
54 }
55
56 h6 {
57 font-size: .5rem;
58 margin: 0 0 .5rem;
59 padding: .1rem;
60 }
61
62 p {
63 font-size: .9rem;
64 margin: 0 0 .4rem;
65 padding: .4rem;
66 }
67
68 article,
69 section,
70 nav {
71 margin: 0 .5rem .5rem;
72 border: .1rem solid #00c3f9;
73 border-top: 0;
74 border-left: 0;
75 border-radius: .5rem;
76 }
77
78 article article {
79 border-radius: .4rem;
80 }
81
82 article article article {
83 border-radius: .3rem;
84 }
85
86 section {
87 border-radius: .4rem;
88 }
89
90 /*article {
91 background-color: #cff;
92 }
93
94 article article {
95 background-color: white;
96 }
97
98 article article article {
99 border-radius: .3rem;
100 background-color: #cff;
101 }*/
102
103 header {
104 margin: 0;
105 padding-bottom: .5rem;
106 /*background-color: #369;
107 border-radius: inherit;*/
108 background-color: #00c3f9;
109 color: #136;
110 border-radius: .4rem .4rem 0 0;
111 }
112
113 article header {
114 border-radius: .4rem .4rem 0 0;
115 margin-bottom: .5rem;
116 }
117
118 article article header {
119 border-radius: .3rem .3rem 0 0;
120 margin-bottom: .3rem;
121 }
122
123 article article article header {
124 border-radius: .2rem .2rem 0 0;
125 margin-bottom: .2rem;
126 }
127
128 header h1,
129 header h2,
130 header h3,
131 header h4,
132 header h5,
133 header h6,
134 header p {
135 margin-bottom: 0;
136 padding-bottom: 0;
137 border-bottom: 0 none;
138 }
139
140 /*nav strong {
141 display: block;
142 font-size: 1.17rem;
143 margin: 0 0 .5rem;
144 padding: .4rem;
145 }*/
146
147 strong {
148 font-weight: bold;
149 }
150
151 pre {
152 margin: 0 .5rem .3rem;
153 font-size: .8rem;
154 }
155
156 dl {
157 margin: 0 .5rem .5rem;
158 }
159
160 dl:first-child,
161 dl:only-child,
162 dl:first-of-type {
163 margin-top: .5rem;
164 }
165
166 dt {
167 color: #369;
168 font-size: .9rem;
169 font-weight: bold;
170 }
171
172 dd {
173 font-size: .9rem;
174 margin-left: 1rem;
175 }
176
177 .map figure,
178 .multimap figure,
179 .thumb figure {
180 text-align: center;
181 }
182
183 .map img,
184 .multimap img,
185 .thumb img {
186 border-radius: .2rem;
187 border: .1rem solid #00c3f9;
188 aspect-ratio: 1;
189 }
190
191 .map dd {
192 margin: 0;
193 }
194
195 .map dd img {
196 width: 100%;
197 width: calc(100% - .2rem);
198 height: auto;
199 }
200
201 .thumb img {
202 width: 100%;
203 width: calc(100% - 1.2rem);
204 }
205
206 .four .multimap {
207 grid-column: span 4;
208 }
209
210 .three .multimap {
211 grid-column: span 3;
212 }
213
214 .two .multimap {
215 grid-column: span 2;
216 }
217
218 body {
219 display: flex;
220 flex-flow: column wrap;
221 color: #036;
222 }
223
224 ul {
225 font-size: .9rem;
226 list-style: ' - ' inside none;
227 padding: .5rem;
228 margin: 0 0 .5rem 0;
229 }
230
231 nav ul {
232 list-style: none inside none;
233 gap: .5rem;
234 /*margin: .5rem;*/
235 }
236
237 /*nav ul ul {
238 margin-top: .5rem;
239 margin-bottom: 0;
240 }*/
241
242 /* Form */
243 label {
244 font-size: .8rem;
245 white-space: nowrap;
246 }
247
248 button,
249 input,
250 select,
251 option,
252 optgroup,
253 textarea {
254 border: .05rem solid #00c3f9;
255 border-radius: .2rem;
256 font-size: .75rem;
257 color: #066;
258 background-color: transparent;
259 box-sizing: border-box;
260 }
261
262 form {
263 display: flex;
264 flex-direction: column;
265 flex-wrap: wrap;
266 margin: 0 .5rem .5rem;
267 text-align: center;
268 }
269
270 form .row {
271 flex-direction: row;
272 }
273
274 form div {
275 display: flex;
276 align-content: space-around;
277 justify-content: center;
278 flex-direction: column;
279 margin-bottom: .5rem;
280 }
281
282 form div:only-child,
283 form div:last-child,
284 form div:last-of-type {
285 margin-bottom: 0;
286 }
287
288 form label {
289 width: 12rem;
290 line-height: 1.3rem;
291 padding-right: 1rem;
292 text-align: right;
293 }
294
295 form label.captcha {
296 line-height: normal;
297 }
298
299 form label.captcha img {
300 height: 1.325rem;
301 }
302
303 form input,
304 form option,
305 form optgroup,
306 form select,
307 form textarea,
308 form section section {
309 width: 24rem;
310 padding: .1rem;
311 margin: 0 auto;
312 }
313
314 form select {
315 padding: 0 .1rem .1rem .1rem;
316 }
317
318 form button {
319 width: 10rem;
320 /*margin: .5rem auto 0 auto;*/
321 margin: 0 auto;
322 padding: 0 .1rem .2rem .1rem;
323 }
324
325 form .message {
326 margin: 0 0 .5rem 0;
327 }
328
329 form div .message {
330 margin: .25rem 0 0 0;
331 }
332
333 /* Vertical form */
334 .location .col label,
335 .col label {
336 width: 8rem;
337 padding-right: 0;
338 padding-bottom: .2rem;
339 text-align: center;
340 margin: 0 auto;
341 }
342
343 .location .col input,
344 .location .col textarea,
345 .col input,
346 .col option,
347 .col optgroup,
348 .col select,
349 .col textarea {
350 width: 8rem;
351 }
352
353 .col button {
354 width: 8rem;
355 }
356
357 .col .row {
358 flex-direction: column;
359 }
360
361 .col div.date {
362 flex-direction: row;
363 justify-content: space-between;
364 }
365
366 /* Header */
367 #header {
368 background-color: #cff;
369 border: .1rem solid #136;
370 border-top: 0;
371 border-left: 0;
372 border-radius: 0 0 .5rem .5rem;
373 margin: 0 .5rem .5rem;
374 display: flex;
375 flex-direction: column;
376 justify-content: space-between;
377 font-weight: bold;
378 line-height: 45px;
379 padding: .5rem;
380 gap: .5rem;
381 }
382
383 #header div {
384 display: flex;
385 flex-direction: row;
386 justify-content: space-between;
387 gap: .5rem;
388 }
389
390 #logo {
391 padding: 0;
392 white-space: nowrap;
393 color: #09c;
394 text-shadow: 1.5px 1.5px 3px #136;
395 text-decoration: none;
396 display: flex;
397 font-family: 'Lemon', sans-serif;
398 font-size: 2rem;
399 line-height: 45px;
400 gap: .5rem;
401 }
402
403 #logo img,
404 #logo span {
405 margin: 0 auto;
406 }
407
408 #title {
409 margin: .25rem 0 0;
410 padding: 0;
411 border-bottom: 0 none;
412 text-align: right;
413 display: inline-grid;
414 flex: 1 1 auto;
415 font-family: 'Lemon', sans-serif;
416 font-weight: normal;
417 /*white-space: nowrap;*/
418 }
419
420 #title a {
421 text-decoration: none;
422 color: #09c;
423 text-shadow: 1.5px 1.5px 3px #136;
424 /*overflow-x: hidden;
425 text-overflow: ellipsis;*/
426 }
427
428 #nav {
429 display: flex;
430 flex-wrap: wrap;
431 gap: .5rem;
432 line-height: 2.5rem;
433 margin: 0;
434 border: 0 none;
435 }
436
437 #nav a {
438 flex: 1 1 auto;
439 border: .1rem solid #136;
440 border-top: 0;
441 border-left: 0;
442 border-radius: .2rem;
443 background-color: #00c3f9;
444 color: #136;
445 text-align: center;
446 padding: 0 .25rem;
447 }
448
449 /* Message */
450 .message {
451 margin: 0 .5rem .5rem;
452 display: flex;
453 flex-direction: row;
454 justify-content: space-between;
455 font-size: .9rem;
456 padding: .2rem;
457 border-radius: .2rem;
458 text-align: center;
459 border: .05rem solid transparent;
460 }
461
462 .message::before,
463 .message::after {
464 margin: auto 0;
465 padding: 0 .25rem;
466 }
467
468 .message ul {
469 margin: 0;
470 list-style: none inside none;
471 gap: .1rem;
472 }
473
474 .mortal,
475 .mortal button,
476 .mortal select {
477 /*border-color: #c33333;
478 color: #c33333;*/
479 border-color: #930;
480 background-color: #f9c3c3;
481 color: #930;
482 }
483
484 .dangerous,
485 .mortal {
486 border-radius: .2rem;
487 padding: .5rem 0;
488 }
489
490 .error {
491 border-color: #c33333;
492 background-color: #f9c3c3;
493 color: #c33333;
494 }
495
496 .error::before,
497 .error::after {
498 /*XXX: display /!\ symbol */
499 content: "āš ";
500 }
501
502 .notice {
503 border-color: #3333c3;
504 background-color: #c3c3f9;
505 color: #3333c3;
506 }
507
508 .notice::before,
509 .notice::after {
510 /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
511 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
512 /*XXX: display i symbol */
513 content: "ā„¹";
514 /*XXX: display # symbol */
515 /*content: "āŒ˜";*/
516 }
517
518 .dangerous,
519 .dangerous button,
520 .dangerous select {
521 /*border-color: #c39333;
522 background-color: #f9c333;
523 color: #936333;*/
524 border-color: #930;
525 background-color: #fc9;
526 color: #930;
527 }
528
529 .warning {
530 border-color: #c39333;
531 background-color: #f9c333;
532 color: #936333;
533 }
534
535 .warning::before,
536 .warning::after {
537 /*XXX: see https://www.fileformat.info/info/unicode/char/2139/fontsupport.htm
538 * DejaVu Sans/FreeSans/FreeSerif/Linux Libertine/Symbola/Unifont*/
539 content: "?";
540 /*XXX: display # symbol */
541 /*content: "āŒ˜";*/
542 }
543
544 /* Dashboard */
545 #dashboard,
546 #form,
547 #recover,
548 #regulation {
549 /*border-radius: .5rem;*/
550 /*border: .1rem solid #00c3f9;
551 margin: .5rem;
552 margin-top: 0;
553 display: flex;
554 flex-direction: column;*/
555 }
556
557 .panel {
558 display: flex;
559 flex-direction: row;
560 margin: 0 .5rem .5rem;
561 gap: .5rem;
562 }
563
564 .grid {
565 display: grid;
566 border-style: solid;
567 border-color: #00c3f9;
568 border-radius: .2rem;
569 box-sizing: border-box;
570 border-collapse: collapse;
571 grid-gap: .1rem;
572 flex: 1 1 auto;
573 margin: 0 0 auto 0;
574 padding: 0;
575 }
576
577 .grid article,
578 .grid section {
579 border-collapse: inherit;
580 /*border-radius: inherit;*/
581 border-style: inherit;
582 /*border-width: .1rem;
583 border-width: inherit;*/
584 box-sizing: inherit;
585 flex-grow: inherit;
586 margin: 0;
587 min-height: 5rem;
588 overflow: hidden;
589 }
590
591 .grid header {
592 border-radius: .2rem .2rem 0 0;
593 margin-bottom: 0;
594 }
595
596 .grid ul {
597 /*margin: .1rem;*/
598 padding: .1rem;
599 margin: 0;
600 }
601
602 /*.grid section {
603 border-color: inherit;
604 }*/
605
606 /*.grid ul {
607 display: block;
608 margin: .1rem;
609 font-size: .8rem;
610 list-style: none inside none;
611 }*/
612
613 .grid li {
614 border-width: .1rem;
615 border-style: solid;
616 border-radius: .2rem;
617 white-space: nowrap;
618 padding: .1rem;
619 display: flex;
620 margin: 0 0 auto;
621 flex-direction: row;
622 justify-content: space-between;
623 overflow-x: hidden;
624 text-overflow: ellipsis;
625 }
626
627 /*XXX: required by ul display:block for overflow:hidden*/
628 /*.grid li:only-child,
629 .grid li:last-child,
630 .grid li:last-of-type {
631 margin: 0;
632 }*/
633
634 .grid a {
635 /*TODO: voir pourquoi on a besoin d'un overflow-y de merde, sans une putain de scrollbar s'affiche dans certaines conditions sur chrome, depuis le passage de deux lignes de grid Ć  3 !!!*/
636 /*Est-ce parce que le city est pas expanded ???*/
637 overflow-y: clip;
638 overflow-x: hidden;
639 text-overflow: ellipsis;
640 }
641
642 .grid p {
643 padding: 0 0 .3rem;
644 margin: 0;
645 }
646
647 .grid p:only-child,
648 .grid p:last-child,
649 .grid p:last-of-type {
650 padding: 0;
651 }
652
653 .current {
654 filter: hue-rotate(-90deg) saturate(2);
655 }
656
657 .granted {
658 background-color: #cff;
659 border-color: #00c3f9;
660 }
661
662 /*.granted,
663 .granted a {
664 background-color: #cff;
665 border-color: #00c3f9;
666 }
667
668 .disputed,
669 .disputed a {
670 border-color: #930;
671 background-color: #fc9;
672 color: #930;
673 }*/
674
675 .highlight {
676 filter: hue-rotate(90deg);
677 }
678
679 .canceled {
680 filter: hue-rotate(180deg) grayscale(33%);
681 }
682
683 .locked {
684 filter: hue-rotate(180deg);
685 }
686
687 .pending {
688 filter: grayscale(33%);
689 }
690
691 .disabled {
692 filter: grayscale(66%);
693 }
694
695 /*.canceled,
696 .canceled a,
697 .canceled h2,
698 .canceled header {
699 color: #963;
700 background-color: #fddddd;
701 border-color: #963;
702 }
703
704 .locked,
705 .locked a {
706 border-color: #930;
707 background-color: #f9c3c3;
708 color: #930;
709 }
710
711 .pending,
712 .pending a {
713 background-color: #ccc;
714 border-color: #066;
715 }
716
717 .highlight,
718 .highlight a,
719 .highlight h3,
720 .highlight h3 a {
721 border-color: #3333c3;
722 background-color: #c3c3f9;
723 color: #606;
724 }*/
725
726 .calendar a {
727 display: grid;
728 /*grid-template-columns: 1fr auto fit-content(1fr);*/
729 grid-template-columns: max-content 1fr max-content;
730 flex: 1 1 auto;
731 grid-gap: .1rem;
732 /*XXX: reset to visible to prevent scroll*/
733 overflow-x: visible;
734 }
735
736 .calendar .reducible {
737 overflow-x: hidden;
738 text-overflow: ellipsis;
739 text-align: center;
740 }
741
742 .calendar .glyph {
743 font-family: 'Noto Emoji', 'Droid Sans', 'Symbola', 'DejaVu Sans', 'FreeSans', sans-serif;
744 }
745
746 .calendar .temperature,
747 .calendar .rain,
748 .calendar .rate {
749 line-height: 1rem;
750 text-align: right;
751 }
752
753 .calendar .rate {
754 text-align: center;
755 }
756
757 .calendar .info {
758 line-height: 1rem;
759 text-align: right;
760 }
761
762 .calendar .pseudonym {
763 grid-column: span 2;
764 }
765
766 .seven {
767 grid-template-columns: repeat(7, 1fr);
768 }
769
770 .four {
771 grid-template-columns: repeat(4, 1fr);
772 }
773
774 .three {
775 grid-template-columns: repeat(3, 1fr);
776 }
777
778 .two {
779 grid-template-columns: repeat(2, 1fr);
780 }
781
782 /*.city .grid h3,
783 .location .grid h3,
784 .city .grid h4,
785 .location .grid h4 {
786 border-style: none;
787 margin: 0;
788 flex: 1 1 auto;
789 white-space: nowrap;
790 overflow: hidden;
791 text-overflow: ellipsis;
792 }
793
794 .city .grid article,
795 .location .grid article {
796 min-height: auto;
797 height: fit-content;
798 }
799
800 .city .grid {
801 gap: .5rem;
802 }*/
803
804 .location form {
805 margin: .5rem auto;
806 }
807
808 .location form .row {
809 flex-direction: column;
810 }
811
812 .location form div {
813 margin-left: auto;
814 margin-right: auto;
815 }
816
817 .location label {
818 width: 20rem;
819 padding-right: 0;
820 text-align: center;
821 }
822
823 .location input,
824 .location textarea {
825 width: 20rem;
826 margin: 0 .1rem;
827 }
828
829 .form {
830 margin: 0;
831 display: flex;
832 flex-direction: column;
833 gap: .5rem;
834 }
835
836 .form h2 {
837 font-size: 1.17rem;
838 padding: .4rem;
839 }
840
841 .form a {
842 white-space: nowrap;
843 }
844
845 .form section {
846 margin: 0;
847 border: .05rem solid #00c3f9;
848 border-radius: .2rem;
849 width: 100%;
850 }
851
852 .form form {
853 gap: .5rem;
854 }
855
856 /* Footer */
857 #footer {
858 border: .1rem solid #00c3f9;
859 border-radius: .5rem;
860 margin: .5rem;
861 margin-top: 0;
862 padding: .5rem;
863 text-align: center;
864 font-size: .8rem;
865 line-height: 2.5rem;
866 display: flex;
867 justify-content: space-between;
868 background-color: #cff;
869 gap: .5rem;
870 }
871
872 #footer summary::after {
873 display: none;
874 }
875
876 #footer summary::-webkit-details-marker {
877 display: none;
878 }
879
880 #footer ul {
881 list-style: none inside none;
882 margin: 0;
883 }
884
885 #footer a,
886 #footer details {
887 padding: 0 .5rem;
888 border: .1rem solid #136;
889 border-top: 0;
890 border-left: 0;
891 border-radius: .2rem;
892 background-color: #00c3f9;
893 color: #136;
894 justify-content: center;
895 }
896
897 #footer details a {
898 padding: 0;
899 border: 0 none;
900 }
901
902 /* viewport responsive hack */
903 @media ( max-width: 1400px ) {
904 .location label,
905 .location input,
906 .location textarea {
907 width: 12rem;
908 }
909
910 .session .three {
911 grid-template-columns: repeat(2, 1fr);
912 }
913 }
914
915 @media ( max-width: 1000px ) {
916 .panel {
917 /*flex-flow: column-reverse wrap;*/
918 flex-flow: column wrap;
919 }
920
921 .location .two {
922 grid-template-columns: repeat(2, 1fr);
923 }
924 }
925
926 @media ( max-width: 900px ) {
927 .form {
928 flex-direction: row;
929 }
930
931 form label {
932 width: 6rem;
933 line-height: 2rem;
934 }
935
936 form label.captcha img {
937 height: auto;
938 width: 6rem;
939 padding: .25rem 0;
940 }
941
942 form input,
943 form option,
944 form optgroup,
945 form select,
946 form textarea,
947 form section section {
948 width: 20rem;
949 line-height: 2rem;
950 }
951
952 form button {
953 width: 6rem;
954 line-height: 2rem;
955 }
956
957 .col label,
958 .col input,
959 .col option,
960 .col optgroup,
961 .col select,
962 .col textarea {
963 width: 12rem;
964 }
965
966 .col button {
967 width: 12rem;
968 }
969
970 .seven {
971 grid-template-columns: repeat(4, 1fr);
972 }
973
974 .calendar .sunday {
975 grid-column: span 2;
976 }
977
978 /*.grid section:nth-child(7n) {
979 grid-column: span 2;
980 }*/
981
982 .four {
983 grid-template-columns: repeat(3, 1fr);
984 }
985
986 .three {
987 grid-template-columns: repeat(2, 1fr);
988 }
989
990 .two {
991 grid-template-columns: repeat(1, 1fr);
992 }
993
994 .four .multimap {
995 grid-column: span 3;
996 }
997
998 .three .multimap {
999 grid-column: span 2;
1000 }
1001
1002 .two .multimap {
1003 grid-column: span 1;
1004 }
1005
1006 /*#dashboard .seventh:nth-child(7n+1),
1007 #dashboard .seventh:nth-child(7n+2),
1008 #dashboard .seventh:nth-child(7n+3),
1009 #dashboard .seventh:nth-child(7n+4) {
1010 width: calc(100% / 4 - (3/4*.1rem));
1011 }
1012
1013 #dashboard .seventh:nth-child(7n+5),
1014 #dashboard .seventh:nth-child(7n+6),
1015 #dashboard .seventh:nth-child(7n+7) {
1016 width: calc(100% / 3 - (2/3*.1rem));
1017 }*/
1018 }
1019
1020 @media ( max-width: 700px ) {
1021 .session .three {
1022 grid-template-columns: repeat(1, 1fr);
1023 }
1024
1025 .multimap img {
1026 width: 100%;
1027 width: calc(100% - .2rem);
1028 height: auto;
1029 }
1030 }
1031
1032 @media ( max-width: 600px ) {
1033 form label {
1034 margin: 0 auto;
1035 }
1036
1037 form input,
1038 form option,
1039 form optgroup,
1040 form select,
1041 form textarea,
1042 form section section {
1043 width: 14rem;
1044 margin: 0 auto;
1045 }
1046
1047 #logo {
1048 flex-direction: column;
1049 }
1050
1051 .seven {
1052 grid-template-columns: repeat(2, 1fr);
1053 }
1054
1055 /*.grid section:nth-child(7n) {
1056 grid-column: span 2;
1057 margin-bottom: .5rem;
1058 }
1059
1060 .grid section:only-child,
1061 .grid section:last-child,
1062 .grid section:last-of-type {
1063 margin-bottom: 0;
1064 }*/
1065
1066 .calendar .sunday {
1067 margin-bottom: .5rem;
1068 }
1069
1070 .calendar .sunday:only-child,
1071 .calendar .sunday:last-child {
1072 margin-bottom: 0;
1073 }
1074
1075 .four {
1076 grid-template-columns: repeat(2, 1fr);
1077 }
1078
1079 .three {
1080 grid-template-columns: repeat(1, 1fr);
1081 }
1082
1083 .four .multimap {
1084 grid-column: span 2;
1085 }
1086
1087 .three .multimap {
1088 grid-column: span 1;
1089 }
1090
1091 .location .two {
1092 grid-template-columns: repeat(1, 1fr);
1093 }
1094
1095 /*#dashboard .seventh:nth-child(n) {
1096 width: calc(100% / 2 - .1rem);
1097 }
1098
1099 #dashboard .seventh:nth-child(7n) {
1100 width: calc(100%);
1101 }*/
1102
1103 /*.city .two,
1104 .location .two {
1105 grid-template-columns: 1fr;
1106 }
1107
1108 .city .grid article,
1109 .location .grid article {
1110 overflow: hidden;
1111 }*/
1112 }
1113
1114 @media ( max-width: 450px ) {
1115 #header div {
1116 flex-direction: column;
1117 }
1118
1119 #title {
1120 text-align: center;
1121 }
1122
1123 #logo {
1124 flex-direction: row;
1125 }
1126
1127 dd, p, #footer {
1128 font-size: 110%;
1129 }
1130
1131 a, dd, figcaption, #footer {
1132 /*XXX: required to validate Tap targets are sized appropriately*/
1133 line-height: 3rem;
1134 }
1135
1136 figure,
1137 .calendar a {
1138 line-height: normal;
1139 }
1140
1141 form .row,
1142 .grid,
1143 .form,
1144 #footer {
1145 flex-direction: column;
1146 }
1147
1148 form label {
1149 text-align: center;
1150 }
1151
1152 .seven {
1153 grid-template-columns: repeat(1, 1fr);
1154 }
1155
1156 /*.grid section:nth-child(n) {
1157 grid-column: auto;
1158 }*/
1159 .calendar .sunday {
1160 grid-column: auto;
1161 }
1162
1163 .four {
1164 grid-template-columns: repeat(1, 1fr);
1165 }
1166
1167 .four .multimap {
1168 grid-column: span 1;
1169 }
1170 }
1171
1172 @media ( max-width: 320px ) {
1173 #logo {
1174 flex-direction: column;
1175 }
1176
1177 #title {
1178 white-space: normal;
1179 }
1180 }
1181
1182 @media ( max-width: 260px ) {
1183 .col label,
1184 .col input,
1185 .col option,
1186 .col optgroup,
1187 .col select,
1188 .col textarea {
1189 width: 10rem;
1190 }
1191
1192 .col button {
1193 width: 10rem;
1194 }
1195 }