Ajout du css clip-path et gestion des fonds avec motifs

README.md

@@ -8,33 +8,33 @@ pour lancer le serveur de développement à l'adresse `http://localhost:8080`
 # En détail
 ## Installation
 
-### Cloner le projet
+#### Cloner le projet
 Ouvrez un terminal et deplacez vous à l'endroit désiré. *(ex: le bureau)*
 ```sh
 cd Desktop/
 git clone https://figureslibres.io/gogs/thibaud_goiffon/popsu_html2print.git
 ```
 
-### Rentrer dans le projet
+#### Rentrer dans le projet
 Le projet vient d'être cloné dans un dossier sur le bureau, mais le terminal se trouve toujours sur le bureau.
 Il faut maintenant se déplacer à la racine du projet.
 ```sh
 cd popsu_html2print/
 ```
 
-### Installer les dépendances
+#### Installer les dépendances
 ```sh
 npm install
 ```
 Un dossier "node_modules" vient d'être ajouté à votre clone du projet. Il est peuplé par les dependances définits dans le fichier "package.json".
 
-### Installer gridsome
+#### Installer gridsome
 L'installation de Gridsome de maniere globale sur votre systeme est nécessaire pour utiliser de nouvelles commandes dans le terminal.
 ```sh
 sudo npm install --g @gridsome/cli
 ```
 
-### lancer le serveur
+#### lancer le serveur
 ```sh
 gridsome develop
 ```

gridsome.server.js

@@ -41,6 +41,18 @@ module.exports = function (api) {
         url: item.image.url,
       })
     }
+    let data_credits = await axios.get('https://popsu.strapi.figli.io/credits')
+    // Ajout des crédits
+    const creditContent = store.addContentType({
+      typeName: 'credits',
+    })
+    for (const item of data_credits.data) {
+      creditContent.addNode({
+        id: item.id,
+        nom: item.nom,
+        role: item.role,
+      })
+    }
 
   })
 }

src/.temp/icons.js

@@ -4,29 +4,9 @@ export default {
   "precomposed": false,
   "touchicons": [
     {
-      "width": 76,
+      "width": 70,
-      "height": 76,
+      "height": 70,
-      "src": "/assets/static/src/favicon.png?width=76"
+      "src": "/assets/static/src/favicon.png?width=70"
-    },
-    {
-      "width": 152,
-      "height": 152,
-      "src": "/assets/static/src/favicon.png?width=152"
-    },
-    {
-      "width": 120,
-      "height": 120,
-      "src": "/assets/static/src/favicon.png?width=120"
-    },
-    {
-      "width": 167,
-      "height": 167,
-      "src": "/assets/static/src/favicon.png?width=167"
-    },
-    {
-      "width": 180,
-      "height": 180,
-      "src": "/assets/static/src/favicon.png?width=180"
     }
   ],
   "favicons": [
@@ -39,11 +19,6 @@ export default {
       "width": 32,
       "height": 32,
       "src": "/assets/static/src/favicon.png?width=32"
-    },
-    {
-      "width": 96,
-      "height": 96,
-      "src": "/assets/static/src/favicon.png?width=96"
     }
   ]
 }

src/.temp/now.js

@@ -1 +1 @@
-export default 1563353261725
+export default 1563464143996

src/css/effets.scss

@@ -2,5 +2,52 @@
 
 .green {
 	background-blend-mode: screen;
-	background-color: green;
+	background-color: rgb(0,161,154);
+}
+
+.fill-green{
+	background-color: rgb(0,161,154);
+	width: calc( 148mm + #{$fond-perdu} * 2);
+	height: calc( 210mm + #{$fond-perdu} * 2);
+	position: absolute;
+	margin-left: calc( -2cm - #{$fond-perdu});
+	margin-top: calc( -2cm - #{$fond-perdu});
+}
+
+.fill-motif{
+	background-size: 0.6cm;
+	width: calc( 148mm + #{$fond-perdu} * 2);
+	height: calc( 210mm + #{$fond-perdu} * 2);
+	position: absolute;
+	margin-left: calc( -2cm - #{$fond-perdu});
+	margin-top: calc( -2cm - #{$fond-perdu});
+	padding: 2cm;
+}
+
+
+.fill-motif-cross-left{
+	@extend .fill-motif;
+	background-image: url("/motifs/croix.png");
+	background-position: right;
+	clip-path: polygon(100% 7%, 83% 12%, 92% 15%, 88% 21%, 86% 38%, 80% 37%, 75% 30%, 77% 27%, 75% 21%, 61% 21%, 69% 18%, 66% 10%, 58% 9%, 55% 3%, 42% 3%, 24% 6%, 22% 11%, 25% 15%, 17% 18%, 15% 23%, 24% 26%, 27% 32%, 22% 40%, 25% 48%, 37% 53%, 49% 49%, 55% 42%, 57% 46%, 56% 55%, 61% 67%, 58% 70%, 41% 65%, 34% 72%, 47% 76%, 51% 81%, 62% 76%, 67% 83%, 67% 89%, 71% 89%, 78% 96%, 97% 94%, 100% 88%, 96% 83%, 100% 82%);
+}
+
+.fill-motif-cross-right{
+	@extend .fill-motif;
+	background-image: url("/motifs/croix.png");
+	background-position: left;
+	clip-path: polygon(0 7%, 15% 10%, 30% 15%, 37% 26%, 53% 32%, 48% 47%, 65% 57%, 64% 62%, 61% 67%, 40% 64%, 40% 71%, 24% 71%, 20% 79%, 0 82%, );
+}
+
+.layer-1{
+	z-index:1;
+}
+
+.layer-2{
+	z-index:2;
+}
+
+.highlight-white{
+	background: white;
+	padding: 1rem 0.8rem;
 }

src/css/parametres.scss

@@ -3,4 +3,4 @@ $largeur: 148mm;
 $hauteur: 210mm;
 $marge: 2cm;
 $font-de-base: 10pt;
-$fond-perdu: 3mm;
+$fond-perdu: 0mm;

src/css/styles_de_paragraphes.scss

@@ -38,6 +38,17 @@
 		font-family: "SGI-TextAlt";
 	}
 }
+.credits{
+	font-size: 9pt;
+	margin-bottom: 6pt;
+	h4{
+		text-transform: uppercase;
+		margin:8pt 0 0 0;
+	}
+	p{
+		margin:0;
+	}
+}
 .chapter-title {
 	font-family: "Cormorant";
 	font-weight: 200;
@@ -79,3 +90,7 @@
 	text-align-last: left !important;
 	hyphens: auto;
 }
+
+h4{
+	margin: 0;
+}

src/pages/Index.vue

@@ -1,29 +1,38 @@
 <template>
   <Layout>
     <!-- Titre, sous-titre -->
-    <div class="blank-page no-folio"></div>
+    <div class="blank-page no-folio fill-green"></div>
     <div class="v-center grow no-folio">
       <h1 class="pre-title center" v-html="$static.metaData.titreDuProjet" />
       <h2 class="pre-sub-title center" v-html="$static.metaData.sousTitre" />
     </div>
-    <div class="blank-page no-folio"></div>
+    <div class="blank-page no-folio fill-motif-cross-left"></div>
     <!-- Auteurs, titre, sous-titre -->
     <div class="column no-folio">
+      <div class="fill-motif-cross-right layer-1">
+
+      </div>
+      <div class="column layer-2">
         <div class="bold center" v-for="auteur in $static.metaData.auteurs">
           {{auteur}}
         </div>
         <div class="v-center grow">
-          <h1 class="main-title center" v-html="$static.metaData.titreDuProjet" />
+          <h1 class="main-title center highlight-white" v-html="$static.metaData.titreDuProjet" />
-          <h2 class="main-pre-title center" v-html="$static.metaData.sousTitre" />
+          <h2 class="main-pre-title center highlight-white" v-html="$static.metaData.sousTitre" />
         </div>
         <div class="center">
-          Logo popsu
+          <img src="/logo_popsu.png" alt="" style="width:2cm;">
         </div>
+
+      </div>
     </div>
     <!-- Page de fond -->
     <div class="column image-cover image-bleed-left" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[1].node.url + ")", }'></div>
     <!-- Sommaire -->
-    <div class="column column">
+    <div class="column">
+      <div class="section-title">
+        Sommaire
+      </div>
     <div class="column justify-end table-of-content">
     <span v-for="edge in $page.chapters.edges.slice().reverse()" :key="'content'+edge.node.id">
         <a :href="'#chapter'+edge.node.id">{{ edge.node.titre }}</a>
@@ -43,8 +52,6 @@
           <li>{{note}}</li>
         </ol>
       <!-- Pleine pages avant les sections -->
-      <div class="blank-page no-folio"></div>
-
       <div class="column image-cover cover-left green image-bleed-left" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
       </div>
       <div class="column image-cover cover-right green image-bleed-right" v-bind:style='{ backgroundImage: "url(https://popsu.strapi.figli.io/" + $page.fonds.edges[0].node.url + ")", }'>
@@ -56,6 +63,12 @@
         <h3 class="section-title" v-bind:class="{ canbreak: isNotFirst(index) }">{{ edge.node.titre }}</h3>
         <VueMarkdown lang="fr" class="section-content justify">{{ edge.node.contenu }}</VueMarkdown>
       </div>
+      <!-- Credits -->
+      <div class="credits" v-for="(edge,index) in $page.credits.edges.slice().reverse()" :key="'credits'+edge.node.id">
+        <h4>{{ edge.node.role }}</h4>
+        <p>{{ edge.node.nom }}</p>
+      </div>
+      <div class="blank-page no-folio fill-green"></div>
   </Layout>
 </template>
 <page-query>
@@ -69,6 +82,9 @@
     fonds : allfonds{
       edges{node{id,url}}
     }
+    credits : allcredits{
+      edges{node{id,nom,role}}
+    }
   }
 </page-query>
 <static-query>