premiers css

user/themes/carnet-atterrissage/css/mep_carnet.css

@@ -1,18 +1,25 @@
+:root {
+  --cols: 8;
+  --rows: 8;
+  --guts: 4mm;
+}
+
 @page {
     size: 165mm 230mm;
-    margin-top: 10mm;
-    margin-bottom: 10mm;
+    margin-top: 8mm;
+    margin-bottom: 16mm;
     bleed: 6mm;
+    color: black;
 }
 
 @page:left {
-  margin-left: 25mm;
-  margin-right: 10mm;
+  margin-left: 16mm;
+  margin-right: 8mm;
 }
 
 @page:right {
-  margin-left: 10mm;
-  margin-right: 25mm;
+  margin-left: 8mm;
+  margin-right: 16mm;
 }
 
 * {
@@ -28,29 +35,49 @@ h3 {
 }
 
 .moment {
+  padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
   display: block;
+  font-size: 11pt;
   font-weight: bold;
-  font-size: 14pt;
+  line-height: 1.1; /* LA IL FAUT AJUSTER CF TEMPS 14 */
 }
 
-.moment p::first-letter {
-  font-size: 24pt;
-}
 
 .moment:first-of-type {
   break-before: left;
 }
 
-.temps {
-	font-size: 10pt;
-  margin-top: -3pt;
-  margin-bottom: 8pt;
+.moment .first-letter {
+  font-size: 18pt;
 }
 
+.temps {
+  padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
+	font-size: 9pt;
+  margin-top: -3pt;
+  margin-bottom: 8pt;
+  font-weight: 500;
+}
+
+.temps:before {
+  content: "> ";
+}
+
+
 .labeur {
+  padding-left: calc(var(--pagedjs-pagebox-width) / var(--cols));
   line-height: 12pt;
-  font-size: 10pt;
-  
+  font-size: 9pt;
+}
+
+.labeur p:before {
+  content: '+ ';
+  font-weight: bold;
+}
+
+.labeur ul {
+  list-style: none;
+  padding-left: 3mm;
 }
 
 img {

user/themes/carnet-atterrissage/fonts/fonts.css

@@ -1,7 +1,7 @@
 @font-face {
     font-family: 'Public';
     src: url('PublicSans/PublicSans-Regular.woff2'), format('woff2');
-    font-weight: regular;
+    font-weight: normal;
 }
 
 @font-face {
@@ -10,3 +10,10 @@
     font-weight: bold;
 }
 
+
+@font-face {
+    font-family: 'Public';
+    src: url('PublicSans/PublicSans-Medium.woff2'), format('woff2');
+    font-weight: 500;
+}
+

user/themes/carnet-atterrissage/templates/default.html.twig

@@ -3,25 +3,30 @@
 {% macro loop(page) %}
     {% for p in page.children.visible %}
         {% set current_page = (p.active or p.activeChild) ? 'selected' : '' %}
-        {% if p.children.visible.count > 0 %}
             <div class="has-children {{ current_page|e }}">
                     {# parent #}
                     <h2>{{ p.menu|e }}</h2>
                     {{ p.content|raw }}
-                <div>
-                    {{ _self.loop(p) }}
-                </div>
+                    {% if p.children.visible.count > 0 %}
+                        <div>
+                            {% for ppage in p.children.visible %}
+                                <h3>{{ ppage.menu|e }}</h3>
+                                {{ ppage.content|raw }}
+                                {% if p.children.visible.count > 0 %}
+                                    <div>
+                                        {% for pppage in ppage.children.visible %}
+                                            <h4>{{ pppage.menu|e }}</h4>
+                                            {{ pppage.content|raw }}
+                                        {% endfor %}
+                                    </div>
+                                {% endif %}
+                            {% endfor %}
+                        </div>
+                    {% endif %}
             </div>
-        {% else %}
-            <div class="{{ current_page|e }}">
-                    {# enfant #}
-                    <h3>{{ p.menu|e }}</h3>
-                    {{ p.content|raw }}
-            </div>
-        {% endif %}
     {% endfor %}
 {% endmacro %}
 
 {% block content %}
     {{ _self.loop(pages) }}
-{% endblock %}
+{% endblock %}

user/themes/carnet-atterrissage/templates/partials/base.html.twig

@@ -48,7 +48,7 @@
     {{ assets.js('bottom')|raw }}
 {% endblock %}
 <script>
-	let content = document.getElementById("body");
+	let content = document.getElementById('body');
 
         content = content.innerHTML.replaceAll("[fullpage2imgs]", '<div class="fullpage2imgs">');
         content = content.replaceAll("[/fullpage2imgs]", '</div>');
@@ -66,6 +66,21 @@
         content = content.replaceAll("[/fullpageimage]", '</div>');
 
         document.getElementById("body").innerHTML = content;
+    
+    let moments = document.getElementsByClassName("moment");
+
+    for(let i = 0; i < moments.length; i++) {
+        moments[i].innerHTML = "<span class='first-letter'>" + moments[i].innerHTML.substring(0, moments[i].innerHTML.indexOf('—')) + "</span>" + moments[i].innerHTML.slice(moments[i].innerHTML.indexOf(' —'));
+    }
+
+    let labeurs = document.getElementsByClassName("labeur");
+    for(let i = 0; i < labeurs.length; i++) {
+        if (labeurs[i].childNodes.length == 1) {
+            labeurs[i].innerHTML = '<p>' + labeurs[i].innerHTML + '</p>';
+        } else {
+            labeurs[i].innerHTML = "<p>" + labeurs[i].innerHTML.replace("<p>", "");
+        }
+    }   
 
 </script>
 </body>