diff --git a/web/src/app.html b/web/src/app.html
index d487fb80..f39fedca 100644
--- a/web/src/app.html
+++ b/web/src/app.html
@@ -17,7 +17,7 @@
%sveltekit.head%
-
+
%sveltekit.body%
diff --git a/web/src/routes/+layout.svelte b/web/src/routes/+layout.svelte
index 19cbae4a..ce115cab 100644
--- a/web/src/routes/+layout.svelte
+++ b/web/src/routes/+layout.svelte
@@ -105,13 +105,46 @@
:global(html),
:global(body) {
margin: 0;
- background-color: var(--sidebar-bg);
- color: var(--secondary);
height: 100vh;
overflow: hidden;
overscroll-behavior-y: none;
}
+ #cobalt {
+ position: fixed;
+ height: 100%;
+ width: 100%;
+ display: grid;
+ grid-template-columns: calc(var(--sidebar-width) + 8px) 1fr;
+ overflow: hidden;
+ background-color: var(--sidebar-bg);
+ color: var(--secondary);
+ }
+
+ #content {
+ display: flex;
+ overflow: scroll;
+ background-color: var(--primary);
+
+ border-top-left-radius: var(--border-radius);
+ border-bottom-left-radius: var(--border-radius);
+ }
+
+ @media screen and (max-width: 535px) {
+ #cobalt {
+ display: grid;
+ grid-template-columns: unset;
+ grid-template-rows: 1fr calc(var(--sidebar-height-mobile) + 8px);
+ }
+ #content {
+ padding-top: env(safe-area-inset-top);
+ order: -1;
+ border-top-left-radius: 0;
+ border-bottom-left-radius: calc(var(--border-radius) * 2);
+ border-bottom-right-radius: calc(var(--border-radius) * 2);
+ }
+ }
+
:global(*) {
font-family: "IBM Plex Mono", "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
user-select: none;
@@ -194,7 +227,6 @@
:global(h1, h2, h3, h4, h5, h6) {
font-weight: 500;
margin-block: 0;
- color: var(--secondary);
}
:global(h1) {
@@ -229,37 +261,4 @@
line-height: 1.4;
padding: 0 var(--padding);
}
-
- #cobalt {
- position: fixed;
- height: 100%;
- width: 100%;
- display: grid;
- grid-template-columns: calc(var(--sidebar-width) + 8px) 1fr;
- overflow: hidden;
- }
-
- #content {
- display: flex;
- overflow: scroll;
- background-color: var(--primary);
-
- border-top-left-radius: var(--border-radius);
- border-bottom-left-radius: var(--border-radius);
- }
-
- @media screen and (max-width: 535px) {
- #cobalt {
- display: grid;
- grid-template-columns: unset;
- grid-template-rows: 1fr calc(var(--sidebar-height-mobile) + 8px);
- }
- #content {
- padding-top: env(safe-area-inset-top);
- order: -1;
- border-top-left-radius: 0;
- border-bottom-left-radius: calc(var(--border-radius) * 2);
- border-bottom-right-radius: calc(var(--border-radius) * 2);
- }
- }