Awesome

Customizing Quarto Websites: Make your website stand out using Sass & CSS

Instructions and examples on how to style your Quarto website using Quarto YAML configurations, Sass, and CSS.

Description

Quarto provides a user-friendly framework for creating your personal website -- but adding your own creative touch can help make yours stand out from the rest. In this workshop, we learn how to (a) add a template to our landing page and update the _quarto.yml file to quickly add fun features/update the overall layout of our website, (b) create a stylesheet and define Sass variables to start modifying the overall theme (colors, fonts, etc) of our site, and (c) define CSS rules to make fine-tuned adjustments to our site's appearance. Presentation slides are available here.

Note: As of Fall 2024, these materials will be presented as part of a new 2-unit course, EDS 296 - Data Science Tools for Building Professional Online Portfolios.

Contributors

These workshop materials are maintained and taught by Samantha Csik, Data Training Coordinator at the National Center for Ecological Analysis and Synthesis and Lecturer at the Bren School of Enviromental Science & Management.