# Layouts Testing grounds for layout CSS. #### sticky-header layouts - [fade scroll](fade-scroll) — Simple single-column layout with sticky header/footer and scrolling main content, with a fade effect on the main content. Used for - [simple 2-column with fade scroll](2col) — Basic fade scroll layout with two flex columns inside the main content - [2-column fade separate](2col-fade-separate) — Two-column layout where each column is wrapped in its own fade-scroll container, and scrolls individually - [2-column static sidebar](2col-static-sidebar) — Main-and-sidebar two-column layout with a static sidebar that scrolls its internal content, and the fade scroll effect on the main container. NOT responsive. - [2-column sticky sidebar](2col-sticky) — two-column layout where both columns are sticky, such that the smaller column remains on the screen while the longer one scrolls. Responsive; used for journals - [2-Column fixed sidebar - absolute positioning hack](2col-abs-pos) — trying to fix the sidebar in 2-column view using absolute positioning (doesn't work) Goals: - sticky header - stickiness should be optional on a per-page basis - stickiness should be disable-able by media query on very small screen heights - fade overflow - needs a transparent mask with overflow margins because of dynamic coloring - - sidebar in 2-column layouts - height of parent in wide mode with internal scroll - flows beneath main content on narrow screens, and both scroll within a fade container - content width - 1000px default -