provide visual separation in sidebar

Enhance the sidebar display to provide visual distinction between top
level items and lower level items. Top level items are now given a
space above them so they are visually clumped with their children, and
separated from each other. They are also emboldened for greater visual
distinction.

Ideally sphinx would actually tag li items with their depth as a class
tag, but as it currently doesn't do that we can work around it with
setting at ul li, and unsetting at ul li ul li.

Change-Id: I88d4317ec69fe7fd6f5c2198f89de624f0d093da

1 files changed, 12 insertions, 1 deletions

diff --git a/oslosphinx/theme/openstack/static/tweaks.css b/oslosphinx/theme/openstack/static/tweaks.css
index 6d3bea3..9b3a6ce 100644
--- a/oslosphinx/theme/openstack/static/tweaks.css
+++ b/oslosphinx/theme/openstack/static/tweaks.css
@@ -101,4 +101,15 @@ div.sphinxsidebar h3.highlighted {
 
 div.sphinxsidebar h3.highlighted a {
   color: #EEE;
-}
\ No newline at end of file
+}
+
+/** provide visual separation for sidebar for increased readability. */
+div.sphinxsidebar ul li {
+  margin-top: 1em;
+  font-weight: bold;
+}
+
+div.sphinxsidebar ul li ul li {
+  margin-top: 0;
+  font-weight: normal;
+}