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

apply h1 thickline globally #2169

Merged
merged 1 commit into from
Feb 13, 2024
Merged

apply h1 thickline globally #2169

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
1 change: 1 addition & 0 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
#
# Local site settings
remote_theme: wet-boew/gcweb-jekyll
repository: wet-boew/GCWeb
title: "GCWeb, the Canada.ca official theme" # Site name or title
website: "https://wet-boew.github.io/GCWeb/" # URL of your public facing website
global:
Expand Down
2,951 changes: 0 additions & 2,951 deletions _data/sites.json
View file
Open in desktop

This file was deleted.

13 changes: 0 additions & 13 deletions components/baseline/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,19 +7,6 @@
background-color: #355688;
}

/* H1 short bold red underline */
h1.gc-thickline {
duboisp marked this conversation as resolved.
Show resolved Hide resolved
border-bottom: none;

&::after {
border-bottom: .18em solid #af3c43;
content: "";
display: block;
padding-bottom: 8px;
width: 70px;
}
}

/*
* Panel title
*/
Expand Down
5 changes: 5 additions & 0 deletions sites/_variables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@ $search-gray: #e0e0e0;
$profile-gray: #eaebed;
$gray-light: #6f6f6f; // Light grey colour (Bootstrap override).

// Brand variables - Main page title
$main-page-title-rule-width: 71px;
$main-page-title-rule-thickness: .18em;
$main-page-title-rule-color: $border-red;

// Colours for the alert styles
$alert-danger-color: #d3080c;
$alert-warning-color: #ee7100;
Expand Down
1 change: 0 additions & 1 deletion sites/baseline/_heading.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
*/

h1 {
border-bottom: 1px solid $border-red;
margin-bottom: .2em;
margin-top: 1em;
padding-bottom: .2em;
Expand Down
7 changes: 7 additions & 0 deletions sites/main-page-title/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/* H1 short bold red underline */

h1#wb-cont {
border-bottom: $main-page-title-rule-thickness solid $main-page-title-rule-color;
border-image: linear-gradient(to right, $main-page-title-rule-color $main-page-title-rule-width, transparent $main-page-title-rule-width);
border-image-slice: 1;
}
1 change: 1 addition & 0 deletions sites/main-page-title/includes/main-page-title.html
View file
Open in desktop
duboisp marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
<h1 property="name" id="wb-cont">{{ page.title }}</h1>
162 changes: 162 additions & 0 deletions sites/main-page-title/index.json-ld
View file
Open in desktop
duboisp marked this conversation as resolved.
Show resolved Hide resolved
Original file line number Diff line number Diff line change
@@ -0,0 +1,162 @@
{
"@context": {
"@version": 2.0,
"dct": "http://purl.org/dc/terms/",
"title": { "@id": "dct:title", "@container": "@language" },
"description": { "@id": "dct:description", "@container": "@language" },
"modified": "dct:modified"
},
"title": {
"en": "Main title of the page",
"fr": "Titre principal"
},
"description": {
"en": "Documentation on how to use the Main title of the page component.",
"fr": "Documentation sur l'utilisation du composant Titre principal."
},
"modified": "2024-01-29",
"componentName": "main-page-title",
"status": "stable",
"version": "1.1.0",
"pages": {
"docs": [
{
"title": "Main page title documentation",
"language": "en",
"path": "main-page-title-en.html"
},
{
"title": "Documentation du titre principal",
"language": "fr",
"path": "main-page-title-fr.html"
}
]
},
"dependencies": [],
"a11yGuidance": "This component respects all WCAG 2.1 guidelines.",
"variations": [
{
"name": {
"en": "Main page title - default",
"fr": "Titre principal - par défaut"
},
"status": "stable",
"description": {
"en": "When the H1 is the main title of a page, it includes a red bar as part of the Canada.ca brand.",
"fr": "Lorsque le H1 est le titre principal d'une page, il inclut une barre rouge faisant partie de la marque Canada.ca."
},
"guidance": {
"en": "https://design.canada.ca/styles/typography.html",
"fr": "https://conception.canada.ca/styles/typographie.html"
},
"iteration": "_:iteration_mpt_2",
"example": [
{
"en": { "href": "../../content-page/content-en.html", "text": "Content page (main page title)" },
"fr": { "href": "../../content-page/content-fr.html", "text": "Page de contenu (titre principal)" }
}
],
"implementation": [
"_:implement_mpt"
],
"history": [
{
"en": "2024-01 - Visual update",
"fr": "2024-01 - Mise à jour visuelle"
}
]
}
],
"implementation": [
{
"@id": "_:implement_mpt",
"iteration": "_:iteration_mpt_2",
"name": {
"en": "Standard",
"fr": "Standard"
},
"introduction": {
"en": "The purpose of the main page title component is to provide a default style for the first H1 in the main element with a short bold red rule for use in Canada.ca websites. It is used to indicate the main heading of a page.",
"fr": "Le but du composant du titre principal de la page est de fournir un style par défaut pour le premier H1 de l'élément main avec une ligne rouge épaisse et courte pour utilisation sur les sites web de Canada.ca. Il est utilisé pour indiquer le titre principal d'une page"
},
"sample": {
"en": [
{
"@type": "source-code",
"description": "HTML sample",
"code": "<h1 id=\"wb-cont\">Main page title</h1>"
}
],
"fr": [
{
"@type": "source-code",
"description": "Exemple HTML",
"code": "<h1 id=\"wb-cont\">Titre principal</h1>"
}
]
}
}
],
"changeset": [
{
"@id": "_:cs_mpt",
"name": {
"en": "Default h1",
"fr": "H1 par default"
},
"baseOnIteration": "_:iteration_mpt_2",
"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": {
"@type": "h1",
"description": "Level 1 heading",
"code": {
"@type": [
"@id",
"rdf:HTML"
],
"@value": "includes/main-page-title.html"
}
},
"static": "none",
"schema": "dct:title",
"include": {
"@type": "source-code",
"collapsed": true,
"description": "Include with logic in Liquid.",
"code": {
"@type": [ "@id", "rdf:HTML" ],
"@value": "includes/main-page-title.html"
}
},
"style": "The line has a width of 3.55em (71px) and a thickness of 0.18em (3.6px) with the color #af3c43. Optionally, include a byline, tagline, or subtitle.",
"logic": "none",
"behaviour": "none",
"perceptible": "The thin hairline has been replaced with a shorter and thicker line.",
"guidance": "https://design.canada.ca/styles/typography.html",
"context": "First semantic element inside the main",
"configuration": "none",
"dependency": "none",
"file": "none"
}
],
"iteration": [
{
"@id": "_:iteration_mpt_1",
"name": "Visual update 2019",
"date": "2019-06",
"detectableBy": "Visual inspection can be used to detect the size of the line. The width of the line should be the width of the main container long and the thickness should be 1px, with the color #af3c43.",
"successor": "_:iteration_mpt_2"
},
{
"@id": "_:iteration_mpt_2",
"name": "Visual update 2024",
"date": "2024-01",
"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.",
"breaking": {
"style": "Width of the line should 70px and the thickness .18em #af3c43. Followed by optional byline, tagline or subtitle"
},
"predecessor": "_:iteration_mpt_1"
}
]
}
10 changes: 10 additions & 0 deletions sites/main-page-title/main-page-title-en.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
altLangPage: "main-page-title-fr.html"
dateModified: "2024-01-29"
description: "Documentation on the default H1 use as the main title of a page with a short bold red underline."
language: "en"
pageclass: "wb-prettify all-pre"
title: "Main page title"
layout: documentation
index_json: index.json-ld
---
10 changes: 10 additions & 0 deletions sites/main-page-title/main-page-title-fr.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
---
altLangPage: "main-page-title-en.html"
dateModified: "2024-01-29"
description: "Documentation à propos du H1 par défaut souligné d'une courte ligne rouge en gras."
language: "fr"
pageclass: "wb-prettify all-pre"
title: "Titre principal de la page"
layout: documentation
index_json: index.json-ld
---
1 change: 1 addition & 0 deletions sites/theme.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,7 @@
@import "gcweb-menu/base";
@import "authentication/base";
@import "header/base";
@import "main-page-title/base";

/*! Components (CSS type only) */
@import "bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
Expand Down
Loading