Demo

Quarto und Revealjs

Eine kurze Einführung

Hanz Hanzen

Fachbereich Gesundheitsweisen
MHC M3 Spezialwissen 2022
11.10.2021 | MHC

Quarto und RevealJS

Dies ist eine Vorlage für Folien im HSNR-Design, die mittels quarto und revealjs gerendert werden.

Allgemeine Informationen finden Sie unter

1+2+3+4
[1] 10

HSNR-Vorlage

Alle notwendigen Dateien befinden sich im Unterordner HSNRtheme.

Neben den notwendigen Bilddateien liegen hier:

  • apa-single-spaced.csl - die APA-Zitationsvorlage
  • HSNR.scss - die SCSS-Datei mit allen Farb- und Stylingangaben.
  • 0 1 2 3 4 5 6 7 8 9 10 1000 100000

Im Ordner images liegen die Bilddateien der eigentlichen Präsentation. Dieser Ordner gehört nicht zur Vorlage, sondern ändert sich von Präsentation zu Präsentation.

Zwischentitel

Die Vorlage bietet zwei “Zwischentitel” an,

  • {.zwischentitel1}, im dunklen HSNR-Blauton
  • {.zwischentitel2}, im hellen HSNR-Blauton

Test

Dies ist ein Zwischentitel
im dunklen HSNR-Blauton

Dies ist ein Zwischentitel
im hellen HSNR-Blauton

Klasse {.r-fit-text}

Zusammen mit den Klassen {.r-fit-text} und {.center} sieht es dann so aus (nächste Folie)…

Dies ist ein
Zwischentitel

Farben

Das Theme stellt die die Blautöne der HSNR über die Klassen {.HSNRblue1} und {.HSNRblue2} zur Verfügung.

  • Dies ist HSNRblue1
  • Dies ist HSNRblue2

Dies funktioniert auch als Hintergrundfarbe, wenn ein bg- vor den Klassennamen geschrieben wird.

  • Dies ist .bg-HSNRblue1
  • Dies ist .bg-HSNRblue2

weitere Farben

Folgende weitere Farben sind im Theme enthalten:

.gray .silver .light-silver .moon-gray .light-gray .near-white .white .dark-red .red .light-red .orange .gold .yellow .light-yellow .light-purple .dark-pink .hot-pink .pink .light-pink .dark-green .green .light-green .light-blue .lightest-blue .washed-blue .washed-green .washed-yellow .washed-red .black .near-black .dark-gray .mid-gray .dark-red .red .purple .light-purple .dark-pink .dark-green .navy .dark-blue .blue

Tango-Farben:

.Tbluedark .Tblue .Tbluelight .Tbrown .Tbrowndark .Tbrownlight .Tgray .Tgraydark .Tgraylight .Tgraylight2 .Tgraylight3 .Tgreen .Tgreendark .Tgreenlight .Tred .Treddark .Tredlight .Tlilac .Tlilacdark .Tlilaclight .Tyellow .Tyellowdark .Tyellowlight .Torange .Torangedark .Torangelight

Die Farben stehen auch als Hintergrundfarben zur Verfügung. Hierfür schreiben Sie einfach ein bg- vor den Farbnamen, also z.B. {.bg-hot-pink}

Shadow-Text

Das Theme enthält folgende Schattierungsklassen:

  • .shadow-hsnr1
  • .shadow-hsnr2
  • .shadow-black
  • .shadow-silver
  • .shadow-grau

Shadow-Box

Die Klasse {.shadow-box} erzeugt eine schattige Kiste

Ich habe ’nen Schatten

Boxen

Die Klasse {.instructions} erzeugt eine umrandete Kiste


Ich bin eine Box

mit eigenem Source-Code-Style

Boxen

Weitere Boxen werden über die Klasse {.blankbox} erzeugt.


Ich bin eine Blankbox

Ich bin eine Blankbox mit .bg-HSNRblue2

Ich bin eine Blankbox mit .bg-light-blue und .white

Floating Shadow Images


Über die Klassen {.float-left}, {.float-right} und {.shadow-img} können Bilder nach links oder rechts floaten, und sie erhalten einen schattierten Rahmen.

Zentrieren

Mittels der Klasse {.tc} können Inhalte zentriert werden

Ich bin ein zentrierter Text!

Größen (Text)

Mittels der Klasse {.size0} bis {.size150} kann die Größe der Schrift beeinflusst werden:

Dieser Text ist .size20

Dieser Text ist .size30

Dieser Text ist .size40

Dieser Text ist .size50

Größen (Bilder)

Mittels der Klasse {.figw10} bis {.figw1000} kann die Größe von Bildern beeinflusst werden:

Prof. Dr. Theo Rethisch | Fachbereich 10 | Hochschule Niederrhein