Skip to content

Commit 3ffe290

Browse files
polmihpolmih
committed
Main page title: Short bord red underline - follow the title alignement
1 parent 20b6690 commit 3ffe290

11 files changed

+354
-6
lines changed

‎_data/sites.json‎

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2182,7 +2182,7 @@
21822182
"modified": "2024-08-27",
21832183
"componentName": "main-page-title",
21842184
"status": "stable",
2185-
"version": "1.1.1",
2185+
"version": "1.2",
21862186
"pages": {
21872187
"docs": [
21882188
{
@@ -2216,6 +2216,46 @@
22162216
"title": "Titre principal superposé",
22172217
"language": "fr",
22182218
"path": "main-page-title-stacked-fr.html"
2219+
},
2220+
{
2221+
"title": "Main page title aligned on the right",
2222+
"language": "en",
2223+
"path": "main-page-title-align-right-en.html"
2224+
},
2225+
{
2226+
"title": "Titre principal de la page aligné à droite",
2227+
"language": "fr",
2228+
"path": "main-page-title-align-right-fr.html"
2229+
},
2230+
{
2231+
"title": "Main page title in a div aligned on the right",
2232+
"language": "en",
2233+
"path": "main-page-title-div-align-right-en.html"
2234+
},
2235+
{
2236+
"title": "Titre principal dans une div alignée à droite",
2237+
"language": "fr",
2238+
"path": "main-page-title-div-align-right-fr.html"
2239+
},
2240+
{
2241+
"title": "Stacked main page title in a div aligned on the right",
2242+
"language": "en",
2243+
"path": "main-page-title-div-stacked-align-right-en.html"
2244+
},
2245+
{
2246+
"title": "Titre principal superposé dans une div alignée à droite",
2247+
"language": "fr",
2248+
"path": "main-page-title-div-stacked-align-right-fr.html"
2249+
},
2250+
{
2251+
"title": "Stacked main page title aligned on the right",
2252+
"language": "en",
2253+
"path": "main-page-title-stacked-align-right-en.html"
2254+
},
2255+
{
2256+
"title": "Titre principal superposé aligné à droite",
2257+
"language": "fr",
2258+
"path": "main-page-title-stacked-align-right-fr.html"
22192259
}
22202260
]
22212261
},
@@ -2235,18 +2275,30 @@
22352275
"en": "https://design.canada.ca/styles/typography.html",
22362276
"fr": "https://conception.canada.ca/styles/typographie.html"
22372277
},
2238-
"iteration": "_:iteration_mpt_3",
2278+
"iteration": "_:iteration_mpt_4",
22392279
"example": [
22402280
{
22412281
"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
22422282
"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
2283+
},
2284+
{
2285+
"en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
2286+
"fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
2287+
},
2288+
{
2289+
"en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
2290+
"fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
22432291
}
22442292
],
22452293
"implementation": [
22462294
"_:implement_mpt",
22472295
"_:implement_mpt_gcweb"
22482296
],
22492297
"history": [
2298+
{
2299+
"en": "2024-10 - Right to left support - initial implementation of the variant.",
2300+
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
2301+
},
22502302
{
22512303
"en": "2024-08 - Fixed three-sided border bug in Safari <= 15.3",
22522304
"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari <= 15.3"
@@ -2276,13 +2328,25 @@
22762328
{
22772329
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
22782330
"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
2331+
},
2332+
{
2333+
"en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
2334+
"fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
2335+
},
2336+
{
2337+
"en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
2338+
"fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
22792339
}
22802340
],
22812341
"implementation": [
22822342
"_:implement_smpt",
22832343
"_:implement_smpt_gcweb"
22842344
],
22852345
"history": [
2346+
{
2347+
"en": "2024-10 - Right to left support - initial implementation of the variant.",
2348+
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
2349+
},
22862350
{
22872351
"en": "2024-08 - Initial implementation of the variant.",
22882352
"fr": "2024-01 - Implémentation initiale de la variation."
@@ -2293,7 +2357,7 @@
22932357
"implementation": [
22942358
{
22952359
"@id": "_:implement_mpt",
2296-
"iteration": "_:iteration_mpt_3",
2360+
"iteration": "_:iteration_mpt_4",
22972361
"name": {
22982362
"en": "Standard",
22992363
"fr": "Standard"
@@ -2519,11 +2583,29 @@
25192583
],
25202584
"predecessor": "_:iteration_mpt_2"
25212585
},
2586+
{
2587+
"@id": "_:iteration_mpt_4",
2588+
"name": "Main page title aligned on the right",
2589+
"date": "2024-09",
2590+
"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
2591+
"additions": [
2592+
"Added right to left support"
2593+
]
2594+
},
25222595
{
25232596
"@id": "_:iteration_smpt_1",
25242597
"name": "Stacked main page title - Iteration 1",
25252598
"date": "2024-08",
25262599
"detectableBy": "hgroup > h1#wb-cont"
2600+
},
2601+
{
2602+
"@id": "_:iteration_smpt_2",
2603+
"name": "Stacked main page title - Iteration 2 (LTR support)",
2604+
"date": "2024-10",
2605+
"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
2606+
"additions": [
2607+
"Added right to left support"
2608+
]
25272609
}
25282610
]
25292611
}

‎sites/main-page-title/_base.scss‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,16 @@ h1#wb-cont, hgroup#wb-cont h1 {
99
border-top-width: 0;
1010
}
1111

12+
h1#wb-cont[dir="rtl"], hgroup#wb-cont[dir="rtl"] h1, [dir="rtl"] h1#wb-cont, [dir="rtl"] hgroup#wb-cont h1 {
13+
border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
14+
border-image: linear-gradient(to left, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
15+
border-image-slice: 1;
16+
border-left-width: 0;
17+
border-right-width: 0;
18+
border-top-width: 0;
19+
}
20+
21+
1222
hgroup#wb-cont {
1323
margin-top: 1em;
1424

‎sites/main-page-title/index.json-ld‎

Lines changed: 85 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@
1717
"modified": "2024-08-27",
1818
"componentName": "main-page-title",
1919
"status": "stable",
20-
"version": "1.1.1",
20+
"version": "1.2",
2121
"pages": {
2222
"docs": [
2323
{
@@ -51,6 +51,46 @@
5151
"title": "Titre principal superposé",
5252
"language": "fr",
5353
"path": "main-page-title-stacked-fr.html"
54+
},
55+
{
56+
"title": "Main page title aligned on the right",
57+
"language": "en",
58+
"path": "main-page-title-align-right-en.html"
59+
},
60+
{
61+
"title": "Titre principal de la page aligné à droite",
62+
"language": "fr",
63+
"path": "main-page-title-align-right-fr.html"
64+
},
65+
{
66+
"title": "Main page title in a div aligned on the right",
67+
"language": "en",
68+
"path": "main-page-title-div-align-right-en.html"
69+
},
70+
{
71+
"title": "Titre principal dans une div alignée à droite",
72+
"language": "fr",
73+
"path": "main-page-title-div-align-right-fr.html"
74+
},
75+
{
76+
"title": "Stacked main page title in a div aligned on the right",
77+
"language": "en",
78+
"path": "main-page-title-div-stacked-align-right-en.html"
79+
},
80+
{
81+
"title": "Titre principal superposé dans une div alignée à droite",
82+
"language": "fr",
83+
"path": "main-page-title-div-stacked-align-right-fr.html"
84+
},
85+
{
86+
"title": "Stacked main page title aligned on the right",
87+
"language": "en",
88+
"path": "main-page-title-stacked-align-right-en.html"
89+
},
90+
{
91+
"title": "Titre principal superposé aligné à droite",
92+
"language": "fr",
93+
"path": "main-page-title-stacked-align-right-fr.html"
5494
}
5595
]
5696
},
@@ -70,18 +110,30 @@
70110
"en": "https://design.canada.ca/styles/typography.html",
71111
"fr": "https://conception.canada.ca/styles/typographie.html"
72112
},
73-
"iteration": "_:iteration_mpt_3",
113+
"iteration": "_:iteration_mpt_4",
74114
"example": [
75115
{
76116
"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
77117
"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
118+
},
119+
{
120+
"en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
121+
"fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
122+
},
123+
{
124+
"en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
125+
"fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
78126
}
79127
],
80128
"implementation": [
81129
"_:implement_mpt",
82130
"_:implement_mpt_gcweb"
83131
],
84132
"history": [
133+
{
134+
"en": "2024-10 - Right to left support - initial implementation of the variant.",
135+
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
136+
},
85137
{
86138
"en": "2024-08 - Fixed three-sided border bug in Safari <= 15.3",
87139
"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari <= 15.3"
@@ -111,13 +163,25 @@
111163
{
112164
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
113165
"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
166+
},
167+
{
168+
"en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
169+
"fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
170+
},
171+
{
172+
"en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
173+
"fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
114174
}
115175
],
116176
"implementation": [
117177
"_:implement_smpt",
118178
"_:implement_smpt_gcweb"
119179
],
120180
"history": [
181+
{
182+
"en": "2024-10 - Right to left support - initial implementation of the variant.",
183+
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
184+
},
121185
{
122186
"en": "2024-08 - Initial implementation of the variant.",
123187
"fr": "2024-01 - Implémentation initiale de la variation."
@@ -128,7 +192,7 @@
128192
"implementation": [
129193
{
130194
"@id": "_:implement_mpt",
131-
"iteration": "_:iteration_mpt_3",
195+
"iteration": "_:iteration_mpt_4",
132196
"name": {
133197
"en": "Standard",
134198
"fr": "Standard"
@@ -354,11 +418,29 @@
354418
],
355419
"predecessor": "_:iteration_mpt_2"
356420
},
421+
{
422+
"@id": "_:iteration_mpt_4",
423+
"name": "Main page title aligned on the right",
424+
"date": "2024-09",
425+
"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
426+
"additions": [
427+
"Added right to left support"
428+
]
429+
},
357430
{
358431
"@id": "_:iteration_smpt_1",
359432
"name": "Stacked main page title - Iteration 1",
360433
"date": "2024-08",
361434
"detectableBy": "hgroup > h1#wb-cont"
435+
},
436+
{
437+
"@id": "_:iteration_smpt_2",
438+
"name": "Stacked main page title - Iteration 2 (LTR support)",
439+
"date": "2024-10",
440+
"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
441+
"additions": [
442+
"Added right to left support"
443+
]
362444
}
363445
]
364446
}

‎sites/main-page-title/main-page-title-align-right-en.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
altLangPage: "main-page-title-align-right-fr.html"
3+
dateModified: "2024-09-26"
4+
language: "en"
5+
pageclass: "wb-prettify all-pre"
6+
layout: without-h1
7+
title: "Main page title aligned on the right"
8+
index_json: index.json-ld
9+
breadcrumbs: [
10+
{ "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
11+
]
12+
---
13+
<h1 id="wb-cont" dir="rtl">Main page title aligned on the right</h1>
14+
<p>Main title of a page with a short bold red underline aligned on the right.</p>
15+
16+
<pre><code>
17+
&lt;h1 id="wb-cont" dir="rtl">Main page title aligned on the right&lt;/h1>
18+
&lt;p>Main title of a page with a short bold red underline aligned on the right.&lt;/p>
19+
</code></pre>

‎sites/main-page-title/main-page-title-align-right-fr.md‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
---
2+
altLangPage: "main-page-title-align-right-en.html"
3+
dateModified: "2024-09-26"
4+
language: "fr"
5+
pageclass: "wb-prettify all-pre"
6+
layout: without-h1
7+
title: "Titre principal de la page aligné à droite"
8+
index_json: index.json-ld
9+
breadcrumbs: [
10+
{ "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-fr.html" }
11+
]
12+
---
13+
<h1 id="wb-cont" dir="rtl">Titre principal de la page aligné à droite</h1>
14+
<p>Titre principal d'une page avec un court soulignement rouge en gras aligné à droite.</p>
15+
16+
<pre><code>
17+
&lt;h1 id="wb-cont" dir="rtl">Titre principal de la page aligné à droite&lt;/h1>
18+
&lt;p>Titre principal d'une page avec un court soulignement rouge en gras aligné à droite.&lt;/p>
19+
</code></pre>

‎sites/main-page-title/main-page-title-div-align-right-en.md‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
---
2+
altLangPage: "main-page-title-div-align-right-fr.html"
3+
dateModified: "2024-09-26"
4+
language: "en"
5+
pageclass: "wb-prettify all-pre"
6+
layout: without-h1
7+
title: "Main page title in a div aligned on the right"
8+
index_json: index.json-ld
9+
breadcrumbs: [
10+
{ "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
11+
]
12+
---
13+
14+
<div dir="rtl">
15+
<h1 id="wb-cont">Main page title in a div aligned on the right</h1>
16+
<p>Main page title aligned on the right using dir="rtl" on the parent div</p>
17+
</div>
18+
<pre><code>&lt;div dir="rtl">
19+
&lt;h1 id="wb-cont">Main page title in a div aligned on the right&lt;/h1>
20+
&lt;p>Main page title aligned on the right using dir="rtl" on the parent div&lt;/p>
21+
&lt;div></code></pre>

0 commit comments

Comments
 (0)