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