dynamize info banner background color + callour background color

assets/css/src/calendar-strip.css

@@ -36,7 +36,7 @@
   text-align: center;
 }
 .calendar-strip__day button.today {
-  color: var(--color-salmon);
+  color: var(--color-season);
   opacity: 1 !important;
 }
 .calendar-strip__day button span {
@@ -62,14 +62,21 @@
   left: 0;
   top: 100%;
   width: 100%;
-  max-height: 0;
   background-color: #fff;
   z-index: 0;
-  transition: max-height 0.5s ease-in-out;
   border-bottom: var(--border);
+
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: all 0.5s ease-in-out;
 }
+
+.calendar-strip__date > * {
+  overflow: hidden;
+}
+
 .calendar-strip__date.open {
-  max-height: 50rem;
+  grid-template-rows: 1fr;
 }
 
 .calendar-strip .session {

assets/css/src/callout.css

@@ -1,6 +1,6 @@
 section.callout {
   --padding-vertical: var(--space-m);
-  background-color: var(--color-blue-light);
+  background-color: var(--color);
   display: flex;
   flex-direction: column;
   align-items: center;

assets/css/src/event-key-infos.css

@@ -13,7 +13,7 @@ section.key-infos p {
 }
 
 section.key-infos .key-infos__key {
-  color: var(--color-accent);
+  color: var(--color-event);
 }
 
 section.key-infos .key-infos__key:not(:last-child) {

assets/css/src/event-presentation.css

@@ -9,7 +9,7 @@
 }
 
 .presentation__authors {
-  color: var(--color-accent);
+  color: var(--color-event);
 }
 
 .presentation__chapo {

assets/css/src/hero.css

@@ -20,7 +20,7 @@
 }
 
 .hero__text h3 {
-  color: var(--color-salmon);
+  color: var(--color-season);
   font-size: var(--font-size-h2);
 }
 .hero__text h3:nth-child(odd) {

assets/css/src/nav.css

@@ -11,7 +11,7 @@
   overflow: hidden;
   white-space: nowrap;
   border-bottom: var(--border);
-  background-color: var(--color-mint);
+  background-color: var(--color);
 }
 
 .info-banner ul {

assets/css/src/ticket.css

@@ -43,8 +43,8 @@ a:not([disabled]):hover > .ticket svg,
 
 .ticket:not(a[disabled] .ticket):hover svg path:not(.dot),
 a:not([disabled]):hover > .ticket svg path:not(.dot) {
-  fill: var(--color-salmon);
-  stroke: var(--color-salmon);
+  fill: var(--color-season);
+  stroke: var(--color-season);
 }
 a.to-blank:hover > .ticket svg path:not(.dot) {
   fill: #fff;
@@ -56,5 +56,5 @@ a:not([disabled]):hover > .ticket svg path.dot {
   fill: #fff;
 }
 a.to-blank:hover > .ticket svg path.dot {
-  fill: var(--color-salmon);
+  fill: var(--color-season);
 }

assets/css/src/variables.css

@@ -32,7 +32,7 @@
   --color-red: #ff3300;
   --color-duck: #2e8799;
   --color-blue: #009eff;
-  --color-blue-light: #abf1ff;
+  --color-blue-light: #9ef;
   --color-grey: #c4c9cc;
   --color-green: #00b477;
   --color-mint: #45e6ba;

site/blueprints/fields/callout.yml

@@ -0,0 +1,13 @@
+type: group
+fields:
+  calloutHeadline:
+    type: headline
+    label: Brève
+  calloutText:
+    label: Texte
+    type: writer
+    width: 1/2
+  calloutColor:
+    label: Couleur de fond
+    extends: fields/color
+    width: 1/2

site/blueprints/fields/color.yml

@@ -11,6 +11,9 @@ options:
   "#ff3300": Rouge
   "#2e8799": Colvert
   "#009eff": Bleu
+  "#99EEFF": Bleu clair
   "#00b477": Vert
+  "#45e6ba": Menthe
   "#a59478": Brun
+  "#C4C9CC": Gris
   "#fff": Blanc

site/blueprints/pages/season.yml

@@ -6,6 +6,12 @@ tabs:
     label: Calendrier
     icon: calendar
     sections:
+      paramsSection:
+        type: fields
+        fields:
+          color:
+            label: Dominante de la saison
+            extends: fields/color
       seasons:
         label: Événéments
         type: pages

site/blueprints/site.yml

@@ -7,8 +7,14 @@ tabs:
     columns:
       - width: 1/1
         fields:
+          infoBannerHeading:
+            type: headline
+            label: Bannière d'infos
+          infoBannerColor:
+            label: Couleur de fond
+            extends: fields/color
           infoBanner:
-            label: Bannière d'info
+            label: Messages
             type: structure
             help: Affichée en haut de la page d'accueil.
             fields:
@@ -80,14 +86,11 @@ tabs:
               heroMode: custom
       - width: 1/1
         fields:
-          separator2:
+          line:
             type: line
-          calloutHeadline:
-            type: headline
-            label: Brève
-          calloutText:
-            label: Texte
-            type: writer
+      - width: 1/1
+        fields:
+          callout: fields/callout
   navigationTab:
     label: Menu
     icon: bars

site/collections/current-season.php

@@ -0,0 +1,5 @@
+<?php
+
+return function() {
+  return page('programme')->children()->first();
+};

site/snippets/callout.php

@@ -0,0 +1,4 @@
+<section class="callout" style="--color: <?= $color ?>;">
+  <h4><?= $text ?></h4>
+  <a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
+</section>

site/snippets/header.php

@@ -29,13 +29,15 @@
         <script src="<?= url('assets/js/swiper.js') ?>" defer></script>
     <?php endif ?>
     <script src="<?= url('assets/js/script.js') ?>" type="module" defer></script>
-    <?php if ($page->color()->exists()): ?>
-        <style>
-          :root {
-            --color-accent: <?= e($page->color()->isNotEmpty() == 'true', $page->color(), '#000') ?>;
-          }
-        </style>
-    <?php endif ?>
+    
+    <style>
+      :root {
+        <?php if ($page->color()->exists()): ?>
+          --color-event: <?= e($page->color()->isNotEmpty() == 'true', $page->color(), '#000') ?>;
+        <?php endif ?>
+        --color-season: <?= $kirby->collection('current-season')->color() ?>;
+      }
+    </style>
   </head>
   <body data-template="<?= $page->template() ?>">
   <?php if ($page->isHomePage()): ?>

site/snippets/info-banner.php

@@ -1,4 +1,4 @@
-<div class="info-banner">
+<div class="info-banner" style="--color: <?= $site->infoBannerColor() ?>">
   <ul>
 
     <?php 

site/snippets/nav.php

@@ -1,5 +1,4 @@
 <header class="main-header">
-  <div class="main-header__infos-banner"></div>
   <a href="/" title="Aller à l'accueil">
   <nav class="main-nav">
       <h1 class="logo">

site/templates/home.php

@@ -32,9 +32,6 @@
 
 <?php snippet('events-grid', ['title' => 'Prochainement', 'events' => $orderedEvents->slice(2, 3)]) ?>
 
-<section class="callout">
-  <h4><?= $site->callout()->inline() ?></h4>
-  <a class="ticket-link" href="<?= option('ticketingUrl') ?>" target="_blank" title="Aller à la billetterie"><?php snippet('ticket') ?> Billetterie</a>
-</section>
+<?php snippet('callout', ['text' => $site->calloutText()->inline(), 'color' => $site->calloutColor()]) ?>
 
 <?php snippet('footer') ?>