Skip to content

Commit fec6f59

Browse files
amyheatheramyheather
committed
feat(customising): add theme slideshow
1 parent 57f90f6 commit fec6f59

31 files changed

Lines changed: 680 additions & 12 deletions

‎_quarto.yml‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -53,4 +53,6 @@ format:
5353
- cosmo
5454
- styles/theme.scss
5555
css:
56-
- styles/styles.css
56+
- styles/styles.css
57+
include-after-body:
58+
- styles/slideshow.js

‎pages/customising/cerulean.png‎

105 KB
Loading

‎pages/customising/cosmo.png‎

105 KB
Loading

‎pages/customising/cyborg.png‎

104 KB
Loading

‎pages/customising/darkly.png‎

102 KB
Loading

‎pages/customising/default.png‎

105 KB
Loading

‎pages/customising/flatly.png‎

108 KB
Loading

‎pages/customising/index.qmd‎

Lines changed: 137 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -2,23 +2,149 @@
22
title: "Exercise 6. Customising the site appearance"
33
---
44

5-
themes
6-
css
7-
colours
8-
titles
9-
headings
10-
interacting with quarto.yml
11-
and css
12-
screen width
5+
::: {.pale-blue}
6+
7+
**On this page we will:**
8+
9+
* Tweak the look and feel of your Quarto site.
10+
* Connect settings in `_quarto.yml` with CSS styles.
11+
* Experiment with colours, headings, and page width.
12+
13+
:::
14+
15+
## Themes
16+
17+
Quarto websites use a **theme** to control the general look (fonts, colours, spacing). You can view a list of available themes at <https://quarto.org/docs/output-formats/html-themes.html>.
18+
19+
You can also browse through them below:
20+
21+
```{=html}
22+
<div class="slideshow" role="region" aria-label="Image slideshow">
23+
<!-- Main image stage -->
24+
<div class="slide-stage">
25+
26+
<div class="slide active" data-caption="Theme: default">
27+
<img src="default.png" alt="default" loading="eager">
28+
</div>
29+
<div class="slide" data-caption="Theme: cerulean">
30+
<img src="cerulean.png" alt="cerulean" loading="lazy">
31+
</div>
32+
<div class="slide" data-caption="Theme: cosmo">
33+
<img src="cosmo.png" alt="cosmo" loading="lazy">
34+
</div>
35+
<div class="slide" data-caption="Theme: cyborg">
36+
<img src="cyborg.png" alt="cyborg" loading="lazy">
37+
</div>
38+
<div class="slide" data-caption="Theme: darkly">
39+
<img src="darkly.png" alt="darkly" loading="lazy">
40+
</div>
41+
<div class="slide" data-caption="Theme: flatly">
42+
<img src="flatly.png" alt="flatly" loading="lazy">
43+
</div>
44+
<div class="slide" data-caption="Theme: journal">
45+
<img src="journal.png" alt="journal" loading="lazy">
46+
</div>
47+
<div class="slide" data-caption="Theme: litera">
48+
<img src="litera.png" alt="litera" loading="lazy">
49+
</div>
50+
<div class="slide" data-caption="Theme: lumen">
51+
<img src="lumen.png" alt="lumen" loading="lazy">
52+
</div>
53+
<div class="slide" data-caption="Theme: lux">
54+
<img src="lux.png" alt="lux" loading="lazy">
55+
</div>
56+
<div class="slide" data-caption="Theme: materia">
57+
<img src="materia.png" alt="materia" loading="lazy">
58+
</div>
59+
<div class="slide" data-caption="Theme: minty">
60+
<img src="minty.png" alt="minty" loading="lazy">
61+
</div>
62+
<div class="slide" data-caption="Theme: morph">
63+
<img src="morph.png" alt="morph" loading="lazy">
64+
</div>
65+
<div class="slide" data-caption="Theme: pulse">
66+
<img src="pulse.png" alt="pulse" loading="lazy">
67+
</div>
68+
<div class="slide" data-caption="Theme: quartz">
69+
<img src="quartz.png" alt="quartz" loading="lazy">
70+
</div>
71+
<div class="slide" data-caption="Theme: sandstone">
72+
<img src="sandstone.png" alt="sandstone" loading="lazy">
73+
</div>
74+
<div class="slide" data-caption="Theme: simplex">
75+
<img src="simplex.png" alt="simplex" loading="lazy">
76+
</div>
77+
<div class="slide" data-caption="Theme: sketchy">
78+
<img src="sketchy.png" alt="sketchy" loading="lazy">
79+
</div>
80+
<div class="slide" data-caption="Theme: slate">
81+
<img src="slate.png" alt="slate" loading="lazy">
82+
</div>
83+
<div class="slide" data-caption="Theme: solar">
84+
<img src="solar.png" alt="solar" loading="lazy">
85+
</div>
86+
<div class="slide" data-caption="Theme: spacelab">
87+
<img src="spacelab.png" alt="spacelab" loading="lazy">
88+
</div>
89+
<div class="slide" data-caption="Theme: superhero">
90+
<img src="superhero.png" alt="superhero" loading="lazy">
91+
</div>
92+
<div class="slide" data-caption="Theme: united">
93+
<img src="united.png" alt="united" loading="lazy">
94+
</div>
95+
<div class="slide" data-caption="Theme: vapor">
96+
<img src="vapor.png" alt="vapor" loading="lazy">
97+
</div>
98+
<div class="slide" data-caption="Theme: yeti">
99+
<img src="yeti.png" alt="yeti" loading="lazy">
100+
</div>
101+
<div class="slide" data-caption="Theme: zephyr">
102+
<img src="zephyr.png" alt="zephyr" loading="lazy">
103+
</div>
104+
105+
</div>
106+
107+
<!-- Caption + counter -->
108+
<div class="caption-area">
109+
<p class="caption-text" id="caption" aria-live="polite"></p>
110+
<span class="slide-counter" id="counter" aria-live="polite"></span>
111+
</div>
112+
113+
<!-- Thumbnail strip -->
114+
<div class="thumbnails" role="list" aria-label="Slide thumbnails">
115+
<!-- Thumbnails are generated by JS -->
116+
</div>
117+
</div>
118+
```
119+
120+
::: {.pale-blue}
121+
122+
**Task**:
123+
124+
* [ ] Change your site's theme.
125+
126+
:::
127+
128+
## CSS
129+
130+
## Colours and headings
131+
132+
## Page width
133+
134+
## Styled spans
135+
136+
Sometimes you want to highlight just a few words inside a sentence.
13137

14-
## Styled span
138+
You can use inline HTML with a `style` attribute:
15139

140+
```markdown
16141
Highlight <span style="background: yellow;">this bit</span>.
142+
```
17143

18144
::: {.pale-blue}
19145

20-
**Task:** In `html.qmd`:
146+
**Task:**
21147

22-
* [ ]
148+
* [ ] Add one sentence that uses a `<span>` with a custom inline style (for example, a highlighted phrase).
23149

24150
:::

‎pages/customising/journal.png‎

103 KB
Loading

‎pages/customising/litera.png‎

118 KB
Loading

0 commit comments

Comments
 (0)