Mirrors/cobalt
1
0
Fork 0
mirror of https://github.com/wukko/cobalt.git synced 2024-11-15 12:50:01 +00:00
Code Issues Projects Releases Packages Wiki Activity

web/layout: move main bg coloring to #cobalt

Browse source
This commit is contained in:
wukko 2024-06-29 23:46:28 +06:00
parent 3527131cd7
commit 7dd33d1341
No known key found for this signature in database
GPG key ID: 3E30B3F26C7B4AA2
2 changed files with 36 additions and 37 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
web/src/app.html
View file

@ -17,7 +17,7 @@
%sveltekit.head% %sveltekit.head%
</head> </head>
<body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager"> <body data-sveltekit-preload-data="hover" data-sveltekit-preload-code="eager" style="background-color: black">
%sveltekit.body% %sveltekit.body%
</body> </body>
</html> </html>

71
web/src/routes/+layout.svelte
View file

@ -105,13 +105,46 @@
:global(html), :global(html),
:global(body) { :global(body) {
margin: 0; margin: 0;
background-color: var(--sidebar-bg);
color: var(--secondary);
height: 100vh; height: 100vh;
overflow: hidden; overflow: hidden;
overscroll-behavior-y: none; 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(*) { :global(*) {
font-family: "IBM Plex Mono", "Noto Sans Mono Variable", "Noto Sans Mono", monospace; font-family: "IBM Plex Mono", "Noto Sans Mono Variable", "Noto Sans Mono", monospace;
user-select: none; user-select: none;
@ -194,7 +227,6 @@
:global(h1, h2, h3, h4, h5, h6) { :global(h1, h2, h3, h4, h5, h6) {
font-weight: 500; font-weight: 500;
margin-block: 0; margin-block: 0;
color: var(--secondary);
} }
:global(h1) { :global(h1) {
@ -229,37 +261,4 @@
line-height: 1.4; line-height: 1.4;
padding: 0 var(--padding); 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);
}
}
</style> </style>