add a headline at the bottom of the navbar just before a page

Signed-off-by: Toshaan Bharvani <toshaan@vantosh.com>
newmemberlevels
Toshaan Bharvani 2 years ago
parent d42ab0caf4
commit 93933e4165

@ -192,3 +192,9 @@
pre = "fab fa-weixin" pre = "fab fa-weixin"
url = "http://weixin.qq.com/r/2DrD20PEWx4krQe492-K" url = "http://weixin.qq.com/r/2DrD20PEWx4krQe492-K"
weight = -1600 weight = -1600


### headlines
[[headlines]]
name = "OpenPOWER Summit 2022 Call-for-Presentations"
url = "https://cfp.openpower.foundation/openpowersummit2022/cfp"

@ -279,3 +279,60 @@ body {
min-width: 97px; 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%);
}
}

@ -11,5 +11,6 @@ $xxl: 1300px;


// Colours // Colours


$primary: #2566f4;
$lightgrey: #f9f9f9; $lightgrey: #f9f9f9;
$white: #ffffff; $white: #ffffff;

@ -104,4 +104,11 @@
</div> </div>
</div> </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> </header>

Loading…
Cancel
Save