escience_theme 0.1.0 → 0.2.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +65 -11
- package/escience.css +214 -0
- package/{escience_5.1.0.esm.js → escience.js} +52 -758
- package/package.json +23 -4
- package/flake.lock +0 -61
- package/flake.nix +0 -16
- package/index.js +0 -2
package/README.md
CHANGED
|
@@ -2,23 +2,77 @@
|
|
|
2
2
|
|
|
3
3
|
This plugin applies the [eScience Center](https://www.esciencecenter.nl/) Theme to reveal.js.
|
|
4
4
|
|
|
5
|
+
The package has two parts:
|
|
6
|
+
|
|
7
|
+
- `escience_theme`: the reveal.js plugin. It adds the decorations (logo,
|
|
8
|
+
overlays, flags, panes) and switches them per slide based on `data-state`.
|
|
9
|
+
- `escience_theme/escience.css`: the styles. The plugin does not inject CSS
|
|
10
|
+
itself, so this stylesheet has to be loaded alongside it.
|
|
11
|
+
|
|
5
12
|
## Setup
|
|
6
13
|
|
|
7
|
-
|
|
14
|
+
Works with reveal.js 5 and 6 (peer dependency). Load reveal.js's own black
|
|
15
|
+
theme and monokai highlight theme first, then the eScience styles.
|
|
16
|
+
|
|
17
|
+
reveal.js 6:
|
|
18
|
+
|
|
19
|
+
```js
|
|
20
|
+
import Reveal from 'reveal.js';
|
|
21
|
+
import Highlight from 'reveal.js/plugin/highlight';
|
|
22
|
+
import Escience from 'escience_theme';
|
|
23
|
+
|
|
24
|
+
import 'reveal.js/reveal.css';
|
|
25
|
+
import 'reveal.js/theme/black.css';
|
|
26
|
+
import 'reveal.js/plugin/highlight/monokai.css';
|
|
27
|
+
import 'escience_theme/escience.css';
|
|
28
|
+
|
|
29
|
+
new Reveal({ plugins: [Highlight, Escience] }).initialize();
|
|
30
|
+
```
|
|
31
|
+
|
|
32
|
+
reveal.js 5 uses different paths for the same files:
|
|
33
|
+
|
|
34
|
+
```js
|
|
35
|
+
import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';
|
|
36
|
+
import 'reveal.js/dist/reveal.css';
|
|
37
|
+
import 'reveal.js/dist/theme/black.css';
|
|
38
|
+
import 'reveal.js/plugin/highlight/monokai.css';
|
|
39
|
+
```
|
|
40
|
+
|
|
41
|
+
The CSS imports assume a bundler (Vite, webpack). Without one, use
|
|
42
|
+
`<link rel="stylesheet">` tags in the same order.
|
|
43
|
+
|
|
44
|
+
## Slide states
|
|
8
45
|
|
|
9
|
-
|
|
10
|
-
<script type="module">
|
|
11
|
-
import Reveal from './dist/reveal.esm.js';
|
|
12
|
-
import Escience from './plugin/escience/escience_5.1.0.esm.js';
|
|
46
|
+
Set the look of a slide with `data-state`, e.g. in reveal.js markdown:
|
|
13
47
|
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
plugins: [ Escience ],
|
|
17
|
-
// ...
|
|
18
|
-
});
|
|
19
|
-
</script>
|
|
48
|
+
```markdown
|
|
49
|
+
<!-- .slide: data-state="standard" -->
|
|
20
50
|
```
|
|
21
51
|
|
|
52
|
+
Presets: `standard`, `title`, `two_pane`, `about`, `keepintouch`. Single
|
|
53
|
+
decorations (`white_overlay`, `blue_overlay`, `purple_overlay`,
|
|
54
|
+
`black_overlay`, `logo`, `yellow_flag`, …) can be combined freely.
|
|
55
|
+
|
|
56
|
+
A number from 0 to 10 sets the overlay opacity in tenths: `standard 6` lets a
|
|
57
|
+
background image show through, `standard 10` is opaque. Without a number the
|
|
58
|
+
overlay is opaque, unless the slide has a background image, video or iframe
|
|
59
|
+
(`data-background-image`, `-video`, `-iframe`); then it is 0.8, so the
|
|
60
|
+
background stays faintly visible.
|
|
61
|
+
|
|
62
|
+
## Development
|
|
63
|
+
|
|
64
|
+
```sh
|
|
65
|
+
npm install
|
|
66
|
+
npm test
|
|
67
|
+
```
|
|
68
|
+
|
|
69
|
+
`npm test` renders `test/fixture/deck.html` in Chromium (`CHROME` overrides
|
|
70
|
+
the executable), screenshots every slide and overview mode, and compares them
|
|
71
|
+
pixel by pixel with the theme at `BASELINE_REF` (default `1ef0fd0`, the last
|
|
72
|
+
single-file version). Screenshots and diffs land in `test/output/`. Set
|
|
73
|
+
`MAX_DIFF` to allow a number of differing pixels per screenshot, e.g. when a
|
|
74
|
+
change is intentional.
|
|
75
|
+
|
|
22
76
|
## License
|
|
23
77
|
|
|
24
78
|
Apache-2.0 licensed
|
package/escience.css
ADDED
|
@@ -0,0 +1,214 @@
|
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Assistant:wght@200..800&family=Fira+Code:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');
|
|
2
|
+
@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
|
|
3
|
+
/*********************************************
|
|
4
|
+
* COLORS
|
|
5
|
+
*********************************************/
|
|
6
|
+
|
|
7
|
+
:root {
|
|
8
|
+
--nlesc-blue: #009DDD;
|
|
9
|
+
--nlesc-purple: #380339;
|
|
10
|
+
--nlesc-yellow: #FFB213;
|
|
11
|
+
--light-gray: #D8D8D8;
|
|
12
|
+
--dark-gray: #2b2b2b;
|
|
13
|
+
--gray-transparent: rgba(128, 128, 128, .5);
|
|
14
|
+
|
|
15
|
+
--link-color: var(--nlesc-purple);
|
|
16
|
+
--link-color-hover: var(--nlesc-yellow);
|
|
17
|
+
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
/*********************************************
|
|
21
|
+
* GLOBAL STYLES
|
|
22
|
+
*
|
|
23
|
+
* Scoped to .reveal so that the page around an embedded deck (e.g. a
|
|
24
|
+
* NEBULA site) keeps its own typography. Everything the theme draws,
|
|
25
|
+
* decorations and speaker notes included, lives inside .reveal.
|
|
26
|
+
* :where() keeps the specificity of the bare element selectors, so
|
|
27
|
+
* rules like .hljs (code highlighting) still win where they did before.
|
|
28
|
+
*********************************************/
|
|
29
|
+
|
|
30
|
+
:where(.reveal), :where(.reveal) p, :where(.reveal) div, :where(.reveal) ul {
|
|
31
|
+
font-family: "Assistant", sans-serif !important;
|
|
32
|
+
font-optical-sizing: auto;
|
|
33
|
+
font-weight: 400 !important;
|
|
34
|
+
font-style: normal;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
:where(.reveal) h1, :where(.reveal) h2, :where(.reveal) h3 {
|
|
38
|
+
font-family: "Nunito" !important;
|
|
39
|
+
font-weight: 700 !important;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
:where(.reveal) h4, :where(.reveal) h5, :where(.reveal) h6 {
|
|
43
|
+
font-family: "Assistant", sans-serif !important;
|
|
44
|
+
font-optical-sizing: auto;
|
|
45
|
+
font-weight: 700 !important;
|
|
46
|
+
font-style: normal;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
:where(.reveal) code {
|
|
50
|
+
font-family: "Fira Code", monospace !important;
|
|
51
|
+
font-optical-sizing: auto !important;
|
|
52
|
+
font-weight: 500;
|
|
53
|
+
font-style: normal;
|
|
54
|
+
background-color: var(--gray-transparent);
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
.reveal h1,
|
|
58
|
+
.reveal h2,
|
|
59
|
+
.reveal h3,
|
|
60
|
+
.reveal h4,
|
|
61
|
+
.reveal h5,
|
|
62
|
+
.reveal h6 {
|
|
63
|
+
text-transform: none;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
.reveal {
|
|
67
|
+
font-size: 36px; } /* make stuff smaller */
|
|
68
|
+
|
|
69
|
+
:where(.reveal) ::selection {
|
|
70
|
+
color: #0f0;
|
|
71
|
+
background: var(--nlesc-purple);
|
|
72
|
+
text-shadow: none; }
|
|
73
|
+
|
|
74
|
+
:where(.reveal) ::-moz-selection {
|
|
75
|
+
color: #fff;
|
|
76
|
+
background: var(--nlesc-purple);
|
|
77
|
+
text-shadow: none; }
|
|
78
|
+
|
|
79
|
+
|
|
80
|
+
/*********************************************
|
|
81
|
+
* CUSTOM COLORS
|
|
82
|
+
*********************************************/
|
|
83
|
+
.primary { color: var(--nlesc-blue) !important; }
|
|
84
|
+
.secondary { color: var(--nlesc-purple) !important; }
|
|
85
|
+
.tertiary { color: var(--light-gray) !important; }
|
|
86
|
+
|
|
87
|
+
/*********************************************
|
|
88
|
+
* LINKS
|
|
89
|
+
*********************************************/
|
|
90
|
+
.reveal a {
|
|
91
|
+
color: var(--link-color); }
|
|
92
|
+
|
|
93
|
+
.reveal a:hover {
|
|
94
|
+
color: var(--link-color-hover); }
|
|
95
|
+
|
|
96
|
+
.reveal .roll span:after {
|
|
97
|
+
color: #fff;
|
|
98
|
+
background: var(--nlesc-blue); }
|
|
99
|
+
|
|
100
|
+
/*********************************************
|
|
101
|
+
* IMAGES
|
|
102
|
+
*********************************************/
|
|
103
|
+
.reveal section img { /* undo stupid img frames */
|
|
104
|
+
background: none;
|
|
105
|
+
border: none;
|
|
106
|
+
box-shadow: none;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.reveal a:hover img {
|
|
110
|
+
border-color: var(--nlesc-blue); }
|
|
111
|
+
|
|
112
|
+
/*********************************************
|
|
113
|
+
* HIGHLIGHT COLORS
|
|
114
|
+
*********************************************/
|
|
115
|
+
|
|
116
|
+
.reveal .slides section .fragment.highlight-blue.visible {
|
|
117
|
+
color: var(--nlesc-blue); }
|
|
118
|
+
|
|
119
|
+
/*********************************************
|
|
120
|
+
* NAVIGATION CONTROLS
|
|
121
|
+
*********************************************/
|
|
122
|
+
.reveal .controls {
|
|
123
|
+
color: var(--nlesc-yellow); }
|
|
124
|
+
|
|
125
|
+
/*********************************************
|
|
126
|
+
* PROGRESS BAR
|
|
127
|
+
*********************************************/
|
|
128
|
+
.reveal .progress {
|
|
129
|
+
background: rgba(0, 0, 0, 0.2);
|
|
130
|
+
color: var(--nlesc-yellow); }
|
|
131
|
+
|
|
132
|
+
.reveal .progress span {
|
|
133
|
+
background: var(--nlesc-yellow);
|
|
134
|
+
-webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
|
135
|
+
-moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
|
|
136
|
+
transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
|
|
137
|
+
|
|
138
|
+
/*********************************************
|
|
139
|
+
* FOOTER
|
|
140
|
+
*********************************************/
|
|
141
|
+
|
|
142
|
+
.slides .footer {
|
|
143
|
+
font-size: x-small !important;
|
|
144
|
+
width: 100%;
|
|
145
|
+
clear: both;
|
|
146
|
+
/* padding: 50px 0 0 0;*/
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
/*********************************************
|
|
150
|
+
* PRINT BACKGROUND
|
|
151
|
+
*********************************************/
|
|
152
|
+
@media print {
|
|
153
|
+
.backgrounds {
|
|
154
|
+
background-color: var(--dark-gray); } }
|
|
155
|
+
|
|
156
|
+
/*********************************************
|
|
157
|
+
* DIM BACKGROUND PICTURES
|
|
158
|
+
*********************************************/
|
|
159
|
+
.dim .backgrounds {
|
|
160
|
+
-webkit-filter: brightness(.4) !important;
|
|
161
|
+
-moz-filter: brightness(.4) !important;
|
|
162
|
+
-o-filter: brightness(.4) !important;
|
|
163
|
+
-ms-filter: brightness(.4) !important;
|
|
164
|
+
filter: brightness(.4) !important;
|
|
165
|
+
-webkit-transition: -webkit-filter 100ms linear;
|
|
166
|
+
transition: filter 100ms linear;
|
|
167
|
+
}
|
|
168
|
+
|
|
169
|
+
.dim_3 .backgrounds {
|
|
170
|
+
-webkit-filter: brightness(.3) !important;
|
|
171
|
+
-moz-filter: brightness(.3) !important;
|
|
172
|
+
-o-filter: brightness(.3) !important;
|
|
173
|
+
-ms-filter: brightness(.3) !important;
|
|
174
|
+
filter: brightness(.3) !important;
|
|
175
|
+
-webkit-transition: -webkit-filter 100ms linear;
|
|
176
|
+
transition: filter 100ms linear;
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
.dim_8 .backgrounds {
|
|
180
|
+
-webkit-filter: brightness(.8) !important;
|
|
181
|
+
-moz-filter: brightness(.8) !important;
|
|
182
|
+
-o-filter: brightness(.8) !important;
|
|
183
|
+
-ms-filter: brightness(.8) !important;
|
|
184
|
+
filter: brightness(.8) !important;
|
|
185
|
+
-webkit-transition: -webkit-filter 100ms linear;
|
|
186
|
+
transition: filter 100ms linear;
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
.backgrounds {
|
|
190
|
+
-webkit-filter: brightness(1) !important;
|
|
191
|
+
-moz-filter: brightness(1) !important;
|
|
192
|
+
-o-filter: brightness(1) !important;
|
|
193
|
+
-ms-filter: brightness(1) !important;
|
|
194
|
+
filter: brightness(1) !important;
|
|
195
|
+
-webkit-transition: -webkit-filter 1s linear;
|
|
196
|
+
transition: filter 1s linear;
|
|
197
|
+
}
|
|
198
|
+
|
|
199
|
+
/*********************************************
|
|
200
|
+
* ALLOW FOR DECORATIONS
|
|
201
|
+
*********************************************/
|
|
202
|
+
.slides {
|
|
203
|
+
/* puts the slide content above overlays and decorations*/
|
|
204
|
+
z-index: 10 !important;
|
|
205
|
+
}
|
|
206
|
+
|
|
207
|
+
.speaker-notes {
|
|
208
|
+
/* puts the slide content above overlays and decorations*/
|
|
209
|
+
z-index: 3 !important;
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
:where(.reveal) footer {
|
|
213
|
+
display: none !important;
|
|
214
|
+
}
|