Some quarto note
ctrl+shift+B runs the website

Viewer panel

Tools –> Global options –> R Markdown –>show output preview in:: –> Viewer Pane.

Then click the apply and okay.

Then go to the Viewer panel you could see the website there

How to use google font

https://fonts.google.com/

Go to the website –>select the font–>get font –>get embedd the code. Then change to @import and copy paste the line BETWEEN the <style> </style>

In your scss file you copy paste. Note that 2 type of font is imported. In the font-family-sans-serif, the first one is specified as desired font and the second one is what will be used if the first font is not found.

How to use font awesome

The extension needs to be downloaded following inststruction
https://github.com/quarto-ext/fontawesome
https://fontawesome.com/download
This is what it looks like in fontawesome

This is what you write in quarto
{{< fa school >}} Education

How to use quarto QR code

https://github.com/jmbuhr/quarto-qrcode?tab=readme-ov-file
https://jmbuhr.de/quarto-qrcode/

Go into the deepest layer to adjust for things

Note: It can not be changed that the title of table of content(toc) is h2. It is hardwire in quarto. However, the h2 style of toc can be changed.

For example, to change the color of toc but not ordinary h2 title, I write in my scss file

.sidebar nav[role=doc-toc]>h2{
  color: orange;
}

Right click what you want to be changed and select inspect

style

colors

fontcolor - The main color for text on the site
linkcolor - Color of the links
backgroundcolor - Background color of the whole site
monobackgroundcolor - background for code chunks

font

mainfont - The main font for text on the site
monofont - Font for code elements

size

max-width - Width of the main text area of the pages
fontsize - Base font size for website
linestretch - Distance between lines of text

Specifying a length in CSS can be done in dozens of ways: Using pixel counts 18px or 100px. Calculated font-size of an element, 1em should remain unchanged, 2em should double

Navigation element

primary navigation

nested navigation

hybrid navigation

Github links

https://quarto.org/docs/websites/website-navigation.html#github-links

website:
  repo-url: https://github.com/quarto-dev/quarto-web
  repo-actions: [edit, issue]

page navigation

https://quarto.org/docs/websites/website-navigation.html#page-navigation

breadcrumbs

https://quarto.org/docs/websites/website-navigation.html#breadcrumbs

Footer

https://quarto.org/docs/websites/website-navigation.html#page-footer

html and css

How we use CSS
In its simplest form, we need to define 2 things

• selectors - What needs to be styled
• Attributes - How it should be styled

Selectors

by tags - h1 {}
by class - .important {}
by id - #title-text {}

https://www.w3schools.com/cssref/css_selectors.php

https://www.w3schools.com/css/css_selectors.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors

https://www.freecodecamp.org/news/css-selectors-cheat-sheet-for-beginners/

https://www.w3.org/TR/CSS21/selector.html%23id-selectors

pseudo classes

Attributes

The attributes are instructions on how elements should look and behave.

How things look

• colors
• sizes
• border lines
• etc

How elements are positioned to other elements

• Layout

• content - The content of the box, where text and images appear
  Size of the content is set using height and width
  Values are lengths: 10px; 2em
  or percentages: 40%; 100%
• Padding - Clears an area around the content. The padding is transparent

• Border - A border that goes around the padding and content
  

  

• Margin - Clears an area outside the border. The margin is transparent
  

  

css grid flex

https://css-tricks.com/snippets/css/complete-guide-grid/
https://css-tricks.com/snippets/css/a-guide-to-flexbox/

absolute positioning

how to center in css

http://howtocenterincss.com/

SASS

variables

SASS nested rules

mixins

https://codegoda.io/

LISTING

https://github.com/rostools/coding-club/blob/main/index.qmd

https://quarto.org/docs/websites/website-listings.html

https://posit-conf-2024.github.io/quarto-websites/06-listings.html#/listings