Raphaël G. Git Repositories - airbundle/blob - 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 }