-
Notifications
You must be signed in to change notification settings - Fork 6
/
colour-test.qmd
108 lines (73 loc) · 3.5 KB
/
colour-test.qmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
---
format:
revealjs:
theme: [default, style.scss]
highlight-style: breezedark
---
## {.center}
### Colour tests {.text-wash-seafoam .r-fit-text}
### James Goldie {.text-wash-white}
##### 360info.org {.text-wash-white style="opacity:0.6"}
## Text wash styles {.text-wash-white}
:::: {.columns}
::: {.column width="50%"}
#### .text-wash-red {.text-wash-red}
#### .text-wash-orange {.text-wash-orange}
#### .text-wash-yellow {.text-wash-yellow}
#### .text-wash-seafoam {.text-wash-seafoam}
#### .text-wash-emerald {.text-wash-emerald}
#### .text-wash-lightblue {.text-wash-lightblue}
#### .text-wash-darkblue {.text-wash-darkblue}
:::
::: {.column width="50%"}
#### .text-wash-indigo {.text-wash-indigo}
#### .text-wash-purple {.text-wash-purple}
#### .text-wash-pink {.text-wash-pink}
#### .text-wash-brown {.text-wash-brown}
#### .text-wash-white {.text-wash-white}
#### .text-wash-black {.text-wash-black}
:::
::::
## {.center}
:::: {.columns}
::: {.column width="40%"}
### CODE {.r-fit-text .text-wash-yellow style="font-weight:900;"}
### is really quite {.r-fit-text .text-wash-orange}
### FUN {.r-fit-text .text-wash-red style="font-weight:900;"}
### Look at all this! {.r-fit-text .text-wash-indigo}
:::
::: {.column width="10%"}
:::
<!-- a bit of top margin here to account for the centering -->
::: {.column width="50%" style="margin-top:30px"}
```r
library(tidyverse)
x <- letters[1:3]
# especially when we do this!
paste(x, 1:3, sep = "/")
```
:::
::::
## iframe + gradient background { background-iframe="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d22650206.599839553!2d133.70003202574492!3d-27.12278300162101!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e1!3m2!1sen!2sau!4v1652574469720!5m2!1sen!2sau" background-opacity="25%" background="linear-gradient(to right, #999900cc, #999900aa 45%, #17b2c388)" .background-iframe-interactive}
Holy moly! You can apply a gradient background over an iframe! It can even be interactive if you add `.background-iframe-interactive` 🥳
Can you do it with an image?
## image + gradient background { .text-wash-black background-image="https://images.unsplash.com/photo-1652439578449-ea69ceb8e89d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=963&q=80" background-opacity="25%" background="linear-gradient(to right, #999900cc, #999900aa 45%, #17b2c388)"}
Yep! That's it! Specify:
* Either `background-iframe` or `background-image`
* A `background-opacity` less than 100%, which will apply to the above
* Use `background` to specify a gradient or `background-color` to specify a colour. These will go underneath.
## Gradient: { background-image="https://images.unsplash.com/photo-1652439578449-ea69ceb8e89d?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=963&q=80" background-opacity="50%" background="linear-gradient(to right, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8) 55%, rgba(0, 0, 0, 0) 55%)" background-color="white"}
:::: {.columns}
::: {.column width="50%"}
### sidebar effect
You can use `linear-gradient` backgrounds to make a "sidebar" effect, which is especially nice if you have columns specified too.
Just be mindful of your default `background-color`!
:::
::: {.column width="15%"}
:::
::: {.column width="35%"}
Note that:
* It also might not scale wqell to different aspect ratios. I prefer the faded gradient overlay tbh.
* Revealjs sets your text colour as light or dark based on the background _colour_. If your sidebar is mucking with that, like here, it might choose incorrectly.
:::
::::