Insights card styles, navbar restructuring, begin navbar styles

This commit is contained in:
Jordan Doig
2020-12-08 22:22:46 -07:00
parent 2b77ac2b1e
commit e64fb4cdbd
5 changed files with 54 additions and 33 deletions

View File

@@ -11,6 +11,13 @@
background-color: #CACBD2;
padding-left: 40px;
padding-right: 40px;
box-shadow: none;
}
.card.insights a {
background-color: #20162D;
color: #fff;
font-weight: bold;
border-radius: 2rem;
}
.filters .title,

View File

@@ -5,34 +5,11 @@ body {
line-height: 1.3em;
}
.navbar {
padding-top: 20px;
}
.navbar, .main-content {
.main-content {
width: 960px;
margin: auto;
}
.navbar .navbar-content {
padding: 0px 20px;
}
.navbar .navbar-right {
float: right;
}
.navbar .logo {
height: 80px;
}
.navbar .fw-logo {
height: 64px;
}
.navbar a {
text-decoration: none;
}
.card {
margin: 25px 20px;
padding: 20px;

View File

@@ -83,10 +83,10 @@
</div>
</div>
<div class="card insights">
<img src="" />
<div class="card insights py-2">
<img class="col-3 align-self-center" src="static/images/FW_Insights_Polaris.svg" />
<span>Fairwinds, the company behind Polaris, now offers Fairwinds Insights, a multi-cluster, multi-user Kubernetes configuration validation and policy enforcement platform. Fairwinds Insights can help you avoid errors that lead to wasted time, compute costs, and increased risk.</span>
<button>Try Insights</button>
<a class="col-auto py-1 px-3 mt-2 align-self-center" href="https://fairwinds.com/insights?source=polaris" target="_blank">Try Insights</a>
</div>
<div class="card category">

View File

@@ -18,6 +18,7 @@
<link rel="stylesheet" href="static/css/fontawesome-5.7.2.css">
<link rel="stylesheet" href="static/css/dashboard.css">
<link rel="stylesheet" href="static/css/footer.css">
<link rel="stylesheet" href="static/css/navbar.css">
<script type="text/javascript" src="static/js/Chart-2.7.2.min.js"></script>
<script type="text/javascript" src="static/js/cash-4.1.2.min.js"></script>
<script type="text/javascript" src="static/js/main.js"></script>

View File

@@ -1,14 +1,50 @@
{{define "navbar"}}
<div class="navbar">
<div class="navbar-content">
<a href="{{ .BasePath }}">
<img class="logo" src="static/images/polaris-logo.png" alt="Polaris" />
</a>
<div class="navbar-right">
<div class="fw-nav">
<div class="container p-2">
<a href="https://fairwinds.com?source=polaris" target="_blank">
<img class="fw-logo" src="static/images/oss-logo.png" alt="Fairwinds" />
<img class="fw-logo" src="static/images/white_logo_fairwinds.svg" alt="Fairwinds" />
</a>
<div class="right-section col-5 p-0 d-flex justify-content-between">
<a href="https://github.com/FairwindsOps" target="_blank">
<img class="gh-logo" src="static/images/white_icon_github.svg" alt="Github" />
</a>
<a href="https://twitter.com/fairwindsops" target="_blank">
<img class="tw-logo" src="static/images/white_icon_twitter.svg" alt="Twitter" />
</a>
<a class="mr-5" href="mailto:sales@fairwinds.com" target="_blank">
<img class="em-logo" src="static/images/white_icon_email.svg" alt="Email" />
</a>
<a href="https://join.slack.com/t/fairwindscommunity/shared_invite/zt-e3c6vj4l-3lIH6dvKqzWII5fSSFDi1g" target="_blank">
<img class="sl-logo mr-3" src="static/images/white_icon_slack.svg" alt="Slack" />
<span>Join our community slack</span>
</a>
</div>
</div>
</div>
<div class="polaris-nav container p-2">
<div class="left-section">
<a href="{{ .BasePath }}">
<img class="logo" src="static/images/polaris_logo.svg" alt="Polaris" />
</a>
<a href="https://polaris.docs.fairwinds.com/">Docs</a>
</div>
<div class="right-section">
<span>Overview</span>
<span>Insights</span>
<span>Category</span>
<span>Namespaces</span>
</div>
</div>
<!-- <div class="navbar-content"> -->
<!-- <a href="{{ .BasePath }}"> -->
<!-- <img class="logo" src="static/images/polaris-logo.png" alt="Polaris" /> -->
<!-- </a> -->
<!-- <div class="navbar-right"> -->
<!-- <a href="https://fairwinds.com?source=polaris" target="_blank"> -->
<!-- <img class="fw-logo" src="static/images/oss-logo.png" alt="Fairwinds" /> -->
<!-- </a> -->
<!-- </div> -->
<!-- </div> -->
</div>
{{end}}