doc: doxygen: adjust Doxygen theme to match Sphinx better

Adjust the Doxygen theme (based on doxygen-awesome) to match the Sphinx
theme. While not perfect, the experience should now be more consistent.

Signed-off-by: Gerard Marull-Paretas <[email protected]>

Author: gmarull

doc/_doxygen/doxygen-awesome-zephyr.css

@@ -20,6 +20,9 @@ html {
 
     --link-color: #2980b9;
     --param-color: #b71c1c;
+
+    --side-nav-fixed-width: 300px;
+    --top-height: 220px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -54,12 +57,6 @@ html.dark-mode {
     --param-color: #ef9a9a;
 }
 
-@media screen and (min-width: 767px) {
-    #projectname, #projectbrief, #projectnumber {
-        color: var(--side-nav-foreground);
-    }
-}
-
 a:link, a:visited, a:hover, a:focus, a:active {
     color: var(--link-color) !important;
 }
@@ -71,3 +68,40 @@ a:link, a:visited, a:hover, a:focus, a:active {
 dl.section dd, dl.bug dd, dl.deprecated dd {
     margin-inline-start: revert;
 }
+
+/* adjust top and title to ~match Sphinx docs */
+#top {
+    background: var(--side-nav-background);
+}
+
+#titlearea {
+    padding-bottom: 0;
+}
+
+#titlearea table {
+    width: 100%;
+}
+
+#projectlogo img {
+    width: 200px;
+    height: 95px;
+    max-height: none !important;
+    padding-top: 12px;
+}
+
+#projectalign {
+    display: none;
+}
+
+@media screen and (min-width: 767px) {
+    #doc-content {
+        padding-top: calc(var(--top-height) - 180px);
+    }
+}
+
+/* style for re-injected version */
+#projectversion {
+    color: var(--side-nav-foreground);
+    padding-top: 25px;
+    text-align: center;
+}

doc/_doxygen/doxygen-awesome-zephyr.js

@@ -0,0 +1,12 @@
+/*
+ * Copyright (c) 2021 Nordic Semiconductor ASA
+ * SPDX-License-Identifier: Apache-2.0
+ */
+
+window.addEventListener('DOMContentLoaded', (event) => {
+  /* re-inject project version at a custom location */
+  let version = document.getElementById('projectnumber').innerText
+  let titleTable = document.querySelector('#titlearea table');
+  let cell = titleTable.insertRow(1).insertCell(0);
+  cell.innerHTML = '<div id="projectversion">' + version + '</div>';
+});

doc/_doxygen/header.html

@@ -12,6 +12,7 @@
 <script type="text/javascript" src="$relpath^jquery.js"></script>
 <script type="text/javascript" src="$relpath^dynsections.js"></script>
 <script type="text/javascript" src="$relpath^doxygen-awesome-darkmode-toggle.js"></script>
+<script type="text/javascript" src="$relpath^doxygen-awesome-zephyr.js"></script>
 $treeview
 $search
 $mathjax

doc/_doxygen/logo.png

@@ -51,7 +51,7 @@ PROJECT_BRIEF          = "A Scalable Open Source RTOS"
 # pixels and the maximum width should not exceed 200 pixels. Doxygen will copy
 # the logo to the output directory.
 
-PROJECT_LOGO           = @ZEPHYR_BASE@/doc/_doxygen/logo.png
+PROJECT_LOGO           = @ZEPHYR_BASE@/doc/_doxygen/logo.svg
 
 # The OUTPUT_DIRECTORY tag is used to specify the (relative or absolute) path
 # into which the generated documentation will be written. If a relative path is
@@ -1278,7 +1278,8 @@ HTML_EXTRA_STYLESHEET  = @ZEPHYR_BASE@/doc/_doxygen/doxygen-awesome.css \
 # files will be copied as-is; there are no commands or markers available.
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
-HTML_EXTRA_FILES       = @ZEPHYR_BASE@/doc/_doxygen/doxygen-awesome-darkmode-toggle.js
+HTML_EXTRA_FILES       = @ZEPHYR_BASE@/doc/_doxygen/doxygen-awesome-darkmode-toggle.js \
+                         @ZEPHYR_BASE@/doc/_doxygen/doxygen-awesome-zephyr.js
 
 # The HTML_COLORSTYLE_HUE tag controls the color of the HTML output. Doxygen
 # will adjust the colors in the style sheet and background images according to
@@ -1600,7 +1601,7 @@ ENUM_VALUES_PER_LINE   = 4
 # Minimum value: 0, maximum value: 1500, default value: 250.
 # This tag requires that the tag GENERATE_HTML is set to YES.
 
-TREEVIEW_WIDTH         = 250
+TREEVIEW_WIDTH         = 300
 
 # If the EXT_LINKS_IN_WINDOW option is set to YES, doxygen will open links to
 # external symbols imported via tag files in a separate window.