mirror of
https://github.com/wukko/cobalt.git
synced 2024-11-15 12:50:01 +00:00
web/layout: move main bg coloring to #cobalt
This commit is contained in:
parent
3527131cd7
commit
7dd33d1341
2 changed files with 36 additions and 37 deletions
|
@ -17,7 +17,7 @@
|
|||
|
||||
%sveltekit.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%
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
Loading…
Reference in a new issue