commit 9c19fb4cbbb2da34e81931d891d1f89ce016e3e6
author Kaijie Chen <ckj@apache.org> Tue Dec 20 12:15:47 2022 +0800
committer GitHub <noreply@github.com> Tue Dec 20 12:15:47 2022 +0800
tree 8d0dd43deb4d4ad6b3c24f2f9e5bcd81d8e95d73
parent 1e35bcaeb3a154b4b915b9658e78627f829257cd

HDDS-4903. Add Ozone logo to the website (#16) (#32)

layouts/partials/header.html

diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index 19fec3f..4458d64 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>

static/style.css

diff --git a/static/style.css b/static/style.css
index ffb0c4a..7d0cfb3 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; }