* { box-sizing: border-box; } a, abbr, acronym, address, applet, article, aside, audio, b, big, blockquote, body, canvas, caption, center, cite, code, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, tr, tt, u, ul, var, video { border: 0; vertical-align: baseline; } body:not(.render_raw) { margin: 0px 0px ; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; min-height: 100vh; text-rendering: optimizeLegibility; header { flex-shrink: 0; min-height: 45px; max-height: 45px; padding: 8px 0; position: fixed; width: 100%; z-index: 9999; -webkit-transform: translateZ(0); transform: translateZ(0); > * { max-width: 1400px; width: 100%; padding: 0 20px; margin: 0 auto; } div.burger { display: none; } } article { -webkit-box-flex: 1; flex-grow: 1; display: -webkit-box; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; flex-direction: column; min-height: calc(100vh - 45px); left: 0; min-height: 100%; padding-top: 100px; position: relative; z-index: 99; -webkit-box-flex: 1; flex-grow: 1; display: -webkit-box; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-flow: row nowrap; padding: 0 20px; padding-top: 45px; margin: 0 auto; width: 100%; max-width: 1400px; > * { margin: 0 24px; } aside { transition: max-height .2s ease-out; -webkit-box-flex: 0; flex: 0 0 20em; margin-left: 0; -webkit-box-flex: 0; flex: 0 0 20em; height: calc(100vh - 45px); position: -webkit-sticky; position: sticky; overflow-y: auto; top: 45px; } section.page{ -webkit-box-flex: 1; flex: 1 auto; max-width: 100%; min-width: 0; .jump-to-section{ display:none; margin-top: 0.5em; margin-left: 0.2em; ul{ padding-left: 20px; } nav{ display: none; position: absolute; z-index: 5; border: 1px solid ; padding: 3px 30px; border-radius: 3px; min-width: 25%; max-width: 50%; box-shadow: 0 5px 8px rgba(0,0,0,.25); } } } section.right-menu{ margin-right: 0; align-self: flex-start; display: block; -webkit-box-flex: 0; flex: 0 0 240px; max-height: calc(100vh - 45px); overflow-y: auto; position: -webkit-sticky; position: sticky; top: 45px; margin-bottom: 40px; } } footer { > * { max-width: 1400px; width: 100%; padding: 0 20px; margin: 0 auto; } } } /* hideheader hidenav hidebreadcrumb hidetoc hidefooter */ body:not(.render_raw) { &.hideheader{ article{ padding-top: 0px ; aside{ top:0px; height: calc(100vh); } section.right-menu{ top:0px; max-height: calc(100vh); } } } } @media(max-width:1160px) { body:not(.render_raw){ header{ div.burger{ display: none; } } article { padding-left: 0px ; padding-right: 0px; aside{ margin-right: 0px; } aside.responsive{ display: block; } section.page{ .jump-to-section{display: block;} } section.right-menu{ display: none; } } } } @media(max-width:936px) { body:not(.render_raw){ header{ div.burger{ display: block; } } article { padding-left: 0px; padding-right: 0px; aside{ display: none; flex: 0 0 100%; } aside.responsive{ display: block; } section.page{ .jump-to-section{display: block;} } section.right-menu{ display: none; } } } }