diff --git a/common/text-level-modifiers/index.json-ld b/common/text-level-modifiers/index.json-ld new file mode 100644 index 000000000..728d15fe3 --- /dev/null +++ b/common/text-level-modifiers/index.json-ld @@ -0,0 +1,34 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Text-level Modifiers", + "fr": "Modificateurs de niveau de texte" + }, + "description": { + "en": "Text-level modifiers for styling and formatting", + "fr": "Modificateurs de niveau de texte pour le style et le formatage" + }, + "modified": "2023-07-20", + "componentName": "text-level-modifiers", + "status": "stable", + "pages": { + "docs": [ + { + "title": "Text-level Modifiers", + "language": "en", + "path": "text-level-modifiers-en.html" + }, + { + "title": "Modificateurs de niveau de texte", + "language": "fr", + "path": "text-level-modifiers-fr.html" + } + ] + } +} diff --git a/common/text-level-modifiers/text-level-modifiers-en.html b/common/text-level-modifiers/text-level-modifiers-en.html new file mode 100644 index 000000000..ff314c11a --- /dev/null +++ b/common/text-level-modifiers/text-level-modifiers-en.html @@ -0,0 +1,84 @@ +--- +{ + "title": "Text-Level Modifiers", + "language":"en", + "altLangPage":"text-level-modifiers-fr.html", + "breadcrumbs": + [ + { + "title": "GCWeb home", + "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" + } + ], + "secondlevel": false, + "dateModified": "2023-07-20", + "share": "true" +} +--- + +

CSS Class

+
+
.stretched-link
+
Works in conjunction with position-relative for its stretch limit
+
.small
+
Decreases the font size of the element
+
mark
+
Highlights the text
+
.lead
+
Increases the font size and line height
+
[class*=text-]
+
Changes the color of the text
+
.no-wrap
+
Prevents the text from wrapping
+
.fnt-nrml
+
Resets the font size to the default
+
+
+
+
+
+

Appearance

+

+ Example 1: Stretched link +

+

+ Example 2: Small text +

+

+ Example 3: Highlighted text +

+

+ Example 4: Lead text +

+

+ Example 5: Primary text color +

+

+ Example 6: No wrap +

+

+ Example 7: Normal font size +

+
+
+
+
+

Code

+ 
// Example 1:
+					<p class="stretched-link">...</p>
+ 
// Example 2:
+					<p class="small">...</p>
+ 
// Example 3:
+					<p class="mark">...</p>
+ 
// Example 4:
+					<p class="lead">...</p>
+ 
// Example 5:
+					<p class="text-primary">...</p>
+ 
// Example 6:
+					<p class="no-wrap">...</p>
+ 
// Example 7:
+					<p class="fnt-nrml">...</p>
+
+
+
+
diff --git a/common/text-level-modifiers/text-level-modifiers-fr.html b/common/text-level-modifiers/text-level-modifiers-fr.html new file mode 100644 index 000000000..a08afc582 --- /dev/null +++ b/common/text-level-modifiers/text-level-modifiers-fr.html @@ -0,0 +1,84 @@ +--- +{ + "title": "Modificateurs de niveau de texte", + "language": "fr", + "altLangPage": "text-level-modifiers-en.html", + "breadcrumbs": + [ + { + "title": "Accueil GCWeb", + "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" + } + ], + "secondlevel": false, + "dateModified": "2023-07-20", + "share": "true" +} +--- + +

Classe CSS

+
+
.stretched-link
+
Fonctionne en conjonction avec position-relative pour sa limite d'étirement
+
.small
+
Diminue la taille de la police de l'élément
+
mark
+
Met en évidence le texte
+
.lead
+
Augmente la taille de la police et la hauteur de ligne
+
[class*=text-]
+
Change la couleur du texte
+
.no-wrap
+
Empêche le texte de s'enrouler
+
.fnt-nrml
+
Réinitialise la taille de la police à la valeur par défaut
+
+
+
+
+
+

Apparence

+

+ Exemple 1: Lien étiré +

+

+ Exemple 2: Texte petit +

+

+ Exemple 3: Texte en évidence +

+

+ Exemple 4: Texte principal +

+

+ Exemple 5: Couleur du texte primaire +

+

+ Exemple 6: Pas d'enroulement +

+

+ Exemple 7: Taille de police normale +

+
+
+
+
+

Code

+ 
// Exemple 1:
+					<p class="stretched-link">...</p>
+ 
// Exemple 2:
+					<p class="small">...</p>
+ 
// Exemple 3:
+					<p class="mark">...</p>
+ 
// Exemple 4:
+					<p class="lead">...</p>
+ 
// Exemple 5:
+					<p class="text-primary">...</p>
+ 
// Exemple 6:
+					<p class="no-wrap">...</p>
+ 
// Exemple 7:
+					<p class="fnt-nrml">...</p>
+
+
+
+