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

apache · Dec 20, 2022 · 9c19fb4 · 9c19fb4
1 parent 1e35bca
commit 9c19fb4
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 5 deletions.
diff --git 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
@@ -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; }