diff --git a/CHANGELOG.md b/CHANGELOG.md index 92320f193..55710021a 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,9 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0. ## Added - Components - Tuiles: Ajout d'une classe card-link-icon pour gerer le link label pour tuile horizontale document et tuile en vedette. +## Changed +- Styles - Typographie: Remplacement de Open Sans par la nouvelle police Montreal. + ## Fixed - Components - Toasts: Ajustement fonction fermeture et styles boutons. diff --git a/build.config.json b/build.config.json index 5c3a32df3..57c4a3135 100755 --- a/build.config.json +++ b/build.config.json @@ -84,6 +84,14 @@ ], "dest" : "public/glyphs/" }, + "fonts": { + "base" : "source/fonts/", + "files": [ + "source/fonts/**/*" + ], + "dest" : "public/fonts/", + "distribution" : "dist/fonts/" + }, "images": { "base" : "source/images/", "files": [ diff --git a/gulpfile.js b/gulpfile.js index 646f2576b..1cb9fea84 100755 --- a/gulpfile.js +++ b/gulpfile.js @@ -147,6 +147,18 @@ function glyphs() { .pipe(dest(config.glyphs.dest)); } +// Fonts: copy +function fonts() { + return src(config.fonts.files) + .pipe(dest(config.fonts.dest)); +} + +// Fonts: Distribution +function fontsDist() { + return src(config.fonts.files) + .pipe(dest(config.fonts.distribution)) +} + // Task: Handle Patternlab Sass function plSass() { return src(config.patternlab.scss.files) @@ -212,6 +224,7 @@ exports.default = series( photoswipe, scripts, glyphs, + fonts, baoVersion ) ) @@ -230,6 +243,7 @@ exports.serve = series( vendorScripts, photoswipe, glyphs, + fonts, scripts, baoVersion ), @@ -244,7 +258,8 @@ exports.distribute = series( parallel( jsDist, images, - cssDist + cssDist, + fontsDist ), sassCopy ) diff --git a/source/_patterns/00-styles/01-couleurs/01-contenu.mustache b/source/_patterns/00-styles/01-couleurs/01-contenu.mustache index ce65bf889..363818453 100755 --- a/source/_patterns/00-styles/01-couleurs/01-contenu.mustache +++ b/source/_patterns/00-styles/01-couleurs/01-contenu.mustache @@ -12,31 +12,19 @@
Open sans - Regular (400) |
+ Montreal - Regulier (400) |
a b c d e f g h i j k l m n o p q r s t u v w x y z |
Open sans - Bold (700) |
+ Montreal - Gras (700) |
a b c d e f g h i j k l m n o p q r s t u v w x y z |
.h1
à .h6
sont disponibles pour utiliser le style des titre sans le balisage.
-Les titres et les classes de titres sont responsives.
\ No newline at end of file
+Les titres et les classes de titres sont responsives.
diff --git a/source/_patterns/00-styles/03-typographie/01-titres.mustache b/source/_patterns/00-styles/03-typographie/01-titres.mustache
new file mode 100755
index 000000000..a7e8acba6
--- /dev/null
+++ b/source/_patterns/00-styles/03-typographie/01-titres.mustache
@@ -0,0 +1,34 @@
+.lead
sur votre paragraphe ou sur un div
qui contient du contenu html.
\ No newline at end of file
+Exemple d'un texte d'amorce. Pour l'utiliser il suffit d'ajouter la classe .lead
sur votre paragraphe ou sur un div
qui contient du contenu html.
diff --git a/source/_patterns/00-styles/03-typography/03-lead.mustache b/source/_patterns/00-styles/03-typographie/03-lead.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/03-lead.mustache
rename to source/_patterns/00-styles/03-typographie/03-lead.mustache
diff --git a/source/_patterns/00-styles/03-typographie/04-paragraph.md b/source/_patterns/00-styles/03-typographie/04-paragraph.md
new file mode 100755
index 000000000..52422b7b3
--- /dev/null
+++ b/source/_patterns/00-styles/03-typographie/04-paragraph.md
@@ -0,0 +1,5 @@
+---
+title: Paragraphe
+---
+
+Exemple d'un simple paragraphe de base.
diff --git a/source/_patterns/00-styles/03-typography/04-paragraph.mustache b/source/_patterns/00-styles/03-typographie/04-paragraph.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/04-paragraph.mustache
rename to source/_patterns/00-styles/03-typographie/04-paragraph.mustache
diff --git a/source/_patterns/00-styles/03-typographie/08-list-unordered.md b/source/_patterns/00-styles/03-typographie/08-list-unordered.md
new file mode 100644
index 000000000..792d43b0e
--- /dev/null
+++ b/source/_patterns/00-styles/03-typographie/08-list-unordered.md
@@ -0,0 +1,5 @@
+---
+title: Liste non ordonnee
+---
+
+Exemple d'une liste non ordonnée de base (ul
).
diff --git a/source/_patterns/00-styles/03-typography/08-list-unordered.mustache b/source/_patterns/00-styles/03-typographie/08-list-unordered.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/08-list-unordered.mustache
rename to source/_patterns/00-styles/03-typographie/08-list-unordered.mustache
diff --git a/source/_patterns/00-styles/03-typographie/09-list-ordered.md b/source/_patterns/00-styles/03-typographie/09-list-ordered.md
new file mode 100644
index 000000000..26b2c7031
--- /dev/null
+++ b/source/_patterns/00-styles/03-typographie/09-list-ordered.md
@@ -0,0 +1,5 @@
+---
+title: Liste ordonnee
+---
+
+Exemple d'une liste ordonnée de base (ol
).
diff --git a/source/_patterns/00-styles/03-typography/09-list-ordered.mustache b/source/_patterns/00-styles/03-typographie/09-list-ordered.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/09-list-ordered.mustache
rename to source/_patterns/00-styles/03-typographie/09-list-ordered.mustache
diff --git a/source/_patterns/00-styles/03-typography/10-list-inline.md b/source/_patterns/00-styles/03-typographie/10-list-inline.md
similarity index 75%
rename from source/_patterns/00-styles/03-typography/10-list-inline.md
rename to source/_patterns/00-styles/03-typographie/10-list-inline.md
index a7e8c5397..be6501ead 100644
--- a/source/_patterns/00-styles/03-typography/10-list-inline.md
+++ b/source/_patterns/00-styles/03-typographie/10-list-inline.md
@@ -1,8 +1,8 @@
---
-title: List Inline
+title: Liste Inline
---
Exemple d'une liste non ordonnée inline
-## Utilisation
+## Utilisation
-Pour utiliser une liste non ordonnée en position inline, il faut inclure la classe .list-inline
sur le <ul>
ainsi que la classe .list-inline-item
sur chacun de ses <li>
.
\ No newline at end of file
+Pour utiliser une liste non ordonnée en position inline, il faut inclure la classe .list-inline
sur le <ul>
ainsi que la classe .list-inline-item
sur chacun de ses <li>
.
diff --git a/source/_patterns/00-styles/03-typography/10-list-inline.mustache b/source/_patterns/00-styles/03-typographie/10-list-inline.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/10-list-inline.mustache
rename to source/_patterns/00-styles/03-typographie/10-list-inline.mustache
diff --git a/source/_patterns/00-styles/03-typography/12-definition-list.md b/source/_patterns/00-styles/03-typographie/12-definition-list.md
similarity index 57%
rename from source/_patterns/00-styles/03-typography/12-definition-list.md
rename to source/_patterns/00-styles/03-typographie/12-definition-list.md
index c5be30e79..d6f2b547f 100644
--- a/source/_patterns/00-styles/03-typography/12-definition-list.md
+++ b/source/_patterns/00-styles/03-typographie/12-definition-list.md
@@ -1,5 +1,5 @@
---
-title: Definition lists
+title: Liste de definition
---
-Liste de définitions de base. Disponible en version small en ajoutant .dl-sm
.
\ No newline at end of file
+Liste de définitions de base. Disponible en version small en ajoutant .dl-sm
.
diff --git a/source/_patterns/00-styles/03-typography/12-definition-list.mustache b/source/_patterns/00-styles/03-typographie/12-definition-list.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/12-definition-list.mustache
rename to source/_patterns/00-styles/03-typographie/12-definition-list.mustache
diff --git a/source/_patterns/00-styles/03-typography/20-link.md b/source/_patterns/00-styles/03-typographie/20-link.md
similarity index 71%
rename from source/_patterns/00-styles/03-typography/20-link.md
rename to source/_patterns/00-styles/03-typographie/20-link.md
index 00f6cbeb2..08090422f 100755
--- a/source/_patterns/00-styles/03-typography/20-link.md
+++ b/source/_patterns/00-styles/03-typographie/20-link.md
@@ -1,7 +1,7 @@
---
-title: Link
+title: Hyperliens
---
Lien par défault.
-Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)
\ No newline at end of file
+Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)
diff --git a/source/_patterns/00-styles/03-typography/20-link.mustache b/source/_patterns/00-styles/03-typographie/20-link.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/20-link.mustache
rename to source/_patterns/00-styles/03-typographie/20-link.mustache
diff --git a/source/_patterns/00-styles/03-typographie/21-links-list-element.md b/source/_patterns/00-styles/03-typographie/21-links-list-element.md
new file mode 100644
index 000000000..bbf104cad
--- /dev/null
+++ b/source/_patterns/00-styles/03-typographie/21-links-list-element.md
@@ -0,0 +1,7 @@
+---
+title: Hyperliens Liste
+---
+
+Hyperlien de type liste.
+
+Disponible en 3 tailles: Medium (default), Small (link-sm) et ExtraSmall (link-xs)
diff --git a/source/_patterns/00-styles/03-typography/21-links-list-element.mustache b/source/_patterns/00-styles/03-typographie/21-links-list-element.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/21-links-list-element.mustache
rename to source/_patterns/00-styles/03-typographie/21-links-list-element.mustache
diff --git a/source/_patterns/00-styles/03-typography/24-links-utilities.md b/source/_patterns/00-styles/03-typographie/24-links-utilities.md
similarity index 84%
rename from source/_patterns/00-styles/03-typography/24-links-utilities.md
rename to source/_patterns/00-styles/03-typographie/24-links-utilities.md
index b3c2dd68e..3132b8d2e 100755
--- a/source/_patterns/00-styles/03-typography/24-links-utilities.md
+++ b/source/_patterns/00-styles/03-typographie/24-links-utilities.md
@@ -1,5 +1,5 @@
---
-title: Links utilities
+title: Utilitaires hyperliens
---
## Utilisation
@@ -10,4 +10,4 @@ Par exemple: .text-danger
## Différence avec [Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors/)
* Les classes des couleurs de dialogues sont uniquement disponibles en version foncé.
-* Le .text-secondary
n'est pas activés.
\ No newline at end of file
+* Le .text-secondary
n'est pas activés.
diff --git a/source/_patterns/00-styles/03-typography/24-links-utilities.mustache b/source/_patterns/00-styles/03-typographie/24-links-utilities.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/24-links-utilities.mustache
rename to source/_patterns/00-styles/03-typographie/24-links-utilities.mustache
diff --git a/source/_patterns/00-styles/03-typography/30-text-utilities.json b/source/_patterns/00-styles/03-typographie/30-text-utilities.json
similarity index 100%
rename from source/_patterns/00-styles/03-typography/30-text-utilities.json
rename to source/_patterns/00-styles/03-typographie/30-text-utilities.json
diff --git a/source/_patterns/00-styles/03-typography/30-text-utilities.md b/source/_patterns/00-styles/03-typographie/30-text-utilities.md
similarity index 84%
rename from source/_patterns/00-styles/03-typography/30-text-utilities.md
rename to source/_patterns/00-styles/03-typographie/30-text-utilities.md
index c77f46a47..5dc518046 100644
--- a/source/_patterns/00-styles/03-typography/30-text-utilities.md
+++ b/source/_patterns/00-styles/03-typographie/30-text-utilities.md
@@ -1,5 +1,5 @@
---
-title: Text utilities
+title: Utilitaires texte
---
## Utilisation
@@ -10,4 +10,4 @@ Par exemple: .text-danger
## Différence avec [Bootstrap](https://getbootstrap.com/docs/4.0/utilities/colors/)
* Les classes des couleurs de dialogues sont uniquement disponibles en version foncé.
-* Le .text-secondary
n'est pas activés.
\ No newline at end of file
+* Le .text-secondary
n'est pas activés.
diff --git a/source/_patterns/00-styles/03-typography/30-text-utilities.mustache b/source/_patterns/00-styles/03-typographie/30-text-utilities.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/30-text-utilities.mustache
rename to source/_patterns/00-styles/03-typographie/30-text-utilities.mustache
diff --git a/source/_patterns/00-styles/03-typography/_heading-sidebar.mustache b/source/_patterns/00-styles/03-typographie/_heading-sidebar.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/_heading-sidebar.mustache
rename to source/_patterns/00-styles/03-typographie/_heading-sidebar.mustache
diff --git a/source/_patterns/00-styles/03-typography/_link-list-element.mustache b/source/_patterns/00-styles/03-typographie/_link-list-element.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/_link-list-element.mustache
rename to source/_patterns/00-styles/03-typographie/_link-list-element.mustache
diff --git a/source/_patterns/00-styles/03-typography/_skip-link.mustache b/source/_patterns/00-styles/03-typographie/_skip-link.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/_skip-link.mustache
rename to source/_patterns/00-styles/03-typographie/_skip-link.mustache
diff --git a/source/_patterns/00-styles/03-typography/_skip-links-section.mustache b/source/_patterns/00-styles/03-typographie/_skip-links-section.mustache
similarity index 100%
rename from source/_patterns/00-styles/03-typography/_skip-links-section.mustache
rename to source/_patterns/00-styles/03-typographie/_skip-links-section.mustache
diff --git a/source/_patterns/00-styles/03-typography/00-fonts.md b/source/_patterns/00-styles/03-typography/00-fonts.md
deleted file mode 100755
index b3c585b97..000000000
--- a/source/_patterns/00-styles/03-typography/00-fonts.md
+++ /dev/null
@@ -1,8 +0,0 @@
----
-title: Fonts
----
-
-La police de caractère utilisé est [Open Sans](https://fonts.google.com/specimen/Open+Sans?selection.family=Open+Sans)
-(Cette police est appelé dans le css)
-
-Nous utilisons **uniquement** les styles regular(400) et bold(700)
\ No newline at end of file
diff --git a/source/_patterns/00-styles/03-typography/01-headings.mustache b/source/_patterns/00-styles/03-typography/01-headings.mustache
deleted file mode 100755
index 108a28439..000000000
--- a/source/_patterns/00-styles/03-typography/01-headings.mustache
+++ /dev/null
@@ -1,34 +0,0 @@
-ul
).
\ No newline at end of file
diff --git a/source/_patterns/00-styles/03-typography/09-list-ordered.md b/source/_patterns/00-styles/03-typography/09-list-ordered.md
deleted file mode 100644
index eee698efb..000000000
--- a/source/_patterns/00-styles/03-typography/09-list-ordered.md
+++ /dev/null
@@ -1,5 +0,0 @@
----
-title: Ordered List
----
-
-Exemple d'une liste ordonnée de base (ol
).
\ No newline at end of file
diff --git a/source/css/scss/_fonts.scss b/source/css/scss/_fonts.scss
new file mode 100644
index 000000000..c9693cad4
--- /dev/null
+++ b/source/css/scss/_fonts.scss
@@ -0,0 +1,39 @@
+// Montreal regulier
+@font-face {
+ font-family: "Montreal";
+ src: url('../fonts/montreal/woff2/Montreal-Web-Regulier.woff2') format('woff2'),
+ url('../fonts/montreal/woff/Montreal-Web-Regulier.woff') format('woff'),
+ url('../fonts/montreal/ttf/Montreal-Web-Regulier.ttf') format('truetype');
+ font-weight: normal;
+ font-style: normal;
+}
+
+// Montreal italique
+@font-face {
+ font-family: "Montreal";
+ src: url('../fonts/montreal/woff2/Montreal-Web-Italique.woff2') format('woff2'),
+ url('../fonts/montreal/woff/Montreal-Web-Italique.woff') format('woff'),
+ url('../fonts/montreal/ttf/Montreal-Web-Italique.ttf') format('truetype');
+ font-weight: normal;
+ font-style: italic;
+}
+
+// Montreal gras
+@font-face {
+ font-family: "Montreal";
+ src: url('../fonts/montreal/woff2/Montreal-Web-Gras.woff2') format('woff2'),
+ url('../fonts/montreal/woff/Montreal-Web-Gras.woff') format('woff'),
+ url('../fonts/montreal/ttf/Montreal-Web-Gras.ttf') format('truetype');
+ font-weight: 700;
+ font-style: normal;
+}
+
+// Montreal gras italique
+@font-face {
+ font-family: "Montreal";
+ src: url('../fonts/montreal/woff2/Montreal-Web-GrasItalique.woff2') format('woff2'),
+ url('../fonts/montreal/woff/Montreal-Web-GrasItalique.woff') format('woff'),
+ url('../fonts/montreal/ttf/Montreal-Web-GrasItalique.ttf') format('truetype');
+ font-weight: 700;
+ font-style: italic;
+}
diff --git a/source/css/scss/_type.scss b/source/css/scss/_type.scss
index 9d3db7ffa..68b6f9bdf 100755
--- a/source/css/scss/_type.scss
+++ b/source/css/scss/_type.scss
@@ -1,5 +1,3 @@
-@import url("https://fonts.googleapis.com/css?family=Open+Sans:400,400i,700,700i");
-
// Font-smoothing normalisation for mac os
body {
-webkit-font-smoothing: antialiased;
diff --git a/source/css/scss/_variables.scss b/source/css/scss/_variables.scss
index 2bda4c54b..5a315508d 100755
--- a/source/css/scss/_variables.scss
+++ b/source/css/scss/_variables.scss
@@ -361,16 +361,16 @@ $backdrop-opacity: .3;
// Font, line-height, and color for body text, headings, and more.
// stylelint-disable value-keyword-case
-$font-family-base: 'Open Sans', Helvetica, Arial, sans-serif;
+$font-family-base: 'Montreal', Helvetica, Arial, sans-serif;
$font-size-base: 1rem; // Assumes the browser default, typically `16px
$font-size-lg: $font-size-base * 1.25; //20px
$font-size-sm: $font-size-base * .875; //14px
$font-size-xs: $font-size-base * .75; //12px
-$font-weight-normal: 400; // Open Sans Regular
+$font-weight-normal: 400; // Montreal Regulier
$font-weight-regular: $font-weight-normal;
-$font-weight-bold: 700; // Open Sans Bold
+$font-weight-bold: 700; // Montreal Gras
$font-weight-base: $font-weight-normal;
$line-height-base: 1.75;
diff --git a/source/css/styles-header-footer-v4.scss b/source/css/styles-header-footer-v4.scss
index c873b79da..5a3acc8e8 100644
--- a/source/css/styles-header-footer-v4.scss
+++ b/source/css/styles-header-footer-v4.scss
@@ -1,3 +1,4 @@
+@import "scss/fonts";
@import "scss/functions";
/*-- VARIABLES --*/
diff --git a/source/css/styles.scss b/source/css/styles.scss
index 8973c7cd0..3f4286102 100755
--- a/source/css/styles.scss
+++ b/source/css/styles.scss
@@ -1,3 +1,4 @@
+@import "scss/fonts";
@import "scss/functions";
@import "bootstrap/scss/functions";
diff --git a/source/fonts/montreal/ttf/Montreal-Web-Gras.ttf b/source/fonts/montreal/ttf/Montreal-Web-Gras.ttf
new file mode 100644
index 000000000..791b6a5ae
Binary files /dev/null and b/source/fonts/montreal/ttf/Montreal-Web-Gras.ttf differ
diff --git a/source/fonts/montreal/ttf/Montreal-Web-GrasItalique.ttf b/source/fonts/montreal/ttf/Montreal-Web-GrasItalique.ttf
new file mode 100644
index 000000000..e3e2dbaaf
Binary files /dev/null and b/source/fonts/montreal/ttf/Montreal-Web-GrasItalique.ttf differ
diff --git a/source/fonts/montreal/ttf/Montreal-Web-Italique.ttf b/source/fonts/montreal/ttf/Montreal-Web-Italique.ttf
new file mode 100644
index 000000000..e4d370360
Binary files /dev/null and b/source/fonts/montreal/ttf/Montreal-Web-Italique.ttf differ
diff --git a/source/fonts/montreal/ttf/Montreal-Web-Regulier.ttf b/source/fonts/montreal/ttf/Montreal-Web-Regulier.ttf
new file mode 100644
index 000000000..5079808d0
Binary files /dev/null and b/source/fonts/montreal/ttf/Montreal-Web-Regulier.ttf differ
diff --git a/source/fonts/montreal/woff/Montreal-Web-Gras.woff b/source/fonts/montreal/woff/Montreal-Web-Gras.woff
new file mode 100644
index 000000000..486d5442e
Binary files /dev/null and b/source/fonts/montreal/woff/Montreal-Web-Gras.woff differ
diff --git a/source/fonts/montreal/woff/Montreal-Web-GrasItalique.woff b/source/fonts/montreal/woff/Montreal-Web-GrasItalique.woff
new file mode 100644
index 000000000..4ab6bbd5d
Binary files /dev/null and b/source/fonts/montreal/woff/Montreal-Web-GrasItalique.woff differ
diff --git a/source/fonts/montreal/woff/Montreal-Web-Italique.woff b/source/fonts/montreal/woff/Montreal-Web-Italique.woff
new file mode 100644
index 000000000..156ca21b7
Binary files /dev/null and b/source/fonts/montreal/woff/Montreal-Web-Italique.woff differ
diff --git a/source/fonts/montreal/woff/Montreal-Web-Regulier.woff b/source/fonts/montreal/woff/Montreal-Web-Regulier.woff
new file mode 100644
index 000000000..357e3fee0
Binary files /dev/null and b/source/fonts/montreal/woff/Montreal-Web-Regulier.woff differ
diff --git a/source/fonts/montreal/woff2/Montreal-Web-Gras.woff2 b/source/fonts/montreal/woff2/Montreal-Web-Gras.woff2
new file mode 100644
index 000000000..cb4b2c36e
Binary files /dev/null and b/source/fonts/montreal/woff2/Montreal-Web-Gras.woff2 differ
diff --git a/source/fonts/montreal/woff2/Montreal-Web-GrasItalique.woff2 b/source/fonts/montreal/woff2/Montreal-Web-GrasItalique.woff2
new file mode 100644
index 000000000..c0d790586
Binary files /dev/null and b/source/fonts/montreal/woff2/Montreal-Web-GrasItalique.woff2 differ
diff --git a/source/fonts/montreal/woff2/Montreal-Web-Italique.woff2 b/source/fonts/montreal/woff2/Montreal-Web-Italique.woff2
new file mode 100644
index 000000000..213432220
Binary files /dev/null and b/source/fonts/montreal/woff2/Montreal-Web-Italique.woff2 differ
diff --git a/source/fonts/montreal/woff2/Montreal-Web-Regulier.woff2 b/source/fonts/montreal/woff2/Montreal-Web-Regulier.woff2
new file mode 100644
index 000000000..b687eb742
Binary files /dev/null and b/source/fonts/montreal/woff2/Montreal-Web-Regulier.woff2 differ