Sha256: 6cb08a2bfdcc5006bc30526e7d25f43e4a99fb9cf18927fc7b91e147d1c99f9b
Contents?: true
Size: 1.47 KB
Versions: 23
Compression:
Stored size: 1.47 KB
Contents
.sidebar-layout {
display: grid;
grid-template-areas: "header header" "sidebar main";
grid-template-columns: var(--sidebar-width, 0) 1fr;
grid-template-rows: auto 1fr;
block-size: 100dvh;
@media (width >= 48rem) {
--sidebar-border-width: var(--border);
--sidebar-padding: var(--size-2);
--sidebar-width: 220px;
}
@media (width >= 64rem) {
--sidebar-border-width: var(--border);
--sidebar-padding: var(--size-2);
--sidebar-width: 280px;
}
}
.header-layout {
display: grid;
grid-template-areas: "header" "main";
grid-template-rows: auto 1fr;
block-size: 100dvh;
}
.centered-layout {
display: grid;
place-items: center;
block-size: 100dvh;
}
.container {
inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--container-width, 64rem);
}
#header {
align-items: center;
background-color: rgb(from var(--color-border-light) r g b / .5);
border-block-end-width: var(--border);
block-size: var(--size-16);
display: flex;
gap: var(--size-2);
grid-area: header;
padding-inline: var(--size-4);
}
#sidebar {
background-color: rgb(from var(--color-border-light) r g b / .5);
border-inline-end-width: var(--sidebar-border-width, 0);
display: flex;
flex-direction: column;
grid-area: sidebar;
gap: var(--size-2);
overflow-x: hidden;
padding: var(--sidebar-padding, 0);
}
#main {
display: flex;
flex-direction: column;
gap: var(--size-4);
grid-area: main;
overflow: auto;
padding: var(--size-4);
}
Version data entries
23 entries across 23 versions & 1 rubygems