site style update:

- Use kubernetes blue + white for header / footer
- Drop banner. It's been 14 months and we're by far the last ones in the ecosystem. Kubnernetes usually time-boxes banners.

site/assets/css/inline.css

@@ -11,12 +11,13 @@ html {
   margin: 0;
   padding: 0;
   font-size: 100%;
-  background-color: white;
+  background-color: #326ce5;
-  color: black;
+  color: white;
   font-family: -apple-system, BlinkMacSystemFont, Roboto, Droid Sans, Helvetica Neue, Helvetica, Arial, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
 }
 
-code, pre {
+code,
+pre {
   font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Roboto Mono, Courier, monospace;
 }
 
@@ -30,6 +31,7 @@ body {
   /* sticky footer */
   display: flex;
   flex-direction: column;
+  color: black;
   background-color: white;
 }
 
@@ -42,11 +44,13 @@ body {
   margin: 0;
   margin-left: 240px;
 }
+
 .sidebar-collapsed #wrapper {
   margin-left: 0;
 }
 
-#content, #footer-content {
+#content,
+#footer-content {
   margin: 0 auto;
   padding: 0 1em;
   width: calc(100% - 2em);
@@ -54,17 +58,22 @@ body {
 }
 
 #footer {
-  background: #44a2f1;
+  background: #326ce5;
   color: white;
   padding: 1em;
   margin-top: 1em;
   border-top: .1em solid rgba(0, 0, 0, 0.1);
 }
+
 #footer a {
   color: white;
 }
+
 /* page footer*/
-.footer { text-align: center; }
+.footer {
+  text-align: center;
+}
+
 .footer>* {
   font-size: .8em;
   line-height: 1.4;
@@ -72,7 +81,7 @@ body {
 
 #content {
   /* clear navbar */
-  padding-top: 1em;
+  padding-top: 1.5em;
   /* push down footer */
   min-height: calc(100vh - 4em);
 }
@@ -84,46 +93,61 @@ body {
   padding: 2px 0;
   margin-left: .1em;
   /*background-color: #326ce5;*/
-  background-color: white;
+  background-color: #326ce5;
   border-bottom: .1em solid rgba(0, 0, 0, 0.1);
   display: flex;
   justify-content: space-between;
   z-index: 99999;
 }
-.sidebar-collapsed #navbar{
+
+.sidebar-collapsed #navbar {
   width: 100%;
   margin-left: 0;
 }
+
 #navbar-title>a {
   font-weight: bold;
   font-size: 1.2em;
   padding: 0 4px;
   vertical-align: middle;
 }
-#navbar-title>a, #github>a{
+
+#navbar-title>a,
+#github>a {
   text-decoration: none;
+  color: white;
 }
+
+#navbar>#github {
+  filter: invert(1);
+}
+
 #sidebar-toggle {
-  color: black;
+  color: white;
   cursor: pointer;
   padding: .1em .5em;
   padding-bottom: 0;
   user-select: none;
 }
-#github { padding: 0 .5em; }
+
+#github {
+  padding: 0 .5em;
+}
+
 #github img {
   height: 1.4em;
   width: 1.4em;
   vertical-align: middle;
 }
 
-#noticebar{
+#noticebar {
   padding: 1.5em;
   padding-top: 2em;
   padding-bottom: 1em;
   margin-bottom: -1.5em;
   border-bottom: .1em solid rgba(0, 0, 0, 0.1);
 }
+
 #noticebar>* {
   max-width: 46rem;
   margin-left: auto;
@@ -132,51 +156,6 @@ body {
   margin-block-start: 0.25em;
 }
 
-#noticebar.black {
-  color: white;
-  background: black;
-}
-#navbar.black {
-  color: white;
-  background: black;
-}
-#noticebar.ua {
-  background: #ffd700;
-  color: black;
-}
-#noticebar.docker-blue {
-  background: #44a2f1;
-  color: white;
-}
-#navbar.ua {
-  background: #0057b8;
-  color: white;
-}
-#navbar.docker-blue {
-  background: #44a2f1;
-  color: white;
-}
-/* invert colors on different background */
-.black a, .docker-blue a{
-  color: white;
-}
-#navbar.ua a {
-  color: #ffd700;
-}
-#noticebar.ua a {
-  color: blue;
-}
-#navbar.black>#sidebar-toggle,
-#navbar.docker-blue>#sidebar-toggle,
-#navbar.ua>#sidebar-toggle {
-  color: white;
-}
-#navbar.black>#github,
-#navbar.docker-blue>#github,
-#navbar.ua>#github {
-  filter: invert(1);
-}
-
 #sidebar {
   height: 100%;
   position: fixed;
@@ -188,13 +167,16 @@ body {
   z-index: 99999;
   overflow-y: auto;
 }
+
 .sidebar-collapsed #sidebar {
   display: none;
 }
+
 #sidebar-logo {
   padding: 16px 16px;
   padding-bottom: 10px;
 }
+
 #sidebar-title {
   display: none;
   margin-top: -16px;
@@ -210,23 +192,33 @@ body {
 #sidebar li.active :first-child {
   font-weight: bold;
 }
+
 #sidebar li.active-entry :first-child {
   color: black;
 }
 
 /* consistent link color */
-a { color: #326be5; }
+a {
+  color: #326be5;
+}
 
 p {
   margin-block-start: .5em;
 }
-h1, h2, h3, h4, h5 {
+
+h1,
+h2,
+h3,
+h4,
+h5 {
   margin-block-start: 1rem;
   margin-block-end: .25rem;
 }
 
 /* ensure images don't go off the page */
-#content img { max-width: 100%; }
+#content img {
+  max-width: 100%;
+}
 
 hr {
   background: #333;
@@ -261,12 +253,12 @@ table.includecode {
   max-width: 100%;
   width: 100%;
   table-layout: fixed;
-  border: 1px solid rgba(0,0,0,.125);
+  border: 1px solid rgba(0, 0, 0, .125);
   border-spacing: 0;
 }
 
 table.includecode thead th {
-  border-bottom: 1px solid rgba(0,0,0,.125);
+  border-bottom: 1px solid rgba(0, 0, 0, .125);
   font-weight: normal;
   font-size: 85%;
 }
@@ -296,12 +288,12 @@ table.includecode pre {
 
 /* don't display this, these are textareas needed to copy to clipboard */
 .hidden-copy-text {
- background: transparent;
+  background: transparent;
- width: 2em;
+  width: 2em;
- height: 2em;
+  height: 2em;
- position: fixed;
+  position: fixed;
- top: 0;
+  top: 0;
- left: 0;
+  left: 0;
 }
 
 /* heading anchors */
@@ -312,7 +304,11 @@ table.includecode pre {
   vertical-align: middle;
   text-decoration: none !important;
 }
-h1:hover a, h2:hover a, h3:hover a, h4:hover a {
+
+h1:hover a,
+h2:hover a,
+h3:hover a,
+h4:hover a {
   visibility: visible;
 }
 
@@ -320,18 +316,22 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
   margin-block-start: 0;
   margin-block-end: 0;
 }
+
 #content ul {
   padding-left: 1.75em;
   margin-block-start: .5em;
   margin-block-end: .5em;
 }
+
 #content ul ul {
   padding-left: 1em;
   margin-block-start: 0;
 }
+
 #sidebar ul {
   margin-bottom: 1em;
 }
+
 #sidebar ul ul {
   padding-left: 1.25em;
 }
@@ -345,9 +345,11 @@ h1:hover a, h2:hover a, h3:hover a, h4:hover a {
   margin-block-start: 0;
   margin-block-end: 0;
 }
+
 .page-description a {
   color: #0bd8ec;
 }
+
 .page-description code {
   color: black;
 }
@@ -373,6 +375,7 @@ blockquote p {
   height: 0;
   padding-bottom: 56.25%;
 }
+
 .video-wrapper iframe {
   position: absolute;
   top: 0;
@@ -401,15 +404,19 @@ blockquote p {
   #content {
     font-size: 16px;
   }
+
   #wrapper {
     margin-left: 0;
   }
+
   #wrapper #navbar {
     margin-left: 241px;
   }
+
   .sidebar-collapsed #wrapper #navbar {
     margin-left: 0;
   }
+
   #content ul {
     padding-left: 1.5em;
   }
@@ -420,4 +427,4 @@ blockquote p {
   display: block;
   height: 2em;
   margin: -2em 0 0;
-}
+}

site/layouts/partials/navbar.html

@@ -1,6 +1,3 @@
 <div id="navbar" class="ua">
   <span id="sidebar-toggle" onclick="toggleSidebar()">&#9776;</span><span id="navbar-title"><a href="{{.Site.BaseURL}}">kind</a> </span><span id="github"><a href="https://github.com/kubernetes-sigs/kind/"><img alt="github" title="github" src="{{ "third_party/GitHub-Mark-120px-plus.png" | relURL }}"></a></span>
 </div>
-<div id="noticebar" class="ua">
-  <h3 style="text-align: center; margin-bottom:-0.5em;">Please <a href="http://novaukraine.org/donate">Help Provide Humanitarian Aid for Ukraine</a></h3>
-</div>