Usage
---
import {Icon} from "@astrojs/starlight/components";
---
<div class="l-sidebar">
<div class="is-sidebar">
<Icon name="rocket" color="goldenrod" size="10rem" />
</div>
<div>
<div class="l-stack">
<h2>This is a fluid width column</h2>
<p>
If you resize me to be less than the value of the <code>min-width</code>
property I will stack vertically and both columns will fill width of the
container.
</p>
</div>
</div>
</div>
//https://every-layout.dev/layouts/sidebar/
/**
* Note, the width of the sidebar will be determined by its content,
* so there's no need for this component to specify width (by default).
*/
.l-sidebar {
display: flex;
flex-wrap: wrap;
gap: var(--sb-row-gap, var(--sb-gap, var(--vertical-rhythm)))
var(--sb-column-gap, var(--sb-gap, var(--gutter)));
align-items: var(--sb-align-items, initial);
> .is-sidebar {
flex-grow: 1;
}
> :not(.is-sidebar) {
flex-basis: 0;
flex-grow: 999;
min-width: var(--sb-min-width, 50%);
}
}
For when you need a 2 column layout (1 fixed width, 1 fluid width).
Fixed Column (Sidebar)
The fixed width column is assigned the class .is-sidebar
. Its width is determined by its content.
Fluid Column
The fluid width column shrinks with the viewport while the Sidebar is in a 2 column layout. When the width goes below --sb-min-width
custom property, the layout will switch to a single column.