Colored icons for header

docusaurus.config.js

@@ -124,6 +124,7 @@ module.exports = {
             {
               href: 'https://www.rancher.com',
               label: 'Rancher',
+              className: 'navbar__icon navbar__rancher'
             },
             {
               type: 'html',
@@ -132,18 +133,22 @@ module.exports = {
             {
               href: 'https://elemental.docs.rancher.com/',
               label: 'Elemental',
+              className: 'navbar__icon navbar__elemental'
             },
             {
               href: 'https://epinio.io/',
               label: 'Epinio',
+              className: 'navbar__icon navbar__epinio'
             },
             {
               href: 'https://fleet.rancher.io/',
               label: 'Fleet',
+              className: 'navbar__icon navbar__fleet'
             },
             {
               href: 'https://harvesterhci.io',
               label: 'Harvester',
+              className: 'navbar__icon navbar__harvester'
             },
             {
               type: 'html',
@@ -152,6 +157,7 @@ module.exports = {
             {
               href: 'https://opensource.suse.com',
               label: 'More Projects...',
+              className: 'navbar__icon navbar__suse'
             },
           ]
         }

src/css/custom.css

@@ -4,7 +4,8 @@
  * bundles Infima by default. Infima is a CSS framework designed to
  * work well for content-centric websites.
  */
-/* Import fonts. */
+
+ /* Import fonts. */
 
 /* poppins */
 @font-face {
@@ -210,6 +211,74 @@ a.btn.navbar__github::before {
   padding: 0 var(--ifm-pre-padding);
 }
 
+/* Navbar "More from SUSE" items. Thanks to Nunix. https://github.com/rancher/elemental-docs/pull/235 */
+
+.navbar__icon {
+  font-family: poppins,sans-serif;
+  font-size: 16px;
+}
+
+.navbar__icon:before {
+  content: "";
+  display: inline-flex;
+  height: 20px;
+  width: 20px;
+  margin-right: 4px;
+  background-color: var(--ifm-navbar-link-color);
+}
+
+.navbar__rancher:before {
+  mask: url(/static/img/header/icon-rancher.png) no-repeat 100% 100%;
+  mask-size: contain;
+  width: 35px;
+  background-color: #2e68e9;
+}
+
+.navbar__elemental:before {
+  mask: url(/static/img/header/icon-elemental.png) no-repeat 100% 100%;
+  mask-size: cover;
+  width: 35px;
+  height: 22px;
+  padding-bottom: 7px;
+  background-color: #7100d4;
+}
+
+.navbar__epinio:before {
+  mask: url(/static/img/header/icon-epinio.png) no-repeat 100% 100%;
+  mask-size: cover;
+  width: 35px;
+  height: 22px;
+  padding-bottom: 7px;
+  background-color: #004d93;
+}
+
+.navbar__fleet:before {
+  mask: url(/static/img/header/icon-fleet.png) no-repeat 100% 100%;
+  mask-size: cover;
+  width: 35px;
+  height: 22px;
+  padding-bottom: 7px;
+  background-color: #00b056;
+}
+
+.navbar__harvester:before {
+  mask: url(/static/img/header/icon-harvester.png) no-repeat 100% 100%;
+  mask-size: cover;
+  width: 35px;
+  height: 22px;
+  padding-bottom: 7px;
+  background-color: #00a580;
+}
+
+.navbar__suse:before {
+  mask: url(/static/img/header/icon-suse.png) no-repeat 100% 100%;
+  mask-size: cover;
+  width: 35px;
+  height: 13px;
+  padding-bottom: 7px;
+  background-color: #30ba78;
+}
+
 
 /* These styles are authored by bravemaster619 https://dev.to/bravemaster619/simplest-way-to-embed-a-youtube-video-in-your-react-app-3bk2 */
 .video-responsive {