website: add alert banner

This commit is contained in:
Mike Wickett 2020-04-28 08:54:50 -04:00
parent 137a2c32c6
commit 2a250f39a5
5 changed files with 41 additions and 0 deletions

View File

@ -0,0 +1,29 @@
.alert-bar {
color: white;
position: relative;
background: linear-gradient(90deg, #ca2171 1.56%, #8e134a 100%);
display: flex;
justify-content: center;
& a {
text-decoration: none;
display: inline-flex;
color: white;
padding: 14px 15px;
&:hover {
text-decoration: none;
}
& p {
padding: 0;
margin: 0;
}
& .link {
margin-left: 30px;
text-decoration: underline;
font-weight: 500;
}
}
}

View File

@ -26,6 +26,7 @@
@import '_global';
// Components
@import '_alert-bar';
@import '_header';
@import '_footer';
@import '_inner';

View File

@ -2,6 +2,7 @@
description: |-
Consul is a service networking solution to connect and secure services across
any runtime platform and public or private cloud
show_alert_bar: true
---
<div class='consul-connect'>

View File

@ -0,0 +1,6 @@
<div class="alert-bar g-type-body-small">
<a href="https://www.hashicorp.com/products/consul">
<p>HashiCorp Consul Announcement</p>
<span class="link">Learn More</span>
</a>
</div>

View File

@ -47,6 +47,10 @@
<body id="<%= body_id_for(current_page) %>" class="<%= body_classes_for(current_page) %>">
<% if current_page.data.show_alert_bar == true %>
<%= partial("layouts/_alert-bar") %>
<% end %>
<%= mega_nav :consul %>
<div id="header" class="navigation navbar-static-top hidden-print">