Starfall

Sidebar Prototype

This page demonstrates a sidebar with flexbox; we're not completely happy with how it's turned out, but it's functional enough for about an hour of effort. On large screens, the table of contents becomes a second column with sticky positioning. On small screens, it stays at the very top of the page - not the most useful place for it, but it works for a prototype. A hamburger menu that folds out into a column over top of the page would probably be better, but at that point we're completely out of the realm of flexbox. It'd be... I think just a sticky-positioned hamburger that's secretly a checkbox that toggles the visibility of the "sidebar". Maybe we'll do that as another prototype.

Lorem Ipsum

Image and text courtesy of lipsum.com

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent consequat ligula mi. Curabitur hendrerit egestas volutpat. Ut vestibulum cursus tortor vel porttitor. Donec vitae hendrerit dolor. Nam vitae velit urna. In ut ligula neque. Nulla facilisi. Mauris nec orci quis ligula pharetra aliquam. Ut malesuada accumsan ipsum in efficitur.

Dolor Sit Amet

Morbi ac ante vitae augue finibus pellentesque eu ut lectus. Vestibulum finibus sapien eget urna hendrerit, vitae accumsan nisi scelerisque. Quisque iaculis lacus vitae ultricies ultrices. Etiam egestas condimentum dolor in tempus. Nulla quis urna varius, porta dui ac, volutpat nulla. Nam id dapibus mauris. Nullam feugiat, lorem sed luctus eleifend, nibh lacus luctus risus, vel bibendum augue erat nec urna. Nam placerat turpis eget neque dictum, ullamcorper congue est malesuada. Sed euismod tellus faucibus malesuada auctor. Aliquam quis ullamcorper nulla. Nulla maximus dui eget varius tempus. Aliquam mauris nunc, pulvinar at ex sit amet, consequat pretium purus. Aliquam ultrices malesuada velit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.

Consectetur Adipiscing Elit

Nam lacinia tempor elit sit amet ornare. Donec accumsan ultrices aliquet. Duis sit amet auctor massa, id ullamcorper dolor. Nullam et magna nunc. Nulla at suscipit neque, eget blandit elit. Proin quis est quis leo gravida feugiat. Nam semper venenatis sapien vitae interdum. Proin commodo maximus dolor in tincidunt.

Fusce iaculis scelerisque libero, sit amet scelerisque tortor ultrices ac. Praesent mattis mauris vehicula magna imperdiet, in dignissim leo blandit. Donec consequat faucibus lorem, vel fringilla nunc sollicitudin vel. Phasellus sed sagittis massa, viverra dapibus lacus. Curabitur id malesuada metus. Praesent scelerisque condimentum mi non facilisis. Vestibulum a luctus urna. Etiam at ornare sapien, at imperdiet ipsum. Praesent in odio metus. Proin lobortis in purus porta lobortis. Vivamus porttitor dignissim justo, sit amet molestie elit mattis id. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam at condimentum lectus, at fermentum lectus. Etiam non fringilla enim. Integer in tortor sem.

Sed Do Eiusmod

Nunc vitae cursus mauris. Phasellus placerat, turpis eu placerat pulvinar, arcu dolor scelerisque enim, eu rutrum erat tellus quis diam. Mauris consequat velit vel urna interdum, quis imperdiet arcu bibendum. Pellentesque eu diam at leo pretium porttitor. Nunc libero lacus, mollis finibus fermentum non, rhoncus ac justo. Morbi eleifend turpis ut mauris finibus rutrum. Curabitur pharetra dolor dolor, non vehicula ex elementum nec. Nam magna urna, tincidunt eget nulla ac, pellentesque accumsan dolor. Morbi imperdiet, nisi et ultrices fermentum, neque elit porttitor odio, pharetra commodo nisi metus tristique sem. In id pulvinar nulla. Suspendisse a erat dictum, sagittis nunc at, lacinia ante. Praesent finibus ligula sed felis elementum auctor. Quisque laoreet tempor turpis, quis venenatis nulla bibendum in. Nulla a justo vel diam laoreet mattis.