Chocomint CSS

About

Chocomint CSS is a minimal CSS framework based on Simple CSS, adapted to have a more neon and minty look. High contrast can be achieved with bold, neon or marked text, as well as code_blocks. Icon buttons offer further contrast and reactivity (note: their colors are hardcoded and work best with the dark theme, or at least a dark background).

This is a blockquote. It can be used to highlight important information. It can also be used to separate content.

Navigation Bar

Chocomint CSS provides a dynamic navigation bar. When scrolling down, the navigation bar will disappear. When scrolling up, the navigation bar will reappear. The speed at which it does so can be adjusted in chocomint.js (speed variable).

Ahead is a filler text to help test this behaviour. Continue to the next section to read about the background particles.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae commodo urna. Morbi sodales iaculis enim, sit amet maximus odio sagittis ac. Aenean est tellus, semper vitae dui non, egestas mollis lectus. Vestibulum sit amet sapien rutrum massa fringilla varius quis sed nunc. Proin massa mi, condimentum nec tempus et, finibus ut sem. Integer in eros nec eros imperdiet finibus. Nunc et quam tincidunt lorem volutpat aliquam in eget neque. Sed hendrerit purus nibh, et lobortis turpis commodo eget. Sed non erat et risus pulvinar ultrices. Duis pellentesque, lacus ac tincidunt scelerisque, odio velit volutpat nulla, vel auctor nisl leo non tellus. Aliquam non quam arcu. Nam luctus auctor libero, pretium imperdiet enim commodo sed. Donec quis ligula arcu. Sed eu turpis sit amet augue sagittis dignissim.

Nunc vitae tellus pulvinar, sollicitudin felis in, venenatis nunc. Nam auctor odio in pulvinar molestie. Etiam blandit vulputate lorem a varius. Aenean sodales leo elementum dui ultrices suscipit in quis quam. In suscipit urna posuere diam ultrices, vitae maximus libero rhoncus. Quisque ac augue lacinia, consectetur lacus ut, volutpat libero. Vivamus varius quam nec enim maximus facilisis. Sed molestie nunc nec quam porta, eget facilisis tortor auctor. Integer vitae purus eros. Donec lectus ipsum, maximus et sem ut, mollis commodo tortor.

Duis ornare in ex id fermentum. Sed sed dapibus dui, ut accumsan odio. Nam vel magna accumsan leo dapibus luctus. Vivamus hendrerit quam at libero semper fringilla. Sed eget elementum dui. Fusce quis viverra mauris, ut vulputate augue. Nullam tempus nisl vitae malesuada fringilla. Integer consectetur egestas molestie. Sed eget lorem eget lacus placerat pharetra ut eu eros. Proin ornare tellus ut tellus posuere, a dictum quam tempor. Fusce tincidunt sit amet ligula eu egestas. Suspendisse ut egestas est.

Background Particles

The background particles are achieved by pure CSS, implemented in star-particles.css. An HTML element must be added in the body to achieve this effect: <div id="bg-animation-container"></div>. The function toggle_particles in chocomint.js just takes care to toggle on or off the particles in this div.

Filler

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent vitae commodo urna. Morbi sodales iaculis enim, sit amet maximus odio sagittis ac. Aenean est tellus, semper vitae dui non, egestas mollis lectus. Vestibulum sit amet sapien rutrum massa fringilla varius quis sed nunc. Proin massa mi, condimentum nec tempus et, finibus ut sem. Integer in eros nec eros imperdiet finibus. Nunc et quam tincidunt lorem volutpat aliquam in eget neque. Sed hendrerit purus nibh, et lobortis turpis commodo eget. Sed non erat et risus pulvinar ultrices. Duis pellentesque, lacus ac tincidunt scelerisque, odio velit volutpat nulla, vel auctor nisl leo non tellus. Aliquam non quam arcu. Nam luctus auctor libero, pretium imperdiet enim commodo sed. Donec quis ligula arcu. Sed eu turpis sit amet augue sagittis dignissim.

Nunc vitae tellus pulvinar, sollicitudin felis in, venenatis nunc. Nam auctor odio in pulvinar molestie. Etiam blandit vulputate lorem a varius. Aenean sodales leo elementum dui ultrices suscipit in quis quam. In suscipit urna posuere diam ultrices, vitae maximus libero rhoncus. Quisque ac augue lacinia, consectetur lacus ut, volutpat libero. Vivamus varius quam nec enim maximus facilisis. Sed molestie nunc nec quam porta, eget facilisis tortor auctor. Integer vitae purus eros. Donec lectus ipsum, maximus et sem ut, mollis commodo tortor.

Duis ornare in ex id fermentum. Sed sed dapibus dui, ut accumsan odio. Nam vel magna accumsan leo dapibus luctus. Vivamus hendrerit quam at libero semper fringilla. Sed eget elementum dui. Fusce quis viverra mauris, ut vulputate augue. Nullam tempus nisl vitae malesuada fringilla. Integer consectetur egestas molestie. Sed eget lorem eget lacus placerat pharetra ut eu eros. Proin ornare tellus ut tellus posuere, a dictum quam tempor. Fusce tincidunt sit amet ligula eu egestas. Suspendisse ut egestas est.