Skip to content

Commit

Permalink
Main page title: Short bord red underline - follow the title alignement
Browse files Browse the repository at this point in the history
  • Loading branch information
polmih committed Oct 15, 2024
1 parent 20b6690 commit 3ffe290
Show file tree
Hide file tree
Showing 11 changed files with 354 additions and 6 deletions.
88 changes: 85 additions & 3 deletions _data/sites.json
Original file line number Diff line number Diff line change
Expand Up @@ -2182,7 +2182,7 @@
"modified": "2024-08-27",
"componentName": "main-page-title",
"status": "stable",
"version": "1.1.1",
"version": "1.2",
"pages": {
"docs": [
{
Expand Down Expand Up @@ -2216,6 +2216,46 @@
"title": "Titre principal superposé",
"language": "fr",
"path": "main-page-title-stacked-fr.html"
},
{
"title": "Main page title aligned on the right",
"language": "en",
"path": "main-page-title-align-right-en.html"
},
{
"title": "Titre principal de la page aligné à droite",
"language": "fr",
"path": "main-page-title-align-right-fr.html"
},
{
"title": "Main page title in a div aligned on the right",
"language": "en",
"path": "main-page-title-div-align-right-en.html"
},
{
"title": "Titre principal dans une div alignée à droite",
"language": "fr",
"path": "main-page-title-div-align-right-fr.html"
},
{
"title": "Stacked main page title in a div aligned on the right",
"language": "en",
"path": "main-page-title-div-stacked-align-right-en.html"
},
{
"title": "Titre principal superposé dans une div alignée à droite",
"language": "fr",
"path": "main-page-title-div-stacked-align-right-fr.html"
},
{
"title": "Stacked main page title aligned on the right",
"language": "en",
"path": "main-page-title-stacked-align-right-en.html"
},
{
"title": "Titre principal superposé aligné à droite",
"language": "fr",
"path": "main-page-title-stacked-align-right-fr.html"
}
]
},
Expand All @@ -2235,18 +2275,30 @@
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
"iteration": "_:iteration_mpt_3",
"iteration": "_:iteration_mpt_4",
"example": [
{
"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
},
{
"en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
"fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
},
{
"en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
"fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
}
],
"implementation": [
"_:implement_mpt",
"_:implement_mpt_gcweb"
],
"history": [
{
"en": "2024-10 - Right to left support - initial implementation of the variant.",
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
},
{
"en": "2024-08 - Fixed three-sided border bug in Safari <= 15.3",
"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari <= 15.3"
Expand Down Expand Up @@ -2276,13 +2328,25 @@
{
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
},
{
"en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
"fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
},
{
"en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
"fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
}
],
"implementation": [
"_:implement_smpt",
"_:implement_smpt_gcweb"
],
"history": [
{
"en": "2024-10 - Right to left support - initial implementation of the variant.",
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
},
{
"en": "2024-08 - Initial implementation of the variant.",
"fr": "2024-01 - Implémentation initiale de la variation."
Expand All @@ -2293,7 +2357,7 @@
"implementation": [
{
"@id": "_:implement_mpt",
"iteration": "_:iteration_mpt_3",
"iteration": "_:iteration_mpt_4",
"name": {
"en": "Standard",
"fr": "Standard"
Expand Down Expand Up @@ -2519,11 +2583,29 @@
],
"predecessor": "_:iteration_mpt_2"
},
{
"@id": "_:iteration_mpt_4",
"name": "Main page title aligned on the right",
"date": "2024-09",
"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
"additions": [
"Added right to left support"
]
},
{
"@id": "_:iteration_smpt_1",
"name": "Stacked main page title - Iteration 1",
"date": "2024-08",
"detectableBy": "hgroup > h1#wb-cont"
},
{
"@id": "_:iteration_smpt_2",
"name": "Stacked main page title - Iteration 2 (LTR support)",
"date": "2024-10",
"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
"additions": [
"Added right to left support"
]
}
]
}
Expand Down
10 changes: 10 additions & 0 deletions sites/main-page-title/_base.scss
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,16 @@ h1#wb-cont, hgroup#wb-cont h1 {
border-top-width: 0;
}

h1#wb-cont[dir="rtl"], hgroup#wb-cont[dir="rtl"] h1, [dir="rtl"] h1#wb-cont, [dir="rtl"] hgroup#wb-cont h1 {
border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
border-image: linear-gradient(to left, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
border-image-slice: 1;
border-left-width: 0;
border-right-width: 0;
border-top-width: 0;
}


hgroup#wb-cont {
margin-top: 1em;

Expand Down
88 changes: 85 additions & 3 deletions sites/main-page-title/index.json-ld
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
"modified": "2024-08-27",
"componentName": "main-page-title",
"status": "stable",
"version": "1.1.1",
"version": "1.2",
"pages": {
"docs": [
{
Expand Down Expand Up @@ -51,6 +51,46 @@
"title": "Titre principal superposé",
"language": "fr",
"path": "main-page-title-stacked-fr.html"
},
{
"title": "Main page title aligned on the right",
"language": "en",
"path": "main-page-title-align-right-en.html"
},
{
"title": "Titre principal de la page aligné à droite",
"language": "fr",
"path": "main-page-title-align-right-fr.html"
},
{
"title": "Main page title in a div aligned on the right",
"language": "en",
"path": "main-page-title-div-align-right-en.html"
},
{
"title": "Titre principal dans une div alignée à droite",
"language": "fr",
"path": "main-page-title-div-align-right-fr.html"
},
{
"title": "Stacked main page title in a div aligned on the right",
"language": "en",
"path": "main-page-title-div-stacked-align-right-en.html"
},
{
"title": "Titre principal superposé dans une div alignée à droite",
"language": "fr",
"path": "main-page-title-div-stacked-align-right-fr.html"
},
{
"title": "Stacked main page title aligned on the right",
"language": "en",
"path": "main-page-title-stacked-align-right-en.html"
},
{
"title": "Titre principal superposé aligné à droite",
"language": "fr",
"path": "main-page-title-stacked-align-right-fr.html"
}
]
},
Expand All @@ -70,18 +110,30 @@
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
"iteration": "_:iteration_mpt_3",
"iteration": "_:iteration_mpt_4",
"example": [
{
"en": { "href": "../../templates/content-page/content-en.html", "text": "Content page (main page title)" },
"fr": { "href": "../../templates/content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
},
{
"en": { "href": "main-page-title-align-right-en", "text": "Main page title aligned on the right" },
"fr": { "href": "main-page-title-align-right-fr.html", "text": "Titre principal de la page aligné à droite" }
},
{
"en": { "href": "main-page-title-div-align-right-en", "text": "Main page title in a div aligned on the right" },
"fr": { "href": "main-page-title-div-align-right-fr.html", "text": "Titre principal dans une div alignée à droite" }
}
],
"implementation": [
"_:implement_mpt",
"_:implement_mpt_gcweb"
],
"history": [
{
"en": "2024-10 - Right to left support - initial implementation of the variant.",
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
},
{
"en": "2024-08 - Fixed three-sided border bug in Safari <= 15.3",
"fr": "2024-08 - Correction d’un bogue de bordure à trois côtés dans Safari <= 15.3"
Expand Down Expand Up @@ -111,13 +163,25 @@
{
"en": { "href": "main-page-title-stacked-en.html", "text": "Stacked main page title" },
"fr": { "href": "main-page-title-stacked-fr.html", "text": "Titre principal superposé" }
},
{
"en": { "href": "main-page-title-stacked-align-right-en", "text": "Stacked main page title aligned on the right" },
"fr": { "href": "main-page-title-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
},
{
"en": { "href": "main-page-title-div-stacked-align-right-en", "text": "Stacked main page title in a div aligned on the right" },
"fr": { "href": "main-page-title-div-stacked-align-right-fr.html", "text": "Titre principal superposé aligné à droite" }
}
],
"implementation": [
"_:implement_smpt",
"_:implement_smpt_gcweb"
],
"history": [
{
"en": "2024-10 - Right to left support - initial implementation of the variant.",
"fr": "2024-10 - Support de droite à gauche - Implémentation initiale de la variation."
},
{
"en": "2024-08 - Initial implementation of the variant.",
"fr": "2024-01 - Implémentation initiale de la variation."
Expand All @@ -128,7 +192,7 @@
"implementation": [
{
"@id": "_:implement_mpt",
"iteration": "_:iteration_mpt_3",
"iteration": "_:iteration_mpt_4",
"name": {
"en": "Standard",
"fr": "Standard"
Expand Down Expand Up @@ -354,11 +418,29 @@
],
"predecessor": "_:iteration_mpt_2"
},
{
"@id": "_:iteration_mpt_4",
"name": "Main page title aligned on the right",
"date": "2024-09",
"detectableBy": "h1#wb-cont[dir='rtl'], [dir='rtl'] h1#wb-cont",
"additions": [
"Added right to left support"
]
},
{
"@id": "_:iteration_smpt_1",
"name": "Stacked main page title - Iteration 1",
"date": "2024-08",
"detectableBy": "hgroup > h1#wb-cont"
},
{
"@id": "_:iteration_smpt_2",
"name": "Stacked main page title - Iteration 2 (LTR support)",
"date": "2024-10",
"detectableBy": "hgroup > h1#wb-cont[dir='ltr'], [dir='ltr'] hgroup > h1#wb-cont",
"additions": [
"Added right to left support"
]
}
]
}
19 changes: 19 additions & 0 deletions sites/main-page-title/main-page-title-align-right-en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
altLangPage: "main-page-title-align-right-fr.html"
dateModified: "2024-09-26"
language: "en"
pageclass: "wb-prettify all-pre"
layout: without-h1
title: "Main page title aligned on the right"
index_json: index.json-ld
breadcrumbs: [
{ "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
]
---
<h1 id="wb-cont" dir="rtl">Main page title aligned on the right</h1>
<p>Main title of a page with a short bold red underline aligned on the right.</p>

<pre><code>
&lt;h1 id="wb-cont" dir="rtl">Main page title aligned on the right&lt;/h1>
&lt;p>Main title of a page with a short bold red underline aligned on the right.&lt;/p>
</code></pre>
19 changes: 19 additions & 0 deletions sites/main-page-title/main-page-title-align-right-fr.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
altLangPage: "main-page-title-align-right-en.html"
dateModified: "2024-09-26"
language: "fr"
pageclass: "wb-prettify all-pre"
layout: without-h1
title: "Titre principal de la page aligné à droite"
index_json: index.json-ld
breadcrumbs: [
{ "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-fr.html" }
]
---
<h1 id="wb-cont" dir="rtl">Titre principal de la page aligné à droite</h1>
<p>Titre principal d'une page avec un court soulignement rouge en gras aligné à droite.</p>

<pre><code>
&lt;h1 id="wb-cont" dir="rtl">Titre principal de la page aligné à droite&lt;/h1>
&lt;p>Titre principal d'une page avec un court soulignement rouge en gras aligné à droite.&lt;/p>
</code></pre>
21 changes: 21 additions & 0 deletions sites/main-page-title/main-page-title-div-align-right-en.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,21 @@
---
altLangPage: "main-page-title-div-align-right-fr.html"
dateModified: "2024-09-26"
language: "en"
pageclass: "wb-prettify all-pre"
layout: without-h1
title: "Main page title in a div aligned on the right"
index_json: index.json-ld
breadcrumbs: [
{ "title": "Titre principal - Documentation", "link": "sites/main-page-title/main-page-title-en.html" }
]
---

<div dir="rtl">
<h1 id="wb-cont">Main page title in a div aligned on the right</h1>
<p>Main page title aligned on the right using dir="rtl" on the parent div</p>
</div>
<pre><code>&lt;div dir="rtl">
&lt;h1 id="wb-cont">Main page title in a div aligned on the right&lt;/h1>
&lt;p>Main page title aligned on the right using dir="rtl" on the parent div&lt;/p>
&lt;div></code></pre>
Loading

0 comments on commit 3ffe290

Please sign in to comment.