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

@@ -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"

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%);
+	}
+}

themes/openpowerfoundation/assets/css/variables.scss

@@ -11,5 +11,6 @@ $xxl: 1300px;
 
 // Colours
 
+$primary: #2566f4;
 $lightgrey: #f9f9f9;
 $white: #ffffff;

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>