1 files changed, 15 insertions, 9 deletions

diff --git a/public/style.css b/public/style.css
index 701dc8a..e8eb0bc 100644
--- a/public/style.css
+++ b/public/style.css
@@ -23,23 +23,27 @@ a { color: inherit; }
 .header nav a.active, .header nav a:hover { padding-bottom: .4rem; }
 .header .activity { padding: .25rem .5rem; align-self: center; color: #fff; }
 
-ul.sidebar { margin: 0; padding: .5rem 0; background: var(--shade-color);
-	min-width: 10rem; overflow: auto; border-right: 1px solid #ccc; }
-
-ul.sidebar li { margin: 0; padding: 0; }
-ul.sidebar li a { padding: .25rem .5rem; padding-left: 30px;
+.sidebar { padding: .25rem .5rem; background: var(--shade-color);
+	border-right: 1px solid #ccc; overflow: auto;
+	min-width: 10rem; max-width: 20rem; flex-shrink: 0; }
+.sidebar h2 { margin: 0.5em 0 0.25em 0; padding: 0; font-size: 1.2rem; }
+.sidebar ul { margin: .5rem 0; padding: 0; }
+
+.sidebar .path { margin: .5rem -.5rem; }
+.sidebar .path li { margin: 0; padding: 0; }
+.sidebar .path li a { padding: .25rem .5rem; padding-left: 30px;
 	display: block; text-decoration: none; white-space: nowrap; }
-ul.sidebar li a:hover { background-color: rgb(0 0 0 / 10%); }
+.sidebar .path li a:hover { background-color: rgb(0 0 0 / 10%); }
 
-ul.sidebar li.parent a {
+.sidebar .path li.parent a {
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 14 10 8 16 14' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
 	background-repeat: no-repeat; background-position: 5px center; }
 
-ul.sidebar li.selected a { font-weight: bold;
+.sidebar .path li.selected a { font-weight: bold;
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Ccircle cx='10' cy='10' r='6' fill='%23888' /%3E%3C/svg%3E%0A");
 	background-repeat: no-repeat; background-position: 5px center; }
 
-ul.sidebar li.child a {
+.sidebar .path li.child a {
 	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20'%3E%3Cpath d='M 4 6 10 12 16 6' stroke='%23888' stroke-width='4' fill='none' /%3E%3C/svg%3E%0A");
 	background-repeat: no-repeat; background-position: 5px center; }
 
@@ -78,6 +82,8 @@ img.thumbnail, .thumbnail.missing { box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 .viewbar ul { margin: 0; padding: 0 0 0 1.25em; list-style-type: "- "; }
 .viewbar ul.tags { padding: 0; list-style-type: none; }
 .viewbar li { margin: 0; padding: 0; }
+
+.sidebar meter,
 .viewbar meter { width: 1.25rem;
 	/* background: white; border: 1px solid #ccc; */ }