1*04fd306cSNickeaumain > *, #page-core { 2*04fd306cSNickeau min-width: 0; /** not auto */ 3*04fd306cSNickeau} 4*04fd306cSNickeau 5*04fd306cSNickeau 6*04fd306cSNickeau@media (min-width: 768px) { 7*04fd306cSNickeau 8*04fd306cSNickeau #page-core { 9*04fd306cSNickeau display: grid; 10*04fd306cSNickeau gap: 1.5rem; 11*04fd306cSNickeau grid-template-areas: "page-side page-main"; 12*04fd306cSNickeau grid-template-columns: minmax(min-content,1fr) 3fr; 13*04fd306cSNickeau } 14*04fd306cSNickeau 15*04fd306cSNickeau #page-side { 16*04fd306cSNickeau grid-area: page-side; 17*04fd306cSNickeau } 18*04fd306cSNickeau 19*04fd306cSNickeau #page-main { 20*04fd306cSNickeau grid-area: page-main; 21*04fd306cSNickeau } 22*04fd306cSNickeau 23*04fd306cSNickeau} 24*04fd306cSNickeau 25*04fd306cSNickeau 26*04fd306cSNickeau@media (min-width: 992px) { 27*04fd306cSNickeau 28*04fd306cSNickeau #page-core { 29*04fd306cSNickeau grid-template-columns: minmax(min-content,1fr) 5fr; 30*04fd306cSNickeau } 31*04fd306cSNickeau 32*04fd306cSNickeau main { 33*04fd306cSNickeau 34*04fd306cSNickeau grid-area: page-main; 35*04fd306cSNickeau display: grid; 36*04fd306cSNickeau grid-template-columns: [main] 7fr [side] minmax(auto,2fr); 37*04fd306cSNickeau grid-auto-flow: row; 38*04fd306cSNickeau gap: 1rem; 39*04fd306cSNickeau grid-template-areas: unset; 40*04fd306cSNickeau margin-left: 1rem; 41*04fd306cSNickeau margin-right: 1rem; 42*04fd306cSNickeau 43*04fd306cSNickeau } 44*04fd306cSNickeau 45*04fd306cSNickeau #main-toc { 46*04fd306cSNickeau grid-column: side; 47*04fd306cSNickeau grid-row: 1 / span 5; 48*04fd306cSNickeau position: sticky; 49*04fd306cSNickeau top: 5rem; 50*04fd306cSNickeau z-index: 2; 51*04fd306cSNickeau height: fit-content; 52*04fd306cSNickeau } 53*04fd306cSNickeau 54*04fd306cSNickeau #main-header { 55*04fd306cSNickeau grid-column: main; 56*04fd306cSNickeau } 57*04fd306cSNickeau 58*04fd306cSNickeau #main-content { 59*04fd306cSNickeau grid-column: main; 60*04fd306cSNickeau } 61*04fd306cSNickeau 62*04fd306cSNickeau #main-footer { 63*04fd306cSNickeau grid-column: main; 64*04fd306cSNickeau } 65*04fd306cSNickeau 66*04fd306cSNickeau #main-side { 67*04fd306cSNickeau grid-area: unset; 68*04fd306cSNickeau } 69*04fd306cSNickeau 70*04fd306cSNickeau} 71