diff --git a/_quarto.yml b/_quarto.yml index 271139e..0d7381b 100644 --- a/_quarto.yml +++ b/_quarto.yml @@ -21,20 +21,25 @@ website: contents: - text: Welcome href: index.qmd - - pages/why.qmd + - text: "Slides: Why make a website for your research?" + 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/task/index.qmd + - section: "Optional extras" + contents: + - pages/blog/index.qmd + - pages/sass_css/index.qmd + - pages/code/index.qmd + - pages/examples/index.qmd page-footer: center: - text: | @@ -44,10 +49,11 @@ website: format: html: number-sections: true + lightbox: true theme: - cosmo - styles/theme.scss css: - styles/styles.css include-after-body: - - styles/autopreview.html \ No newline at end of file + - styles/slideshow.js \ No newline at end of file diff --git a/images/examples_page_screenshot.png b/images/examples_page_screenshot.png new file mode 100644 index 0000000..1eadaa0 Binary files /dev/null and b/images/examples_page_screenshot.png differ diff --git a/pages/basic_structure.qmd b/pages/basic_structure.qmd deleted file mode 100644 index 8810853..0000000 --- a/pages/basic_structure.qmd +++ /dev/null @@ -1,178 +0,0 @@ ---- -title: Basic structure ---- - -## Introduction to RStudio - -TODO - - - -## Introduce to Quarto websites - -We'll be creating a **Quarto website**, but it's worth knowing that Quarto can produce many things. See the [Quarto documentation](https://quarto.org/docs/guide/) for examples - options include: - -* Presentations -* Dashboards -* Manuscripts -* Documents -* Books - -A simple website project just needs **two key files**: - -1. `_quarto.yml` -2. `index.qmd` - -### `_quarto.yml` - -This is file defines your **project settings** and **website structure**. - -TODO: Add explanation. A yml file is YAML. plain text format. uses key-value pairs to store settings. YAML ("YAML Ain't Markup Language") is a simple format using key–value pairs, like: - -Below is an example from [quarto-template](https://github.com/pythonhealthdatascience/quarto-template){target="_blank"}. Hover over each line to see an explanation: - -```yaml -project: # <1> - type: website # <1> - -website: # <1> - title: "Quarto Template" # <2> - favicon: images/exeter.png # <3> - navbar: # <4> - right: # <5> - - icon: github # <5> - text: GitHub # <5> - href: https://github.com/pythonhealthdatascience/quarto-template/ # <5> - sidebar: # <6> - - logo: images/exeter.png # <7> - contents: # <8> - - text: Overview # <8> - href: index.qmd # <8> - - pages/TODO.qmd # <8> -``` - -1. **Website:** Defines that this project builds as a website. -2. **Website title:** Appears in broswer tab and navbar. -3. **Favicon:** The small icon shown on the tab (often a logo). -4. **Navbar:** The navigation bar across the top of your site. -5. **GitHub link:** Adds a GitHub icon on the right side of the navbar linking to the repository (which contains the source files for the site). -6. **Sidebar:** Displays navigation links down the left-hand side. -7. **Logo:** The image shown at the top of the sidebar. -8. **Sidebar contents:** Lists website pages. Will list using page titles by default, but can override with `text` (title to use) and `href` (path to file). - -::: {.callout-note title="Optional extra: books" collapse="true"} - -A **Quarto book** is basically a website with chapter-style navigation. Under the hood, it's still a Quarto website - just organised a little differently. - -See the [books guide](https://quarto.org/docs/books/book-output.html) for more information. - -Example: - -```yaml -project: - type: book - -book: - title: "Quarto Template" - favicon: images/exeter.png - chapters: - - text: Overview - href: index.qmd - - pages/TODO.qmd - navbar: - right: - - icon: github - text: GitHub - href: https://github.com/pythonhealthdatascience/quarto-template/ - sidebar: - logo: images/exeter.png -``` - -::: - -### `index.qmd` - -A `.qmd` file is a **Quarto Markdown** document. - -> If you're familiar with R Markdown (`.Rmd`), these are similar, but `.qmd` is more flexible. - -`index.qmd` servers as the **homepage** of your website. - -Each `.qmd` file begins with **YAML front matter**, enclosed by three dashes (`---`). This defines metadata such as the page title. - -> Alternative way of doing this would be `# My homepage`. TODO: SO WHY DO IT IN YAML? - -Below that is the page. Here we just have one sentence: `This is my homepage.`. - -```qmd ---- -title: My homepage ---- - - -This is my homepage. -``` - -## Rendering your website - -**Rendering** means converting your Quarto source files into the final website - a colelction of `.html` pages that live inside a folder called `_site`. - -To render in RStudio... - -1. Open `index.qmd` in the editor. - -[SCREENSHOT] - -2. Click the blue **Render** button (the arrow icon) at the top of the editor. - -[SCREENSHOT] - -RStudio will: - -* Create the `_sites/` folder containing your rendered site. -* Open a **live preview** in your browser. - -TODO: EXPLAIN LIVE PREVIEW url... its local host... display via browser... - -::: {.callout-tip title="Troubleshooting"} - -The preview may not open automatically if your browser blocks the pop-up. To resolve this, you should either: - -* Click to allow pop-ups in your browsers, then click **Render** again. -* Go to the **Background Jobs** tab in the bottom left. This is where lgos from rendering quarot site are shown. Here, you will find the preview URL. Copy and paste this into browser. - -::: - -[SCREENSHOT] - -### Rendering from the terminal - -You can also build your site using command-line tools. The terminal is simply a text-based way to type commands directly, rather than clicking buttons. - -Two helpful commands are: - -* `quarto render` - builds your website. -* `quarto preview` - builds and opens a live-updating preview. diff --git a/pages/basic_structure/index.qmd b/pages/basic_structure/index.qmd new file mode 100644 index 0000000..9a246f2 --- /dev/null +++ b/pages/basic_structure/index.qmd @@ -0,0 +1,146 @@ +--- +title: Basic structure +--- + +::: {.pale-blue} + +**On this page we will:** + +* Understand the two core files in a basic Quarto website. +* Learn how to render and preview the website. + +::: + +
+ +We'll be creating a **Quarto website**. A simple website project just needs two key files: + +1. `_quarto.yml` +2. `index.qmd` + +## `_quarto.yml` + +This is file defines your **project settings** and **website structure**. + +The file uses YAML, which is just a plain text format for settings, written as **key: value** pairs, for example `title: My website`. Indentation (spaces at the start of a line) shows that something belongs "inside" something else, a bit like folders within folders. + +Below is an example from [quarto-template](https://github.com/pythonhealthdatascience/quarto-template){target="_blank"}. Hover over each line to see an explanation: + +```yaml +project: # <1> + type: website # <1> + +website: # <1> + title: "Quarto Template" # <2> + navbar: # <3> + right: # <4> + - icon: github # <4> + text: GitHub # <4> + href: https://github.com/pythonhealthdatascience/quarto-template/ # <4> + sidebar: # <5> + - logo: images/exeter.png # <6> + contents: # <7> + - text: Overview # <7> + href: index.qmd # <7> + - pages/1_making_a_change.qmd # <7> + - pages/2_markdown_basics.qmd # <7> + - pages/3_quarto_features.qmd # <7> + - pages/4_images_videos_documents.qmd # <7> + - pages/5_inline_html.qmd # <7> + +format: # <8> + html: # <8> + theme: default # <8> +``` + +1. **Website:** Defines that this project builds as a website. +2. **Website title:** Appears in broswer tab and navbar. +3. **Navbar:** The navigation bar across the top of your site. +4. **GitHub link:** Adds a GitHub icon on the right side of the navbar linking to the repository (which contains the source files for the site). +5. **Sidebar:** Displays navigation links down the left-hand side. +6. **Logo:** The image shown at the top of the sidebar. +7. **Sidebar contents:** Lists website pages. Will list using page titles by default, but can override with `text` (title to use) and `href` (path to file). +8. **Theme:** Site theme (covered on [Customising the site appearance](/pages/customising/index.qmd) page). + +::: {.callout-note title="Optional extra: books" collapse="true"} + +A **Quarto book** is basically a website with chapter-style navigation. Under the hood, it's still a Quarto website - just organised a little differently. + +See the [books guide](https://quarto.org/docs/books/book-output.html) for more information. + +Example: + +```yaml +project: + type: book + +book: + title: "Quarto Template" + favicon: images/exeter.png + chapters: + - text: Overview + href: index.qmd + - pages/TODO.qmd + navbar: + right: + - icon: github + text: GitHub + href: https://github.com/pythonhealthdatascience/quarto-template/ + sidebar: + logo: images/exeter.png +``` + +::: + +## `index.qmd` + +A `.qmd` file is a **Quarto Markdown** document. It mixes metadata at the top, text, and (optionally) code. For a website, `index.qmd` is treated as the **homepage:** when someone visits the root of your site, Quarto serves `index.html`, which comes from `index.qmd. + +> If you're familiar with R Markdown (`.Rmd`), these are similar, but `.qmd` is more flexible. + +Each `.qmd` file begins with **YAML front matter**, enclosed by three dashes (`---`). This defines metadata such as the page title. Below that is the page. Here we just have one sentence: `This is my homepage.`. + +```{.r} +--- +title: My homepage +--- + + +This is my homepage. +``` + +## Rendering your website + +**Rendering** means converting your Quarto source files into the final website - a collection of `.html` pages that live inside a folder called `_site`. To render your site: + +1. Open `index.qmd` in the editor, and click the **Preview** button in the top right hand corner + +![](preview_button.drawio.png){fig-alt="Screenshot of VSCode with Preview button circled."} + +2. In the bottom panel in the Terminal, 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 ...`. + +![](preparing_preview.png){fig-alt="Screenshot of the 'Preparing to preview' message in the Terminal."} + +3. You are now viewing a **live preview** of your site in the browser. 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. + + By default, VSCode will open the preview in-line. This will be quite a small preview - to open it in a new tab, either copy the URL from the Terminal (`http://localhost:...`) or click the "Open in Browser" button in the top right. + +![](inline.png){fig-alt="Screenshot of preview opened in-line, with cursor hovering over the 'Open in Browser' button."} + +
+ + + +::: {.callout-note title="Optional extra: rendering via the terminal" collapse="true"} + +Alternatively, you can render and preview your site directly via commands in the 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 Enter on your keyboard. + +![](preview_terminal.drawio.png){fig-alt="Screenshot of VSCode with 'quarto preview' command in Terminal circled."} + +You can then use the `http://localhost:...` link printed in the Terminal to open your site in the browser. + +With this method, the site updates automatically whenever files are saved. In Codespaces, files are auto‑saved very frequently, so the preview will re-render often; for that reason, the **Preview** button described above is usually a calmer option during this workshop. + +::: diff --git a/pages/basic_structure/inline.png b/pages/basic_structure/inline.png new file mode 100644 index 0000000..27f53da Binary files /dev/null and b/pages/basic_structure/inline.png differ diff --git a/pages/basic_structure/preparing_preview.png b/pages/basic_structure/preparing_preview.png new file mode 100644 index 0000000..898ce5a Binary files /dev/null and b/pages/basic_structure/preparing_preview.png differ diff --git a/pages/basic_structure/preview_button.drawio b/pages/basic_structure/preview_button.drawio new file mode 100644 index 0000000..dee8c56 --- /dev/null +++ b/pages/basic_structure/preview_button.drawio @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/pages/basic_structure/preview_button.drawio.png b/pages/basic_structure/preview_button.drawio.png new file mode 100644 index 0000000..ef18db0 Binary files /dev/null and b/pages/basic_structure/preview_button.drawio.png differ diff --git a/pages/basic_structure/preview_button.png b/pages/basic_structure/preview_button.png new file mode 100644 index 0000000..2fea99b Binary files /dev/null and b/pages/basic_structure/preview_button.png differ diff --git a/pages/basic_structure/preview_terminal.drawio b/pages/basic_structure/preview_terminal.drawio new file mode 100644 index 0000000..b025fbc --- /dev/null +++ b/pages/basic_structure/preview_terminal.drawio @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/pages/basic_structure/preview_terminal.drawio.png b/pages/basic_structure/preview_terminal.drawio.png new file mode 100644 index 0000000..5bfb53d Binary files /dev/null and b/pages/basic_structure/preview_terminal.drawio.png differ diff --git a/pages/basic_structure/preview_terminal.png b/pages/basic_structure/preview_terminal.png new file mode 100644 index 0000000..9359412 Binary files /dev/null and b/pages/basic_structure/preview_terminal.png differ diff --git a/pages/blog/index.qmd b/pages/blog/index.qmd new file mode 100644 index 0000000..72a91e9 --- /dev/null +++ b/pages/blog/index.qmd @@ -0,0 +1,68 @@ +--- +title: Listings (e.g., blog) +listing: + - id: links + contents: links_real.yml + template: links.ejs +--- + +A [listing](https://quarto.org/docs/reference/projects/websites.html#listings) is a Quarto feature that automatically builds a list or grid of items for you. + +There are two ways to use listings: + +1. To show a list of **pages from your site** (e.g., a blog index listing all your posts). +2. To show a list of **external things** (e.g., interesting projects or resources you link out to). + +## Listing of pages + +## Listing of external things + +**Note:** This is more advanced. The approach is based on `quarto-dev/quarto-web`'s gallery ([link](https://github.com/quarto-dev/quarto-web/blob/main/docs/gallery/gallery.ejs)). + +### Create a YAML file of links + +First, create a YAML file (e.g., `links.yml`). This contains the data for your listing page - the content your want to show, such as descriptions, links, and titles - while the page layout is handled separately by Quarto and the template below. + +In this example, each top-level `- category:` blcok is one section of the listing. Inside each section, the `tiles:` field contains the individual cards you want to display, and each card can have fields such as `title`, `subtitle`, `href`, and `thumbnail`. + +For example: + +```{.yaml} +{{< include links.yml >}} +``` + +### Create an EJS file + +Next, create an EJS template file (e.g., `links.ejs`). This file tells Quarto **how to display** the data from `links.yml`, so you can think of it as the layout or "recipe" for turning your YAML data into HTML on the page. + +For example: + +````{.txt} +{{< include links.ejs >}} +```` + +### Create the `.qmd` page + +Now create the Quarto page that will display the listing. This page connects the data file (`links.yml`) to the template file (`links.ejs`) and tells Quarto where the finished listing should be inserted. + +The `::: {#links}` div is where Quarto injects the rendered listing ofr the listing configuration with the same `id`. + +```{.md} +--- +title: Listing +listing: + - id: links + contents: links.yml + template: links.ejs +--- + +::: {#links} +::: +``` + +To include the page in your site, add the `.qmd` file to `_quarto.yml` + +### Example + +::: {#links} +::: \ No newline at end of file diff --git a/pages/blog/links.ejs b/pages/blog/links.ejs new file mode 100644 index 0000000..29b425f --- /dev/null +++ b/pages/blog/links.ejs @@ -0,0 +1,45 @@ + + +```{=html} + +<% for (const item of items) { %> + +

<%- item.category %>

+ +

<%- item.description %>

+ +
+ +<% for (const tile of item.tiles) { %> +
> + + +
+ + <%= tile.title %> + +
+ + + + <%- tile.description %> + + + + +
+ <%= tile.subtitle %> +
+ + +
+<% } %> + +
+ +<% } %> + +``` diff --git a/pages/blog/links.yml b/pages/blog/links.yml new file mode 100644 index 0000000..dc12088 --- /dev/null +++ b/pages/blog/links.yml @@ -0,0 +1,23 @@ +- category: Training courses + description: | + Examples of training courses developed using Quarto. + tiles: + - title: "DES RAP Book" + subtitle: "Self-paced training resource on creating discrete-event simulation models in Python and R as part of a reproducible analytical pipeline." + href: "https://pythonhealthdatascience.github.io/des_rap_book/" + thumbnail: /images/listings/des_rap_book.png + - title: "Testing in Research Workflow" + subtitle: "Tutorial on testing in Python and R, accompanies HDR UK Futures training videos." + href: "https://pythonhealthdatascience.github.io/stars-testing-intro/" + thumbnail: /images/listings/testing_in_research.png + +- category: Researcher profiles + description: | + Examples of researcher profiles developed using Quarto. + tiles: + - title: "Amy Heather" + href: "https://amyheather.github.io/" + thumbnail: /images/listings/amy_heather.png + - title: "Sammi Rosser" + href: "https://sammirosser.com/" + thumbnail: /images/listings/sammi_rosser.png \ No newline at end of file diff --git a/pages/blog/links_real.yml b/pages/blog/links_real.yml new file mode 100644 index 0000000..7ca3f8a --- /dev/null +++ b/pages/blog/links_real.yml @@ -0,0 +1,23 @@ +- category: Training courses + description: | + Examples of training courses developed using Quarto. + tiles: + - title: "DES RAP Book" + subtitle: "Self-paced training resource on creating discrete-event simulation models in Python and R as part of a reproducible analytical pipeline." + href: "https://pythonhealthdatascience.github.io/des_rap_book/" + thumbnail: /pages/examples/des_rap_book.png + - title: "Testing in Research Workflow" + subtitle: "Tutorial on testing in Python and R, accompanies HDR UK Futures training videos." + href: "https://pythonhealthdatascience.github.io/stars-testing-intro/" + thumbnail: /pages/examples/testing_in_research.png + +- category: Researcher profiles + description: | + Examples of researcher profiles developed using Quarto. + tiles: + - title: "Amy Heather" + href: "https://amyheather.github.io/" + thumbnail: /pages/examples/amy_heather.png + - title: "Sammi Rosser" + href: "https://sammirosser.com/" + thumbnail: /pages/examples/sammi_rosser.png \ No newline at end of file diff --git a/pages/code.qmd b/pages/code.qmd deleted file mode 100644 index 3d1822e..0000000 --- a/pages/code.qmd +++ /dev/null @@ -1,8 +0,0 @@ ---- -title: Code ---- - -code example -code task - -rstudio... r... \ No newline at end of file diff --git a/pages/code/index.qmd b/pages/code/index.qmd new file mode 100644 index 0000000..540b234 --- /dev/null +++ b/pages/code/index.qmd @@ -0,0 +1,12 @@ +--- +title: Code +--- + +code example +code task + +rstudio... r... + +r code +make figure +r code annotation? \ No newline at end of file diff --git a/pages/customising.qmd b/pages/customising.qmd deleted file mode 100644 index f4fd6d8..0000000 --- a/pages/customising.qmd +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Customising the site appearance ---- - -themes -css -colours -titles -headings -interacting with quarto.yml -and css diff --git a/pages/customising/cerulean.png b/pages/customising/cerulean.png new file mode 100644 index 0000000..0cc2fda Binary files /dev/null and b/pages/customising/cerulean.png differ diff --git a/pages/customising/cosmo.png b/pages/customising/cosmo.png new file mode 100644 index 0000000..e710499 Binary files /dev/null and b/pages/customising/cosmo.png differ diff --git a/pages/customising/cyborg.png b/pages/customising/cyborg.png new file mode 100644 index 0000000..4cc535d Binary files /dev/null and b/pages/customising/cyborg.png differ diff --git a/pages/customising/darkly.png b/pages/customising/darkly.png new file mode 100644 index 0000000..4d0caf2 Binary files /dev/null and b/pages/customising/darkly.png differ diff --git a/pages/customising/default.png b/pages/customising/default.png new file mode 100644 index 0000000..70ce83b Binary files /dev/null and b/pages/customising/default.png differ diff --git a/pages/customising/flatly.png b/pages/customising/flatly.png new file mode 100644 index 0000000..dde3927 Binary files /dev/null and b/pages/customising/flatly.png differ diff --git a/pages/customising/index.qmd b/pages/customising/index.qmd new file mode 100644 index 0000000..fa12523 --- /dev/null +++ b/pages/customising/index.qmd @@ -0,0 +1,288 @@ +--- +title: "Exercise 6. Customising the site appearance" +--- + +::: {.pale-blue} + +**On this page we will:** + +* Tweak the look and feel of your Quarto site. +* Connect settings in `_quarto.yml` with CSS styles. +* Experiment with colours, headings, and page width. + +::: + +There are endless ways to customise how your Quarto site looks and behaves. This page introduces a few common options (like favicons, navigation, themes, and layout), but there is much more you can explore in the Quarto documentation, by looking at example sites, or by asking for help (including from AI tools) with small bits of HTML, CSS, or JavaScript. As you experiment, remember the goal here is not to write lots of code, but to make a few simple, readable tweaks that improve how your site feels for you and your readers. + +## Favicon + +A **favicon** is the small icon that appears in the browser tab next to your site title. + +For a Quarto website, you set this in `_quarto.yml` using the `favicon` option inside the `website:` section. For example: + +```{.yaml} +website: + title: "Site title" + favicon: images/favicon.png +``` + +Favicons are usually **square** images (e.g., 16x16, 32x32, or 48x48 pixels), saved as **PNG** so transparent backgrounds are supported. They do not need to be large; browsers will scale them down to a tiny size for the tab icon. + +::: {.pale-blue} + +**Task**: + +* [ ] Set the favicon to `images/exeter.png` in `_quarto.yml`. +* [ ] Render the site and check that the icon appears in the browser tab. + +::: + +## Navbar + +So far, your pages have mainly appeared in the **sidebar**. You can also add links to the **navbar** across the top of the site by configuring the `navbar` section under `website:` in `_quarto.yml` + +Right now, the navbar only shows a link to the GitHub repository and a search icon. To add pages, you choose whether links appear on the `left` or `right`, then list the pages you want there. + +For example, this creates a navbar link to an About page: + +```{.yaml} +website: + navbar: + left: + - about.qmd +``` + +In this case, Quarto will use the page’s title (from its YAML front matter) as the label in the navbar. If you want to control the label explicitly, use `href` for the file path and `text` for the label: + +```{.yaml} +website: + navbar: + left: + - href: about.qmd + text: About +``` + +::: {.pale-blue} + +**Task:** + +* [ ] Create a new page called `about.qmd`. +* [ ] Add that page to the navbar in `_quarto.yml`. +* [ ] Render the site and check that the new link appears in the top navigation and works. + +::: + +## Announcement + +An **announcement bar** is a horizontal strip at the top of your site that shows an important message. It’s useful for things like: + +* A status message (e.g., "This site is a work in progress"). +* A short disclaimer (e.g., a research project site that shows a note on every page about generalisability and how the results can be reused - [example](https://ambmodels.github.io/ambdes/)). +* Course or event information (e.g., a training course site that uses it to provide information on upcoming HSMA dates and registration details - [example](https://hsma.co.uk/)). + +You can configure it in `_quarto.yml` under `website:` → `announcement:`. For example: + +```{.yaml} +website: + announcement: + content: "**Note:** This site is a work in progress." # <1> + dismissable: false # <2> + position: below-navbar # <3> +``` + +1. **Content:** The text shown in the bar. You can use simple Markdown for bold (`** **`) or links (`[]()`). +2. **Dismissable:** If `true`, visitor will see a little "x" and can close the bar. If `false`, it always stays visible. +3. **Position:** Where the bar appears - e.g., `below-navbar`, `above-navbar`. + +You can find more announcement options (such as icons and types like "info" or "warning") in the [Quarto documentation](https://quarto.org/docs/reference/projects/websites.html#announcement). + +::: {.pale-blue} + +**Task:** + +* [ ] Add an announcement bar to your site. + +::: + +## Footer + +A **footer** is a small block of text that appears at the bottom of each page, often used for things like copyright, licences, or contact links. + +In Quarto websites, you can add footer content using `page-footer` within the `website:` section in `_quarto.yml`. For example: + +```{.yaml} +website: + page-footer: + left: "This work was funded by XYZ." + center: "Licence: CC-BY-SA 4.0." + right: "Contact us at email@email.com." +``` + +This creates a three-part footer: text on the left, centre, and right of the footer area. See the [Quarto documentation](https://quarto.org/docs/reference/projects/websites.html#footer) for more customisation options. + +::: {.pale-blue} + +**Task:** + +* [ ] Add a footer to your site. + +::: + +## Themes + +Quarto websites use a **theme** to control the general look (fonts, colours, spacing). You can view a list of available themes at . + +You can also browse through them below: + +```{=html} +
+ +
+ +
+ default +
+
+ cerulean +
+
+ cosmo +
+
+ cyborg +
+
+ darkly +
+
+ flatly +
+
+ journal +
+
+ litera +
+
+ lumen +
+
+ lux +
+
+ materia +
+
+ minty +
+
+ morph +
+
+ pulse +
+
+ quartz +
+
+ sandstone +
+
+ simplex +
+
+ sketchy +
+
+ slate +
+
+ solar +
+
+ spacelab +
+
+ superhero +
+
+ united +
+
+ vapor +
+
+ yeti +
+
+ zephyr +
+ +
+ + +
+

+ +
+ + +
+ +
+
+``` + +::: {.pale-blue} + +**Task**: + +* [ ] Change your site's theme. + +::: + +## Page width + +By default, Quarto uses a content width that is comfortable for reading. You can change this layout using the [`page-layout` option](https://quarto.org/docs/output-formats/page-layout.html). + +For example, to make the content span the full width of the page: + +```{.bash} +format: + html: + page-layout: full +``` + +You can set this: + +* In a single page (inside that page's YAML front matter, alongside title). +* Or for the whole site (inside `_quarto.yml` under `format:` → `html:`). + +::: {.pale-blue} + +**Task**: + +* [ ] Set `page-layout: full` for either one page or the whole site. +* [ ] Render and compare how the content looks before and after. + +::: + +## Styled spans + +Sometimes you want to highlight just a few words inside a sentence. + +You can use inline HTML with a `style` attribute: + +```markdown +Highlight this bit. +``` + +**Output:** Highlight this bit. + +::: {.pale-blue} + +**Task:** + +* [ ] Add one sentence that uses a `` with a custom inline style (for example, a highlighted phrase). + +::: \ No newline at end of file diff --git a/pages/customising/journal.png b/pages/customising/journal.png new file mode 100644 index 0000000..17e4aeb Binary files /dev/null and b/pages/customising/journal.png differ diff --git a/pages/customising/litera.png b/pages/customising/litera.png new file mode 100644 index 0000000..62b164a Binary files /dev/null and b/pages/customising/litera.png differ diff --git a/pages/customising/lumen.png b/pages/customising/lumen.png new file mode 100644 index 0000000..8cea34b Binary files /dev/null and b/pages/customising/lumen.png differ diff --git a/pages/customising/lux.png b/pages/customising/lux.png new file mode 100644 index 0000000..9a44b9f Binary files /dev/null and b/pages/customising/lux.png differ diff --git a/pages/customising/materia.png b/pages/customising/materia.png new file mode 100644 index 0000000..c34aefc Binary files /dev/null and b/pages/customising/materia.png differ diff --git a/pages/customising/minty.png b/pages/customising/minty.png new file mode 100644 index 0000000..35efc74 Binary files /dev/null and b/pages/customising/minty.png differ diff --git a/pages/customising/morph.png b/pages/customising/morph.png new file mode 100644 index 0000000..c47ac62 Binary files /dev/null and b/pages/customising/morph.png differ diff --git a/pages/customising/pulse.png b/pages/customising/pulse.png new file mode 100644 index 0000000..70d82ac Binary files /dev/null and b/pages/customising/pulse.png differ diff --git a/pages/customising/quartz.png b/pages/customising/quartz.png new file mode 100644 index 0000000..145d4d5 Binary files /dev/null and b/pages/customising/quartz.png differ diff --git a/pages/customising/sandstone.png b/pages/customising/sandstone.png new file mode 100644 index 0000000..ac41493 Binary files /dev/null and b/pages/customising/sandstone.png differ diff --git a/pages/customising/simplex.png b/pages/customising/simplex.png new file mode 100644 index 0000000..a76e937 Binary files /dev/null and b/pages/customising/simplex.png differ diff --git a/pages/customising/sketchy.png b/pages/customising/sketchy.png new file mode 100644 index 0000000..bfb46ba Binary files /dev/null and b/pages/customising/sketchy.png differ diff --git a/pages/customising/slate.png b/pages/customising/slate.png new file mode 100644 index 0000000..2ba9e8a Binary files /dev/null and b/pages/customising/slate.png differ diff --git a/pages/customising/solar.png b/pages/customising/solar.png new file mode 100644 index 0000000..3dc979e Binary files /dev/null and b/pages/customising/solar.png differ diff --git a/pages/customising/spacelab.png b/pages/customising/spacelab.png new file mode 100644 index 0000000..3a092a3 Binary files /dev/null and b/pages/customising/spacelab.png differ diff --git a/pages/customising/superhero.png b/pages/customising/superhero.png new file mode 100644 index 0000000..4130b26 Binary files /dev/null and b/pages/customising/superhero.png differ diff --git a/pages/customising/united.png b/pages/customising/united.png new file mode 100644 index 0000000..84ee069 Binary files /dev/null and b/pages/customising/united.png differ diff --git a/pages/customising/vapor.png b/pages/customising/vapor.png new file mode 100644 index 0000000..2bfbbf7 Binary files /dev/null and b/pages/customising/vapor.png differ diff --git a/pages/customising/yeti.png b/pages/customising/yeti.png new file mode 100644 index 0000000..4c3f18e Binary files /dev/null and b/pages/customising/yeti.png differ diff --git a/pages/customising/zephyr.png b/pages/customising/zephyr.png new file mode 100644 index 0000000..66f5ee4 Binary files /dev/null and b/pages/customising/zephyr.png differ diff --git a/pages/examples.yml b/pages/examples/examples.yml similarity index 87% rename from pages/examples.yml rename to pages/examples/examples.yml index 0c3defe..ecfb2e7 100644 --- a/pages/examples.yml +++ b/pages/examples/examples.yml @@ -6,69 +6,69 @@ subtitle: Summary of eight computational reproducibility assessments from STARS Work Package 1, presented as a detailed digital appendix to the paper with full methods, results, tables, and figures. href: https://pythonhealthdatascience.github.io/stars_wp1_summary/ code: https://github.com/pythonhealthdatascience/stars_wp1_summary - thumbnail: examples/stars_wp1.png + thumbnail: stars_wp1.png categories: [University of Exeter] - title: "An integrated approach to identifying sex-specific genes, transcription factors, and pathways relevant to Alzheimer's disease" subtitle: Accompanies their paper. Site includes results of systematic review, and genomics analysis results. (Unfortunately cannot find code) href: https://bioinfo.cipf.es/metafun-ad/ code: - thumbnail: examples/metafunad.png + thumbnail: metafunad.png - title: "Exeter Oncology Model: Renal Cell Carcinoma edition (EOM-RCC)" subtitle: Documentation for EOM-RCC,a platform cost-effectiveness model encompassing each decision node in the disease area for advanced renal cell carcinoma. href: https://pythonhealthdatascience.github.io/stars-eom-rcc/ code: https://github.com/pythonhealthdatascience/stars-eom-rcc/ - thumbnail: examples/eom_rcc.png + thumbnail: eom_rcc.png categories: [University of Exeter] - title: "The Early Psychosis: Investigating Cognition (EPIC) Project" subtitle: Website for project including news/updates, pages for advisory group and participants, contact information and publications. (Unfortunately cannot find code) href: https://the-epic-study.quarto.pub/the-epic-project/ code: - thumbnail: examples/epic.png + thumbnail: epic.png - title: Quantification of resilience in farm animals subtitle: Supporting website for their paper containing supplemental code examples. href: https://quantanimal.github.io/ code: https://github.com/QuantAnimal/QuantAnimal.github.io - thumbnail: examples/farm.png + thumbnail: farm.png - title: Violence Risk Assessment in Forensic Mental Health Services subtitle: Shares results of systematic review, accompanying their paper. href: https://mayaogonah.github.io/forensic-risk/ code: https://github.com/mayaogonah/forensic-risk - thumbnail: examples/violence.png + thumbnail: violence.png - title: Analysis for Large-scale clustering of longitudinal faecal calprotectin and C-reactive protein profiles in inflammatory bowel disease subtitle: Presents the analyses carried out in their paper. href: https://vallejosgroup.github.io/IBD-Inflammatory-Patterns/ code: https://github.com/VallejosGroup/IBD-Inflammatory-Patterns - thumbnail: examples/faecal_calprotectin.png + thumbnail: faecal_calprotectin.png - title: nordatlantisk-ft subtitle: Website for an open voting-records dataset, with a data overview, detailed codebook of all variables, and information about the repository. href: https://mtwente.github.io/nordatlantisk-ft/ code: https://github.com/mtwente/nordatlantisk-ft/ - thumbnail: examples/nordatlantisk-ft.png + thumbnail: nordatlantisk-ft.png - title: Simulating Attention and Performance tasks with an LLM subtitle: R project recording various simulation experiments. href: https://www.crumplab.com/GPTAttentionPerformance/ code: https://github.com/CrumpLab/GPTAttentionPerformance - thumbnail: examples/gptattentionperformance.png + thumbnail: gptattentionperformance.png - title: "NAture-positive SCenarios for ENvironmental Transitions: Peru" subtitle: Project website with maps, photo galleries, interactive figures, updates. href: https://nascent-peru.github.io/ code: https://github.com/NASCENT-Peru/NASCENT-Peru.github.io - thumbnail: examples/nascent_peru.png + thumbnail: nascent_peru.png - title: research-compendium-website subtitle: Template site with pages about, data, codes and manuscript. href: https://emdelponte.github.io/research-compendium-website/ code: https://github.com/emdelponte/research-compendium-website - thumbnail: examples/research-compendium.png + thumbnail: research-compendium.png - title: PLB DSS Analysis subtitle: Example using the template site, reporting on potate late blight forecasting model. href: https://mladencucak.github.io/AnalysisPLBIreland/ code: https://github.com/mladencucak/AnalysisPLBIreland - thumbnail: examples/plbdss.png + thumbnail: plbdss.png - title: Is Latitude Associated with Chronotype? subtitle: Masters Thesis as quarto website. href: https://danielvartan.github.io/mastersthesis/web/index.html code: https://github.com/danielvartan/mastersthesis - thumbnail: examples/masters.png + thumbnail: masters.png - category: Homepage for research programme or team description: | @@ -78,74 +78,74 @@ subtitle: Summary site for the STARS research project, with dedicated pages describing each component of the project and separate pages for every associated publication, including links to code and embedded papers. href: https://pythonhealthdatascience.github.io/stars/ code: https://github.com/pythonhealthdatascience/stars - thumbnail: examples/stars.png + thumbnail: stars.png categories: [University of Exeter] - title: HSMA subtitle: Programme homepage describing the HSMA training scheme, with resources, guidance, news, and pages on each and every HSMA student project. href: https://hsma.co.uk/ code: https://github.com/hsma-programme/hsma_site - thumbnail: examples/hsma.png + thumbnail: hsma.png categories: [University of Exeter] - title: Affective Communication & Computing Lab subtitle: Lab website with blog posts containing latest news, and with pages listing the team, research themes, publications, resources and opportunities. href: https://affcom.ku.edu/ code: https://github.com/jmgirard/affcomlab - thumbnail: examples/affcom.png + thumbnail: affcom.png - title: Computational Cognition Lab subtitle: Research group site listing publications, people, opportunities. Also has latest news and links to their learning resources, including open textbooks and teaching materials built with tools like Bookdown and Quarto. href: https://www.crumplab.com/ code: https://github.com/CrumpLab/CrumpLab.github.io - thumbnail: examples/crumplab.png + thumbnail: crumplab.png - title: Digital Humanities Bern subtitle: Centre homepage with news and event listings, and individual pages on their research areas and services. href: https://dhbern.github.io/ code: https://github.com/DHBern/dhbern.github.io - thumbnail: examples/dhbern.png + thumbnail: dhbern.png - title: Hertie Coding Club subtitle: Club site introducing the group's mission, events, and workshops, with interactive resources, coding materials, and a polished, animated homepage experience. href: https://www.hertiecodingclub.com/ code: https://github.com/jurjoroa/hcc-website - thumbnail: examples/hertie.png + thumbnail: hertie.png - title: Masiello Research Group subtitle: Group homepage with detailed researcher profiles, plus research area overviews, publications, software links, and news. href: https://faculty.washington.edu/masiello/ code: https://github.com/MasielloGroup/MasielloGroupWebsite - thumbnail: examples/masiello.png + thumbnail: masiello.png - title: NHS-R Community subtitle: Community site sharing reports, blog posts, events, resources, and information about fellows and contributors, supporting users of R across the NHS. href: https://nhsrcommunity.com/ code: https://github.com/nhs-r-community/nhs-r-community - thumbnail: examples/nhsr.png + thumbnail: nhsr.png - title: Deep Energy and Climate Policy Lab subtitle: Group homagepage with blog posts, project summaries, publications, team, events and more. href: https://deeppolicylab.github.io/ code: https://github.com/deeppolicylab/deeppolicylab.github.io - thumbnail: examples/energy_climate_lab.png + thumbnail: energy_climate_lab.png - title: Atlas of Living Australia Labs subtitle: Features analysis articles and data visualisations. href: https://labs.ala.org.au/ code: https://github.com/AtlasOfLivingAustralia/ala-labs - thumbnail: examples/alalabs.png + thumbnail: alalabs.png - title: Real World Data Science subtitle: Project from the Royal Statistical Society - site contains mostly blog posts. href: https://realworlddatascience.net/ code: https://github.com/realworlddatascience/realworlddatascience.net - thumbnail: examples/realworld.png + thumbnail: realworld.png - title: epiforecasts subtitle: Research group at the Centre for Mathematical Modelling of Infectious Diseases of the Longon School of Hygiene and Tropical Medicine. href: https://epiforecasts.io/ code: https://github.com/epiforecasts/epiforecasts.github.io - thumbnail: examples/epiforecasts.png + thumbnail: epiforecasts.png - title: seedcase subtitle: Project website with roadmap, info on team, and links out to other sites focused on community and design. href: https://seedcase-project.org/ code: https://github.com/seedcase-project/seedcase-website - thumbnail: examples/seedcase.png + thumbnail: seedcase.png - title: openscapes subtitle: Clearly designed project website with great graphics and design. href: https://openscapes.org/ code: https://github.com/Openscapes/website-new - thumbnail: examples/openscapes.png + thumbnail: openscapes.png - category: Training / Modules / Courses / Etc. description: | @@ -155,46 +155,46 @@ subtitle: Of course, we created this website using Quarto! href: https://pythonhealthdatascience.github.io/quarto-tutorial/ code: https://github.com/pythonhealthdatascience/quarto-tutorial - thumbnail: examples/quarto_tutorial.png + thumbnail: quarto_tutorial.png categories: [University of Exeter] - title: DES RAP Book subtitle: Self-paced training resource on creating discrete-event simulation models in Python and R as part of a reproducible analytical pipeline. href: https://pythonhealthdatascience.github.io/des_rap_book/ code: https://github.com/pythonhealthdatascience/des_rap_book - thumbnail: examples/des_rap_book.png + thumbnail: des_rap_book.png categories: [University of Exeter] - title: Testing in Research Workflow subtitle: Tutorial on testing in Python and R, accompanies HDR UK Futures training videos. href: https://pythonhealthdatascience.github.io/stars-testing-intro/ code: https://github.com/pythonhealthdatascience/stars-testing-intro - thumbnail: examples/testing_in_research.png + thumbnail: testing_in_research.png categories: [University of Exeter] - title: HSMA - the little book of DES subtitle: Self-paced training resource on creating discrete-event simulation models in Python using SimPy. href: https://des.hsma.co.uk/ code: https://github.com/hsma-programme/hsma6_des_book - thumbnail: examples/little_book_of_des.png + thumbnail: little_book_of_des.png categories: [University of Exeter] - title: "STA 210: Regression Analysis" subtitle: href: https://sta210-s22.github.io/website/ code: https://github.com/sta210-s22/website - thumbnail: examples/sta210.png + thumbnail: sta210.png - title: TASO Interactive Technical Guides subtitle: href: https://taso-he.github.io/technicalguide/ code: https://github.com/taso-he/technicalguide - thumbnail: examples/taso_technical.png + thumbnail: taso_technical.png - title: Reproducibility at Urban subtitle: href: https://ui-research.github.io/reproducibility-at-urban/ code: https://github.com/UI-Research/reproducibility-at-urban - thumbnail: examples/reproducibility_urban.png + thumbnail: reproducibility_urban.png - title: Energy and Climate Policy subtitle: Online course with schedule, lectures as quarto presentations, and more. href: https://drganghe.github.io/energy-climate-policy/ code: https://github.com/drganghe/energy-climate-policy - thumbnail: examples/energy_climate_course.png + thumbnail: energy_climate_course.png - category: Researcher profiles description: | @@ -204,69 +204,69 @@ subtitle: href: https://amyheather.github.io/ code: https://github.com/amyheather/amyheather.github.io/ - thumbnail: examples/amy_heather.png + thumbnail: amy_heather.png categories: [University of Exeter] - title: Sammi Rosser subtitle: href: https://sammirosser.com/ code: https://github.com/Bergam0t/bergam0t.github.io - thumbnail: examples/sammi_rosser.png + thumbnail: sammi_rosser.png categories: [University of Exeter] - title: Andrew Heiss subtitle: href: https://www.andrewheiss.com/ code: https://github.com/andrewheiss/ath-quarto - thumbnail: examples/andrew_heiss.png + thumbnail: andrew_heiss.png - title: Drew Dimmery subtitle: href: https://ddimmery.com/ code: https://github.com/ddimmery/quarto-website - thumbnail: examples/drew_dimmery.png + thumbnail: drew_dimmery.png - title: Beatriz Milz subtitle: href: https://beamilz.com/ code: https://github.com/beatrizmilz/blog-en - thumbnail: examples/beatriz_milz.png + thumbnail: beatriz_milz.png - title: Mike Mahoney subtitle: href: https://www.mm218.dev/ code: https://github.com/mikemahoney218/mm218.dev - thumbnail: examples/mike_mahoney.png + thumbnail: mike_mahoney.png - title: Chris von Csefalvay subtitle: href: https://chrisvoncsefalvay.com/ code: https://github.com/chrisvoncsefalvay/chrisvoncsefalvay.github.io - thumbnail: examples/chris_von_csefalvay.png + thumbnail: chris_von_csefalvay.png - title: Salman Naqvi subtitle: href: https://forbo7.github.io/ code: https://github.com/ForBo7/forbo7.github.io - thumbnail: examples/salman_naqvi.png + thumbnail: salman_naqvi.png - title: Silvia Canelón subtitle: href: https://silviacanelon.com/ code: https://github.com/spcanelon/silvia - thumbnail: examples/silvia_canelon.png + thumbnail: silvia_canelon.png - title: John Paul Helveston subtitle: href: https://www.jhelvy.com/ code: https://github.com/jhelvy/jhelvy_quarto - thumbnail: examples/john_helveston.png + thumbnail: john_helveston.png - title: Gang He subtitle: href: https://drganghe.github.io/ code: https://github.com/drganghe/drganghe.github.io - thumbnail: examples/gang_he.png + thumbnail: gang_he.png - title: Quarto Academic Template subtitle: Template created by Dr Gang He href: https://drganghe.github.io/quarto-academic-website-template/ code: https://github.com/drganghe/quarto-academic-website-template - thumbnail: examples/quarto_academic.png + thumbnail: quarto_academic.png - title: Albury C subtitle: href: https://alburycatalina.github.io/ code: https://github.com/alburycatalina/alburycatalina.github.io - thumbnail: examples/albury_c.png + thumbnail: albury_c.png - category: Manuscripts description: | @@ -276,27 +276,27 @@ subtitle: Online report with background/methods/results and links to extra pages providing more details. href: https://uwescience.github.io/2024-open-source-standards-report/ code: https://github.com/uwescience/2024-open-source-standards-report - thumbnail: examples/towards.png + thumbnail: towards.png - title: Analysis of human visual experience data subtitle: Manuscript and supplementary materials href: https://tscnlab.github.io/ZaunerEtAl_JVis_2026/ code: https://github.com/tscnlab/ZaunerEtAl_JVis_2026 - thumbnail: examples/visual.png + thumbnail: visual.png - title: "Supplementary Materials for: The promise of community-driven preprints in ecology and evolution" subtitle: href: https://daniel1noble.github.io/ecoevo_1000/ code: https://github.com/daniel1noble/ecoevo_1000 - thumbnail: examples/supplementary.png + thumbnail: supplementary.png - title: Clinical Performance of Tumor-Informed versus Tumor-Agnostic ctDNA Assays for Colorectal Cancer Recurrence subtitle: Webpage-based report for systematic review and meta-analysis paper. href: https://crct-bioinformatics.github.io/TIvsTA-DAMA/ code: https://github.com/CRCT-bioinformatics/TIvsTA-DAMA - thumbnail: examples/tumor.png + thumbnail: tumor.png - title: Dissociating mechanisms of heart-voice coupling subtitle: Extended results and supplementary information for their paper. href: https://wimpouw.github.io/VoiceAndHeart/heartrate_expire code: - thumbnail: examples/dissociating.png + thumbnail: dissociating.png - category: Conferences and events description: | @@ -306,17 +306,17 @@ subtitle: Schedule and description of upcoming talks from guest speakers. href: https://drganghe.github.io/climate-guest-speakers/ code: https://github.com/drganghe/climate-guest-speakers - thumbnail: examples/climate_guest_speakers.png + thumbnail: climate_guest_speakers.png - title: R/Medicine 2026 subtitle: Conference website with registration, submission, programme, details about hackathon, etc. href: https://rconsortium.github.io/RMedicine_website/ code: https://github.com/RConsortium/RMedicine_website - thumbnail: examples/rmedicine.png + thumbnail: rmedicine.png - title: 2021 Cloud Hackathon subtitle: Information about hackathon, schedule, lots of tutorial pages. href: https://nasa-openscapes.github.io/2021-Cloud-Hackathon/ code: https://github.com/nasa-openscapes/2021-Cloud-Hackathon - thumbnail: examples/2021cloud.png + thumbnail: 2021cloud.png - category: Package documentation description: | @@ -327,18 +327,18 @@ href: https://lintquarto.github.io/lintquarto/ code: https://github.com/lintquarto/lintquarto categories: [University of Exeter] - thumbnail: examples/lintquarto.png + thumbnail: lintquarto.png - title: vidigi subtitle: Python package for creating animated visualisations of queues and pathways from simulation or real-world data. href: http://hsma-tools.github.io/vidigi/vidigi_docs/ code: https://github.com/hsma-tools/vidigi/ - thumbnail: examples/vidigi.png + thumbnail: vidigi.png categories: [University of Exeter] - title: skimpy subtitle: Python package providing summary statistics from dataframes. href: https://aeturrell.github.io/skimpy/ code: https://github.com/aeturrell/skimpy - thumbnail: examples/skimpy.png + thumbnail: skimpy.png - category: Other cool examples description: | @@ -348,7 +348,7 @@ subtitle: Directory of open-source tools, packages, and projects for analytics and decision science in healthcare. href: https://atlas.hsma.co.uk/ code: https://github.com/hsma-programme/decision_intelligence_atlas - thumbnail: examples/atlas.png + thumbnail: atlas.png categories: [University of Exeter] - category: Non-Quarto examples @@ -359,28 +359,28 @@ subtitle: Companion to publication which provides more detailed introduction, methods, results, discussion. href: https://tommonks.github.io/des_sharing_lit_review/ code: https://github.com/TomMonks/des_sharing_lit_review - thumbnail: examples/code_sharing.png + thumbnail: code_sharing.png categories: [University of Exeter] - title: "Research Compendium: Replicating Simulations in Python using Generative AI" subtitle: Companion to publication with full record of study - in this case, all prompts, code, tests, results. href: https://pythonhealthdatascience.github.io/llm_simpy/ code: https://github.com/pythonhealthdatascience/llm_simpy - thumbnail: examples/genai.png + thumbnail: genai.png categories: [University of Exeter] - title: Introduction to SAMueL-1 (Stroke Audit Machine Learning) subtitle: Full results from project, supplementary to reports and papers. href: https://samuel-book.github.io/samuel-1/introduction/intro.html code: https://github.com/samuel-book/samuel-1/tree/gh-pages - thumbnail: examples/samuel1.png + thumbnail: samuel1.png categories: [University of Exeter] - title: Introduction to SAMueL-2 (Stroke Audit Machine Learning) subtitle: Full project results. href: https://samuel-book.github.io/samuel-2/ code: https://github.com/samuel-book/samuel-2 - thumbnail: examples/samuel2.png + thumbnail: samuel2.png categories: [University of Exeter] - title: AmbModelOpen subtitle: Describes research project modelling ambulances - including background, method, and results - serving as foundation for conference paper. href: https://nhsengland.github.io/AmbModelOpen/ code: https://github.com/nhsengland/AmbModelOpen - thumbnail: examples/ambsim.png + thumbnail: ambsim.png diff --git a/pages/gallery.ejs b/pages/examples/gallery.ejs similarity index 100% rename from pages/gallery.ejs rename to pages/examples/gallery.ejs diff --git a/pages/examples.qmd b/pages/examples/index.qmd similarity index 100% rename from pages/examples.qmd rename to pages/examples/index.qmd diff --git a/pages/inline_html.qmd b/pages/inline_html/index.qmd similarity index 80% rename from pages/inline_html.qmd rename to pages/inline_html/index.qmd index 71f11af..e97c405 100644 --- a/pages/inline_html.qmd +++ b/pages/inline_html/index.qmd @@ -1,13 +1,25 @@ --- -title: Inline HTML +title: "Exercise 5. Inline HTML" --- +::: {.pale-blue} + +**On this page we will:** + +* See how HTML tags can be mixed into Markdown. +* Use inline HTML for line breaks, small print and keyboard keys. +* Add helpful abbreviations that show full text on hover. + +::: + Web pages are written in **HTML** (HyperText Markup Language), which uses tags like `

`, ``, and `` to describe how things should look. In a Markdown document, you can sometimes mix in small pieces of HTML. This is called **inline HTML**: you add a tiny HTML tag inside a sentence, and Quarto keeps it when it turns your page into HTML. **Caveat:** raw HTML is only kept when the output format supports it (for example, HTML pages). Some tags may be dropped or ignored when rendering to PDF or Word. +You should complete the listed tasks in the `5_inline_html.qmd` file on your Codespace. Once you have worked through these tasks, commit and push your change. + ## Line break You can insert a line break using `
`. @@ -71,7 +83,7 @@ When someone hovers over it in a browser, they see the full phrase. RCT -Alternatively, you can use footnotes @sec-footnotes to explain the term. +Alternatively, you can use footnotes `@sec-footnotes` to explain the term. ::: {.pale-blue} diff --git a/pages/making_a_change.qmd b/pages/making_a_change.qmd deleted file mode 100644 index f8521a0..0000000 --- a/pages/making_a_change.qmd +++ /dev/null @@ -1,11 +0,0 @@ ---- -title: Making a change ---- - -make a change - -commit -explain - -fork -explain \ No newline at end of file diff --git a/pages/making_a_change/commit_message.png b/pages/making_a_change/commit_message.png new file mode 100644 index 0000000..a32b92a Binary files /dev/null and b/pages/making_a_change/commit_message.png differ diff --git a/pages/making_a_change/index.qmd b/pages/making_a_change/index.qmd new file mode 100644 index 0000000..a7545e3 --- /dev/null +++ b/pages/making_a_change/index.qmd @@ -0,0 +1,71 @@ +--- +title: "Exercise 1. Making a change" +--- + +::: {.pale-blue} + +**On this page we will:** + +* Make a small change to your site. +* See how that change appears in the live preview. +* Save your work with a Git commit. +* Understand where the commit is pushed to. + +::: + +## Make a small change + +1. Open the file `1_making_a_change.qmd`. + +2. Add a short line of text in the body - for example `This is my new sentence.` You don't need to save - Codespace auto-saves any changes. + +3. Click the Preview button - this will update your site with new changes, if you still have it open, or re-open it, with new changes. + +4. Check: Does the page show your updated title and text? + +## Save your change with Git + +We are working in GitHub Codespaces, which uses **Git** for version control. Version control means Git keeps track of how your files change over time, so you can see what you changed, when you changed it, and go back if you make a mistake. + +A commit is like a snapshot of your project at a particular moment. A commit records: + +* Which files changed +* Exactly what changed +* Who made the change and a short message describing it + +Now we will make a commit for the change you just made. + +1. Click on the **Source Control** button in the sidebar. + +![](source_control.drawio.png){fig-alt="Screenshot of VSCode sidebar with Source Control button circled."} + +2. In the Source Control panel, you should see your changed file listed. Hover over the file, and click the + button. This is called staging the file: you are telling Git "include this file in my next commit". + +![](stage_changes.drawio.png){fig-alt="Screenshot of cursor hovering over the '+' button"} + +3. At the top of the Source Control panel, there is a box labelled Message. Type a short description of what you did, for example: `Made a change to a file`. Then click the blue ✓ Commit button. This creates the commit: Git saves a snapshot of your project with your message attached. + +![](commit_message.png){fig-alt="Screenshot showing a commit message has been written."} + +4. After committing, you will see the button now says Sync changes 1 ↑. Click this to send your commit from Codespaces up to GitHub. This means your snapshot now lives safely in your GitHub repository as well as in the Codespace. + +## Repositories and forks + +To explain what just happened, we need two ideas: repository and fork. + +* A **repository** (often shortened to "repo") is a project folder that Git is tracking. It contains your files and the history of commits. +* A **fork** is your own copy of someone else's GitHub repository. It lives under your GitHub account, so you are free to experiment without changing the original project. + +In this tutorial you started from the `pythonhealthdatascience/quarto-template` repository, but you are working in **your fork** of that template. When you commit in Codespaces and sync, the commit is saved in the Codespace and then it is pushed to your fork on GitHub. + +See your changes on GitHub... + +1. In your browser, open GitHub (). + +2. Go to your repoisitories by clicking your icon in the top right corner and then Repositories - for example: + +![](repo.png){fig-alt="Screenshot of cursor hovering over the Repositories button."} + +3. There, you should see `quarto-template` listed - this is your fork of the repository. Click on the title to open it. + +4. Click the **Commits** link near the top to view the list of commits. Your latest commit (with the message you wrote) should appear at the top. diff --git a/pages/making_a_change/repo.png b/pages/making_a_change/repo.png new file mode 100644 index 0000000..ef5b1b7 Binary files /dev/null and b/pages/making_a_change/repo.png differ diff --git a/pages/making_a_change/source_control.drawio b/pages/making_a_change/source_control.drawio new file mode 100644 index 0000000..2569b5c --- /dev/null +++ b/pages/making_a_change/source_control.drawio @@ -0,0 +1,19 @@ + + + + + + + + + + + + + + + + + + + diff --git a/pages/making_a_change/source_control.drawio.png b/pages/making_a_change/source_control.drawio.png new file mode 100644 index 0000000..5580bf0 Binary files /dev/null and b/pages/making_a_change/source_control.drawio.png differ diff --git a/pages/making_a_change/stage_changes.drawio b/pages/making_a_change/stage_changes.drawio new file mode 100644 index 0000000..96e595c --- /dev/null +++ b/pages/making_a_change/stage_changes.drawio @@ -0,0 +1,16 @@ + + + + + + + + + + + + + + + + diff --git a/pages/making_a_change/stage_changes.drawio.png b/pages/making_a_change/stage_changes.drawio.png new file mode 100644 index 0000000..bed1e88 Binary files /dev/null and b/pages/making_a_change/stage_changes.drawio.png differ diff --git a/pages/markdown.qmd b/pages/markdown/index.qmd similarity index 93% rename from pages/markdown.qmd rename to pages/markdown/index.qmd index 68422ad..44c172b 100644 --- a/pages/markdown.qmd +++ b/pages/markdown/index.qmd @@ -1,7 +1,17 @@ --- -title: "Markdown basics" +title: "Exercise 2. Markdown basics" --- +::: {.pale-blue} + +**On this page we will:** + +- Learn what Markdown is and how it relates to Quarto. +- Practice headings, emphasis, lists and links. +- Use quotes, code, tables and checklists to structure information. + +::: + > **Acknowledgements:** This page is adapted from [health-data-science-OR/jupyterlab-introduction](https://github.com/health-data-science-OR/jupyterlab-introduction/blob/main/01_basic_markdown.ipynb). ## What is markdown? @@ -14,6 +24,8 @@ A normal Markdown file usually ends in `.md`. In this workshop we mostly used ** On this page you will practice Markdown features that you can use in your Quarto documents. +You should complete the listed tasks in the `2_markdown_basics.qmd` file on your Codespace. Once you have worked through these tasks, commit and push your change. + ## Headings and subheadings In Markdown, a heading is formatted with the character `#`. diff --git a/pages/media.qmd b/pages/media/index.qmd similarity index 51% rename from pages/media.qmd rename to pages/media/index.qmd index 52f922a..3143dbe 100644 --- a/pages/media.qmd +++ b/pages/media/index.qmd @@ -1,11 +1,23 @@ --- -title: Images, videos and documents +title: "Exercise 4. Images, videos and documents" --- +::: {.pale-blue} + +**On this page we will:** + +* Add images with different sizes, captions and alt text. +* Embed videos using shortcodes. +* Embed other websites using iframes. +* Display PDFs inside a page. + +::: + +You should complete the listed tasks in the `4_images_videos_documents.qmd` file on your Codespace. Once you have worked through these tasks, commit and push your change. + ## Images -You can add images to a Quarto page using Markdown. -The basic pattern is: +You can add images to a Quarto page using Markdown. The basic pattern is: ```markdown ![](image.jpg) @@ -13,7 +25,7 @@ The basic pattern is: In this example, we have an image file called `south_cloisters.jpg` in the `images` folder. The path to the file is: -* `..` meaning "go up one folder". +* `/` means "start from the root of the website", not from the folder of this `.qmd` file. * `images` is the folder name. * `south_cloisters.jpg` is the file name. @@ -22,64 +34,66 @@ If your image is in the same folder as your `.qmd` file, you could just write th This shows the image at its default size and alignment: ```markdown -![](../images/south_cloisters.jpg) +![](/images/south_cloisters.jpg) ``` -![](../images/south_cloisters.jpg){fig-alt="Default size and alignment example"} +![](/images/south_cloisters.jpg){fig-alt="Default size and alignment example"} -You can control the size of the image with `width`: +### Customising image display + +After the image, you can add options inside **curly braces** { }. These options tell Quarto how to display the image. -TODO: EXPLAIN CURLY BRACES +You can control the size of the image with `width`: ```markdown -![](../images/south_cloisters.jpg){width=50%} +![](/images/south_cloisters.jpg){width=50%} ``` -![](../images/south_cloisters.jpg){width=50% fig-alt="Custom width example"} +![](/images/south_cloisters.jpg){width=50% fig-alt="Custom width example"} -To add a caption, put text inside the square brackets: +We can control alignment using `fig-align`: ```markdown -![Photograph of South Cloisters on St Lukes Campus](../images/south_cloisters.jpg) +![](/images/south_cloisters.jpg){fig-align="center"} ``` -![Photograph of South Cloisters on St Lukes Campus](../images/south_cloisters.jpg){fig-alt="Caption example"} +![](/images/south_cloisters.jpg){fig-align="center" fig-alt="Centered figure example"} -We can control alignment using `fig-align`: +Adding `.lightbox` lets people click to see a larger version of the image - helpful when you have detailed figures or diagrams. ```markdown -![](../images/south_cloisters.jpg){fig-align="center"} +![](/images/south_cloisters.jpg){.lightbox} ``` -![](../images/south_cloisters.jpg){fig-align="center" fig-alt="Centered figure example"} +![](/images/south_cloisters.jpg){.lightbox fig-alt="Lightbox example"} -Adding `.lightbox` lets people click to see a larger version of the image - helpful when you have detailed figures or diagrams. +To add a caption, put text inside the square brackets: ```markdown -![](../images/south_cloisters.jpg){.lightbox} +![Photograph of South Cloisters on St Lukes Campus](/images/south_cloisters.jpg) ``` -![](../images/south_cloisters.jpg){.lightbox fig-alt="Lightbox example"} +![Photograph of South Cloisters on St Lukes Campus](/images/south_cloisters.jpg){fig-alt="Caption example"} You can also make your figure a hyperlink: ```markdown -[![](../images/south_cloisters.jpg)](https://medicine.exeter.ac.uk/research/facilities/southcloisters/) +[![](/images/south_cloisters.jpg)](https://medicine.exeter.ac.uk/research/facilities/southcloisters/) ``` -[![](../images/south_cloisters.jpg)](https://medicine.exeter.ac.uk/research/facilities/southcloisters/){fig-alt="Linked image example"} +[![](/images/south_cloisters.jpg)](https://medicine.exeter.ac.uk/research/facilities/southcloisters/){fig-alt="Linked image example"} To add alternative text to your image: ```markdown -![](../images/south_cloisters.jpg){fig-alt="Photograph of South Cloisters on St Lukes Campus"} +![](/images/south_cloisters_broken.jpg){fig-alt="Photograph of South Cloisters on St Lukes Campus"} ``` -![](../images/south_cloisters.jpg){fig-alt="Photograph of South Cloisters on St Lukes Campus"} +![](/images/south_cloisters_broken.jpg){fig-alt="Photograph of South Cloisters on St Lukes Campus"} ::: {.pale-blue} -**Task**: Open `media.qmd`, see image is provided in images folder +**Task**: * [ ] Add image at full width * [ ] Add it again, 40% width, aligned to right @@ -91,9 +105,11 @@ Render the page and compare how the three images look. ## Videos -You can embed videos (for example, from YouTube) using the `video` shortcode. It will show a video player inside your page. Here is an example: +You can embed videos (for example, from YouTube) using the `video` shortcode. It will show a video player inside your page. -TODO: EXPLAIN WHAT A SHORTCODE IS +A **shortcode** is a special, compact bit of text that Quarto understands and expands into more complex HTML for you. You do not have to write the HTML yourself; you just use the shortcode and pass it the video URL. + +Here is an example: ```{.markdown shortcodes="false"} {{< video https://youtu.be/BUN0sSa2e9c?si=-o7gu4FGOZS7L2rt >}} @@ -103,7 +119,7 @@ TODO: EXPLAIN WHAT A SHORTCODE IS ::: {.pale-blue} -**Task**: On `media.qmd`: +**Task**: * [ ] Add a YouTube video to the page - for example: @@ -117,9 +133,12 @@ Render the page and check that the video player appears. ## Embed websites -Sometimes you might want to show another website (e.g., news article, uni web page, etc.) inside your page. You can do this using an HTML `` is a tag that tells the browser to embed another page. ```markdown @@ -129,7 +148,7 @@ TODO: beginner friendly explanation of HTML syntax and of iframes ::: {.pale-blue} -**Task**: On `media.qmd`: +**Task**: * [ ] Embed a website of your choice using an ` - -## Homepage for a research programme or team - -If you lead a group, collaborate across institutions, or are part of a larger programme of work, a Quarto website can serve as the public-facing home for everything you do. - -This might include: - -- An overview of the programme's aims and funding -- Profiles of team members (Quarto has built-in "about page" templates) -- A list of outputs: papers, datasets, tools, presentations -- News or blog posts about recent developments -- Links to resources for collaborators or the public - -Example: - - - -## Training, modules, and courses - -Quarto is widely used for teaching materials. Course notes, worked examples, exercises, and slide decks can all live together on one structured, searchable site that learners can work through - -The site can be open to anyone, easy to update and verion controlled, so you always know what changed and when. - -Example: - - - -## Researcher profiles - -You can create a personal academic website that goes far beyond a LinkedIn profile or institutional staff page. A researcher profile site lets you present your work exactly as you want to, with your own design and structure. You can include your biography, research interests, publications, teaching, and links to your other profiles online. - -You can also have a blog - a place to share updates, write about your work, or post short pieces between papers. - -It can also move with you if you change institutions. - -Example: - - - -## Manuscripts - -Quarto has a dedicated manuscripts format for scholarly articles. You write your paper in Quarto and can output it as a website, a PDF, or a Word document - all from the same source file. - -This won't be relevant to everyone - but for research involving data analysis, you can embed code meaning your figures and results are always generated directly from the analysis — nothing can go out of sync. - -Example: - - - -## Conferences and events - -If you are hosting an event - a workshop, symposium, summer school, or conference - Quarto works well here too. You can publish the programme, abstracts, speaker information, and practical details before the event, then add slides, recordings, and notes afterwards, all on the same site. - -Because the site is just files in a repository, multiple organisers can contribute to it, and it can be updated easily as the event approaches and after it ends. - -Example: - - - -## Package documentation - -If you develop a software package - in Python, R, or another language - Quarto is a great way to write its documentation. You can include installation instructions, usage guides, tutorials, and examples, all in one navigable site. - -Example: - - - -## Next steps - -The rest of this tutorial will walk you through how to create a Quarto website from scratch — we'll build one together. - -When you reach the end, head to the [Examples](examples.qmd) page to see a much larger collection of real research websites built with Quarto, covering all of the categories above and more. diff --git a/pages/why/index.qmd b/pages/why/index.qmd new file mode 100644 index 0000000..ce4c11f --- /dev/null +++ b/pages/why/index.qmd @@ -0,0 +1,249 @@ +--- +title: Why make a website for your research? +format: + revealjs: + theme: simple + slide-number: true + preview-links: false +--- + +## This workshop + +In this workshop, we're going to teach you how to use **Quarto** to create websites. + +. . . + +But first, **why would you want to?** + +. . . + +There are many ways researchers use Quarto websites... + +--- + +## Ways researchers use Quarto websites + +1. Research projects +2. Programme or team homepage +3. Training, modules, and courses +4. Researcher profiles +5. Manuscripts +6. Conferences and events +7. Package documentation + +--- + +## 1. Research projects + +Research tends to accumulate across many different places: + +- Word documents, PDFs, data files +- Presentations and emails +- Code repositories + +. . . + +Hard for collaborators to find things, and nearly impossible for anyone outside the project to navigate. **Much of it stays hidden.** + +--- + +## 1. Research projects + +A Quarto website brings everything together in **one place that anyone can visit**. + +Relevant to any kind of research (qualitative or quantitative). + +. . . + +A project website might include: + +- An overview of the study and its aims +- Relevant documents, reports, and materials +- Embedded videos, presentations, and visualisations +- Notes, updates, or a log of progress + +--- + +## 1. Research projects + +Can accompany a journal paper as a richer alternative to a standard appendix: + +- Searchable +- Mixed media +- Openly accessible to anyone + +. . . + +Or serve as a **research compendium** (everything in one place, properly organised). + +. . . + +If your research involves code (Python, R, etc.), you can run code directly within the site, display outputs automatically, and embed interactive figures. + +--- + + + +--- + +## 2. Programme or team homepage + +If you lead a group, collaborate across institutions, or are part of a larger programme, a Quarto website can be the **public-facing home for everything you do**. + +. . . + +- An overview of the programme's aims and funding +- Profiles of team members +- A list of outputs: papers, datasets, tools, presentations +- News or blog posts about recent developments +- Links to resources for collaborators or the public + +--- + + + +--- + +## 3. Training, modules, and courses + +Quarto is widely used for **teaching materials**. + +Course notes, worked examples, exercises, and slide decks can all live together on one structured, searchable site. + +. . . + +- Open to anyone +- Easy to update +- Version controlled - you always know what changed and when + +--- + + + +--- + +## 4. Researcher profiles + +Create a **personal academic website** that goes far beyond a LinkedIn profile or institutional staff page, and moves with you if you change institutions. + +. . . + +- Present your work exactly as you want to +- Biography, research interests, publications, teaching +- Links to ORCID, Google Scholar, GitHub, and more +- A blog - share updates, write about your work, post short pieces between papers + +--- + + + +--- + +## 5. Manuscripts + +Quarto has a dedicated **manuscripts format** for scholarly articles. + +Write your paper in Quarto and output it as a website, a PDF, or a Word document - all from the same source file. + +. . . + +::: {.callout-note} +This won't be relevant to everyone. But for research involving data analysis, embedding code means your figures and results are always generated directly from the analysis — nothing can go out of sync. +::: + +--- + + + +--- + +## 6. Conferences and events + +If you are hosting an event (e.g., a workshop, symposium, summer school, or conference), Quarto works well here too. + +. . . + +- Publish the programme, abstracts, and speaker information **before** the event +- Add slides, recordings, and notes **afterwards** +- Multiple organisers can contribute via the repository +- Easy to update as the event approaches and after it ends + +--- + + + +--- + +## 7. Package documentation + +If you develop a software package in Python, R, or another language, Quarto is a great way to write its documentation. + +Installation instructions, usage guides, tutorials, and examples, all in one navigable site. + +--- + + + +--- + +## Next steps + +::: columns +::: {.column width="60%"} + +The rest of this tutorial will walk you through how to create a Quarto website from scratch — **we'll build one together**. + +[Go to tutorial →](/pages/setup/index.qmd) + +At the end, head to the [Examples](/pages/examples/index.qmd) page to see a much larger collection of real research websites built with Quarto, covering all of the categories above and more. + +::: + +::: {.column width="40%"} + +[![](/images/examples_page_screenshot.png)](/pages/examples/index.qmd) + +::: +::: diff --git a/styles/autopreview.html b/styles/autopreview.html deleted file mode 100644 index 9c0b9c5..0000000 --- a/styles/autopreview.html +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/styles/autopreview.js b/styles/autopreview.js deleted file mode 100644 index e77bd4c..0000000 --- a/styles/autopreview.js +++ /dev/null @@ -1,76 +0,0 @@ -(function () { - function wrapIframePreview(iframe) { - if (!iframe || iframe.dataset.previewWrapped === "true") return; - - const src = iframe.getAttribute("src"); - if (!src) return; - - const title = - iframe.getAttribute("title") || "Embedded website preview"; - - // Outer wrapper - const wrapper = document.createElement("div"); - wrapper.className = "iframe-preview-wrapper"; - - // Header - const header = document.createElement("div"); - header.className = "iframe-header"; - - const label = document.createElement("span"); - label.textContent = "Website preview:"; - - const link = document.createElement("a"); - link.href = src; - link.target = "_blank"; - link.rel = "noopener noreferrer"; - link.textContent = "View full website in new tab"; - - header.append(label, link); - - // Insert wrapper before iframe, then move iframe inside - const parent = iframe.parentNode; - if (!parent) return; - - parent.insertBefore(wrapper, iframe); - wrapper.appendChild(header); - wrapper.appendChild(iframe); - - // Ensure iframe has styling class - iframe.classList.add("iframe-preview"); - iframe.dataset.previewWrapped = "true"; - } - - function scanAllIframes(root) { - const scope = root || document; - scope.querySelectorAll("iframe.auto-preview").forEach(wrapIframePreview); - } - - document.addEventListener("DOMContentLoaded", function () { - // Wrap any existing iframes - scanAllIframes(document); - - // Also handle iframes added later (e.g. by other scripts) - const observer = new MutationObserver(function (mutations) { - for (const mutation of mutations) { - mutation.addedNodes.forEach(function (node) { - if (!(node instanceof HTMLElement)) return; - - if (node.matches && node.matches("iframe.auto-preview")) { - wrapIframePreview(node); - } - - if (node.querySelectorAll) { - node - .querySelectorAll("iframe.auto-preview") - .forEach(wrapIframePreview); - } - }); - } - }); - - observer.observe(document.body, { - childList: true, - subtree: true, - }); - }); -})(); \ No newline at end of file diff --git a/styles/image-slideshow.html b/styles/image-slideshow.html new file mode 100644 index 0000000..134e21c --- /dev/null +++ b/styles/image-slideshow.html @@ -0,0 +1,322 @@ + + + + + +Image Slideshow + + + + + + + +

+ +
+ +
+ +
+ + +
+ Mountain peaks at golden hour +
+
+ Misty forest path +
+
+ Coastal cliffs +
+
+ Desert sand dunes at dusk +
+
+ Alpine lake reflection +
+ +
+ + +
+

+ +
+ + +
+ +
+
+ + + + diff --git a/styles/slideshow.js b/styles/slideshow.js new file mode 100644 index 0000000..2d38223 --- /dev/null +++ b/styles/slideshow.js @@ -0,0 +1,90 @@ + \ No newline at end of file diff --git a/styles/styles.css b/styles/styles.css index 4ed0175..6cb4a1d 100644 --- a/styles/styles.css +++ b/styles/styles.css @@ -21,31 +21,130 @@ h4 { box-shadow: 0 2px 8px rgba(25, 118, 210, 0.15); } -/* Iframe wrapper and header */ +/* ---------------------- Slideshow ----------------------- */ +/* Source: Perplexity */ -.iframe-preview { - display: block; +.slideshow { + position: relative; width: 100%; - border: 8px solid #5a302f; + border: 1px solid rgba(0,0,0,.12); + border-radius: 6px; + overflow: hidden; } -.iframe-header { - background-color: #5a302f; - color: #ffffff; - padding: 8px 12px; - font-weight: 600; +/* Main image area */ +.slideshow .slide-stage { + position: relative; + aspect-ratio: 16 / 9; + background: #f0f0f0; + overflow: hidden; +} + +.slideshow .slide { + position: absolute; + inset: 0; + opacity: 0; + transition: opacity 300ms ease; +} + +.slideshow .slide.active { + opacity: 1; +} + +.slideshow .slide img { + width: 1002px; + height: 520px; + object-fit: contain; + display: block; +} + +/* Left/right arrow buttons */ +.slideshow .arrow { + position: absolute; + top: 50%; + transform: translateY(-50%); + width: 40px; + height: 40px; + border-radius: 50%; + background: rgba(255,255,255,.85); + border: 1px solid rgba(0,0,0,.10); + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + backdrop-filter: blur(4px); + z-index: 2; + transition: background 150ms ease; +} + +.slideshow .arrow:hover { background: #fff; } +.slideshow .arrow-left { left: 10px; } +.slideshow .arrow-right { right: 10px; } + +/* Caption bar */ +.slideshow .caption-area { display: flex; justify-content: space-between; align-items: center; - font-size: 1rem; + gap: 1rem; + padding: .6rem 1rem; + border-top: 1px solid rgba(0,0,0,.10); + min-height: 2.8rem; +} + +.slideshow .caption-text { + font-weight: bold; + color: #666; + transition: opacity 200ms ease; + margin: 0; /* reset any Quarto p margin */ + max-width: none; /* reset any Quarto prose width cap */ +} + +.slideshow .caption-text.fade { opacity: 0; } + +.slideshow .slide-counter { + font-size: .8rem; + color: #aaa; + white-space: nowrap; + font-variant-numeric: tabular-nums; +} + +/* Thumbnail strip */ +.slideshow .thumbnails { + display: flex; + gap: 6px; + padding: 8px 12px; + border-top: 1px solid rgba(0,0,0,.10); + overflow-x: auto; + scrollbar-width: thin; + list-style: none; /* in case Quarto injects list styles */ + margin: 0; + padding-left: 12px; +} + +.slideshow .thumb { + flex-shrink: 0; + width: 60px; + height: 38px; + border-radius: 4px; + overflow: hidden; + cursor: pointer; + opacity: .45; + border: 2px solid transparent; + transition: opacity 150ms ease, border-color 150ms ease; } -.iframe-header a { - color: #ffffff; - text-decoration: underline; +.slideshow .thumb:hover { opacity: .75; } +.slideshow .thumb.active { opacity: 1; border-color: #0d6efd; } + +.slideshow .thumb img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; } -.iframe-header a:hover, -.iframe-header a:focus { - text-decoration: none; -} \ No newline at end of file +@media (prefers-reduced-motion: reduce) { + .slideshow .slide, + .slideshow .caption-text { transition: none; } +}