diff --git a/README.md b/README.md index 38c15c7..4068f96 100644 --- a/README.md +++ b/README.md @@ -7,37 +7,47 @@ gridsome develop pour lancer le serveur de développement à l'adresse `http://localhost:8080` # En détail ## Installation -### 1 Cloner le projet +1. ### 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 ``` -### 2 Rentrer dans le projet +2. ### 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/ ``` -### 3 Installer les dépendances +3. ### Installer les dépendances ```sh npm install ``` -### 4 Installer gridsome +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". +4. ### 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 ``` -### 5 lancer le serveur +5. ### lancer le serveur ```sh gridsome develop ``` +Après un court temps de construction, ce message devrait se présenter. +```sh +DONE Compiled successfully in 278ms 11:05:45 + Site running at: http://localhost:8080/ + Explore GraphQL data at: http://localhost:8080/___explore +``` Pour visualisez la mise en page, cliquez sur ce lien http://localhost:8080. + ## Fonctionnement 1. Les contenus sont rentrés par le client via Strapi (https://popsu.strapi.figli.io/admin) - **Nom d'utilisateur** : dev - **Mot de Passe** : 7SqHtx4XCSNLKS5b -2. Gridsome recupere le contenu texte et l'integre dans le modèle HTML +2. Gridsome récupère le contenu texte et l'intègre dans le modèle HTML 3. Le modèle HTML est habillé avec le css. + ## Utilisation Ouvrir le dossier popsu_html2print dans Atom pour pouvoir faire des modifications dans le CSS. Pour visualisez la mise en page, ouvrez une page web à l'adresse http://localhost:8080 @@ -50,11 +60,12 @@ Pour visualisez la mise en page, ouvrez une page web à l'adresse http://localho CTRL+C gridsome develop ``` -### Styles + +## Styles +#### Ajouter une police +Pour ajouter une nouvelle font, ajouter le fichier dans le dossier src/fonts, puis referencez la dans le fichier css (src/css/fonts.scss) #### Parametres.scss Fichier utilisé pour réferencer des variables globales utilisables dans tout le projet. *Ex: les marges, tailles du document, gouttieres, taille de police.* -#### Ajouter une police -Pour ajouter une nouvelle font, ajouter le fichier dans le dossier src/fonts, puis referencez la dans le fichier css (src/css/fonts.scss) #### Screen.scss Sert à afficher les pages en vis-à-vis dans le navigateur. diff --git a/src/.temp/now.js b/src/.temp/now.js index 2ecf88b..14cca24 100644 --- a/src/.temp/now.js +++ b/src/.temp/now.js @@ -1 +1 @@ -export default 1563287951865 \ No newline at end of file +export default 1563353261725 \ No newline at end of file diff --git a/src/css/gabarits.scss b/src/css/gabarits.scss index eadfb30..0744598 100644 --- a/src/css/gabarits.scss +++ b/src/css/gabarits.scss @@ -8,6 +8,7 @@ body { @page { size: $largeur $hauteur; margin: $marge; + bleed:$fond-perdu; } @page :left { diff --git a/src/css/layout.scss b/src/css/layout.scss index 5c77c3d..b1afe54 100644 --- a/src/css/layout.scss +++ b/src/css/layout.scss @@ -18,17 +18,17 @@ .image-bleed-left { position: absolute; - width: calc(100% + 3mm); - height: calc(100% + 6mm); - margin-left: -3mm; - margin-top: -3mm; + width: calc(100% + #{$fond-perdu}); + height: calc(100% + #{$fond-perdu} * 2); + margin-left: -$fond-perdu; + margin-top: -$fond-perdu; } .image-bleed-right { position: absolute; - width: calc(100% + 3mm); - height: calc(100% + 6mm); - margin-top: -3mm; + width: calc(100% + #{$fond-perdu}); + height: calc(100% + #{$fond-perdu} * 2); + margin-top: -$fond-perdu; } .image-cover { diff --git a/src/css/parametres.scss b/src/css/parametres.scss index 552a75b..71d7cfa 100644 --- a/src/css/parametres.scss +++ b/src/css/parametres.scss @@ -3,3 +3,4 @@ $largeur: 148mm; $hauteur: 210mm; $marge: 2cm; $font-de-base: 10pt; +$fond-perdu: 3mm; diff --git a/src/css/screen.scss b/src/css/screen.scss index 2ae1cd3..56cb243 100644 --- a/src/css/screen.scss +++ b/src/css/screen.scss @@ -18,4 +18,7 @@ flex: none; box-shadow: 0 0 1px rgba(0,0,0,0.2); } + .pagedjs_bleed { + background-color: lightpink; + } } diff --git a/src/pages/Index.vue b/src/pages/Index.vue index 019fe7b..9454a2e 100644 --- a/src/pages/Index.vue +++ b/src/pages/Index.vue @@ -38,10 +38,13 @@ {{edge.node.contenu}} +

NOTES

  1. {{note}}
+
+