From 9c19fb4cbbb2da34e81931d891d1f89ce016e3e6 Mon Sep 17 00:00:00 2001
From: Kaijie Chen <ckj@apache.org>
Date: Tue, 20 Dec 2022 12:15:47 +0800
Subject: [PATCH] HDDS-4903. Add Ozone logo to the website (#16) (#32)

---
 layouts/partials/header.html |  9 +++++++--
 static/style.css             | 15 ++++++++++++---
 2 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 19fec3fd4..4458d64bd 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -43,9 +43,8 @@
         <ul class="breadcrumb col-md-6">
             <li>
                 <img class="asf-logo" src="asf_feather.png"/>
-                <a  href="https://www.apache.org">Apache Software Foundation</span></a>
+                <a href="https://www.apache.org">Apache Software Foundation</a>
             </li>
-            <li><a href="{{.Site.BaseURL}}">Ozone&trade;</a></li>
         </ul>
         <div class="col-md-6">
             <ul class="pull-right breadcrumb">
@@ -61,6 +60,12 @@
     <nav class="navbar navbar-default navbar-static-top" role="navigation">
         <div class="container">
             <div class="navbar-header">
+                <ul class="nav navbar-nav navbar-brand">
+                    <li>
+                        <img src="ozone-logo.png" alt="Ozone logo"/>
+                        <a href="{{.Site.BaseURL}}">Apache Ozone&trade;</a>
+                    </li>
+                </ul>
                 <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
                         data-target="#ozone-menu" aria-expanded="false">
                     <span class="sr-only">Toggle navigation</span>
diff --git a/static/style.css b/static/style.css
index ffb0c4aa5..7d0cfb3d3 100644
--- a/static/style.css
+++ b/static/style.css
@@ -40,17 +40,18 @@
     z-index: 0;
     margin-bottom: 0px; }
       .topnav .navbar .navbar-brand img {
+        margin: -15px 5px 0 0;
+        height: 60px;
         float: left; }
     .topnav .navbar .nav {
-      padding: 30px 0 0 0;
       color: #fff; }
       .topnav .navbar .nav li a {
+        white-space: nowrap;
         text-align: center;
         font-size: 24px;
         padding: 5px 0 5px 5px;
-        margin: 0 10px;}
+        margin: 0 10px; }
         .topnav .navbar .nav li a:hover {
-
           background: none; }
     .topnav .navbar .navbar-header {
       height: 80px; }
@@ -67,6 +68,11 @@
       border-color: transparent;
       box-shadow: none; }
 
+@media (min-width: 768px) {
+  .topnav .navbar .nav {
+    padding: 25px 0 0 0;
+  }
+}
 @media (min-width: 768px) and (max-width: 1024px) {
   .navbar .nav li a {
     padding: 8px 0 15px 8px; } }
@@ -149,6 +155,9 @@
   }
 
 @media (max-width: 767px) {
+  .topnav .navbar .navbar-brand {
+    margin: 10px 0; }
+
   .jumbotron > .lead {
     font-weight: 200; }