Skip to content

Commit

Permalink
Minor - Main page title: Short bord red underline - follow the title …
Browse files Browse the repository at this point in the history 
…alignement (#2429)
  • Loading branch information
@polmih
polmih authored Oct 15, 2024
1 parent 8a4fcc1 commit de1f6df
Show file tree
Hide file tree
Showing 11 changed files with 367 additions and 14 deletions.
88 changes: 85 additions & 3 deletions _data/sites.json
View file
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
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
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"

},
{
"@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

0 comments on commit de1f6df

Please sign in to comment.