/* ——————————————————————————————————————————
Resizable Sidebars for Obsidian Publish I think?
——————————————————————————————————————————*/
/* 1. Define your default widths (tweak as you like) */
:root {
--sidebar-left-width: 250px;
--sidebar-right-width: 300px;
}
/* 2. Make the publish container use flex so children can resize */
.publish-site-container {
display: flex !important;
height: 100vh; /* ensure full-height to allow dragging */
}
/* 3. Left sidebar (“nav”) styling */
.publish-nav {
width: var(--sidebar-left-width);
min-width: 150px;
max-width: 50%;
resize: horizontal;
overflow: auto;
}
.publish-nav:hover {
cursor: ew-resize;
}
/* 4. Main content should flex-grow to fill remaining space */
.publish-content {
flex: 1 1 auto;
overflow: auto;
}
/* 5. Right sidebar styling (if you have one) */
.publish-sidebar {
width: var(--sidebar-right-width);
min-width: 150px;
max-width: 50%;
resize: horizontal;
overflow: auto;
}
.publish-sidebar:hover {
cursor: ew-resize;
}
/* Optional: Add a little visual handle */
.publish-nav::after,
.publish-sidebar::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 4px;
background: rgba(0,0,0,0.1);
}
.publish-nav::after {
right: 0;
cursor: ew-resize;
}
.publish-sidebar::before {
left: 0;
cursor: ew-resize;
}
.mermaid svg {
max-width: 100%;
height: auto;
}