.page-type-theme to the page's <body> element.",
+ "The CSS class .active must be added to the current page's <li>.",
+ "Refer to the working example for a code sample.",
+ "Refer to the working example and guidance for more information on how to implement this page template."
+ ],
+ "fr": [
+ "Ajoutez la classe CSS .page-type-theme sur l'élément <body> de la page.",
+ "La classe CSS .active doit être ajoutée au <li> de la page courante.",
+ "Reportez-vous à l'exemple pratique pour un exemple de code.",
+ "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
+ ]
+ },
+ "notes": {
+ "en": [
+ "Not adding the required CSS class (.page-type-theme) will result in the styles specific to this template not being applied."
+ ],
+ "fr": [
+ "Si vous n'ajoutez pas la classe CSS requise (.page-type-theme), les styles spécifiques à ce gabarit ne seront pas appliqués."
+ ]
+ }
+ },
+ {
+ "@id": "_:implement_theme_aem",
+ "iteration": "_:iteration_theme_1",
+ "name": {
+ "en": "AEM users",
+ "fr": "Utilisateurs AEM"
+ },
+ "introduction": {
+ "en": "This implementation is meant for publishers adding the template manually into an AEM page.",
+ "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
+ },
+ "instructions": {
+ "en": [
+ "TBD"
+ ],
+ "fr": [
+ "TBD"
+ ]
+ },
+ "notes": {
+ "en": [
+ "For a more detailed implementation guide, a document has been created on the AEM learning material on GCPedia, which includes screenshots and detailed step by step instructions."
+ ],
+ "fr": [
+ "Pour un guide de mise en œuvre plus détaillé, un document a été créé dans la section du matériel d'apprentissage d'AEM sur GCPedia, qui comprend des captures d'écran et des instructions détaillées étape par étape."
+ ]
+ },
+ "ajaxSourceCode": {
+ "en": "theme-en.html main > *:not(.pagedetails)",
+ "fr": "theme-fr.html main > *:not(.pagedetails)"
+ }
+ }
+ ],
+ "iteration": [
+ {
+ "@id": "_:iteration_ilp_1",
+ "name": "Theme page - Iteration 1",
+ "date": "2024-07",
+ "breaking": [
+ "Introduction of the page template."
+ ],
+ "detectableBy": ".page-type-theme"
+ }
+ ],
+ "changesets": [
+ {
+ "@id": "_:cs_ilp_2",
+ "name": "Theme page",
+ "status": "stable",
+ "baseOnIteration": "_:iteration_theme_1",
+ "detectableBy": ".page-type-theme",
+ "layout": [
+ "On larger screens, navigation on the left and page content on the right.",
+ "In the page content section, from top to bottom: page title, most requested, services and information."
+ ],
+ "style": [
+ "The breadcrumbs first element has a left dark blue border.",
+ "The left navigation's active page has a dark-blue background and white text.",
+ "A vertical blue bar separates the left navigation from the content on the right.",
+ "On larger screens, the most requested component's heading is above the list rather than to the left."
+ ],
+ "semantic": "h2 + (ul > li)",
+ "behaviour": "On smaller screens, the navigation is hidden by default and is replaced by a \"Menu\" button which can be clicked to toggle the visibility of the navigation.",
+ "basic": "On smaller screens the navigation is always visible and the button to toggle the navigation is hidden.",
+ "context": "This template is only meant for Theme pages.",
+ "static": [
+ "Menu",
+ "Toggle Menu",
+ "Basculer le menu"
+ ]
+ }
+ ]
+}
,{
"@context": {
"@version": 1.1,
diff --git a/sites/theme.scss b/sites/theme.scss
index 97702d35b..d061d1858 100644
--- a/sites/theme.scss
+++ b/sites/theme.scss
@@ -204,6 +204,7 @@
@import "../templates/news/base";
@import "../templates/application/base";
@import "../templates/institutional-landing/base";
+@import "../templates/theme/base";
/*! Core - Utilities */
@@ -274,6 +275,7 @@
@import "../templates/home/screen-sm-max";
@import "../templates/theme-topic/screen-sm-max";
@import "../templates/institutional-landing/screen-sm-max";
+ @import "../templates/theme/screen-sm-max";
}
/* Medium view and under */
@@ -332,6 +334,7 @@
@import "../components/gc-most-requested/screen-md-min";
@import "../templates/theme-topic/screen-md-min";
+ @import "../templates/theme/screen-md-min";
@import "wet-boew/src/base/proximity/screen-md-min";
}
@@ -346,6 +349,8 @@
@import "../components/header-rwd/screen-lg-min";
@import "../components/equalheight/screen-lg-min";
+ @import "../templates/theme/screen-lg-min";
+
@import "wet-boew/src/base/proximity/screen-lg-min";
}
diff --git a/templates/theme/_base.scss b/templates/theme/_base.scss
new file mode 100644
index 000000000..702e0d2a8
--- /dev/null
+++ b/templates/theme/_base.scss
@@ -0,0 +1,90 @@
+/*
+ WET-BOEW
+ @title: Theme template
+ @desc: Styles specific to the Theme template for GCWeb
+*/
+
+.page-type-theme {
+ #wb-bc {
+ li:first-child a {
+ border-left: solid #26374a 5px;
+ padding-left: 8px;
+ }
+
+ .breadcrumb {
+ margin-bottom: 15px;
+ }
+ }
+
+ #gridContainer {
+ > nav {
+ #menuTrigger {
+ border-radius: 0;
+ display: block;
+ margin-bottom: 1em;
+ margin-left: -15px;
+ text-align: left;
+ width: calc(100% + 30px);
+
+ .glyphicon {
+ margin-left: 10px;
+ }
+
+ &.expanded .glyphicon {
+ transform: rotate(180deg) translateY(2px);
+ }
+
+ // Les items du menu sont affichés par défaut en mode basic HTML, donc il n'est pas nécessaire d'afficher le bouton menu car il ne sera pas fonctionnel
+ .wb-disable & {
+ display: none;
+ }
+ }
+
+ li {
+ a {
+ color: $link-color;
+ display: block;
+ font-size: 16px;
+ line-height: 1.65em;
+ padding: 10px 14px;
+ text-decoration: none;
+
+ &:hover {
+ background-color: #f5f5f5;
+ color: $button-blue;
+ text-decoration: underline;
+ }
+ }
+
+ &.active {
+ a, a:hover {
+ background-color: #26374a;
+ color: #fff;
+ }
+
+ a:focus {
+ outline: 5px auto #fff;
+ outline-offset: -5px;
+ }
+ }
+ }
+
+ & + section {
+ h1#wb-cont {
+ border: none;
+ font-size: 1.2em;
+ line-height: 1.1;
+ margin: 10px 0 11.5px;
+ }
+
+ .gc-most-requested {
+ h2 {
+ float: none;
+ font-size: 1em;
+ width: auto;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/templates/theme/_screen-lg-min.scss b/templates/theme/_screen-lg-min.scss
new file mode 100644
index 000000000..3f04350d6
--- /dev/null
+++ b/templates/theme/_screen-lg-min.scss
@@ -0,0 +1,9 @@
+/*
+ WET-BOEW
+ @title: Sidebar component
+ @desc: Styles specific to the sidebar component for GCWeb
+*/
+
+.page-type-theme #gridContainer {
+ width: 1170px;
+}
diff --git a/templates/theme/_screen-md-min.scss b/templates/theme/_screen-md-min.scss
new file mode 100644
index 000000000..b7679772a
--- /dev/null
+++ b/templates/theme/_screen-md-min.scss
@@ -0,0 +1,41 @@
+/*
+ WET-BOEW
+ @title: theme component
+ @desc: Styles specific to the theme component for GCWeb
+*/
+
+.page-type-theme {
+ #gridContainer {
+ display: flex;
+ margin: 0 auto;
+ padding: 0 15px;
+ width: 970px;
+
+ > nav {
+ border-right: 5px solid #26374a;
+ flex: 0 0 300px;
+
+ .container {
+ padding: 0;
+ width: auto;
+ }
+
+ #menuTrigger {
+ display: none;
+ }
+
+ ul {
+ display: block !important;
+ }
+
+ & + section {
+ flex: 1 0 0%;
+
+ .container {
+ padding-left: 35px;
+ width: auto;
+ }
+ }
+ }
+ }
+}
diff --git a/templates/theme/_screen-sm-max.scss b/templates/theme/_screen-sm-max.scss
new file mode 100644
index 000000000..084d34da7
--- /dev/null
+++ b/templates/theme/_screen-sm-max.scss
@@ -0,0 +1,40 @@
+/*
+ WET-BOEW
+ @title: theme component
+ @desc: Styles specific to the theme component for GCWeb
+*/
+
+.page-type-theme {
+ #gridContainer {
+ > nav {
+ ul {
+ display: none;
+
+ .wb-disable & {
+ display: block;
+ }
+
+ li {
+ border-bottom: #f5f5f5 solid 1px;
+ position: relative;
+
+ a {
+ &::after {
+ content: "\203A";
+ font-size: 1.5em;
+ margin-left: 10px;
+ position: absolute;
+ right: 14px;
+ top: 50%;
+ transform: translateY(-50%);
+ }
+ }
+
+ &.active a::after {
+ display: none;
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/templates/theme/index.json-ld b/templates/theme/index.json-ld
new file mode 100644
index 000000000..59ddc92a3
--- /dev/null
+++ b/templates/theme/index.json-ld
@@ -0,0 +1,199 @@
+{
+ "@context": {
+ "@version": 1.1,
+ "dct": "http://purl.org/dc/terms/",
+ "title": { "@id": "dct:title", "@container": "@language" },
+ "description": { "@id": "dct:description", "@container": "@language" },
+ "modified": "dct:modified"
+ },
+ "title": {
+ "en": "Theme page",
+ "fr": "Page de thème"
+ },
+ "description": {
+ "en": "Theme page template",
+ "fr": "Gabarit de page thème"
+ },
+ "modified": "2020-02-12",
+ "componentName": "theme",
+ "status": "stable",
+ "version": "1.0",
+ "pages": {
+ "examples": [
+ {
+ "title": "[Theme]",
+ "language": "en",
+ "path": "theme-en.html"
+ },
+ {
+ "title": "[Thème]",
+ "language": "fr",
+ "path": "theme-fr.html"
+ }
+ ],
+ "docs": [
+ {
+ "title": "Theme page",
+ "language": "en",
+ "path": "theme-doc-en.html"
+ },
+ {
+ "title": "Page de thème",
+ "language": "fr",
+ "path": "theme-doc-fr.html"
+ }
+ ]
+ },
+ "dependencies": {
+ "en": [
+ { "title": "Most requested", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-en.html", "component": "gc-most-requested" },
+ { "title": "Services and information", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-en.html", "component": "gc-srvinfo" }
+ ],
+ "fr": [
+ { "title": "En demande", "url": "https://wet-boew.github.io/GCWeb/components/gc-most-requested/gc-most-requested-doc-fr.html", "component": "gc-most-requested" },
+ { "title": "Services et renseignements", "url": "https://wet-boew.github.io/GCWeb/components/gc-srvinfo/gc-srvinfo-doc-fr.html", "component": "gc-srvinfo" }
+ ]
+ },
+ "a11yGuidance": "No accessibility guidance.",
+ "variations": [
+ {
+ "name": {
+ "en": "Theme page",
+ "fr": "Page de thème"
+ },
+ "status": "stable",
+ "description": {
+ "en": "Use this template as the landing page for Government of Canada institutions and organizations.",
+ "fr": "Utilisez ce modèle comme page d'accueil pour les institutions et organismes du gouvernement du Canada."
+ },
+ "guidance": {
+ "en": "TBD",
+ "fr": "TBD"
+ },
+ "iteration": "_:iteration_theme_1",
+ "example": [
+ {
+ "en": { "href": "theme-en.html", "text": "Theme page" },
+ "fr": { "href": "theme-fr.html", "text": "Pages de thème" }
+ }
+ ],
+ "implementation": [
+ "_:implement_theme",
+ "_:implement_theme_aem"
+ ],
+ "history": [
+ {
+ "en": "July 2024 - Introduction of the new theme template.",
+ "fr": "Juillet 2024 - Introduction du nouveau gabarit de page thème."
+ }
+ ]
+ }
+ ],
+ "implementation": [
+ {
+ "@id": "_:implement_theme",
+ "iteration": "_:iteration_theme_1",
+ "name": {
+ "en": "Standard",
+ "fr": "Standard"
+ },
+ "introduction": {
+ "en": "This implementation is meant for developers/publishers adding the template manually.",
+ "fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le gabarit manuellement."
+ },
+ "instructions": {
+ "en": [
+ "Add the CSS class .page-type-theme to the page's <body> element.",
+ "The CSS class .active must be added to the current page's <li>.",
+ "Refer to the working example for a code sample.",
+ "Refer to the working example and guidance for more information on how to implement this page template."
+ ],
+ "fr": [
+ "Ajoutez la classe CSS .page-type-theme sur l'élément <body> de la page.",
+ "La classe CSS .active doit être ajoutée au <li> de la page courante.",
+ "Reportez-vous à l'exemple pratique pour un exemple de code.",
+ "Référez-vous à l'exemple pratique et aux directives pour plus d'informations sur l'implémentation ce modèle de page."
+ ]
+ },
+ "notes": {
+ "en": [
+ "Not adding the required CSS class (.page-type-theme) will result in the styles specific to this template not being applied."
+ ],
+ "fr": [
+ "Si vous n'ajoutez pas la classe CSS requise (.page-type-theme), les styles spécifiques à ce gabarit ne seront pas appliqués."
+ ]
+ }
+ },
+ {
+ "@id": "_:implement_theme_aem",
+ "iteration": "_:iteration_theme_1",
+ "name": {
+ "en": "AEM users",
+ "fr": "Utilisateurs AEM"
+ },
+ "introduction": {
+ "en": "This implementation is meant for publishers adding the template manually into an AEM page.",
+ "fr": "Cette implémentation est destinée aux éditeurs qui ajoutent le gabarit manuellement à une page d'AEM."
+ },
+ "instructions": {
+ "en": [
+ "TBD"
+ ],
+ "fr": [
+ "TBD"
+ ]
+ },
+ "notes": {
+ "en": [
+ "For a more detailed implementation guide, a document has been created on the AEM learning material on GCPedia, which includes screenshots and detailed step by step instructions."
+ ],
+ "fr": [
+ "Pour un guide de mise en œuvre plus détaillé, un document a été créé dans la section du matériel d'apprentissage d'AEM sur GCPedia, qui comprend des captures d'écran et des instructions détaillées étape par étape."
+ ]
+ },
+ "ajaxSourceCode": {
+ "en": "theme-en.html main > *:not(.pagedetails)",
+ "fr": "theme-fr.html main > *:not(.pagedetails)"
+ }
+ }
+ ],
+ "iteration": [
+ {
+ "@id": "_:iteration_ilp_1",
+ "name": "Theme page - Iteration 1",
+ "date": "2024-07",
+ "breaking": [
+ "Introduction of the page template."
+ ],
+ "detectableBy": ".page-type-theme"
+ }
+ ],
+ "changesets": [
+ {
+ "@id": "_:cs_ilp_2",
+ "name": "Theme page",
+ "status": "stable",
+ "baseOnIteration": "_:iteration_theme_1",
+ "detectableBy": ".page-type-theme",
+ "layout": [
+ "On larger screens, navigation on the left and page content on the right.",
+ "In the page content section, from top to bottom: page title, most requested, services and information."
+ ],
+ "style": [
+ "The breadcrumbs first element has a left dark blue border.",
+ "The left navigation's active page has a dark-blue background and white text.",
+ "A vertical blue bar separates the left navigation from the content on the right.",
+ "On larger screens, the most requested component's heading is above the list rather than to the left."
+ ],
+ "semantic": "h2 + (ul > li)",
+ "behaviour": "On smaller screens, the navigation is hidden by default and is replaced by a \"Menu\" button which can be clicked to toggle the visibility of the navigation.",
+ "basic": "On smaller screens the navigation is always visible and the button to toggle the navigation is hidden.",
+ "context": "This template is only meant for Theme pages.",
+ "static": [
+ "Menu",
+ "Toggle Menu",
+ "Basculer le menu"
+ ]
+ }
+ ]
+}
diff --git a/templates/theme/theme-doc-en.html b/templates/theme/theme-doc-en.html
new file mode 100644
index 000000000..bc36195d8
--- /dev/null
+++ b/templates/theme/theme-doc-en.html
@@ -0,0 +1,9 @@
+---
+title: Theme
+description: Documentation for the theme page template.
+language: en
+altLangPage: theme-doc-fr.html
+dateModified: 2024-06-10
+layout: documentation
+index_json: index.json-ld
+---
diff --git a/templates/theme/theme-doc-fr.html b/templates/theme/theme-doc-fr.html
new file mode 100644
index 000000000..dafc34042
--- /dev/null
+++ b/templates/theme/theme-doc-fr.html
@@ -0,0 +1,9 @@
+---
+title: Thème
+description: Documentation du gabarit de page de thème.
+language: fr
+altLangPage: theme-doc-en.html
+dateModified: 2024-06-10
+layout: documentation
+index_json: index.json-ld
+---
diff --git a/templates/theme/theme-en.html b/templates/theme/theme-en.html
new file mode 100644
index 000000000..c5a66b4b9
--- /dev/null
+++ b/templates/theme/theme-en.html
@@ -0,0 +1,94 @@
+---
+title: "[Theme]"
+language: "en"
+layout: no-container
+altLangPage: "theme-fr.html"
+overwriteBreadcrumbs: true
+dateModified: "2024-06-10"
+nomenu: true
+pageclass: "page-type-theme"
+---
+
+Search for jobs in Canada, apply or extend a work permit, get a Social Insurance Number (SIN), a criminal record check or security clearance.
+Find funding programs, grants and contributions that help support jobs, training, and social development.
+Information on education, training, financial assistance, support for apprentices, and the skills needed to find and keep a job.
+Information on payroll, wages and other human resources obligations and advice on recruiting, training and managing employees.
+Information on what to consider before starting a business, including registration, business plan templates, regulations, and incorporation.
+Federal and provincial labour laws, workplace standards, federal health and safety standards and labour relations programs.
+Apply for Employment Insurance (EI) temporary benefits for workers, caregivers, sickness, fishing, maternity and parental EI. Submit your EI report.
+Employer and personal pensions, federal benefits and registered retirement savings plans and tools to help you plan for retirement information.
+Recherche d'emplois au Canada, trouvez des programmes d'embauche, demandez ou prolongez un permis de travail, obtenez un numéro d'assurance sociale (NAS), une vérification du casier judiciaire ou une habilitation de sécurité.
+Trouvez des programmes de financement, des subventions et des contributions et de projets d’emplois qui support les emplois, la formation et de développement social.
+Renseignements sur l'éducation, la formation, l'aide financière, le soutien aux apprentis, et les compétences nécessaires pour trouver et conserver un emploi.
+Renseignements sur les retenues sur la paie, les salaires et d'autres obligations en matière de ressources humaines, et des conseils sur le recrutement, la formation et la gestion des employés.
+Lois fédérales et provinciales sur le travail, normes en milieu de travail, normes fédérales de santé et de sécurité et programmes sur les relations de travail.
+Renseignements sur les éléments à prendre en compte avant de créer une entreprise, y compris l'enregistrement, les modèles de plans d’affaires, les réglementations et la constitution en société.
+Demandez des prestations temporaires d'assurance-emploi (AE) pour les travailleurs, les aidants naturels, la maladie, la pêche, la maternité et l'assurance parentale. Soumettez votre déclaration d'assurance-emploi.
+Régimes de pension individuelle et d'employeur, prestations fédérales et régimes enregistrés d'épargne-retraite et outils de planification de retraite.
+Everything you need to know about the Prime Minister's Youth Council.
+Job opportunities and Government of Canada hiring programs for students.
+Plan for an education, save, budget and explore student aid and career options.
+Education, training, financial assistance and the skills you need to find and keep a job.
+Plan your studies, work or travel abroad and in Canada.
+Work experiences, internships, park activities and language immersion programs.
+Build a better future for yourself and your community by volunteering.
+Budgeting, banking, money transfers, insurance and planning your finances.
+Facts about smoking, drugs, cybersafety, bullying, sex, mental health and more.
+Learn about the youth justice system.
+Tout ce que vous devez savoir sur le Conseil jeunesse du premier ministre.
+Possibilités d'emploi et programmes d'embauche du gouvernement du Canada pour les étudiants.
+Planifiez vos études, économisez, établissez un budget et renseignez-vous sur l'aide offerte aux étudiants et les possibilités de carrière.
+L'éducation, la formation, l'aide financière et les compétences nécessaires pour trouver et conserver un emploi.
+Planifiez vos études, vos expériences de travail ou vos voyages à l'étranger et au Canada.
+Expériences de travail, stages, activités de Parcs Canada et programmes d'immersion linguistique.
+Bâtissez un meilleur avenir pour vous et votre communauté en faisant du bénévolat.
+Établissement d'un budget, services bancaires, transferts d'argent, assurances et planification financière.
+Faits sur le tabagisme, les drogues, la cybersécurité, l'intimidation, le sexe, la santé mentale et plus encore.
+Renseignez-vous sur le système de justice pour les jeunes.
+