Deploying to gh-pages from @ be5f784 🚀

puzzle · Jan 4, 2024 · ad8b280 · ad8b280
1 parent 36feace
commit ad8b280
Show file tree

Hide file tree

Showing 41 changed files with 1,788 additions and 577 deletions.
diff --git a/2.1.0/puzzle.css b/2.1.0/puzzle.css
diff --git a/2.1/puzzle.css b/2.1/puzzle.css
diff --git a/2/puzzle.css b/2/puzzle.css
diff --git a/demo/_assets/theme/puzzle.css b/demo/_assets/theme/puzzle.css
diff --git a/demo/demo.html b/demo/demo.html
@@ -15,20 +15,15 @@
   </head>
   <body>
     <div class="reveal">
-      <div class="slides">
-        <section data-markdown data-separator="\r?\n---\r?\n" data-separator-vertical="\r?\n----\r?\n">
-          <textarea data-template>
-
+      <div class="slides"><section ><section data-markdown><script type="text/template">
 <!-- .slide: class="l-cover" -->
 
 # Präsentation
 # *Puzzle ITC*
 ## RevealJS Theme
 
 John Doe
-[email protected]
-----
-```md
+john@mail.com</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-cover" -->
 
 # Präsentation
@@ -38,18 +33,14 @@
 John Doe
 [email protected]
 ```
-
----
-<!-- .slide: class="l-agenda" -->
+</script></section></section><section ><section data-markdown><script type="text/template"><!-- .slide: class="l-agenda" -->
 
 # Agenda
 
 - Masteransicht	
 - Icons
 - Content mit/ohne Bullet Points
-- Bilder
-----
-```md
+- Bilder</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-agenda" -->
 
 # Agenda
@@ -58,33 +49,25 @@
 - Icons
 - Content mit/ohne Bullet Points
 - Bilder
-```
----
-<!-- .slide: class="l-title02" -->
+```</script></section></section><section ><section data-markdown><script type="text/template"><!-- .slide: class="l-title02" -->
 
 ## Thema 1
 
 # You are the 
-# *Master!*
-----
-```md
+# *Master!*</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-title02" -->
 
 ## Thema 1
 
 # You are the 
 # *Master!*
 ```
-
----
-# Masteransicht
+</script></section></section><section ><section data-markdown><script type="text/template"># Masteransicht
 
 * Um das Corporate Design von Puzzle konsistent zu halten, verwenden wir für Präsentationen diese Folienvorlage.
 * Dieses Template stellt eine praktische Übersicht dar und hilft dir beim Erstellen deiner Präsentation.
 * Wenn du nach [unten](#unten) gehst, siehst du bei jeder Folie wie sie aufgebaut wurde.
-* Du kannst die Folien per «copy and paste» in deine Präsentation integrieren.
-----
-<!-- .slide: id="unten" -->
+* Du kannst die Folien per «copy and paste» in deine Präsentation integrieren.</script></section><section data-markdown><script type="text/template"><!-- .slide: id="unten" -->
 ```md
 # Masteransicht
 
@@ -97,25 +80,19 @@
 ```md
 <!-- .slide: id="unten" -->
 ```
-
----
-<!-- .slide: class="l-title" -->
+</script></section></section><section ><section data-markdown><script type="text/template"><!-- .slide: class="l-title" -->
 
 ## Subthema 1
 
 # *Icons* rather
-# than text
-----
-```md
+# than text</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-title" -->
 
 ## Thema 2
 
 # *Icons* rather
 # than text
-```
----
-<!-- .slide: class="l-icons l-icons--big" -->
+```</script></section></section><section ><section data-markdown><script type="text/template"><!-- .slide: class="l-icons l-icons--big" -->
 
 # Titel
 #### Icons findest du in unserer [Icon-Library](https://files.puzzle.ch/apps/files/?dir=/swe/P14_Kommunikation/08_Brand/_Design_Library/01_Icons/Icons_Library_Streamline/assets&fileid=5633521).
@@ -126,9 +103,7 @@
   - Lohn
 - ![ferien](_assets/imgs/icons/icon_ferien.svg)
   - Ferien
-
-----
-```md
+</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-icons l-icons--big" -->
 
 # Titel
@@ -140,9 +115,7 @@
   - Lohn
 - ![ferien](_assets/imgs/icons/icon_ferien.svg)
   - Ferien
-```
----
-<!-- .slide: class="l-icons l-icons--big" -->
+```</script></section></section><section ><section data-markdown><script type="text/template"><!-- .slide: class="l-icons l-icons--big" -->
 
 # Titel
 #### Untertitel
@@ -156,9 +129,7 @@
 - ![abos](_assets/imgs/icons/icon_abos.svg)
   - Abos
 - ![firmentreue](_assets/imgs/icons/icon_firmentreue.svg)
-  - Firmentreue
-----
-```md
+  - Firmentreue</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-icons l-icons--big" -->
 
 # Titel
@@ -174,9 +145,7 @@
   - Abos
 - ![firmentreue](_assets/imgs/icons/icon_firmentreue.svg)
   - Firmentreue
-```
----
-<!-- .slide: class="l-icons l-icons--list" -->
+```</script></section></section><section ><section data-markdown><script type="text/template"><!-- .slide: class="l-icons l-icons--list" -->
 
 # Titel
 - ![sozialleistungen](_assets/imgs/icons/icon_sozialleistungen.svg)
@@ -187,9 +156,7 @@
     Icons mit Text oder nur einigen Stichwörtern – du wählst, was für dich und deine Präsentation passt.
 - ![ferien](_assets/imgs/icons/icon_ferien.svg)
   - #### Zwischentitel
-    Auch hier gilt immer: Weniger ist mehr. Vielfach reicht ein Icon und ein Stichwort aus.
-----
-```md
+    Auch hier gilt immer: Weniger ist mehr. Vielfach reicht ein Icon und ein Stichwort aus.</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-icons l-icons--list" -->
 
 # Titel
@@ -202,43 +169,33 @@
 - ![ferien](_assets/imgs/icons/icon_ferien.svg)
   - ### Zwischentitel
     Auch hier gilt immer: Weniger ist mehr. Vielfach reicht ein Icon und ein Stichwort aus.
-```
----
-<!-- .slide: class="l-title02" -->
+```</script></section></section><section ><section data-markdown><script type="text/template"><!-- .slide: class="l-title02" -->
 
 ## Thema 3
 
 # rarely use
-# *Bullet Points*
-----
-```md
+# *Bullet Points*</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-title02" -->
 
 ## Thema 3
 
 # rarely use
 # *Bullet Points*
 ```
-
----
-## Aufbau einer leeren Slide
+</script></section></section><section  data-markdown><script type="text/template">## Aufbau einer leeren Slide
  - Diese Slide dient als Vorlage für eine Folie mit Bullet Points.
  - Für mich als Präsentator\*in praktisch, für den/die Zuhörer\*in eher unpraktisch
 
 ## Warum?
  - Weil der/die Zuhörer*in auf dich konzentriert ist.
  - Und während der Präsentation nur wenig Text wahrnehmen kann.
- - Deshalb denk daran: Bullet Points nur bedingt einsetzen.
----
-
+ - Deshalb denk daran: Bullet Points nur bedingt einsetzen.</script></section><section  data-markdown><script type="text/template">
 ## Und falls ich einen Text zeigen muss 
 Dann verwendest du eine solche Folie ohne Bullet Points. Auch hier gilt: Nur wenig einsetzen. Der/Die Zuhörer\*in kann Text während einer Präsentation nur geringfügig wahrnehmen und lesen. Wir wollen während einer Präsentation erzielen, dass sich der/die Zuhörer\*in auf das konzentriert, was du sagst.
 
 ### Setze Text in Präsentationsfolien mit Bedacht ein.
 
-
----
-
+</script></section><section  data-markdown><script type="text/template">
 ## Titel
 ### Untertitel
 Und falls du Text mit unterschiedlicher Hierarchie einsetzen willst, dann kannst du diese Folie verwenden.
@@ -247,89 +204,63 @@
 So ist die Folie gegliedert in Untertitel und Zwischentitel. Die Hierarchie hilft dem Zuhörer oder der Zuhörerin, die Themen einzuordnen.
  - Diese Hierarchie hilft dem Verständnis.
  - Das Gezeigte kann besser eingeordnet...
- - ...und das Gesagte besser verarbeitet werden.
----
-
+ - ...und das Gesagte besser verarbeitet werden.</script></section><section ><section data-markdown><script type="text/template">
 <!-- .slide: class="l-title02" -->
 
 ## Thema 4
 
 # show
-# *visuals*
-----
-```md
+# *visuals*</script></section><section data-markdown><script type="text/template">```md
 <!-- .slide: class="l-title02" -->
 
 ## Thema 4
 
 # show
 # *visuals*
-```
----
-<!-- .slide: class="l-title" -->
+```</script></section></section><section  data-markdown><script type="text/template"><!-- .slide: class="l-title" -->
 
 ## Bilder wenn möglich ohne Text zeigen
 
 # Ein Bild sagt mehr als
 # tausend *Worte*
-
----
-
+</script></section><section ><section data-markdown><script type="text/template">
 <!-- .slide: data-background-image="_assets/imgs/demo_image.png" -->
-
-----
-
+</script></section><section data-markdown><script type="text/template">
 ```md
 <!-- .slide: data-background-image="_assets/imgs/demo_image.png" -->
-```
----
-<!-- .slide: class="l-title" -->
+```</script></section></section><section  data-markdown><script type="text/template"><!-- .slide: class="l-title" -->
 
 ## Falls du doch Text verwenden willst
 
 # Bilder unterstreichen
 # deine *Worte*
-
----
-
+</script></section><section ><section data-markdown><script type="text/template">
 <!-- .slide: class="l-top-head" data-background-image="_assets/imgs/demo_image2.png" -->
 
 ### Hallo. Ich bin ein kleiner Blindtext
-
-----
-
+</script></section><section data-markdown><script type="text/template">
 ```md
 
 <!-- .slide: class="l-top-head" data-background-image="_assets/imgs/demo_image2.png" -->
 
 ### Hallo. Ich bin ein kleiner Blindtext
-```
----
+```</script></section></section><section ><section data-markdown><script type="text/template">## Bild & Titel
+![](_assets/imgs/demo_image3.png)</script></section><section data-markdown><script type="text/template">```md
 ## Bild & Titel
 ![](_assets/imgs/demo_image3.png)
-----
-```md
-## Bild & Titel
-![](_assets/imgs/demo_image3.png)
-```
----
-
+```</script></section></section><section ><section data-markdown><script type="text/template">
 ## Bild & Titel
 <div style="text-align: center">
   <img src="_assets/imgs/demo_image3.png" />
 </div>
-
-----
-
+</script></section><section data-markdown><script type="text/template">
 ```md
 ## Bild & Titel
 <div style="text-align: center">
   <img src="_assets/imgs/demo_image3.png" />
 </div>
 ```
-
----
-<!-- .slide: class="l-thanks" -->
+</script></section></section><section  data-markdown><script type="text/template"><!-- .slide: class="l-thanks" -->
 
 # Merci
 Mehr Informationen zu Puzzle:
@@ -342,10 +273,7 @@
 - ![](_assets/imgs/icons/icon_mastodon.png) @puzzle_itc
 - ![](_assets/imgs/icons/icon_instagram.svg) @puzzleitc
 - ![](_assets/imgs/icons/icon_github.svg) @puzzle
-
-          </textarea>
-        </section>
-      </div>
+</script></section></div>
     </div>
 
     <script src="./dist/reveal.js"></script>
@@ -389,7 +317,7 @@
       // options from URL query string
       var queryOptions = Reveal().getQueryHash() || {};
 
-      var options = extend(defaultOptions, {"transition":"slide","center":false,"markdown":{"breaks":true},"_":["demo.md"],"static":true,"theme":"theme/puzzle.css"}, queryOptions);
+      var options = extend(defaultOptions, {"transition":"slide","center":false,"markdown":{"breaks":true}}, queryOptions);
     </script>
 
 

diff --git a/demo/dist/reveal.css b/demo/dist/reveal.css
diff --git a/demo/dist/reveal.esm.js b/demo/dist/reveal.esm.js
diff --git a/demo/dist/reveal.esm.js.map b/demo/dist/reveal.esm.js.map
diff --git a/demo/dist/reveal.js b/demo/dist/reveal.js
diff --git a/demo/dist/reveal.js.map b/demo/dist/reveal.js.map
diff --git a/demo/dist/theme/beige.css b/demo/dist/theme/beige.css
@@ -37,18 +37,16 @@ section.has-dark-background, section.has-dark-background h1, section.has-dark-ba
   --r-link-color-hover: #c0a86e;
   --r-selection-background-color: rgba(79, 64, 28, 0.99);
   --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 0, 0, 0;
-  --r-overlay-element-fg-color: 240, 240, 240;
 }
 
 .reveal-viewport {
-  background: rgb(247, 242, 211);
-  background: -moz-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgb(255, 255, 255)), color-stop(100%, rgb(247, 242, 211)));
-  background: -webkit-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: -o-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: -ms-radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
-  background: radial-gradient(center, circle cover, rgb(255, 255, 255) 0%, rgb(247, 242, 211) 100%);
+  background: #f7f2d3;
+  background: -moz-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, white), color-stop(100%, #f7f2d3));
+  background: -webkit-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -o-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: -ms-radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
+  background: radial-gradient(center, circle cover, white 0%, #f7f2d3 100%);
   background-color: var(--r-background-color);
 }
 

diff --git a/demo/dist/theme/black-contrast.css b/demo/dist/theme/black-contrast.css
@@ -39,8 +39,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: #bee4fd;
   --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {

diff --git a/demo/dist/theme/black.css b/demo/dist/theme/black.css
@@ -36,8 +36,6 @@ section.has-light-background, section.has-light-background h1, section.has-light
   --r-link-color-hover: #8dcffc;
   --r-selection-background-color: rgba(66, 175, 250, 0.75);
   --r-selection-color: #fff;
-  --r-overlay-element-bg-color: 240, 240, 240;
-  --r-overlay-element-fg-color: 0, 0, 0;
 }
 
 .reveal-viewport {