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