Cosmic Tales is a fun and experimental project in CSS, created with Sass and Gatsby. The aim was to explore the power of CSS and see how much of a mini solar system could be crafted without using any JavaScript. Each planet in the solar system is accurately scaled in relative size and speed.
The motivation behind Cosmic Tales was a deep appreciation for our solar system. The project was born out of curiosity: "How much of a solar system could I replicate using only CSS?" The challenge was to create a mini solar system where Earth orbits the sun in 1 minute, and all other planets move at relative speeds. For example, Mercury orbits in just 14 seconds, while Pluto takes over 2 hours for one orbit.
- Sass: The project relies heavily on Sass, utilizing mixins and CSS variables to create and customize each planet's appearance and motion.
- Gatsby: Originally, this project was built with Gatsby, with plans to share stories about each planet or include more planetary facts. However, the focus shifted to the CSS experiment.
- CSS Variables: Cosmic Tales highlights the power of CSS variables. With only a few variable differences between the planets, the project demonstrates how CSS variables can be effectively used for more than just text color.
- Sass Functions: The project features a Sass function to create stars. Thanks to the work of contributors like johnbgarcia and dannyrb, an all-CSS method for creating stars was achieved.
- Click Interaction: While the project originally had plans for more interactive features, the focus shifted to the CSS experiment. If further development were to occur, enhancing the "click on a planet" aspect or finding ways to educate visitors about planet speeds could be considered.
Cosmic Tales Preview
Cosmic Tales was an exciting CSS experiment that brings the solar system to life. If you have a passion for astronomy and a fascination with the power of CSS, this project is a testament to what can be achieved with creativity and a bit of code.
Enjoy exploring the mini solar system, and feel free to make improvements or modifications to further enhance the project.