Skip to content

Commit c6d89f3

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

11 files changed

+367
-14
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: 98 additions & 11 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"
@@ -106,18 +158,30 @@
106158
"en": "https://design.canada.ca/styles/typography.html",
107159
"fr": "https://conception.canada.ca/styles/typographie.html"
108160
},
109-
"iteration": "_:iteration_smpt_1",
161+
"iteration": "_:iteration_smpt_2",
110162
"example": [
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"
@@ -172,7 +236,7 @@
172236
},
173237
{
174238
"@id": "_:implement_mpt_gcweb",
175-
"iteration": "_:iteration_mpt_2",
239+
"iteration": "_:iteration_mpt_4",
176240
"name": {
177241
"en": "GCWeb Jekyll",
178242
"fr": "GCWeb Jekyll"
@@ -208,7 +272,7 @@
208272
},
209273
{
210274
"@id": "_:implement_smpt",
211-
"iteration": "_:iteration_smpt_1",
275+
"iteration": "_:iteration_smpt_2",
212276
"name": {
213277
"en": "Standard",
214278
"fr": "Standard"
@@ -244,7 +308,7 @@
244308
},
245309
{
246310
"@id": "_:implement_smpt_gcweb",
247-
"iteration": "_:iteration_smpt_1",
311+
"iteration": "_:iteration_smpt_2",
248312
"name": {
249313
"en": "GCWeb Jekyll",
250314
"fr": "GCWeb Jekyll"
@@ -283,7 +347,7 @@
283347
{
284348
"@id": "_:cs_mpt",
285349
"name": "Default h1",
286-
"baseOnIteration": "_:iteration_mpt_3",
350+
"baseOnIteration": "_:iteration_mpt_4",
287351
"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be 71px (3.55em) long and the thickness should be 3.6px (0.18em), with the color #af3c43.",
288352
"layout": "The line is positioned below the text.",
289353
"semantic": "h1",
@@ -306,7 +370,7 @@
306370
{
307371
"@id": "_:cs_smpt",
308372
"name": "Stacked main page title",
309-
"baseOnIteration": "_:iteration_smpt_1",
373+
"baseOnIteration": "_:iteration_smpt_2",
310374
"detectableBy": "hgroup > h1#wb-cont",
311375
"layout": "The section page title is above the page title. The line is positioned below the page title.",
312376
"semantic": "hgroup > p + h1",
@@ -352,13 +416,36 @@
352416
"fixes": [
353417
"Style: Added left/right/top <code>border-*-width: 0;</code> properties to avoid three-sided borders in Safari &lt;= 15.3."
354418
],
355-
"predecessor": "_:iteration_mpt_2"
419+
"predecessor": "_:iteration_mpt_2",
420+
"successor": "_:iteration_mpt_4"
421+
},
422+
{
423+
"@id": "_:iteration_mpt_4",
424+
"name": "Main page title aligned on the right",
425+
"date": "2024-09",
426+
"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
427+
"additions": [
428+
"Added right to left support"
429+
],
430+
"predecessor": "_:iteration_mpt_3"
431+
356432
},
357433
{
358434
"@id": "_:iteration_smpt_1",
359435
"name": "Stacked main page title - Iteration 1",
360436
"date": "2024-08",
361-
"detectableBy": "hgroup > h1#wb-cont"
437+
"detectableBy": "hgroup > h1#wb-cont",
438+
"successor": "_:iteration_smpt_2"
439+
},
440+
{
441+
"@id": "_:iteration_smpt_2",
442+
"name": "Stacked main page title - Iteration 2 (LTR support)",
443+
"date": "2024-10",
444+
"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
445+
"additions": [
446+
"Added right to left support"
447+
],
448+
"predecessor": "_:iteration_smpt_1"
362449
}
363450
]
364451
}

0 commit comments

Comments
 (0)