From 93933e41656775b3ff8c0dbbc38a31cb6c525a79 Mon Sep 17 00:00:00 2001
From: Toshaan Bharvani <toshaan@vantosh.com>
Date: Thu, 1 Sep 2022 01:40:45 +0200
Subject: [PATCH] add a headline at the bottom of the navbar just before a page

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
---
 config/_default/menus.toml                    |  6 ++
 .../assets/css/header.scss                    | 57 +++++++++++++++++++
 .../assets/css/variables.scss                 |  9 +--
 .../layouts/partials/navbar.html              |  7 +++
 4 files changed, 75 insertions(+), 4 deletions(-)

diff --git a/config/_default/menus.toml b/config/_default/menus.toml
index d0baab9..0eb877b 100644
--- a/config/_default/menus.toml
+++ b/config/_default/menus.toml
@@ -192,3 +192,9 @@
 	pre = "fab fa-weixin"
 	url = "http://weixin.qq.com/r/2DrD20PEWx4krQe492-K"
 	weight = -1600
+
+
+### headlines
+[[headlines]]
+	name = "OpenPOWER Summit 2022 Call-for-Presentations"
+	url = "https://cfp.openpower.foundation/openpowersummit2022/cfp"
diff --git a/themes/openpowerfoundation/assets/css/header.scss b/themes/openpowerfoundation/assets/css/header.scss
index a26f27a..e6c9eb5 100644
--- a/themes/openpowerfoundation/assets/css/header.scss
+++ b/themes/openpowerfoundation/assets/css/header.scss
@@ -279,3 +279,60 @@ body {
 		min-width: 97px; 
 	}
 }
+.headline {
+	width: 100%;
+	height: 2.25rem;
+	overflow: hidden;
+	position: absolute;
+	color: $white;
+	background-color: $primary;
+	vertical-align: top;
+	z-index: 1;
+}
+.headline p {
+	position: absolute;
+	width: 100%;
+	height: 100%;
+	margin: 0;
+	text-align: center;
+	-moz-transform: translateX(100%);
+	-webkit-transform: translateX(100%);
+	transform: translateX(100%);
+	-moz-animation: scroll-left 30s linear infinite;
+	-webkit-animation: scroll-left 30s linear infinite;
+	animation: scroll-left 30s linear infinite;
+}
+.headline a {
+	color: $white;
+}
+.headline a:hover {
+	text-decoration: underline;
+}
+@-moz-keyframes scroll-left {
+	0% {
+		-moz-transform: translateX(100%);
+	}
+	100% {
+		-moz-transform: translateX(-100%);
+	}
+}
+@-webkit-keyframes scroll-left {
+	0% {
+		-webkit-transform: translateX(100%);
+	}
+	100% {
+		-webkit-transform: translateX(-100%);
+	}
+}
+@keyframes scroll-left {
+	0% {
+		-moz-transform: translateX(100%);
+		-webkit-transform: translateX(100%);
+		transform: translateX(100%);
+	}
+	100% {
+		-moz-transform: translateX(-100%);
+		-webkit-transform: translateX(-100%);
+		transform: translateX(-100%);
+	}
+}
diff --git a/themes/openpowerfoundation/assets/css/variables.scss b/themes/openpowerfoundation/assets/css/variables.scss
index 3d55588..d279294 100644
--- a/themes/openpowerfoundation/assets/css/variables.scss
+++ b/themes/openpowerfoundation/assets/css/variables.scss
@@ -3,13 +3,14 @@
 // Bootstrap breakpoints
 
 $xs: 0;
-$sm: 576px; 
-$md: 768px; 
-$lg: 992px; 
+$sm: 576px;
+$md: 768px;
+$lg: 992px;
 $xl: 1200px;
 $xxl: 1300px;
 
 // Colours
 
+$primary: #2566f4;
 $lightgrey: #f9f9f9;
-$white: #ffffff;
\ No newline at end of file
+$white: #ffffff;
diff --git a/themes/openpowerfoundation/layouts/partials/navbar.html b/themes/openpowerfoundation/layouts/partials/navbar.html
index 1b9f1a9..71a4965 100644
--- a/themes/openpowerfoundation/layouts/partials/navbar.html
+++ b/themes/openpowerfoundation/layouts/partials/navbar.html
@@ -104,4 +104,11 @@
 		</div>
 	</div>
 </div>
+{{ if .Site.Menus.headlines }}
+<div class="headline"><p>
+{{ range .Site.Menus.headlines }}
+	&nbsp;&nbsp;<a href="{{ .URL }}">{{ .Name }}</a>&nbsp;&nbsp;
+{{ end }}
+</p></div>
+{{ end }}
 </header>