From 22927bfd3857b78bb010a276c9df4ab2f83b6eb2 Mon Sep 17 00:00:00 2001 From: Joshua Seigler Date: Mon, 10 Oct 2016 14:02:13 -0400 Subject: [PATCH] feat: better example slides --- Janus-demo.html | 319 ++++++++++++++++++++++++++++++++++++++++++++++++ index.html | 44 +++++-- scripts/app.js | 4 + styles/main.css | 32 +++-- 4 files changed, 382 insertions(+), 17 deletions(-) create mode 100644 Janus-demo.html diff --git a/Janus-demo.html b/Janus-demo.html new file mode 100644 index 0000000..244773d --- /dev/null +++ b/Janus-demo.html @@ -0,0 +1,319 @@ + + + + + Janus Presentation Framework + + + +
+
+

Presentation Title

+
    +
  • Point one
    • +
  • Point two
    • +
  • Point three!
    • +
+
+
+ +

Slide Two

+
+
+

Slide Three

+
+
+ + + + diff --git a/index.html b/index.html index 5e59874..e675e00 100644 --- a/index.html +++ b/index.html @@ -7,20 +7,44 @@
-
-

Presentation Title

-
    -
  • Point one
    • -
  • Point two
    • -
  • Point three!
    • -
+
+

Janus Presentations

+

Hotkey powered, multi-window presentations

+
Press Page Down to continue.
-
+
+

Hotkeys

+
+ Clone Window: F2 +
+
+ Navigation: Page Down, Page Up +
+
+ Toggle Presenter Mode: F1 +
+
+
-

Slide Two

+

Self-scaling cover images with object-fit

+
+
+

Simple default markup

+
+ Any section tag or item with attribute janus-timeline is added to the timeline and revealed in sequence. +
+
+
+

Animations controlled by CSS

+
+ Framework sets custom attribute janus-timeline to past, present, or future +
+
+
+

Cross-window synchronization with JavaScript localStorage events.

-

Slide Three

+

The end.

diff --git a/scripts/app.js b/scripts/app.js index a40dbe0..8e07faf 100644 --- a/scripts/app.js +++ b/scripts/app.js @@ -35,6 +35,7 @@ } var sessionListener = function(e) { + console.log(e); if (e.url === window.location.href) { if (e.key === 'janus-currentSlideNumber') { setCurrentSlide(+e.newValue); @@ -48,6 +49,9 @@ shortcut.add('F1', function() { document.body.classList.toggle('show-notes'); }); + shortcut.add('F2', function() { + window.open(window.location.href, '_blank'); + }); shortcut.add('Page_down', function() { setCurrentSlide(currentSlideNumber + 1); }); diff --git a/styles/main.css b/styles/main.css index c902662..fafbbb3 100644 --- a/styles/main.css +++ b/styles/main.css @@ -17,6 +17,21 @@ li { list-style: none; } +code { + font-family: Consolas, monaco, monospace; + border: 2px dashed currentcolor; +} + +h1 { + font-size: 1.5rem; +} +h2 { + font-size: 1rem; +} +h1, h2 { + font-weight: bold; +} + /* Layout */ body { display: flex; @@ -61,18 +76,21 @@ section { transition: transform ease-out 0.5s, opacity ease-out 0.5s, visibility step-start 0.5s; } -@media only screen { - [janus-timeline='future'] { - opacity: 0.5; - } -} - @media not print { [janus-timeline='future'] { visibility: hidden; } } +body.show-notes section [janus-timeline='future'] { + visibility: visible; + opacity: 0.25; +} + +body.show-notes section[janus-timeline='future'] [janus-timeline='future'] { + opacity: 1; +} + section[janus-timeline='past'] { transform: translate3d(0, 0, 0) scale(5); opacity: 0; @@ -116,6 +134,6 @@ body.show-notes section[janus-timeline='present'] + section[janus-timeline='futu right: 0.4rem; opacity: 0.75; visibility: visible; - outline: 0.1rem solid white; + outline: 0.2rem solid white; z-index: 3; }