add sectioned template

assets/css/src/calendar-strip.css

@@ -2,12 +2,9 @@
   --padding-vertical: calc(var(--space-m) / 2);
   position: relative;
   background-color: var(--color-yellow);
-  box-sizing: border-box;
   width: 100%;
   display: flex;
   align-items: center;
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 .calendar-strip__selector {

assets/css/src/callout.css

@@ -4,8 +4,6 @@ section.callout {
   display: flex;
   flex-direction: column;
   align-items: center;
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 section.callout h4 {

assets/css/src/collapsable-section.css

@@ -0,0 +1,19 @@
+.collapsable-sections {
+  background-color: var(--color-yellow);
+}
+
+.collapsable button.toggle {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+}
+
+.collapsable__content {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.5s ease-in-out;
+}
+.collapsable__content {
+  max-height: 100%;
+  overflow: hidden;
+}

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

@@ -0,0 +1,21 @@
+section.key-infos {
+  width: 100%;
+}
+
+section.key-infos ul {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
+section.key-infos p {
+  display: inline;
+}
+
+section.key-infos .key-infos__key {
+  color: var(--color-accent);
+}
+
+section.key-infos .key-infos__key:not(:last-child) {
+  margin-right: 3rem;
+}

assets/css/src/event-presentation.css

@@ -0,0 +1,21 @@
+.presentation {
+  display: grid;
+  grid-template-columns: 1.5fr 1fr;
+  column-gap: 1rem;
+}
+
+.presentation__title {
+  margin-bottom: calc(var(--space-m) / 2);
+}
+
+.presentation__authors {
+  color: var(--color-accent);
+}
+
+.presentation__chapo {
+  margin: var(--space-m) 0;
+}
+
+.presentation__description {
+  font-size: var(--font-size-s);
+}

assets/css/src/newsletter.css

@@ -1,8 +1,6 @@
 section.newsletter {
   --padding-vertical: var(--space-m);
   background-color: var(--color-brown-light);
-  border-top: var(--border);
-  border-bottom: var(--border);
 }
 
 section.newsletter h2 {
@@ -23,7 +21,7 @@ section.newsletter form > *:last-child {
 }
 
 section.newsletter form input {
-  border-bottom: 1px solid #000;
+  border-bottom: var(--border);
   padding-bottom: var(--space-vertical);
   width: 100%;
 }

assets/css/src/text.css

@@ -10,7 +10,7 @@
 }
 body {
   font-family: "Joker", sans-serif;
-  font-size: var(--font-size-body);
+  font-size: var(--font-size-m);
 }
 
 h1,

assets/css/src/vanilla.css

@@ -1,7 +1,12 @@
-section,
+section:not(.collapsable),
 footer {
+  box-sizing: border-box;
   padding: var(--padding-vertical) var(--space-m);
 }
+section:not(:last-child) {
+  border-bottom: var(--border);
+}
+
 picture {
   background-color: #ddd;
   display: flex !important;

assets/css/src/variables.css

@@ -1,7 +1,9 @@
 :root {
   --border: 1px solid #000;
 
-  --font-size-body: 1.25rem;
+  --font-size-s: 1rem;
+  --font-size-m: 1.25rem;
+
   --font-size-h5: 1.5625rem;
   --font-size-h4: 1.5625rem;
   --font-size-h3: 1.5625rem;