Raphaël G. Git Repositories - airbundle/blob - Resources/public/css/screen.css

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