src/css/styles_de_paragraphes.scss

@@ -19,18 +19,22 @@
 	margin: 0;
 }
 
+.main-title,.main-pre-title{
+	display: inline;
+	padding: 0.2cm 0.2cm;
+	background-color: white;
+	box-shadow: 0.2cm 0px 0px white, 0.2cm 0px 0px white;
+	box-decoration-break: clone;
+}
 .main-title {
 	font-family: "Duke POPSU";
 	font-weight: inherit;
 	font-size: 60pt;
-	line-height: 42pt;
+	line-height: 52pt;
 	margin: 0;
 	padding: 0;
-	background-color: white;
 }
 
-
-
 .main-sub-title {
 	font-family: "Texa";
 	font-weight: 800;
@@ -47,7 +51,6 @@
 	margin-top: 0;
 	padding-top: 0;
 	width: 250px;
-	background-color: white;
 }
 
 .table-of-content {
@@ -125,12 +128,16 @@
 	// hanging-punctuation: first last;
 }
 
+
 .section-title {
 	font-family: "TextaAlt";
 	font-weight: 800;
 	font-size: 12pt;
 	text-transform: uppercase;
 }
+.layout:nth-child(odd) .section-title:not(.still){
+	text-align: right;
+}
 
 .section-content {
 	hyphens: auto;
@@ -208,7 +215,6 @@ blockquote{
     padding: 0.2cm 0.2cm;
 
 		background-color: white;
-
 	  box-shadow: 0.2cm 0px 0px white, 0.2cm 0px 0px white;
 	  box-decoration-break: clone;
 

src/pages/Index.vue

@@ -2,10 +2,13 @@
 <Layout>
   <!-- Mise en page -->
   <!-- introductions -->
-  <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
-    <VueMarkdown class="intro">{{edge.node.contenu}}
-    </VueMarkdown>
+  <div class="v-center grow">
+    <div v-for="edge in $page.introductions.edges.slice().reverse()" :key="`introductions${edge.node.id}`">
+      <VueMarkdown class="intro">{{edge.node.contenu}}
+      </VueMarkdown>
+    </div>
   </div>
+
   <div class="blank-page no-folio fill-motif-cross-left" />
   <!-- Auteurs, titre, sous-titre -->
   <div class="column no-folio">
@@ -17,8 +20,11 @@
         {{auteur}}
       </div>
       <div class="v-center grow">
-        <h1 class="main-title center highlight-white" v-html="$static.metadata.title" />
-        <h2 class="main-pre-title center highlight-white" v-html="$static.metadata.subtitle" />
+        <div class="center">
+          <h1 class="main-title center highlight-white" v-html="$static.metadata.title" />
+          </br>
+          <h2 class="main-pre-title center highlight-white" v-html="$static.metadata.subtitle" />
+        </div>
       </div>
       <div class="center">
         <img src="/logo_popsu.png" alt="" style="width:2cm;">
@@ -29,7 +35,7 @@
   <div class="column image-cover image-bleed" v-bind:style='{ backgroundImage: `url(https://popsu-rouen-en.strapi.figli.io/uploads/50424a6a43e44551a4faa699f8ef3caa.JPEG)`, }' />
   <!-- Sommaire -->
   <div class="column">
-    <div class="section-title">
+    <div class="section-title still">
       Sommaire
     </div>
     <div class="column justify-end table-of-content">
@@ -42,10 +48,18 @@
       </span>
     </div>
   </div>
-  <div class="blank-page" />
+  <div class="blank-page no-folio" />
   <!-- Chapitres -->
-  <div v-for="edge in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
-    <h2 :id="`chapitres${edge.node.id}`" class="chapter-title canbreak">{{edge.node.Titre}}</h2>
+  <div v-for="(edge,index) in $page.chapitres.edges.slice().reverse()" :key="`chapitre${edge.node.id}`">
+    <div v-if="edge.node.Rubrique">
+      <div class="section-title" :class="{breakBefore: index != 0}">
+        {{edge.node.Rubrique}}
+      </div>
+      <h2 :id="`chapitres${edge.node.id}`" class="chapter-title ">{{edge.node.Titre}}</h2>
+    </div>
+    <div v-else>
+      <h2 :id="`chapitres${edge.node.id}`" class="chapter-title breakBefore">{{edge.node.Titre}}</h2>
+    </div>
     <VueMarkdown class="chapter-content justify">{{edge.node.Contenu}}
     </VueMarkdown>
   </div>
@@ -107,14 +121,14 @@ export default {
             legend.classList.add("legend");
             legend.innerHTML = found.legende;
             legend.id = `legend-${img_id}`;
-            if(found.double){
+            if (found.double) {
               let clone = img.parentNode.cloneNode(true);
               clone.classList.add("breakBefore");
               clone.querySelector("img").id += "-end";
               img.parentNode.insertBefore(clone, img.previousSibling);
               clone.parentNode.insertBefore(legend, clone.nextSibling);
 
-            }else{
+            } else {
               img.parentNode.insertBefore(legend, img.nextSibling);
             }
             resolve();
@@ -129,8 +143,6 @@ export default {
     });
   }
 };
-
-
 </script>
 
 <page-query>
@@ -153,6 +165,7 @@ export default {
           Titre
           Contenu
           alternatif
+          Rubrique
         }
       }
     }