Sha256: bddff2b09ebe4c2b62d9f95fe17abef7335f3c923a60d0c7529a7aa752c6b2f6
Contents?: true
Size: 1.6 KB
Versions: 32
Compression:
Stored size: 1.6 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;
min-block-size: 100dvh;
max-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-4);
--sidebar-width: 280px;
}
}
.header-layout {
display: grid;
grid-template-areas: "header" "main";
grid-template-rows: auto 1fr;
min-block-size: 100dvh;
}
.centered-layout {
display: grid;
place-items: center;
min-block-size: 100dvh;
}
.container {
inline-size: 100%;
margin-inline: auto;
max-inline-size: var(--container-width, 64rem);
}
#header {
align-items: center;
background-color: var(--color-bg);
border-block-end-width: var(--border);
block-size: var(--size-16);
display: flex;
gap: var(--size-4);
grid-area: header;
inset-block-start: 0;
padding-inline: var(--size-4);
position: sticky;
@media (width >= 64rem) {
padding-inline: var(--size-6);
}
}
#sidebar {
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-y: auto;
padding: var(--size-4);
@media (width >= 64rem) {
gap: var(--size-6); padding: var(--size-6);
}
}
Version data entries
32 entries across 32 versions & 1 rubygems