Improve page header

1 files changed, 21 insertions, 9 deletions

diff --git a/public/style.css b/public/style.css
index 0276e43..0df44d9 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,22 +1,33 @@
 body { margin: 0; padding: 0; font-family: sans-serif; }
-
 a { color: inherit; }
 
 .container { display: flex; flex-direction: column;
 	height: 100vh; width: 100vw; overflow: hidden; }
-.body { display: flex; flex-grow: 1; overflow: hidden; }
 
-.header { padding: .25rem .5rem; background: #aaa; color: white;
-	border-bottom: 1px solid #444;
-	display: flex; justify-content: space-between; align-items: baseline;
-	column-gap: .5rem; }
+.body { display: flex; flex-grow: 1; overflow: hidden; position: relative; }
+.body::after { content: ''; position: absolute; pointer-events: none;
+	top: 0; left: 0; right: 0; height: .75rem;
+	background: linear-gradient(#fff, rgb(255 255 255 / 0%)); }
+
+.header { color: #000; background: #aaa linear-gradient(#888, #999);
+	display: flex; justify-content: space-between; column-gap: .5rem; }
+.header nav { display: flex; margin: 0 .5rem; align-items: end; }
+.header nav a { display: block; text-decoration: none;
+	background: #bbb linear-gradient(#bbb, #ccc);
+	margin: .25rem 0 0 -1px; padding: .25rem .75rem;
+	border: 1px solid #888; border-radius: .5rem .5rem 0 0; }
+.header nav a.active { font-weight: bold; border-bottom: 1px solid #fff;
+	background: #fff linear-gradient(#ddd, #fff); }
+.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: #eee;
+	min-width: 10rem; overflow: auto; border-right: 1px solid #ccc; }
 
-ul.sidebar { margin: 0; padding: 0; background: #eee;
-	border-right: 1px solid #ccc; min-width: 10rem; overflow: auto; }
 ul.sidebar li { margin: 0; padding: 0; }
 ul.sidebar li a { padding: .25rem .5rem; padding-left: 30px;
 	display: block; text-decoration: none; white-space: nowrap; }
-ul.sidebar li a:hover { background: #ddd; }
+ul.sidebar li a:hover { background-color: rgb(0 0 0 / 10%); }
 
 ul.sidebar 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");
@@ -43,6 +54,7 @@ img.thumbnail { display: block; box-shadow: 0 0 3px rgba(0, 0, 0, 0.75);
 .view { display: flex; flex-grow: 1; overflow: hidden;
 	justify-content: center; align-items: center; }
 .view img { max-width: 100%; max-height: 100%; object-fit: contain; }
+.view img { z-index: 1; }
 
 .viewbar { padding: .25rem .5rem; background: #eee;
 	border-left: 1px solid #ccc; min-width: 20rem; overflow: auto; }