escience_theme 0.0.4 → 0.2.0

package/README.md

@@ -2,23 +2,77 @@
 
 This plugin applies the [eScience Center](https://www.esciencecenter.nl/) Theme to reveal.js.
 
+The package has two parts:
+
+- `escience_theme`: the reveal.js plugin. It adds the decorations (logo,
+  overlays, flags, panes) and switches them per slide based on `data-state`.
+- `escience_theme/escience.css`: the styles. The plugin does not inject CSS
+  itself, so this stylesheet has to be loaded alongside it.
+
 ## Setup
 
-You can use the plugin as an ES module:
+Works with reveal.js 5 and 6 (peer dependency). Load reveal.js's own black
+theme and monokai highlight theme first, then the eScience styles.
+
+reveal.js 6:
+
+```js
+import Reveal from 'reveal.js';
+import Highlight from 'reveal.js/plugin/highlight';
+import Escience from 'escience_theme';
+
+import 'reveal.js/reveal.css';
+import 'reveal.js/theme/black.css';
+import 'reveal.js/plugin/highlight/monokai.css';
+import 'escience_theme/escience.css';
+
+new Reveal({ plugins: [Highlight, Escience] }).initialize();
+```
+
+reveal.js 5 uses different paths for the same files:
+
+```js
+import Highlight from 'reveal.js/plugin/highlight/highlight.esm.js';
+import 'reveal.js/dist/reveal.css';
+import 'reveal.js/dist/theme/black.css';
+import 'reveal.js/plugin/highlight/monokai.css';
+```
+
+The CSS imports assume a bundler (Vite, webpack). Without one, use
+`<link rel="stylesheet">` tags in the same order.
+
+## Slide states
 
-```html
-<script type="module">
-  import Reveal from './dist/reveal.esm.js';
-  import Escience from './plugin/escience/escience_5.1.0.esm.js';
+Set the look of a slide with `data-state`, e.g. in reveal.js markdown:
 
-  Reveal.initialize({
-    // ...
-    plugins: [ Escience ],
-    // ...
-  });
-</script>
+```markdown
+<!-- .slide: data-state="standard" -->
 ```
 
+Presets: `standard`, `title`, `two_pane`, `about`, `keepintouch`. Single
+decorations (`white_overlay`, `blue_overlay`, `purple_overlay`,
+`black_overlay`, `logo`, `yellow_flag`, …) can be combined freely.
+
+A number from 0 to 10 sets the overlay opacity in tenths: `standard 6` lets a
+background image show through, `standard 10` is opaque. Without a number the
+overlay is opaque, unless the slide has a background image, video or iframe
+(`data-background-image`, `-video`, `-iframe`); then it is 0.8, so the
+background stays faintly visible.
+
+## Development
+
+```sh
+npm install
+npm test
+```
+
+`npm test` renders `test/fixture/deck.html` in Chromium (`CHROME` overrides
+the executable), screenshots every slide and overview mode, and compares them
+pixel by pixel with the theme at `BASELINE_REF` (default `1ef0fd0`, the last
+single-file version). Screenshots and diffs land in `test/output/`. Set
+`MAX_DIFF` to allow a number of differing pixels per screenshot, e.g. when a
+change is intentional.
+
 ## License
 
 Apache-2.0 licensed

package/escience.css

@@ -0,0 +1,214 @@
+@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');
+@import url('https://fonts.googleapis.com/icon?family=Material+Icons');
+/*********************************************
+ * COLORS
+ *********************************************/
+
+:root {
+  --nlesc-blue: #009DDD;
+  --nlesc-purple: #380339;
+  --nlesc-yellow: #FFB213;
+  --light-gray: #D8D8D8;
+  --dark-gray: #2b2b2b;
+  --gray-transparent: rgba(128, 128, 128, .5);
+
+  --link-color: var(--nlesc-purple);
+  --link-color-hover: var(--nlesc-yellow);
+
+}
+
+/*********************************************
+ * GLOBAL STYLES
+ *
+ * Scoped to .reveal so that the page around an embedded deck (e.g. a
+ * NEBULA site) keeps its own typography. Everything the theme draws,
+ * decorations and speaker notes included, lives inside .reveal.
+ * :where() keeps the specificity of the bare element selectors, so
+ * rules like .hljs (code highlighting) still win where they did before.
+ *********************************************/
+
+:where(.reveal), :where(.reveal) p, :where(.reveal) div, :where(.reveal) ul {
+  font-family: "Assistant", sans-serif !important;
+  font-optical-sizing: auto;
+  font-weight: 400 !important;
+  font-style: normal;
+}
+
+:where(.reveal) h1, :where(.reveal) h2, :where(.reveal) h3 {
+  font-family: "Nunito" !important;
+  font-weight: 700 !important;
+}
+
+:where(.reveal) h4, :where(.reveal) h5, :where(.reveal) h6 {
+  font-family: "Assistant", sans-serif !important;
+  font-optical-sizing: auto;
+  font-weight: 700 !important;
+  font-style: normal;
+}
+
+:where(.reveal) code {
+  font-family: "Fira Code", monospace !important;
+  font-optical-sizing: auto !important;
+  font-weight: 500;
+  font-style: normal;
+  background-color: var(--gray-transparent);
+}
+
+.reveal h1,
+.reveal h2,
+.reveal h3,
+.reveal h4,
+.reveal h5,
+.reveal h6 {
+  text-transform: none;
+}
+
+.reveal {
+  font-size: 36px; }  /* make stuff smaller */
+
+:where(.reveal) ::selection {
+  color: #0f0;
+  background: var(--nlesc-purple);
+  text-shadow: none; }
+
+:where(.reveal) ::-moz-selection {
+  color: #fff;
+  background: var(--nlesc-purple);
+  text-shadow: none; }
+
+
+/*********************************************
+ * CUSTOM COLORS
+ *********************************************/
+.primary { color: var(--nlesc-blue) !important; }
+.secondary { color: var(--nlesc-purple) !important; }
+.tertiary { color: var(--light-gray) !important; }
+
+/*********************************************
+ * LINKS
+ *********************************************/
+.reveal a {
+  color: var(--link-color); }
+
+.reveal a:hover {
+  color: var(--link-color-hover); }
+
+.reveal .roll span:after {
+  color: #fff;
+  background: var(--nlesc-blue); }
+
+/*********************************************
+ * IMAGES
+ *********************************************/
+.reveal section img { /* undo stupid img frames */
+  background: none;
+  border: none;
+  box-shadow: none;
+}
+
+.reveal a:hover img {
+  border-color: var(--nlesc-blue); }
+
+/*********************************************
+ * HIGHLIGHT COLORS
+ *********************************************/
+
+.reveal .slides section .fragment.highlight-blue.visible {
+  color: var(--nlesc-blue); }
+
+/*********************************************
+ * NAVIGATION CONTROLS
+ *********************************************/
+.reveal .controls {
+  color: var(--nlesc-yellow); }
+
+/*********************************************
+ * PROGRESS BAR
+ *********************************************/
+.reveal .progress {
+  background: rgba(0, 0, 0, 0.2);
+  color: var(--nlesc-yellow); }
+
+.reveal .progress span {
+  background: var(--nlesc-yellow);
+  -webkit-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  -moz-transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
+  transition: width 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985); }
+
+/*********************************************
+ * FOOTER
+ *********************************************/
+
+.slides .footer {
+  font-size: x-small !important;
+  width: 100%;
+  clear: both;
+/*  padding: 50px 0 0 0;*/
+}
+
+/*********************************************
+ * PRINT BACKGROUND
+ *********************************************/
+@media print {
+  .backgrounds {
+    background-color: var(--dark-gray); } }
+
+/*********************************************
+ * DIM BACKGROUND PICTURES
+ *********************************************/
+.dim .backgrounds {
+	-webkit-filter: brightness(.4) !important;
+	-moz-filter: brightness(.4) !important;
+	-o-filter: brightness(.4) !important;
+	-ms-filter: brightness(.4) !important;
+	filter: brightness(.4) !important;
+  -webkit-transition: -webkit-filter 100ms linear;
+  transition: filter 100ms linear;
+}
+
+.dim_3 .backgrounds {
+	-webkit-filter: brightness(.3) !important;
+	-moz-filter: brightness(.3) !important;
+	-o-filter: brightness(.3) !important;
+	-ms-filter: brightness(.3) !important;
+	filter: brightness(.3) !important;
+  -webkit-transition: -webkit-filter 100ms linear;
+  transition: filter 100ms linear;
+}
+
+.dim_8 .backgrounds {
+	-webkit-filter: brightness(.8) !important;
+	-moz-filter: brightness(.8) !important;
+	-o-filter: brightness(.8) !important;
+	-ms-filter: brightness(.8) !important;
+	filter: brightness(.8) !important;
+  -webkit-transition: -webkit-filter 100ms linear;
+  transition: filter 100ms linear;
+}
+
+.backgrounds {
+	-webkit-filter: brightness(1) !important;
+	-moz-filter: brightness(1) !important;
+	-o-filter: brightness(1) !important;
+	-ms-filter: brightness(1) !important;
+	filter: brightness(1) !important;
+  -webkit-transition: -webkit-filter 1s linear;
+  transition: filter 1s linear;
+}
+
+/*********************************************
+ * ALLOW FOR DECORATIONS
+ *********************************************/
+.slides {
+	/* puts the slide content above overlays and decorations*/
+	z-index: 10 !important;
+}
+
+.speaker-notes {
+	/* puts the slide content above overlays and decorations*/
+	z-index: 3 !important;
+}
+
+:where(.reveal) footer {
+	display: none !important;
+}