diff --git a/src/components/Page.svelte b/src/components/Page.svelte
index 74f66ee..9c1a592 100644
--- a/src/components/Page.svelte
+++ b/src/components/Page.svelte
@@ -14,7 +14,12 @@
categories.push(category);
}
- category.list.push({id: item.name, label: item.metadata.name, color: item.metadata.color || "#ffffff"});
+ category.list.push({
+ id: item.name,
+ label: item.metadata.name,
+ color: item.metadata.color || "#ffffff",
+ bgcolor: item.metadata.bgcolor || "#292929",
+ });
}
categories.sort((a,b) => {
@@ -41,7 +46,7 @@
{#each categories as category (category.name)}
{category.name}
{#each category.list as item (item.id)}
-
+
{item.label}
{/each}
@@ -70,30 +75,41 @@
}
div.menu h1 a {
line-height: 1.5em;
+ margin-left: 0;
+ border-left: none;
+ text-align: center;
}
div.menu h2 {
font-size: 1.15em;
color: #555;
- padding: 0.5em 1ch 0 1ch;
+ padding: 0.5em 0.5ch 0 0.5ch;
margin: 0;
+ margin-top: 0.5em;
+ text-align: left;
+ }
+ div.menu h2:first-of-type {
+ margin-top: 0;
}
div.menu a {
display: block;
- padding: 0.125em 2ch;
+ text-align: left;
+ padding: 0.125em 1ch;
line-height: 1.5em;
text-decoration: none;
font-size: 0.9em;
color: #aaa;
+ border-left: 6px solid #333;
+ margin-left: 0.75ch;
}
div.menu a.selected {
- background: #2a2a2a;
color: var(--color);
- padding-left: 2.5ch;
+ border-color: var(--color);
+ background-color: var(--bgcolor);
}
div.menu a:hover {
- background: #191919;
+ background-color: #191919;
}
div.layout {
@@ -133,7 +149,6 @@
}
div.menu a.selected {
- padding-left: 2ch;
font-weight: 600;
}
}