From 37e7c36c96a3a904a75104aa0f84bf440aeee82b Mon Sep 17 00:00:00 2001
From: thibautsailly <thibaut@tsailly.net>
Date: Fri, 10 Nov 2023 16:26:16 +0100
Subject: [PATCH] css cleanup and added a symbol to indicate an intentional
 page end

---
 docs/index.html |  1 +
 docs/style.css  | 25 +++++++++++++++----------
 2 files changed, 16 insertions(+), 10 deletions(-)

diff --git a/docs/index.html b/docs/index.html
index 5214646..2b72caa 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -488,6 +488,7 @@ <h4>Link</h4>
 						<p>They keep the primary colour to stand out more. Banners are for important messages, but their compact format doesn&#8217;t allow for much details. If more details need to be communicated to users, having striking links in the message will make it more likely for them to visit them. The alternative would have been to use the text colour of the message with an underline, but it doesn&#8217;t make links stand out enough.</p>	
 					</div>
 				</article>
+				<p id="end">❧</p>
 			</div>
 		</section>
 	</main>
diff --git a/docs/style.css b/docs/style.css
index 2406f5c..71226c6 100644
--- a/docs/style.css
+++ b/docs/style.css
@@ -345,25 +345,25 @@ li {
 
 .banner.info {
 	color: #216482;
-	background: #E6F7FF url(img/icn/banner-info.svg) no-repeat 24px 10px;
+	background: #E6F7FF url(img/icn/banner-info.svg) no-repeat 1.5em 0.625em;
 	box-shadow: 0 1px 0 0 #70C1E5, 0 2px 0 0 #E6F7FF, 0 3px 0 0 #70C1E5, 0 4px 0 0 #fff;
 }
 
 .banner.success {
 	color: #0B723C;
-	background: #E6F7EE url(img/icn/banner-success.svg) no-repeat 24px 10px;
+	background: #E6F7EE url(img/icn/banner-success.svg) no-repeat 1.5em 0.625em;
 	box-shadow: 0 1px 0 0 #3CCA80, 0 2px 0 0 #E6F7EE, 0 3px 0 0 #3CCA80, 0 4px 0 0 #fff;
 }
 
 .banner.warning {
 	color: #7D521E;
-	background: #FDF5E1 url(img/icn/banner-warning.svg) no-repeat 24px 10px;
+	background: #FDF5E1 url(img/icn/banner-warning.svg) no-repeat 1.5em 0.625em;
 	box-shadow: 0 1px 0 0 #EAA72B, 0 2px 0 0 #FDF5E1, 0 3px 0 0 #EAA72B, 0 4px 0 0 #fff;
 }
 
 .banner.error {
 	color: #D91C1C;
-	background: #FFEEED url(img/icn/banner-error.svg) no-repeat 24px 10px;
+	background: #FFEEED url(img/icn/banner-error.svg) no-repeat 1.5em 0.625em;
 	box-shadow: 0 1px 0 0 #FF6868, 0 2px 0 0 #FFEEED, 0 3px 0 0 #FF6868, 0 4px 0 0 #fff;
 }
 
@@ -371,20 +371,20 @@ li {
 	display: block;
 	float: left;
 	font-weight: 600;
-	margin: 11px 0 0 64px;
+	margin: 0.6875em 0 0 4em;
 }
 
 .banner p.banner_message_content {
 	font-weight: normal;
-	margin: 11px 0 0 16px;
+	margin: 0.6875em 0 0 1em;
 }
 
 a.banner_close:link, a.banner_close:visited {
 	display: block;
 	float: right;
-	margin: 14px 16px 0 0;
-	width: 16px;
-	height: 16px;
+	margin: 0.875em 1em 0 0;
+	width: 1em;
+	height: 1em;
 	text-indent: -9999em;
 	opacity: 0.4;
 }
@@ -419,9 +419,14 @@ a.banner_close:hover::after {
 	overflow: hidden;
 	background-color: #fff;
 	/* background-color: yellow; */
-	
 	}
 
+#end {
+	font-size: 2em;
+	color: rgba(0,0,0,0.1);
+	padding: 3em 0 0 3.8em;
+}
+
 footer {
 	padding: 3em 3em 3em 10.7777em;
 	height: 1em;