CSS > Page event

assets/css/src/_fonts.scss

@@ -32,3 +32,11 @@
   font-weight: 500;
   font-style: normal;
 }
+
+@font-face {
+  font-family: "SancySlab";
+  src: url("/assets/fonts/for-sancyslabunlicensedtrial-italic.otf") format("opentype");
+  font-weight: normal;
+  font-style: italic;
+}
+

assets/css/src/_global.scss

@@ -18,18 +18,22 @@ html {
 }
 
 body {
-  background-color: var(--color-green);
-  font-family: "SancySlab", serif;
+  font-family: var(--font-serif);
+}
+
+main{
+  p, ul{
+width: 40em;
+margin: auto;
+   max-width: 100% ;
+  }
+
 }
 
 button {
   cursor: pointer;
 }
 
-main {
-  background-color: var(--color-beige);
-}
-
 img {
   display: block;
   border-radius: 1rem;
@@ -38,3 +42,7 @@ img {
 picture {
   display: block;
 }
+
+summary{
+  cursor: pointer;
+}

assets/css/src/_header.scss

@@ -8,9 +8,8 @@
 
   z-index: 4;
 
-  font-size: var(--menu-font-size);
-  font-family: var(--menu-font);
-  font-weight: 600;
+  font-size: var(--font-size-L);
+  font-family: var(--font-serif);
 
   &.small {
     .characters svg {
@@ -37,10 +36,8 @@
     position: relative;
     button {
       display: none;
-      font-family: "Bartok", sans-serif;
-      text-transform: uppercase;
-      font-size: 2rem;
-      font-weight: 600;
+      font-family: var(--font-serif);
+      font-size: var(--font-size-L);
     }
   }
 
@@ -66,8 +63,9 @@
     box-sizing: border-box;
     text-align: center;
     position: absolute;
-    font-family: "Bartok", sans-serif;
+    font-family: var(--font-sans-serif);
     font-size: 6rem;
+    font-weight: 600;
     text-transform: uppercase;
     line-height: 0.8;
     z-index: -1;
@@ -81,6 +79,10 @@
     inset: 0;
     z-index: 1;
 
+    padding: 2rem;
+
+    border-right: var(--border);
+    border-left: var(--border);
     border-bottom: var(--border);
     border-radius: 0 0 var(--border-radius) var(--border-radius);
   }

assets/css/src/_reset.scss

@@ -1,3 +1,7 @@
+*{
+  font-weight: normal;
+}
+
 body,
 html,
 dl,

assets/css/src/_texts.scss

@@ -1,8 +1,9 @@
 article {
   p {
-    font-size: 1.5rem;
+      font-size: var(--font-size-M);
+      line-height: var(--line-height-M);
     &:not(:last-child) {
-      margin-bottom: 1rem;
+      margin-bottom: var(--line-height-M);
     }
   }
 }

assets/css/src/_variables.scss

@@ -1,6 +1,7 @@
 :root {
   --color-green: #0bb786;
   --color-beige: #f3f0e7;
+  --color-grey: #A1A1BB;
   --glow-green: var(--color-green) 0px 0px 30px;
 
   --radius: 1.1rem;
@@ -11,7 +12,14 @@
 
   --curve: cubic-bezier(0.65, 0, 0.35, 1);
 
-  --menu-font: "Bartok", sans-serif;
-  --menu-font-size: 2em;
+  --font-sans-serif: "Bartok", sans-serif;
+  --font-serif: "SancySlab", serif;
+  --font-size-S: 0.8rem;
+  --font-size-M: 1.6rem;
+  --font-size-L: 3rem;
+  --font-size-XL: 8rem;
+  --line-height-M: calc(var(--font-size-M) *1.2);
+  --line-height-XL: 8rem;
+
   --transition-duration: 0.5s;
 }

assets/css/src/pages/_event.scss

@@ -1,6 +1,7 @@
 [data-template="event"] {
   main {
     margin-top: 9.8rem;
+    
 
     .main-infos {
       display: none;
@@ -25,10 +26,96 @@
       box-sizing: border-box;
       width: 100%;
       padding: 2rem;
+    }
 
-      display: grid;
-      grid-template-columns: 2fr 1fr;
-      column-gap: 4rem;
+    .main-credits{
+      text-align: center;
+      padding-top: var(--space-body);
+      dl{
+        padding-bottom: 0.5em;
+      }
+      dt{
+        text-transform: uppercase;
+        font-size: var(--font-size-S);
+      }
+      dd{
+        font-size: var(--font-size-L);
+      }
+    }
+    
+    h1{
+      font-size: var(--font-size-XL);
+      text-align: center;
+      line-height: var(--line-height-XL);
+      padding: var(--space-body) 0;
+    }
+
+    details{
+
+      font-size: var(--font-size-M);
+      border: var(--border);
+      border-radius: var(--border-radius);
+      padding: 2rem ;
+      margin-bottom: calc(-1 *var(--border-radius)*2);
+      summary{
+        list-style: none;
+        padding: 0 2rem 1rem 2rem ;
+        text-align: center;
+        font-size: var(--font-size-L);
+        &::-webkit-details-marker {
+          display: none;
+        }
+      }
+      &::before{
+        content:"→";
+        position: absolute;
+        font-size: var(--font-size-L);
+          pointer-events: none;
+        
+      }
+      &::marker{
+        list-style: none;
+      }
+      
+      &:open{
+        &::before{
+          content: "↓";
+          position: absolute;
+          font-size: var(--font-size-L);
+          pointer-events: none;
+        }
+              padding-bottom: 4rem;
+
+        summary{
+          padding-bottom: 2.5rem;
+
+      }
+      }
+      &.secondary-credits{
+        background-color: var(--color-grey);
+        .wrapper{
+          p{
+          }
+        }
+      }
+      &.dates{
+        background-color: var(--color-beige);
+        ul li {
+          list-style-type: "— ";
+
+        }
+        
+        a.button-link{
+          border-radius: var(--border-radius);
+          border: var(--border);
+          padding: 0.5rem 1rem;
+          margin-top: var(--line-height-M);
+        }
+      }
+      &.presse{
+        background-color: black;
+        color: white;
+      }
     }
   }
 }

site/templates/event.php

@@ -34,14 +34,14 @@
 <?php endif ?>
 
 
-    <?php foreach ($page->mainCredits()->toStructure() as $credit): ?>
-    <div class="main-credits">
+<div class="main-credits">
+      <?php foreach ($page->mainCredits()->toStructure() as $credit): ?>
       <dl>
-        <dt><?= $credit->label() ?></dt>
+        <dt><?= $credit->label() ?>&nbsp;:</dt>
         <dd><?= $credit->value() ?></dd>
       </dl>
+      <?php endforeach ?>
     </div>
-    <?php endforeach ?>
 
 <h1 class="event-title">
   <?= $page->title() ?>
@@ -59,18 +59,19 @@
   <div class="presentation">
     <?= $page->presentation() ?>
   </div>
-  <div class="infos"></div>
 </article>
 
 <details class="secondary-credits">
  <summary>
   Distribution & production
  </summary>
- <?php foreach ($page->secondaryCredits()->toBlocks() as $secondaryCredit): ?>
-    <p>
-      <?= $secondaryCredit ?>
-    </p>
- <?php endforeach ?>
+  <div class="wrapper">
+    <?php foreach ($page->secondaryCredits()->toBlocks() as $secondaryCredit): ?>
+        <p>
+          <?= $secondaryCredit ?>
+        </p>
+    <?php endforeach ?>
+  </div>
 
 </details>
 
@@ -89,8 +90,8 @@ Dates et tournées
     </li>
   </ul>
   <?php endforeach ?>
-
-<a href="<?= page('agenda')->url()?>">Voir l'agenda</a>
+<br>
+<a class="button-link" href="<?= page('agenda')->url()?>">Voir l'agenda</a>
 
 
 </details>