Skip to content

UCSB-MEDS/customizing-quarto-websites

Repository files navigation

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 Shanny-Csik, Data Science Programs Manager and Lecturer at the Bren School of Enviromental Science & Management.