Tag tab

1 files changed, 13 insertions, 2 deletions

diff --git a/public/style.css b/public/style.css
index 42d7a59..701dc8a 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1,3 +1,5 @@
+:root { --shade-color: #eee; }
+
 body { margin: 0; padding: 0; font-family: sans-serif; }
 a { color: inherit; }
 
@@ -17,11 +19,11 @@ a { color: inherit; }
 	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); }
+	background: #fff linear-gradient(#eee, #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;
+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; }
@@ -46,6 +48,15 @@ ul.sidebar li.child a {
 	gap: 3px; padding: 9px; }
 .browser:focus-visible { outline: 0; box-shadow: none; }
 
+.tags { padding: .5rem; flex-grow: 1; overflow: auto; }
+.tags:focus-visible { outline: 0; box-shadow: none; }
+.tags h2 { margin: .5em 0 .25em 0; padding: 0; font-size: 1.1rem; }
+.tags p { margin: .25em 0; }
+.tags ul { display: flex; margin: .5em 0; padding: 0;
+	flex-wrap: wrap; gap: .25em; }
+.tags ul li { display: block; margin: 0; padding: .25em .5em;
+	border-radius: .5rem; background: var(--shade-color); }
+
 img.thumbnail { display: block;
 	background: repeating-conic-gradient(#eee 0% 25%, transparent 0% 50%)
 		50% / 20px 20px; }