Patch - Home: hide banner image on mobile (#2371)

wet-boew · May 28, 2024 · c5a2a07 · c5a2a07
1 parent 7297a55
commit c5a2a07
Show file tree

Hide file tree

Showing 16 changed files with 47 additions and 144 deletions.
diff --git a/components/header-rwd/_header-rwd.scss b/components/header-rwd/_header-rwd.scss
@@ -12,8 +12,3 @@
 .well.header-rwd {
 	width: 100%;
 }
-.bg-darker {
-	&.well.header-rwd h1 {
-		border-bottom-color: #6f6f6f;
-	}
-}
diff --git a/components/header-rwd/_screen-lg-min.scss b/components/header-rwd/_screen-lg-min.scss
@@ -9,16 +9,3 @@
 .well.header-rwd {
 	width: 50%;
 }
-
-/*
- * Home page style
- *
- * Set a responsive with for the h1 in the Well header responsive
- */
-.home {
-	.well.header-rwd {
-		h1 {
-			width: 50%;
-		}
-	}
-}
diff --git a/components/header-rwd/_screen-md-max.scss b/components/header-rwd/_screen-md-max.scss
diff --git a/components/header-rwd/_screen-md-min-to-screen-md-max.scss b/components/header-rwd/_screen-md-min-to-screen-md-max.scss
diff --git a/components/header-rwd/_screen-xs-min-to-screen-xs-max.scss b/components/header-rwd/_screen-xs-min-to-screen-xs-max.scss
diff --git a/components/header-rwd/_screen-xxs-max.scss b/components/header-rwd/_screen-xxs-max.scss
diff --git a/sites/banner/_base.scss b/sites/banner/_base.scss
@@ -64,24 +64,3 @@ header {
 		}
 	}
 }
-
-/* Home page banner */
-#hme-banner {
-	background-image:url(../assets/your-gov2.jpg);
-	background-repeat: no-repeat;
-	background-size: cover;
-	height: auto;
-	padding-top:1.25%;
-	width: 100%;
-}
-#hme-banner-bg {
-	background-color: #002b92;
-	color:#fff;
-	margin-left: 5%;
-	min-height: 150px;
-	padding:8px;
-	width: 225px;
-}
-h2.hme-banner-bg {
-	border: none;
-}
diff --git a/sites/theme.scss b/sites/theme.scss
@@ -249,6 +249,7 @@
 
 	@import "../templates/campaign/screen-xs-max";
 	@import "../templates/application/screen-xs-max";
+	@import "../templates/home/screen-xs-max";
 }
 
 /* Small view and under */
@@ -280,8 +281,6 @@
 	@import "wet-boew/src/base/views/screen-md-max";
 
 	@import "gcweb-menu/screen-md-max";
-
-	@import "../components/header-rwd/screen-md-max";
 }
 
 /* Large view and under */
@@ -362,7 +361,6 @@
 	@import "../components/screen-xxs-max";
 	@import "wet-boew/src/plugins/menu/screen-xxs-max";
 	@import "wet-boew/src/plugins/tables/screen-xxs-max";
-	@import "../components/header-rwd/screen-xxs-max";
 	@import "wet-boew/src/plugins/tabs/screen-xxs-max";
 	@import "../components/tabs/screen-xxs-max";
 }
@@ -372,8 +370,6 @@
 	@import "wet-boew/src/base/views/screen-xs-min-to-screen-xs-max";
 
 	@import "search/screen-xs-min-to-screen-xs-max";
-
-	@import "../components/header-rwd/screen-xs-min-to-screen-xs-max";
 }
 
 /* Small view */
@@ -392,7 +388,6 @@
 
 	@import "gcweb-menu/screen-md-min-to-screen-md-max";
 
-	@import "../components/header-rwd/screen-md-min-to-screen-md-max";
 	@import "../components/equalheight/screen-md-min-to-screen-md-max";
 
 	@import "../templates/home/screen-md-min-to-screen-md-max";

diff --git a/templates/home/_base.scss b/templates/home/_base.scss
@@ -12,7 +12,6 @@
 .home {
 
 	h1 {
-		border-bottom-width: 4px;
 		font-weight: 500;
 		margin-top: 10px;
 	}
@@ -46,15 +45,7 @@
 		margin-top: 3px;
 	}
 
-	/* Home page banner
-	 *
-	 * Reference in:
-	 * - components/_screen-xxs-max
-	 * - components/_screen-xs-min-to-screen-xs-max
-	 * - components/_screen-md-min-to-screen-md-max
-	 * - components/_screen-md-max
-	 * - components/_screen-lg-min
-	 */
+	/* Home page banner */
 	.header-rwd {
 		margin: 2em 0px;
 	}

diff --git a/templates/home/_screen-xs-max.scss b/templates/home/_screen-xs-max.scss
@@ -0,0 +1,12 @@
+/*
+  WET-BOEW
+  @title: Small view and under (screen only)
+  @desc:  Variable $screen-xs-max <= 767 px
+ */
+
+.home {
+	.header-rwd {
+		margin: 0;
+		opacity: 1;
+	}
+}
diff --git a/templates/home/api-en.html b/templates/home/api-en.html
@@ -92,18 +92,24 @@ <h4>Previous versions</h4>
 	<h3 id="home-page-banner">Home page banner</h3>
 	<dl>
 		<dt>Version</dt>
-		<dd>2.0</dd>
+		<dd>2.1</dd>
 		<dt>Updated</dt>
-		<dd>2019-05-09</dd>
+		<dd>2024-05-23</dd>
 	</dl>
 
-	<p>The background image is loaded with the provisional plugin bgimg which set the background image. The background image is hosted in the WMS at this location. <code>https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg</code>.</p>
-	<p>The intend is to publish background image that represent natural Canadian landscape and may get updated montly or seasonal.</p>
+	<h4>Latest version changes</h4>
+	<p>The spacing above and below the banner text block is removed on xs and xxs breakpoints.</p>
+
 	<h4>Previous version</h4>
+	<details>
+		<summary>Version 2.0 - 2019-05-09</summary>
+		<p>The background image is loaded with the provisional plugin bgimg which set the background image. The background image is hosted in the WMS at this location. <code>https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg</code>.</p>
+		<p>The intent is to publish a background image that represents natural Canadian landscapes and may get updated monthly or seasonally.</p>
+	</details>
 	<details>
 		<summary>Version 1.0 - 2018-12-27</summary>
 		<p>The default background is gray (#eee) without image. The background image is hosted in the WMS at this location. <code>https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg</code>.</p>
-		<p>The intend is to publish background image that represent natural Canadian landscape and may get updated montly or seasonal.</p>
+		<p>The intent is to publish a background image that represents natural Canadian landscapes and may get updated monthly or seasonally.</p>
 	</details>
 
 	<h3 id="promotional-banner">Promotional banner</h3>

diff --git a/templates/home/api-fr.html b/templates/home/api-fr.html
@@ -94,18 +94,24 @@ <h4>Previous versions</h4>
 	<h3 id="home-page-banner">Home page banner</h3>
 	<dl>
 		<dt>Version</dt>
-		<dd>2.0</dd>
+		<dd>2.1</dd>
 		<dt>Updated</dt>
-		<dd>2019-05-09</dd>
+		<dd>2024-05-23</dd>
 	</dl>
 
-	<p>The background image is loaded with the provisional plugin bgimg which set the background image. The background image is hosted in the WMS at this location. <code>https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg</code>.</p>
-	<p>The intend is to publish background image that represent natural Canadian landscape and may get updated montly or seasonal.</p>
+	<h4>Latest version changes</h4>
+	<p>The spacing above and below the banner text block is removed on xs and xxs breakpoints.</p>
+
 	<h4>Previous version</h4>
 	<details>
-		<summary>Version 1 - 2018-12-27</summary>
+		<summary>Version 2.0 - 2019-05-09</summary>
+		<p>The background image is loaded with the provisional plugin bgimg which set the background image. The background image is hosted in the WMS at this location. <code>https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg</code>.</p>
+		<p>The intent is to publish a background image that represents natural Canadian landscapes and may get updated monthly or seasonally.</p>
+	</details>
+	<details>
+		<summary>Version 1.0 - 2018-12-27</summary>
 		<p>The default background is gray (#eee) without image. The background image is hosted in the WMS at this location. <code>https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg</code>.</p>
-		<p>The intend is to publish background image that represent natural Canadian landscape and may get updated montly or seasonal.</p>
+		<p>The intent is to publish a background image that represents natural Canadian landscapes and may get updated monthly or seasonally.</p>
 	</details>
 
 	<h3 id="promotional-banner">Promotional banner</h3>

diff --git a/templates/home/home-en.html b/templates/home/home-en.html
@@ -7,14 +7,14 @@
 breadcrumbs: false
 ---
 
-<div class="provisional bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner-480w.jpg 479w, https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg 480w">
+<div class="bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1920.jpg 1920w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1200.jpg 1200w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-992.jpg 992w, https://wet-boew.github.io/vocab/wb/utilities#no-image 767w">
 	<div class="container p-0 p-sm-3">
-		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-gctheme">
+		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-gctheme opct-90">
 			<h1 property="name" id="wb-cont">Canada.ca</h1>
 			<p class="mrgn-tp-md">The official website of the Government of Canada</p>
 		</div>
 	</div>
-	<section class="provisional gc-featured-link">
+	<section class="gc-featured-link">
 		<div class="container">
 			<div class="row">
 				<div class="col-xs-12">

diff --git a/templates/home/home-fr.html b/templates/home/home-fr.html
@@ -7,14 +7,14 @@
 breadcrumbs: false
 ---
 
-<div class="provisional bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner-480w.jpg 479w, https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg 480w">
+<div class="bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1920.jpg 1920w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1200.jpg 1200w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-992.jpg 992w, https://wet-boew.github.io/vocab/wb/utilities#no-image 767w">
 	<div class="container p-0 p-sm-3">
-		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-gctheme">
+		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-gctheme opct-90">
 			<h1 property="name" id="wb-cont">Canada.ca</h1>
 			<p class="mrgn-tp-md">Le site officiel du gouvernement du Canada</p>
 		</div>
 	</div>
-	<section class="provisional gc-featured-link">
+	<section class="gc-featured-link">
 		<div class="container">
 			<div class="row">
 				<div class="col-xs-12">

diff --git a/templates/thematic/dark-theme-home-en.html b/templates/thematic/dark-theme-home-en.html
@@ -7,9 +7,9 @@
 share: true
 pageclass: provisional dark-theme
 ---
-<div class="bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner-480w.jpg 479w, https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg 480w">
+<div class="bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1920.jpg 1920w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1200.jpg 1200w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-992.jpg 992w, https://wet-boew.github.io/vocab/wb/utilities#no-image 767w">
 	<div class="container p-0 p-sm-3">
-		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-darker">
+		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-darker opct-90">
 			<h1 property="name" id="wb-cont">Canada.ca</h1>
 			<p class="mrgn-tp-md">The official website of the Government of Canada</p>
 		</div>

diff --git a/templates/thematic/dark-theme-home-fr.html b/templates/thematic/dark-theme-home-fr.html
@@ -7,9 +7,9 @@
 share: true
 pageclass: provisional dark-theme
 ---
-<div class="provisional bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner-480w.jpg 479w, https://www.canada.ca/content/dam/canada/carousel/bkg-home-banner.jpg 480w">
+<div class="provisional bg-cover" data-bgimg-srcset="https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1920.jpg 1920w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-1200.jpg 1200w, https://www.canada.ca/content/dam/canada/homepage-bg/bkg-home-banner-spring-992.jpg 992w, https://wet-boew.github.io/vocab/wb/utilities#no-image 767w">
 	<div class="container p-0 p-sm-3">
-		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-darker">
+		<div class="well header-rwd brdr-0 brdr-rds-0 text-white bg-darker opct-90">
 			<h1 property="name" id="wb-cont">Canada.ca</h1>
 			<p class="mrgn-tp-md">Le site officiel du gouvernement du Canada</p>
 		</div>