UCSB-MEDS / customizing-quarto-websites

Customize Quarto websites using Sass & CSS

Home Page:https://ucsb-meds.github.io/customizing-quarto-websites/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

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.

About

Customize Quarto websites using Sass & CSS

https://ucsb-meds.github.io/customizing-quarto-websites/


Languages

Language:HTML 47.2%Language:CSS 26.5%Language:JavaScript 24.5%Language:SCSS 1.5%Language:Lua 0.3%