80 lines
No EOL
1.3 KiB
CSS
80 lines
No EOL
1.3 KiB
CSS
.wrapper {
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
display: grid;
|
|
grid-gap: 0;
|
|
grid-template-areas:
|
|
"header header"
|
|
"sidebar content"
|
|
"footer footer"
|
|
}
|
|
|
|
.sidebar {
|
|
grid-area: sidebar;
|
|
}
|
|
|
|
.content {
|
|
grid-area: content;
|
|
}
|
|
|
|
.header {
|
|
grid-area: header;
|
|
}
|
|
|
|
.footer {
|
|
grid-area: footer;
|
|
}
|
|
|
|
/* Set editor dimensions */
|
|
#editor {
|
|
height: 90%;
|
|
max-width: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* Stretch editor to fit inside its containing div */
|
|
.cm-editor {
|
|
height: 100%;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
}
|
|
|
|
.container {
|
|
display: grid;
|
|
grid-template-rows: auto 1fr auto;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
|
|
/* Tablet view */
|
|
@media (min-width: 768px) {
|
|
.main-layout {
|
|
grid-template-columns: 1fr 1fr;
|
|
/* Two columns for sidebars */
|
|
}
|
|
}
|
|
|
|
/* Desktop view */
|
|
@media (min-width: 1024px) {
|
|
.main-layout {
|
|
grid-template-columns: 200px 1fr 200px;
|
|
/* Fixed sidebars, fluid main */
|
|
}
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
font-family: 'Roboto', sans-serif;
|
|
}
|
|
|
|
.left-sidebar,
|
|
.right-sidebar {
|
|
background-color: var(--surface);
|
|
/* Use BeerCSS surface color */
|
|
}
|
|
|
|
main {
|
|
background-color: var(--background);
|
|
/* Main content background */
|
|
} |