refactor(pages): change to topic/index.qmd structure (+start on making a change)

Author: amyheather

_quarto.yml

@@ -22,20 +22,20 @@ website:
       - text: Welcome
         href: index.qmd
       - text: "Slides: Why make a website for your research?"
-        href: pages/why.qmd
+        href: pages/why/index.qmd
       - section: "Tutorial"
         contents:
-          - pages/setup.qmd
-          - pages/basic_structure.qmd
-          - pages/making_a_change.qmd
-          - pages/markdown.qmd
-          - pages/quarto_features.qmd
-          - pages/media.qmd
-          - pages/inline_html.qmd
-          - pages/customising.qmd
-          - pages/code.qmd
-          - pages/summary.qmd
-      - pages/examples.qmd
+          - pages/setup/index.qmd
+          - pages/basic_structure/index.qmd
+          - pages/making_a_change/index.qmd
+          - pages/markdown/index.qmd
+          - pages/quarto_features/index.qmd
+          - pages/media/index.qmd
+          - pages/inline_html/index.qmd
+          - pages/customising/index.qmd
+          - pages/code/index.qmd
+          - pages/summary/index.qmd
+      - pages/examples/index.qmd
   page-footer:
     center:
       - text: |

pages/basic_structure.qmd pages/basic_structure/index.qmdpages/basic_structure.qmd renamed to pages/basic_structure/index.qmd

@@ -108,20 +108,20 @@ This is my homepage.
 
 **Option 1: Preview button.** Open `index.qmd` in the editor, and click the **Preview** button in the top right hand corner
 
-![](basic_structure/preview_button.drawio.png)
+![](preview_button.drawio.png){fig-alt="Screenshot of VSCode with Preview button circled."}
 
 **Option 2: Terminal.** In the bottom panel, ensure you are on the **Terminal** tab. The Terminal is a place where you type commands instead of clicking buttons. We just need to type `quarto preview` then press <kbd>Enter</kbd> on your keyboard.
 
-![](basic_structure/preview_terminal.drawio.png)
+![](preview_terminal.drawio.png){fig-alt="Screenshot of VSCode with 'quarto preview' command in Terminal circled."}
 
 After either of these, you should see it says **Preparing to preview** and runs through files. It is creating `_sites/` folder containing your rendered site. Then when it is done, green text saying `Browse at ...`.
 
-![](basic_structure/preparing_preview.png)
+![](preparing_preview.png){fig-alt="Screenshot of the 'Preparing to preview' message in the Terminal."}
 
 Open that link, by doing <kbd>Ctrl</kbd> and click, or by simply copying and pasting the link into your web browser.
 
 This will open a **live preview** of your site in the browser. Keep the browser open while you edit; every time you save a Quarto file, the preview will auto-refresh so you can immediately see your changes without re-running any commands.
 
 Nothing is public yet; this preview only runs on your own computer. In other words, you are the only person who can see this site right now, and it will not appear on the internet until you deliberately publish or upload the rendered files somewhere.
 
-![](basic_structure/site.png)
+![](site.png){fig-alt="Screenshot of the rendered site."}

pages/code.qmd

@@ -0,0 +1,12 @@
+---
+title: Code
+---
+
+code example
+code task
+
+rstudio... r...
+
+r code
+make figure
+r code annotation?

pages/code/index.qmd

@@ -0,0 +1,24 @@
+---
+title: Customising the site appearance
+---
+
+themes
+css
+colours
+titles
+headings
+interacting with quarto.yml
+and css
+screen width
+
+## Styled span
+
+Highlight <span style="background: yellow;">this bit</span>.
+
+::: {.pale-blue}
+
+**Task:** In `html.qmd`:
+
+* [ ]
+
+:::