From 43b2ae48669956c2c4923c4947e452e23ab723c0 Mon Sep 17 00:00:00 2001
From: Brahim Mahadi Wachilli <bmwboy003@gmail.com>
Date: Mon, 9 Dec 2024 15:05:56 -0500
Subject: [PATCH] Addressed some changes

---
 .../th-empathy/empathy.html"                  | 34 ++++++++++---------
 "m\303\251li-m\303\251lo/th-empathy/meta.md"  |  7 ++++
 .../th-empathy/style.css"                     |  6 ++--
 3 files changed, 28 insertions(+), 19 deletions(-)

diff --git "a/m\303\251li-m\303\251lo/th-empathy/empathy.html" "b/m\303\251li-m\303\251lo/th-empathy/empathy.html"
index d89f55711..a34141806 100644
--- "a/m\303\251li-m\303\251lo/th-empathy/empathy.html"
+++ "b/m\303\251li-m\303\251lo/th-empathy/empathy.html"
@@ -1,10 +1,11 @@
 ---
 title: Empathy theme
-dateModified: 2024-04-30
+dateModified: 2024-12-09
 description: Empathy CSS styles
 lang: en
 pageclass: cnt-wdth-lmtd
 css:
+- https://use.fontawesome.com/releases/v5.15.4/css/all.css
 - style.css
 - https://wet-boew.github.io/themes-dist/GCWeb/GCWeb/méli-mélo/2025-04-nahanni.css
 script:
@@ -94,13 +95,13 @@ <h4>Code</h4>
 &lt;/div&gt;</code></pre>
 
 <h3>Life Journey Home Page Layout</h3>
-<div class="mrgn-tp-lg container">
+<div class="mrgn-tp-lg">
 	<div class="row wb-eqht-grd">
-		<div class="col-xs-12 col-md-8 empathy main-content small">
+		<div class="col-xs-12 col-md-8 empathy services-and-information small">
 			<div class="row wb-eqht-grd">
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Preparing for end of life</h6></a>
+					<h4><a href="#" class="stretched-link">Preparing for end of life</a></h4>
 					<p>Information on how to prepare, organize your affairs and leave instructions to your survivors.
  </p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
@@ -109,7 +110,7 @@ <h3>Life Journey Home Page Layout</h3>
 
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Notify of a death</h2></a>
+					<h4><a href="#" class="stretched-link">Notify of a death</a></h4>
 					<p>Programs and departments to notify to cancel benefits or return ineligible benefits.</p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
 					</div>
@@ -117,15 +118,15 @@ <h3>Life Journey Home Page Layout</h3>
 
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Benefits and Programs</h2></a>
-					<p>Applying for benefits to which you may be entitled following a death.</p><br>
+					<h4><a href="#" class="stretched-link">Benefits and Programs</a></h4>
+					<p>Applying for benefits to which you may be entitled following a death.</p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
 					</div>
 				</div>
 
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Representing someone who died</h2></a>
+					<h4><a href="#" class="stretched-link">Representing someone who died</a></h4>
 					<p>The legal, financial, estate planning, and other aspects of representing someone who has died.</p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
 					</div>
@@ -133,7 +134,7 @@ <h3>Life Journey Home Page Layout</h3>
 
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Taxes and finances related to death</h2></a>
+					<h4><a href="#" class="stretched-link">Taxes and finances related to death</a></h4>
 					<p>Information on managing finances of an individual who died, including preparing and filing their taxes.
  </p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
@@ -142,7 +143,7 @@ <h3>Life Journey Home Page Layout</h3>
 
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Estates and wills</h2></a>
+					<h4><a href="#" class="stretched-link">Estates and wills</a></h4>
 					<p>Find information about estate planning and preparing a will, as well as what to do when there is no will.</p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
 					</div>
@@ -150,15 +151,15 @@ <h3>Life Journey Home Page Layout</h3>
 
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Death-related documents</h2></a>
-					<p>Documents you may need to obtain following a death.</p><br>
+					<h4><a href="#" class="stretched-link">Death-related documents</a></h4>
+					<p>Documents you may need to obtain following a death.</p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
 					</div>
 				</div>
 
 				<div class="col-sm-12 col-md-6 mrgn-bttm-lg">
 					<div class="empathy cards h-100 full-width">
-					<a href="#" class="stretched-link"><h2 class="h4">Contacting services</h2></a>
+					<h4><a href="#" class="stretched-link">Contacting services</a></h4>
 					<p>Contact information for various federal or provincial programs, departments, or agencies.</p>
 					<span class="fas fa-arrow-right" aria-hidden="true"></span>
 					</div>
@@ -172,18 +173,19 @@ <h2>Someone died, <br>what do I do?</h2>
 				<p class="mrgn-tp-lg"><span class="fas fa-clock"></span> This will take less than a minute.</p>
 				<a href="#" class="mrgn-tp-lg btn btn-default btn-empathy btn-block btn-lg">Start questionnaire</a>
 
-				<img class="quiz-img mrgn-tp-lg center-block hidden-xs hidden-sm" src="./images/lloj-direction-cloud.256.png" alt="Someone died, what do I do?">
+				<img class="quiz-img mrgn-tp-lg center-block hidden-xs hidden-sm" src="images/lloj-direction-cloud.256.png" alt="Someone died, what do I do?">
 		</div>
 	</div>
 </div>
 <h4>Code</h4>
+<div class="wb-prettify all-pre hide"></div>
 <pre><code>&lt;div class="mrgn-tp-lg container"&gt;
     &lt;div class="row wb-eqht-grd"&gt;
-    	&lt;div class="col-xs-12 col-md-8 empathy main-content small"&gt;
+    	&lt;div class="col-xs-12 col-md-8 empathy services-and-information small"&gt;
     		&lt;div class="row wb-eqht-grd"&gt;
     			&lt;div class="col-sm-12 col-md-6 mrgn-bttm-lg"&gt;
     				&lt;div class="empathy cards h-100 full-width"&gt;
-    				&lt;a href="#" class="stretched-link"&gt;&lt;h2 class="h4"&gt; Lorem ipsum &lt;/h2&gt;&lt;/a&gt;
+    				&lt;h4&gt;&lt;a href="#" class="stretched-link"&gt; Lorem ipsum &lt;/a&gt;&lt;/h4&gt;
     				&lt;p&gt;Lorem ipsum dolor sit amet, consectet&lt;/p&gt;
 					&lt;span class="fas fa-arrow-right" aria-hidden="true"&gt;&lt;/span&gt;
 					&lt;/div&gt;
diff --git "a/m\303\251li-m\303\251lo/th-empathy/meta.md" "b/m\303\251li-m\303\251lo/th-empathy/meta.md"
index 1d9d3115d..f772e0dce 100644
--- "a/m\303\251li-m\303\251lo/th-empathy/meta.md"
+++ "b/m\303\251li-m\303\251lo/th-empathy/meta.md"
@@ -20,5 +20,12 @@ pages:
       language: en
       path: empathy.html
 sponsor: ESDC - Principal Publisher
+
+changes:
+  - date: 2024-12-02
+    description: Life Journey home page layout, includes the code and an example to enable the home page layout to be used by current and future Life Journey projects
+    departmentImpact: Having this layout intergrated will allow Canada.ca to have a more streamlined and consistent theme throughout the Journey Labs projects. Currently the pages that make use of this layout have it hardcoded into the page
+    publicImpact: The Public at Large, the layout makes it easy for users to know that they are currently on a Journey Labs project page
+
 output: false
 ---
diff --git "a/m\303\251li-m\303\251lo/th-empathy/style.css" "b/m\303\251li-m\303\251lo/th-empathy/style.css"
index 100cf3817..8ab52b6a7 100644
--- "a/m\303\251li-m\303\251lo/th-empathy/style.css"
+++ "b/m\303\251li-m\303\251lo/th-empathy/style.css"
@@ -93,14 +93,14 @@ h1#wb-cont.empathy {
 	border-radius: 10px;
 }
 
-.empathy.main-content .empathy.cards:hover {
+.empathy.services-and-information .empathy.cards:hover {
     background-color: #6c3c9b;
     color: #fff;
     cursor: pointer;
 }
 
 /* Added to specifically target the link*/
-.empathy.main-content .empathy.cards:hover a {
+.empathy.services-and-information .empathy.cards:hover a {
     color: #fff;
 }
 
@@ -113,7 +113,7 @@ h1#wb-cont.empathy {
  Might be able to accomplish something similar by adding the purple box first and floating it right -- doesn't work in a display flex
 */
 @media screen and (max-width: 991px) {
-    .empathy.main-content {
+    .empathy.services-and-information {
     order: 1;
     }
 }