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                         @media screen and (max-width: 600px) {
 287                                 .tags-will-be-here {
 288                                         display: none;
 289                                 }
 290                         }
 291                         .title {
 292                                 display: block;
 293                                 width: 100%;
 294                                 font-size: $font-size-title;
 295                                 font-weight: bold;
 296                         }
 297                 }
 298         }
 299 }
 300
 301 h2 {
 302         border-top: 2px ridge black;
 303         border-bottom: 2px ridge black;
 304         padding: 0.9em 0 0.6em 0;
 305         margin: 1rem 0;
 306 }
 307
 308 #footer, .main > div {
 309         max-width: $inner-width;
 310         margin: 0 auto;
 311         @media screen and (max-width: #{$inner-width + 30px}) {
 312                 padding: 0 1rem;
 313                 font-size: 90%;
 314         }
 315 }
 316
 317 div.program.tabs {
 318         nav ul {
 319                 display: flex;
 320                 list-style: none;
 321                 margin: 1rem 0;
 322                 padding: 0;
 323                 justify-content: space-around;
 324                 li {
 325                         margin: 0;
 326                         padding: 0;
 327                         &.week-arrow {
 328                                 width: 30px;
 329                         }
 330                 }
 331                 button {
 332                         @extend %button;
 333                         font-size: 24px;
 334                         text-transform: capitalize;
 335                         &[disabled] {
 336                                 color: #aaa;
 337                                 border: 2px solid #aaa;
 338                                 cursor: not-allowed;
 339                                 &.active {
 340                                         outline: 2px solid black;
 341                                         background: white;
 342                                 }
 343                         }
 344                 }
 345                 @media screen and (max-width: 600px) {
 346                         li {
 347                                 button {
 348                                         font-size: 14px;
 349                                         border-right: 0;
 350                                 }
 351                                 &.weektab-7 button {
 352                                         border-right: 2px solid black;
 353                                 }
 354                         }
 355                 }
 356
 357                 a.icon-chevron-sign-right,
 358                 a.icon-chevron-sign-left {
 359                         font-family: 'FontAwesome';
 360                         color: inherit;
 361                         text-decoration: none;
 362                         line-height: 36px;
 363                         &.icon-chevron-sign-left::before {
 364                                 content: "\f053";
 365                         }
 366                         &.icon-chevron-sign-right::before {
 367                                 content: "\f054";
 368                         }
 369                 }
 370                 li.week-arrow-next {
 371                         text-align: right;
 372                 }
 373         }
 374 }
 375
 376 ul.program-week {
 377         list-style: none;
 378         margin: 0;
 379         margin-top: 10px;
 380         padding: 0;
 381         border-bottom: 2px ridge black;
 382         margin-bottom: 6em;
 383         li {
 384                 border-top: 2px ridge black;
 385                 padding: 0.7em 0 0.5em 0;
 386                 &.past {
 387                         color: #bbbbbb;
 388                 }
 389                 &.current .programCellTitle {
 390                         font-weight: bold;
 391                 }
 392                 a {
 393                         display: flex;
 394                         .programDate {
 395                                 width: 8em;
 396                         }
 397                         .programCellTitle {
 398                                 margin-left: 1em;
 399                                 flex: 1;
 400                         }
 401                         .programCellSubtitle {
 402                                 flex: 1;
 403                         }
 404                 }
 405         }
 406 }
 407
 408 ul.main-flex,
 409 ul.collection {
 410         margin: 0;
 411         padding: 0;
 412         list-style: none;
 413         display: flex;
 414         flex-wrap: wrap;
 415         justify-content: space-between;
 416         li {
 417                 margin: 0;
 418                 padding: 0;
 419                 width: 32%;
 420                 @media screen and (max-width: 600px) {
 421                         width: 49%;
 422                 }
 423                 .image {
 424                         height: 200px;
 425                         background-color: #ccc;
 426                         background-position: center;
 427                         background-size: cover;
 428                         background-repeat: no-repeat;
 429                 }
 430                 .tags {
 431                         margin-top: 0.8em;
 432                         margin-bottom: 0px;
 433                         font-size: 80%;
 434                 }
 435                 h3 {
 436                         margin-top: 0.2em;
 437                         a {
 438                                 display: block;
 439                                 text-decoration: none;
 440                                 color: inherit;
 441                                 background: url(link.png) bottom left no-repeat;
 442                                 padding-bottom: 30px;
 443                         }
 444                 }
 445         }
 446 }
 447
 448 .episodes ul.collection h3 a {
 449         background: none;
 450         padding-bottom: 0;
 451         span.diffusion-date {
 452                 display: block;
 453                 font-weight: normal;
 454                 font-size: 14px;
 455                 padding-top: 3px;
 456         }
 457 }
 458
 459 .tags {
 460         margin-bottom: 10px;
 461         a {
 462                 text-transform: uppercase;
 463                 color: inherit;
 464                 text-decoration: underline;
 465                 display: inline-block;
 466                 margin-right: 0.6em;
 467         }
 468         &:empty:after {
 469                 content: " ";
 470         }
 471 }
 472
 473 .mehr-button {
 474         margin: 0 auto 4em auto;
 475         text-align: center;
 476         a {
 477                 @extend %button;
 478                 font-size: 24px;
 479                 padding: 0.2em 0.2em 0 0.2em;
 480                 &:active {
 481                         animation: rotating-borders 2s infinite;
 482                 }
 483         }
 484 }
 485
 486 #footer {
 487         border-top: 2px ridge black;
 488         margin-top: 4em;
 489         padding-top: 2em;
 490         nav {
 491                 display: flex;
 492                 background: url(logo-label.png) top left no-repeat;
 493                 justify-content: flex-end;
 494                 min-height: 160px;
 495                 line-height: 1.2em;
 496                 font-weight: bold;
 497                 ul {
 498                         width: 25%;
 499                         list-style: none;
 500                         margin: 0;
 501                         padding: 0;
 502                         &.platforms {
 503                                 text-align: right;
 504                                 li a {
 505                                         display: inline-block;
 506                                         text-align: center;
 507                                         border: 1px solid black;
 508                                         width: 2rem;
 509                                         height: 2rem;
 510                                         &::before {
 511                                                 line-height: 2rem;
 512                                         }
 513                                 }
 514                                 li:last-child {
 515                                         margin-right: 0;
 516                                 }
 517                         }
 518                 }
 519                 @media screen and (max-width: #{$inner-width + 30px}) {
 520                         margin-top: 1em;
 521                 }
 522                 @media screen and (max-width: 600px) {
 523                         background-position: bottom 1em left 0;
 524                         flex-wrap: wrap;
 525                         ul {
 526                                 width: 70%;
 527                                 text-align: right;
 528                                 margin-bottom: 1em;
 529                                 a {
 530                                         display: inline-block;
 531                                         height: 1.7em;
 532                                 }
 533                         }
 534                 }
 535         }
 536 }
 537
 538
 539 @keyframes live-pulse {
 540         0% {opacity: 1;}
 541         50% {opacity: .1;}
 542         100% {opacity: 1;}
 543 }
 544
 545 @keyframes rotating-borders {
 546         0%  {border-left-color: white;}
 547         25% {border-top-color: white;}
 548         50% {border-right-color: white;}
 549         75% {border-bottom-color: white;}
 550 }
 551
 552
 553 #player {
 554         margin-top: 1em;
 555         margin-left: 20px;
 556         audio {
 557                 display: none;
 558         }
 559         font-size: 120%;
 560         #streamSymbol {
 561                 border-radius: 100%;
 562                 background: #fe0000;
 563                 width: 16px;
 564                 height: 16px;
 565                 display: inline-block;
 566                 cursor: pointer;
 567                 animation: live-pulse 2s infinite;
 568                 animation-timing-function: ease;
 569         }
 570         .label {
 571                 cursor: pointer;
 572                 display: inline-block;
 573                 border: 2px solid black;
 574                 text-transform: uppercase;
 575                 font-weight: bold;
 576                 padding: 5px 9px 0 5px;
 577                 &::before {
 578                         font-family: FontAwesome;
 579                         content: "\f04b";
 580                         padding-right: 0.5em;
 581                         display: inline-block;
 582                         width: 16px;
 583                 }
 584         }
 585         #streamSymbol.icon-stop + .label::before,
 586         #streamSymbol.icon-pause + .label::before {
 587                 content: "\f04d";
 588         }
 589         #CurrentlyPlaying {
 590                 margin-top: 1em;
 591                 font-size: 75%;
 592                 @media screen and (max-width: 600px) {
 593                         margin-top: 1.7em;
 594                 }
 595         }
 596         #WhatsOnAir {
 597                 display: block;
 598                 white-space: pre;
 599                 overflow: hidden;
 600                 text-overflow: ellipsis;
 601                 max-width: calc(100vw - 2em);
 602         }
 603 }
 604
 605 .nothing-playing {
 606         #Player {
 607                 opacity: 0.2;
 608                 pointer-events: none;
 609                 #streamSymbol {
 610                         background: #666;
 611                         animation: none;
 612                         cursor: not-allowed;
 613                 }
 614                 .label {
 615                         cursor: not-allowed;
 616                         &::before {
 617                                 content: "\f026";  // volume-off
 618                         }
 619                 }
 620         }
 621         #chat-button {
 622                 opacity: 0.2;
 623                 pointer-events: none;
 624         }
 625 }
 626
 627 #hero {
 628         @extend %hero-width;
 629         .img {
 630                 background-position: center;
 631                 background-size: cover;
 632                 background-repeat: no-repeat;
 633                 display: block;
 634                 @extend %hero-height;
 635         }
 636         margin-bottom: 2em;
 637 }
 638
 639 .inner-page {
 640         h1 {
 641                 margin-top: 0;
 642                 font-size: $font-size-title;
 643                 font-weight: bold;
 644         }
 645         .diffusions {
 646                 margin: 0;
 647         }
 648 }
 649
 650 .innest-page {
 651         position: relative;
 652         width: 80%;
 653         max-width: 700px;
 654         box-sizing: border-box;
 655         margin: 0 auto;
 656         margin-top: 2em;
 657         background: white;
 658         padding: 10px 20px;
 659
 660         @media screen and (max-width: 600px) {
 661                 div.episode-text, div.emission-text, div.bottom-line, div.main-sound, div.more-text {
 662                         /* use more width */
 663                         margin-left: -3em;
 664                         margin-right: -3em;
 665                 }
 666                 div.emission-text {
 667                         margin-top: 4em;
 668                 }
 669                 h1.with-subtitle + div.emission-text {
 670                         /* subtitle -> less margin */
 671                         margin-top: 2em;
 672                 }
 673         }
 674 }
 675
 676 #hero + .inner-page .innest-page {
 677         margin-top: calc(-2em - 100px);
 678 }
 679
 680 .other-emissions {
 681         margin-top: 6em;
 682         border-top: 2px ridge black;
 683         padding-top: 2em;
 684 }
 685
 686 #tag-items h2 {
 687         text-transform: uppercase;
 688 }
 689
 690 #tags ul {
 691         display: flex;
 692         flex-wrap: wrap;
 693         li a {
 694                 @extend %button;
 695                 font-size: 20px;
 696                 padding: 0.2em 0.2em 0 0.2em;
 697                 margin-bottom: 1em;
 698         }
 699 }
 700
 701 a.back {
 702         position: absolute;
 703         right: 20px;
 704         top: 10px;
 705         background: url(back-to-emission.png) top left no-repeat;
 706         width: 50px;
 707         height: 49px;
 708         overflow: hidden;
 709         text-indent: -1000px;
 710 }
 711
 712 .program-page-top {
 713         padding-top: 2em;
 714 }
 715
 716 .event {
 717         width: 100%;
 718         display: flex;
 719         min-height: 200px;
 720         margin-bottom: 20px;
 721         @media screen and (max-width: 600px) {
 722                 flex-direction: column;
 723         }
 724         .image {
 725                 flex: 1;
 726                 margin-right: 10px;
 727                 height: 200px;
 728                 background-color: #ccc;
 729                 background-position: center;
 730                 background-size: cover;
 731                 background-repeat: no-repeat;
 732                 @media screen and (max-width: 600px) {
 733                         width: 100%;
 734                         flex: auto;
 735                         margin-right: 0;
 736                         margin-bottom: 10px;
 737                 }
 738         }
 739         .info {
 740                 flex: 2;
 741                 h3 {
 742                         margin: 0;
 743                         font-size: $font-size-title;
 744                 }
 745                 h4 {
 746                         margin: 0;
 747                         font-size: $font-size-subtitle;
 748                 }
 749         }
 750 }
 751
 752 .sr-only {
 753         position: absolute !important;
 754         width: 1px !important;
 755         height: 1px !important;
 756         padding: 0 !important;
 757         margin: -1px !important;
 758         overflow: hidden !important;
 759         clip: rect(0, 0, 0, 0) !important;
 760         white-space: nowrap !important;
 761         border: 0 !important;
 762 }
 763
 764 .urls {
 765         margin: 2em 0 0 0;
 766 }
 767
 768 .platforms li,
 769 .urls li {
 770         display: inline-block;
 771         margin-right: 1ex;
 772         a {
 773                 &::before {
 774                         font-family: FontAwesome;
 775                         content: "\f0ac";
 776                         width: 1.5em;
 777                         height: 1.5em;
 778                         line-height: 1.5em;
 779                         display: inline-block;
 780                         text-align: center;
 781                 }
 782         }
 783         a span {
 784                 @extend .sr-only;
 785         }
 786         &.facebook a::before { content: "\f09a"; }
 787         &.twitter a::before { content: "\f099"; }
 788         &.instagram a::before { content: "\f16d"; }
 789         &.twitch a::before { content: "\f1e8"; }
 790         &.youtube a::before { content: "\f16a"; }
 791         &.soundcloud a::before { content: "\f1be"; }
 792         &.mixcloud a::before { content: "\f289"; }
 793         &.bandcamp a::before { content: "\f2d5"; }
 794         &.whatsapp a::before { content: "\f232"; }
 795 }
 796
 797 .main-sound {
 798         margin: 1em 0;
 799 }
 800
 801 .bottom-line {
 802         display: flex;
 803         justify-content: space-between;
 804         position: relative;
 805         .share {
 806                 .share-label {
 807                         background: white;
 808                         cursor: pointer;
 809                         border: 2px solid black;
 810                         font-weight: bold;
 811                         width: 4rem;
 812                         &.icon-check {
 813                                 background: black;
 814                                 color: white;
 815                         }
 816                 }
 817                 ul {
 818                         display: none;
 819                         width: 4rem;
 820                         text-align: center;
 821                         background: white;
 822                         position: absolute;
 823                         bottom: 1.7em;
 824                         li {
 825                                 margin-right: 0;
 826                                 width: 4rem;
 827                                 a {
 828                                         height: auto;
 829                                         width: auto;
 830                                         display: block;
 831                                         margin-right: 0;
 832                                         &::before {
 833                                                 padding: 3px;
 834                                         }
 835                                 }
 836                         }
 837                 }
 838         }
 839 }
 840
 841 #chat-window {
 842         box-sizing: border-box;
 843         box-shadow: 0 0px 10px 5px #333;
 844         display: flex;
 845         position: fixed;
 846         z-index: 1000;
 847         padding: 1em;
 848         top: 80px;
 849         right: 0px;
 850         width: 500px;
 851         height: calc(100vh - 80px);
 852         @media screen and (max-width: 600px) {
 853                 width: auto;
 854                 left: 0;
 855                 top: 100px;
 856                 height: calc(100vh - 100px);
 857         }
 858         background: white;
 859         display: flex;
 860         flex-direction: column;
 861         justify-content: flex-end;
 862         .nick {
 863                 position: absolute;
 864                 top: 0;
 865                 right: 0;
 866                 left: 0;
 867                 bottom: 0;
 868                 display: flex;
 869                 flex-direction: column;
 870                 justify-content: center;
 871                 * {
 872                         margin: 0.5em 5rem;
 873                         font-size: 18px;
 874                 }
 875         }
 876         button {
 877                 border: 2px solid black;
 878                 font-weight: bold;
 879                 text-transform: uppercase;
 880         }
 881         .commands {
 882                 display: flex;
 883                 align-items: baseline;
 884                 flex-wrap: wrap;
 885                 span.prompt {
 886                         overflow: hidden;
 887                         text-overflow: ellipsis;
 888                         width: 100%;
 889                 }
 890                 span, input {
 891                         margin-right: 1em;
 892                 }
 893                 input {
 894                         flex: 1;
 895                         font-size: 100%;
 896                         border: 1px solid black;
 897                 }
 898         }
 899         .moderation + .commands span.prompt::after {
 900                 content: " ✅";
 901         }
 902         #chat {
 903                 display: flex;
 904                 flex: 1;
 905                 margin-bottom: 1em;
 906                 flex-direction: column-reverse;
 907                 overflow: hidden;
 908
 909                 div.msg {
 910                         position: relative;
 911                         margin-bottom: 1ex;
 912                         transition: opacity 1s ease;
 913                         display: flex;
 914                         flex-direction: column;
 915                         border: 1px solid black;
 916                         border-radius: 10px;
 917                         padding: 5px;
 918                         &.new {
 919                                 opacity: 0;
 920                         }
 921                         &.msg-out span.content {
 922                                 font-size: 90%;
 923                                 color: #444;
 924                         }
 925                         &.info {
 926                                 border: none;
 927                                 span.content {
 928                                         padding-left: 1rem;
 929                                         font-style: italic;
 930                                         color: #666;
 931                                 }
 932                         }
 933                         &.info.joined {
 934                                 display: none;
 935                         }
 936
 937                         span.content {
 938                                 display: block;
 939                         }
 940
 941                         span.from {
 942                                 order: 1;
 943                                 padding-top: 3px;
 944                                 display: inline-block;
 945                                 max-width: 10em;
 946                                 overflow: hidden;
 947                                 text-overflow: ellipsis;
 948                                 color: #888;
 949                                 font-size: 80%;
 950                         }
 951
 952                 }
 953
 954                 &.moderation div.msg {
 955                         span.from {
 956                                 cursor: pointer;
 957                         }
 958                 }
 959
 960         }
 961 }
 962
 963 .leaflet-container .leaflet-control-attribution a {
 964         color: black;
 965         font-weight: bold;
 966 }
 967
 968 #grid {
 969         @media screen and (max-width: 600px) {
 970                 max-width: 100%;
 971                 overflow-x: scroll;
 972         }
 973 }
 974
 975 .calendar-weeks table,
 976 #grid > table {
 977         width: 100%;
 978         min-width: 800px;
 979         table-layout: fixed;
 980         border-collapse: collapse;
 981         border-spacing: 0;
 982         border: 2px solid white;
 983         background: repeating-linear-gradient(45deg, white 0px, white 40px, black 40px, black 80px);
 984         td, th {
 985                 border-spacing: 0;
 986                 border-collapse: collapse;
 987                 vertical-align: middle;
 988         }
 989         th {
 990                 border: 2px solid black;
 991         }
 992         th.day {
 993                 padding: 0.8em 0 0.5em 0;
 994                 text-transform: uppercase;
 995                 background: white;
 996         }
 997         td.corner,
 998         th.corner,
 999         th.heure {
1000                 font-weight: normal;
1001                 font-size: 80%;
1002                 border: none;
1003         }
1004         td.cell {
1005                 border: 2px solid black;
1006                 border-color: black;
1007                 text-align: center;
1008                 padding: 0.5em;
1009                 background: white;
1010                 &.empty,
1011                 &.nonstop {
1012                         padding: 0.1em;
1013                         border: none;
1014                         background: transparent;
1015                 }
1016                 span {
1017                         word-break: normal;
1018                         overflow-wrap: break-word;
1019                         overflow-wrap: anywhere;
1020                         hyphens: auto;
1021                 }
1022         }
1023         td.sidebug {
1024                 width: 0;
1025         }
1026         .time-label, .week-no-string {
1027                 font-size: 80%;
1028         }
1029 }
1030
1031 #grid > table {
1032         margin-top: 2em;
1033         td.corner,
1034         th.heure {
1035                 display: none;
1036         }
1037 }
1038
1039 .calendar-weeks {
1040         h3 {
1041                 margin-top: 2em;
1042                 margin-bottom: 0;
1043         }
1044         table {
1045                 margin-top: 0.5em;
1046         }
1047 }
1048
1049 #subscribe-form {
1050         display: flex;
1051         input {
1052                 margin-right: 1em;
1053                 &:focus-visible {
1054                         outline: 2px solid black;
1055                         outline-offset: 1px;
1056                 }
1057         }
1058         input, button {
1059                 font-size: 20px;
1060                 padding: 2px;
1061         }
1062         input {
1063                 border: 2px solid transparent;
1064                 border-bottom: 2px ridge black;
1065                 width: 20em;
1066                 max-width: 100%;
1067         }
1068         button {
1069                 @extend %button;
1070                 padding: 0.2em 0.2em 0.2em 0.2em;
1071                 text-decoration: none;
1072         }
1073         &.error {
1074                 input,
1075                 button {
1076                         border-color: red;
1077                 }
1078         }
1079 }
1080
1081 /* disable tags for now, add fake <div> for layout purpose */
1082 .tags-will-be-here {
1083         height: 0.5em;
1084 }