panikweb_studioneau/static/css/style.scss

   1 $width: 1400px;
   2 $inner-width: 920px;
   3 $header-height: 130px;
   4 $mobile-header-height: 100px;
   5 $font-size-title: 26px;
   6 $font-size-subtitle: 20px;
   7 $nav-button-background: white;
   8 $nav-button-color: black;
   9 $nav-button-side: 35px;
  10
  11 @font-face {
  12         font-family: 'FontAwesome';
  13         src: url('../xstatic/fonts/fontawesome-webfont.eot');
  14         src: url('../xstatic/fonts/fontawesome-webfont.eot?#iefix') format('embedded-opentype'),
  15              url('../xstatic/fonts/fontawesome-webfont.woff') format('woff'),
  16              url('../xstatic/fonts/fontawesome-webfont.ttf') format('truetype'),
  17              url('../xstatic/fonts/fontawesome-webfont.svg#fontawesomeregular') format('svg');
  18         font-weight: normal;
  19         font-style: normal;
  20 }
  21
  22 %hero-height {
  23         height: 100vh;
  24         height: calc(100vh - #{$header-height});
  25         @media screen and (max-width: 600px) {
  26                 height: calc(100vh - #{$mobile-header-height});
  27         }
  28 }
  29
  30 %hero-width {
  31         max-width: none;
  32         @media screen and (max-width: $inner-width) {
  33                 padding-left: 0;
  34                 padding-right: 0;
  35         }
  36 }
  37
  38 %button {
  39         text-decoration: none;
  40         display: inline-block;
  41         border: 2px solid black;
  42         font-weight: bold;
  43         text-transform: uppercase;
  44         text-decoration: none;
  45         color: black;
  46         background: white;
  47         &:hover {
  48                 background: black;
  49                 color: white;
  50         }
  51         &:focus-visible {
  52                 outline: 2px solid black;
  53                 outline-offset: 1px;
  54         }
  55 }
  56
  57 html, body {
  58         margin: 0;
  59         padding: 0;
  60         font-family: Helvetica, sans-serif;
  61         background: white;
  62         color: #222222;
  63 }
  64
  65 a {
  66         text-decoration: none;
  67         color: inherit;
  68         &:hover {
  69                 color: #444;
  70         }
  71 }
  72
  73 ul, li {
  74         margin: 0;
  75         padding: 0;
  76         list-style: none;
  77 }
  78
  79 p {
  80         overflow-wrap: break-word;
  81         word-break: break-word;
  82         line-height: 1.4;
  83 }
  84
  85 #All {
  86         background: white;
  87         max-width: $width;
  88         margin: 0 auto;
  89         position: relative;
  90 }
  91
  92 #metaNav {
  93         position: absolute;
  94         top: 16px;
  95         right: 20px;
  96         height: 30px;
  97         nav {
  98                 display: flex;
  99                 line-height: 60px;
 100                 ul#nav-language {
 101                         display: flex;
 102                         li {
 103                                 margin-right: 1em;
 104                                 span {
 105                                         cursor: pointer;
 106                                 }
 107                         }
 108                         .lang-on {
 109                                 text-decoration: underline;
 110                         }
 111                 }
 112                 button#chat-button {
 113                         background: none;
 114                         cursor: pointer;
 115                         border: none;
 116                         font-size: 100%;
 117                         font-weight: bold;
 118                         margin-right: 2em;
 119                         @media screen and (max-width: 600px) {
 120                                 margin-right: 1em;
 121                         }
 122                         &.icon-check {
 123                                 background: black;
 124                                 color: white;
 125                         }
 126                 }
 127                 button#opener {
 128                         cursor: pointer;
 129                         background: none;
 130                         border: none;
 131                         display: block;
 132                         z-index: 200;
 133                         position: relative;
 134                         width: calc(#{$nav-button-side} + 2px);
 135                         height: $nav-button-side;
 136                         padding: 0;
 137                         margin: 0;
 138                         background: $nav-button-background;
 139                         transition: all 0.25s ease;
 140                         border: 0;
 141                         & .icon-bar {
 142                                 position: absolute;
 143                                 left: 17%;
 144                                 width: 66%;
 145                                 margin: 0;
 146                                 border: 2px solid $nav-button-color;
 147                                 background: $nav-button-color;
 148                                 transition: all 0.25s ease;
 149                         }
 150                         & .icon-bar-1 {
 151                                 top: 25%;
 152                         }
 153                         & .icon-bar-2 {
 154                                 top: 50%;
 155                         }
 156                         & .icon-bar-3 {
 157                                 top: 75%;
 158                         }
 159                         &.toggled {
 160                                 & .icon-bar-1 {
 161                                         top: 50%;
 162                                         transform: rotate(45deg);
 163                                 }
 164                                 & .icon-bar-2 {
 165                                         opacity: 0;
 166                                 }
 167                                 & .icon-bar-3 {
 168                                         top: 50%;
 169                                         transform: rotate(-45deg);
 170                                 }
 171                         }
 172                 }
 173                 #extra-menu {
 174                         position: absolute;
 175                         display: none;
 176                         background: white;
 177                         text-align: right;
 178                         right: -20px;
 179                         top: 50px;
 180                         width: 200px;
 181                         z-index: 10000;
 182                         padding: 1em;
 183                         li {
 184                                 line-height: 1.5em;
 185                                 font-size: 1.3em;
 186                                 font-weight: bold;
 187                                 a {
 188                                         display: block;
 189                                 }
 190                         }
 191                         ul + ul {
 192                                 margin-top: 1em;
 193                         }
 194                 }
 195         }
 196 }
 197
 198 #mainHeader {
 199         display: block;
 200         max-width: 1000px;
 201         margin: 0 auto;
 202 }
 203
 204 #logo {
 205         display: block;
 206         width: 155px;
 207         height: $header-height;
 208         background: white url(studio-neau-logo.png) bottom left no-repeat;
 209         text-indent: -10000px;
 210         margin: 0 auto;
 211         @media screen and (max-width: 600px) {
 212                 height: $mobile-header-height;
 213                 background-size: 50%;
 214                 background-position: center 10px;
 215         }
 216 }
 217
 218 #Player {
 219         position: absolute;
 220         top: 0;
 221         left: 0;
 222 }
 223
 224 #focus {
 225         @extend %hero-width;
 226         position: relative;
 227         button {
 228                 position: absolute;
 229                 cursor: pointer;
 230                 top: calc(50% - 50px);
 231                 z-index: 100;
 232                 color: white;
 233                 background: rgba(0, 0, 0, 0.1);
 234                 font-size: 40px;
 235                 border: none;
 236                 width: 100px;
 237                 height: 100px;
 238                 &#prev {
 239                         left: 10px;
 240                         &::before {
 241                                 font-family: FontAwesome;
 242                                 content: "\f053";
 243                         }
 244                 }
 245                 &#next {
 246                         right: 10px;
 247                         &::before {
 248                                 font-family: FontAwesome;
 249                                 content: "\f054";
 250                         }
 251                 }
 252         }
 253         @extend %hero-height;
 254         overflow: hidden;
 255         .item {
 256                 width: 100%;
 257                 position: relative;
 258                 &.transition {
 259                         position: absolute;
 260                         z-index: 90;
 261                         transition: opacity ease-out 1s;
 262                         opacity: 1;
 263                         &.faded {
 264                                 opacity: 0;
 265                         }
 266                 }
 267                 .img {
 268                         background-position: center;
 269                         background-size: cover;
 270                         background-repeat: no-repeat;
 271                         @extend %hero-height;
 272                 }
 273                 .infos {
 274                         position: absolute;
 275                         box-sizing: border-box;
 276                         bottom: 0;
 277                         left: 25%;
 278                         width: 50%;
 279                         @media screen and (max-width: 600px) {
 280                                 left: 10%;
 281                                 width: 80%;
 282                         }
 283                         padding: 10px 20px;
 284                         background: white;
 285                         height: 100px;
 286                         .title {
 287                                 display: block;
 288                                 width: 100%;
 289                                 font-size: $font-size-title;
 290                                 font-weight: bold;
 291                         }
 292                 }
 293         }
 294 }
 295
 296 h2 {
 297         border-top: 2px ridge black;
 298         border-bottom: 2px ridge black;
 299         padding: 0.9em 0 0.6em 0;
 300         margin: 1rem 0;
 301 }
 302
 303 #footer, .main > div {
 304         max-width: $inner-width;
 305         margin: 0 auto;
 306         @media screen and (max-width: #{$inner-width + 30px}) {
 307                 padding: 0 1rem;
 308                 font-size: 90%;
 309         }
 310 }
 311
 312 div.program.tabs {
 313         nav ul {
 314                 display: flex;
 315                 list-style: none;
 316                 margin: 1rem 0;
 317                 padding: 0;
 318                 justify-content: space-around;
 319                 li {
 320                         margin: 0;
 321                         padding: 0;
 322                         &.week-arrow {
 323                                 width: 30px;
 324                         }
 325                 }
 326                 button {
 327                         @extend %button;
 328                         font-size: 24px;
 329                         text-transform: capitalize;
 330                         &[disabled] {
 331                                 color: #aaa;
 332                                 border: 2px solid #aaa;
 333                                 cursor: not-allowed;
 334                                 &.active {
 335                                         outline: 2px solid black;
 336                                         background: white;
 337                                 }
 338                         }
 339                 }
 340                 @media screen and (max-width: 600px) {
 341                         li {
 342                                 button {
 343                                         font-size: 14px;
 344                                         border-right: 0;
 345                                 }
 346                                 &.weektab-7 button {
 347                                         border-right: 2px solid black;
 348                                 }
 349                         }
 350                 }
 351
 352                 a.icon-chevron-sign-right,
 353                 a.icon-chevron-sign-left {
 354                         font-family: 'FontAwesome';
 355                         color: inherit;
 356                         text-decoration: none;
 357                         line-height: 36px;
 358                         &.icon-chevron-sign-left::before {
 359                                 content: "\f053";
 360                         }
 361                         &.icon-chevron-sign-right::before {
 362                                 content: "\f054";
 363                         }
 364                 }
 365                 li.week-arrow-next {
 366                         text-align: right;
 367                 }
 368         }
 369 }
 370
 371 ul.program-week {
 372         list-style: none;
 373         margin: 0;
 374         margin-top: 10px;
 375         padding: 0;
 376         border-bottom: 2px ridge black;
 377         margin-bottom: 6em;
 378         li {
 379                 border-top: 2px ridge black;
 380                 padding: 0.7em 0 0.5em 0;
 381                 &.past {
 382                         color: #bbbbbb;
 383                 }
 384                 &.current .programCellTitle {
 385                         font-weight: bold;
 386                 }
 387                 a {
 388                         display: flex;
 389                         .programDate {
 390                                 width: 8em;
 391                         }
 392                         .programCellTitle {
 393                                 margin-left: 1em;
 394                                 flex: 1;
 395                         }
 396                         .programCellSubtitle {
 397                                 flex: 1;
 398                         }
 399                 }
 400         }
 401 }
 402
 403 ul.main-flex,
 404 ul.collection {
 405         margin: 0;
 406         padding: 0;
 407         list-style: none;
 408         display: flex;
 409         flex-wrap: wrap;
 410         justify-content: space-between;
 411         li {
 412                 margin: 0;
 413                 padding: 0;
 414                 width: 32%;
 415                 @media screen and (max-width: 600px) {
 416                         width: 49%;
 417                 }
 418                 .image {
 419                         height: 200px;
 420                         background-color: #ccc;
 421                         background-position: center;
 422                         background-size: cover;
 423                         background-repeat: no-repeat;
 424                 }
 425                 .tags {
 426                         margin-top: 0.8em;
 427                         margin-bottom: 0px;
 428                         font-size: 80%;
 429                 }
 430                 h3 {
 431                         margin-top: 0.2em;
 432                         a {
 433                                 display: block;
 434                                 text-decoration: none;
 435                                 color: inherit;
 436                                 background: url(link.png) bottom left no-repeat;
 437                                 padding-bottom: 30px;
 438                         }
 439                 }
 440         }
 441 }
 442
 443 .episodes ul.collection h3 a {
 444         background: none;
 445         padding-bottom: 0;
 446         span.diffusion-date {
 447                 display: block;
 448                 font-weight: normal;
 449                 font-size: 14px;
 450                 padding-top: 3px;
 451         }
 452 }
 453
 454 .tags {
 455         margin-bottom: 10px;
 456         a {
 457                 text-transform: uppercase;
 458                 color: inherit;
 459                 text-decoration: underline;
 460                 display: inline-block;
 461                 margin-right: 0.6em;
 462         }
 463         &:empty:after {
 464                 content: " ";
 465         }
 466 }
 467
 468 .mehr-button {
 469         margin: 0 auto 4em auto;
 470         text-align: center;
 471         a {
 472                 @extend %button;
 473                 font-size: 24px;
 474                 padding: 0.2em 0.2em 0 0.2em;
 475                 &:active {
 476                         animation: rotating-borders 2s infinite;
 477                 }
 478         }
 479 }
 480
 481 #footer {
 482         border-top: 2px ridge black;
 483         margin-top: 4em;
 484         padding-top: 2em;
 485         nav {
 486                 display: flex;
 487                 background: url(logo-label.png) top left no-repeat;
 488                 justify-content: flex-end;
 489                 min-height: 160px;
 490                 line-height: 1.2em;
 491                 font-weight: bold;
 492                 ul {
 493                         width: 25%;
 494                         list-style: none;
 495                         margin: 0;
 496                         padding: 0;
 497                         &.platforms {
 498                                 text-align: right;
 499                                 li a {
 500                                         display: inline-block;
 501                                         text-align: center;
 502                                         border: 1px solid black;
 503                                         width: 2rem;
 504                                         height: 2rem;
 505                                         &::before {
 506                                                 line-height: 2rem;
 507                                         }
 508                                 }
 509                                 li:last-child {
 510                                         margin-right: 0;
 511                                 }
 512                         }
 513                 }
 514                 @media screen and (max-width: #{$inner-width + 30px}) {
 515                         margin-top: 1em;
 516                 }
 517                 @media screen and (max-width: 600px) {
 518                         background-position: bottom 1em left 0;
 519                         flex-wrap: wrap;
 520                         ul {
 521                                 width: 70%;
 522                                 text-align: right;
 523                                 margin-bottom: 1em;
 524                                 a {
 525                                         display: inline-block;
 526                                         height: 1.7em;
 527                                 }
 528                         }
 529                 }
 530         }
 531 }
 532
 533
 534 @keyframes live-pulse {
 535         0% {opacity: 1;}
 536         50% {opacity: .1;}
 537         100% {opacity: 1;}
 538 }
 539
 540 @keyframes rotating-borders {
 541         0%  {border-left-color: white;}
 542         25% {border-top-color: white;}
 543         50% {border-right-color: white;}
 544         75% {border-bottom-color: white;}
 545 }
 546
 547
 548 #player {
 549         margin-top: 1em;
 550         margin-left: 20px;
 551         audio {
 552                 display: none;
 553         }
 554         font-size: 120%;
 555         #streamSymbol {
 556                 border-radius: 100%;
 557                 background: #fe0000;
 558                 width: 16px;
 559                 height: 16px;
 560                 display: inline-block;
 561                 cursor: pointer;
 562                 animation: live-pulse 2s infinite;
 563                 animation-timing-function: ease;
 564         }
 565         .label {
 566                 cursor: pointer;
 567                 display: inline-block;
 568                 border: 2px solid black;
 569                 text-transform: uppercase;
 570                 font-weight: bold;
 571                 padding: 5px 9px 0 5px;
 572                 &::before {
 573                         font-family: FontAwesome;
 574                         content: "\f04b";
 575                         padding-right: 0.5em;
 576                         display: inline-block;
 577                         width: 16px;
 578                 }
 579         }
 580         #streamSymbol.icon-stop + .label::before,
 581         #streamSymbol.icon-pause + .label::before {
 582                 content: "\f04d";
 583         }
 584         #CurrentlyPlaying {
 585                 margin-top: 1em;
 586                 font-size: 75%;
 587                 @media screen and (max-width: 600px) {
 588                         margin-top: 1.7em;
 589                 }
 590         }
 591         #WhatsOnAir {
 592                 display: block;
 593                 white-space: pre;
 594                 overflow: hidden;
 595                 text-overflow: ellipsis;
 596                 max-width: calc(100vw - 2em);
 597         }
 598 }
 599
 600 .nothing-playing {
 601         #Player {
 602                 opacity: 0.2;
 603                 pointer-events: none;
 604                 #streamSymbol {
 605                         background: #666;
 606                         animation: none;
 607                         cursor: not-allowed;
 608                 }
 609                 .label {
 610                         cursor: not-allowed;
 611                         &::before {
 612                                 content: "\f026";  // volume-off
 613                         }
 614                 }
 615         }
 616         #chat-button {
 617                 opacity: 0.2;
 618                 pointer-events: none;
 619         }
 620 }
 621
 622 #hero {
 623         @extend %hero-width;
 624         .img {
 625                 background-position: center;
 626                 background-size: cover;
 627                 background-repeat: no-repeat;
 628                 display: block;
 629                 @extend %hero-height;
 630         }
 631         margin-bottom: 2em;
 632 }
 633
 634 .inner-page {
 635         h1 {
 636                 margin-top: 0;
 637                 font-size: $font-size-title;
 638                 font-weight: bold;
 639         }
 640         .diffusions {
 641                 margin: 0;
 642         }
 643 }
 644
 645 .innest-page {
 646         position: relative;
 647         width: 80%;
 648         max-width: 700px;
 649         box-sizing: border-box;
 650         margin: 0 auto;
 651         margin-top: 2em;
 652         background: white;
 653         padding: 10px 20px;
 654
 655         @media screen and (max-width: 600px) {
 656                 div.episode-text, div.emission-text, div.bottom-line, div.main-sound, div.more-text {
 657                         /* use more width */
 658                         margin-left: -3em;
 659                         margin-right: -3em;
 660                 }
 661                 div.emission-text {
 662                         margin-top: 4em;
 663                 }
 664                 h1.with-subtitle + div.emission-text {
 665                         /* subtitle -> less margin */
 666                         margin-top: 2em;
 667                 }
 668         }
 669 }
 670
 671 #hero + .inner-page .innest-page {
 672         margin-top: calc(-2em - 100px);
 673 }
 674
 675 .other-emissions {
 676         margin-top: 6em;
 677         border-top: 2px ridge black;
 678         padding-top: 2em;
 679 }
 680
 681 #tag-items h2 {
 682         text-transform: uppercase;
 683 }
 684
 685 #tags ul {
 686         display: flex;
 687         flex-wrap: wrap;
 688         li a {
 689                 @extend %button;
 690                 font-size: 20px;
 691                 padding: 0.2em 0.2em 0 0.2em;
 692                 margin-bottom: 1em;
 693         }
 694 }
 695
 696 a.back {
 697         position: absolute;
 698         right: 20px;
 699         top: 10px;
 700         background: url(back-to-emission.png) top left no-repeat;
 701         width: 50px;
 702         height: 49px;
 703         overflow: hidden;
 704         text-indent: -1000px;
 705 }
 706
 707 .program-page-top {
 708         padding-top: 2em;
 709 }
 710
 711 .event {
 712         width: 100%;
 713         display: flex;
 714         min-height: 200px;
 715         margin-bottom: 20px;
 716         @media screen and (max-width: 600px) {
 717                 flex-direction: column;
 718         }
 719         .image {
 720                 flex: 1;
 721                 margin-right: 10px;
 722                 height: 200px;
 723                 background-color: #ccc;
 724                 background-position: center;
 725                 background-size: cover;
 726                 background-repeat: no-repeat;
 727                 @media screen and (max-width: 600px) {
 728                         width: 100%;
 729                         flex: auto;
 730                         margin-right: 0;
 731                         margin-bottom: 10px;
 732                 }
 733         }
 734         .info {
 735                 flex: 2;
 736                 h3 {
 737                         margin: 0;
 738                         font-size: $font-size-title;
 739                 }
 740                 h4 {
 741                         margin: 0;
 742                         font-size: $font-size-subtitle;
 743                 }
 744         }
 745 }
 746
 747 .sr-only {
 748         position: absolute !important;
 749         width: 1px !important;
 750         height: 1px !important;
 751         padding: 0 !important;
 752         margin: -1px !important;
 753         overflow: hidden !important;
 754         clip: rect(0, 0, 0, 0) !important;
 755         white-space: nowrap !important;
 756         border: 0 !important;
 757 }
 758
 759 .urls {
 760         margin: 2em 0 0 0;
 761 }
 762
 763 .platforms li,
 764 .urls li {
 765         display: inline-block;
 766         margin-right: 1ex;
 767         a {
 768                 &::before {
 769                         font-family: FontAwesome;
 770                         content: "\f0ac";
 771                         width: 1.5em;
 772                         height: 1.5em;
 773                         line-height: 1.5em;
 774                         display: inline-block;
 775                         text-align: center;
 776                 }
 777         }
 778         a span {
 779                 @extend .sr-only;
 780         }
 781         &.facebook a::before { content: "\f09a"; }
 782         &.twitter a::before { content: "\f099"; }
 783         &.instagram a::before { content: "\f16d"; }
 784         &.twitch a::before { content: "\f1e8"; }
 785         &.youtube a::before { content: "\f16a"; }
 786         &.soundcloud a::before { content: "\f1be"; }
 787         &.mixcloud a::before { content: "\f289"; }
 788         &.bandcamp a::before { content: "\f2d5"; }
 789         &.whatsapp a::before { content: "\f232"; }
 790 }
 791
 792 .main-sound {
 793         margin: 1em 0;
 794 }
 795
 796 .bottom-line {
 797         display: flex;
 798         justify-content: space-between;
 799         position: relative;
 800         .share {
 801                 .share-label {
 802                         background: white;
 803                         cursor: pointer;
 804                         border: 2px solid black;
 805                         font-weight: bold;
 806                         width: 4rem;
 807                         &.icon-check {
 808                                 background: black;
 809                                 color: white;
 810                         }
 811                 }
 812                 ul {
 813                         display: none;
 814                         width: 4rem;
 815                         text-align: center;
 816                         background: white;
 817                         position: absolute;
 818                         bottom: 1.7em;
 819                         li {
 820                                 margin-right: 0;
 821                                 width: 4rem;
 822                                 a {
 823                                         height: auto;
 824                                         width: auto;
 825                                         display: block;
 826                                         margin-right: 0;
 827                                         &::before {
 828                                                 padding: 3px;
 829                                         }
 830                                 }
 831                         }
 832                 }
 833         }
 834 }
 835
 836 #chat-window {
 837         box-sizing: border-box;
 838         box-shadow: 0 0px 10px 5px #333;
 839         display: flex;
 840         position: fixed;
 841         z-index: 1000;
 842         padding: 1em;
 843         top: 80px;
 844         right: 0px;
 845         width: 500px;
 846         height: calc(100vh - 80px);
 847         @media screen and (max-width: 600px) {
 848                 width: auto;
 849                 left: 0;
 850                 top: 100px;
 851                 height: calc(100vh - 100px);
 852         }
 853         background: white;
 854         display: flex;
 855         flex-direction: column;
 856         justify-content: flex-end;
 857         .nick {
 858                 position: absolute;
 859                 top: 0;
 860                 right: 0;
 861                 left: 0;
 862                 bottom: 0;
 863                 display: flex;
 864                 flex-direction: column;
 865                 justify-content: center;
 866                 * {
 867                         margin: 0.5em 5rem;
 868                         font-size: 18px;
 869                 }
 870         }
 871         button {
 872                 border: 2px solid black;
 873                 font-weight: bold;
 874                 text-transform: uppercase;
 875         }
 876         .commands {
 877                 display: flex;
 878                 align-items: baseline;
 879                 flex-wrap: wrap;
 880                 span.prompt {
 881                         overflow: hidden;
 882                         text-overflow: ellipsis;
 883                         width: 100%;
 884                 }
 885                 span, input {
 886                         margin-right: 1em;
 887                 }
 888                 input {
 889                         flex: 1;
 890                         font-size: 100%;
 891                         border: 1px solid black;
 892                 }
 893         }
 894         .moderation + .commands span.prompt::after {
 895                 content: " ✅";
 896         }
 897         #chat {
 898                 display: flex;
 899                 flex: 1;
 900                 margin-bottom: 1em;
 901                 flex-direction: column-reverse;
 902                 overflow: hidden;
 903
 904                 div.msg {
 905                         position: relative;
 906                         margin-bottom: 1ex;
 907                         transition: opacity 1s ease;
 908                         display: flex;
 909                         flex-direction: column;
 910                         border: 1px solid black;
 911                         border-radius: 10px;
 912                         padding: 5px;
 913                         &.new {
 914                                 opacity: 0;
 915                         }
 916                         &.msg-out span.content {
 917                                 font-size: 90%;
 918                                 color: #444;
 919                         }
 920                         &.info {
 921                                 border: none;
 922                                 span.content {
 923                                         padding-left: 1rem;
 924                                         font-style: italic;
 925                                         color: #666;
 926                                 }
 927                         }
 928                         &.info.joined {
 929                                 display: none;
 930                         }
 931
 932                         span.content {
 933                                 display: block;
 934                         }
 935
 936                         span.from {
 937                                 order: 1;
 938                                 padding-top: 3px;
 939                                 display: inline-block;
 940                                 max-width: 10em;
 941                                 overflow: hidden;
 942                                 text-overflow: ellipsis;
 943                                 color: #888;
 944                                 font-size: 80%;
 945                         }
 946
 947                 }
 948
 949                 &.moderation div.msg {
 950                         span.from {
 951                                 cursor: pointer;
 952                         }
 953                 }
 954
 955         }
 956 }
 957
 958 .leaflet-container .leaflet-control-attribution a {
 959         color: black;
 960         font-weight: bold;
 961 }
 962
 963 #grid {
 964         @media screen and (max-width: 600px) {
 965                 max-width: 100%;
 966                 overflow-x: scroll;
 967         }
 968 }
 969
 970 .calendar-weeks table,
 971 #grid > table {
 972         width: 100%;
 973         min-width: 800px;
 974         table-layout: fixed;
 975         border-collapse: collapse;
 976         border-spacing: 0;
 977         border: 2px solid white;
 978         background: repeating-linear-gradient(45deg, white 0px, white 40px, black 40px, black 80px);
 979         td, th {
 980                 border-spacing: 0;
 981                 border-collapse: collapse;
 982                 vertical-align: middle;
 983         }
 984         th {
 985                 border: 2px solid black;
 986         }
 987         th.day {
 988                 padding: 0.8em 0 0.5em 0;
 989                 text-transform: uppercase;
 990                 background: white;
 991         }
 992         td.corner,
 993         th.corner,
 994         th.heure {
 995                 font-weight: normal;
 996                 font-size: 80%;
 997                 border: none;
 998         }
 999         td.cell {
1000                 border: 2px solid black;
1001                 border-color: black;
1002                 text-align: center;
1003                 padding: 0.5em;
1004                 background: white;
1005                 &.empty,
1006                 &.nonstop {
1007                         padding: 0.1em;
1008                         border: none;
1009                         background: transparent;
1010                 }
1011                 span {
1012                         word-break: normal;
1013                         overflow-wrap: break-word;
1014                         overflow-wrap: anywhere;
1015                         hyphens: auto;
1016                 }
1017         }
1018         td.sidebug {
1019                 width: 0;
1020         }
1021         .time-label, .week-no-string {
1022                 font-size: 80%;
1023         }
1024 }
1025
1026 #grid > table {
1027         margin-top: 2em;
1028         td.corner,
1029         th.heure {
1030                 display: none;
1031         }
1032 }
1033
1034 .calendar-weeks {
1035         h3 {
1036                 margin-top: 2em;
1037                 margin-bottom: 0;
1038         }
1039         table {
1040                 margin-top: 0.5em;
1041         }
1042 }
1043
1044 #subscribe-form {
1045         display: flex;
1046         input {
1047                 margin-right: 1em;
1048                 &:focus-visible {
1049                         outline: 2px solid black;
1050                         outline-offset: 1px;
1051                 }
1052         }
1053         input, button {
1054                 font-size: 20px;
1055                 padding: 2px;
1056         }
1057         input {
1058                 border: 2px solid transparent;
1059                 border-bottom: 2px ridge black;
1060                 width: 20em;
1061                 max-width: 100%;
1062         }
1063         button {
1064                 @extend %button;
1065                 padding: 0.2em 0.2em 0.2em 0.2em;
1066                 text-decoration: none;
1067         }
1068         &.error {
1069                 input,
1070                 button {
1071                         border-color: red;
1072                 }
1073         }
1074 }
1075
1076 /* disable tags for now, add fake <div> for layout purpose */
1077 .tags-will-be-here {
1078         height: 0.5em;
1079 }