Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Main page title: Short bord red underline - follow the title alignement #2429

Merged
merged 1 commit into from
Oct 15, 2024
Merged

Main page title: Short bord red underline - follow the title alignement #2429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
88 changes: 85 additions & 3 deletions _data/sites.json
View file
Open in desktop
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
View file
Open in desktop
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
109 changes: 98 additions & 11 deletions sites/main-page-title/index.json-ld
View file
Open in desktop
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 All @@ -106,18 +158,30 @@
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
"iteration": "_:iteration_smpt_1",
"iteration": "_:iteration_smpt_2",
"example": [
{
"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 @@ -172,7 +236,7 @@
},
{
"@id": "_:implement_mpt_gcweb",
"iteration": "_:iteration_mpt_2",
"iteration": "_:iteration_mpt_4",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
Expand Down Expand Up @@ -208,7 +272,7 @@
},
{
"@id": "_:implement_smpt",
"iteration": "_:iteration_smpt_1",
"iteration": "_:iteration_smpt_2",
"name": {
"en": "Standard",
"fr": "Standard"
Expand Down Expand Up @@ -244,7 +308,7 @@
},
{
"@id": "_:implement_smpt_gcweb",
"iteration": "_:iteration_smpt_1",
"iteration": "_:iteration_smpt_2",
"name": {
"en": "GCWeb Jekyll",
"fr": "GCWeb Jekyll"
Expand Down Expand Up @@ -283,7 +347,7 @@
{
"@id": "_:cs_mpt",
"name": "Default h1",
"baseOnIteration": "_:iteration_mpt_3",
"baseOnIteration": "_:iteration_mpt_4",
"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.",
"layout": "The line is positioned below the text.",
"semantic": "h1",
Expand All @@ -306,7 +370,7 @@
{
"@id": "_:cs_smpt",
"name": "Stacked main page title",
"baseOnIteration": "_:iteration_smpt_1",
"baseOnIteration": "_:iteration_smpt_2",
"detectableBy": "hgroup > h1#wb-cont",
"layout": "The section page title is above the page title. The line is positioned below the page title.",
"semantic": "hgroup > p + h1",
Expand Down Expand Up @@ -352,13 +416,36 @@
"fixes": [
"Style: Added left/right/top <code>border-*-width: 0;</code> properties to avoid three-sided borders in Safari &lt;= 15.3."
],
"predecessor": "_:iteration_mpt_2"
"predecessor": "_:iteration_mpt_2",
"successor": "_:iteration_mpt_4"
},
{
"@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"
],
"predecessor": "_:iteration_mpt_3"

},
polmih marked this conversation as resolved.
Show resolved Hide resolved
{
"@id": "_:iteration_smpt_1",
"name": "Stacked main page title - Iteration 1",
"date": "2024-08",
"detectableBy": "hgroup > h1#wb-cont"
"detectableBy": "hgroup > h1#wb-cont",
"successor": "_:iteration_smpt_2"
},
{
"@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"
],
"predecessor": "_:iteration_smpt_1"
}
]
}
Loading
Loading