diff --git a/web/src/components/sidebar/Sidebar.svelte b/web/src/components/sidebar/Sidebar.svelte index ce5e6a7b..a76ad5cb 100644 --- a/web/src/components/sidebar/Sidebar.svelte +++ b/web/src/components/sidebar/Sidebar.svelte @@ -58,12 +58,14 @@ display: flex; flex-direction: column; } + #sidebar { background: black; height: 100vh; position: sticky; width: var(--sidebar-width); } + #sidebar-tabs { height: 100%; justify-content: space-between; diff --git a/web/src/components/sidebar/SidebarTab.svelte b/web/src/components/sidebar/SidebarTab.svelte index 9dfa051a..27676df0 100644 --- a/web/src/components/sidebar/SidebarTab.svelte +++ b/web/src/components/sidebar/SidebarTab.svelte @@ -29,11 +29,13 @@ font-size: var(--sidebar-font-size); opacity: 0.8; } + .sidebar-tab.active { color: var(--background); background: var(--accent); opacity: 1; } + .sidebar-tab:hover { opacity: 1; } diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte index b2917a1d..f91c7a01 100644 --- a/web/src/routes/+layout.svelte +++ b/web/src/routes/+layout.svelte @@ -19,21 +19,25 @@ --sidebar-font-size: 11px; --sidebar-padding: 12px; } + :global(html), :global(body) { font-family: "IBM Plex Mono", "Noto Sans Mono", monospace; margin: 0; } + :global(a) { text-decoration: none; text-decoration-line: none; } + #cobalt { height: 100vh; display: grid; grid-template-columns: var(--sidebar-width) 1fr; overflow: hidden; } + #content { display: flex; overflow: scroll;