Introduce some fragments

This commit is contained in:
Knoch 2020-02-07 22:07:55 +01:00
parent bdb05d9ecc
commit a93a8566f9
6 changed files with 44 additions and 14 deletions

View File

@ -104,7 +104,7 @@ body {
right: calc(var(--margin) * var(--square)); right: calc(var(--margin) * var(--square));
width: calc(.3 * var(--square)); width: calc(.3 * var(--square));
height: calc(.3 * var(--square)); height: calc(.3 * var(--square));
background-image: url(../../images/logo-fachschaft.png); background-image: url(../images/logo-fachschaft.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; } background-size: contain; }
body .layout-preview { body .layout-preview {
@ -574,4 +574,15 @@ pre.scroll-one-half {
max-height: calc(.5 * var(--square)); max-height: calc(.5 * var(--square));
overflow: auto !important; } overflow: auto !important; }
/*
* Fragments
* =========
*/
.fragment {
opacity: 0;
transition: .3s opacity ease-in-out; }
.fragment.visible {
opacity: 1; }
/*# sourceMappingURL=latex.css.map */ /*# sourceMappingURL=latex.css.map */

File diff suppressed because one or more lines are too long

View File

@ -154,7 +154,7 @@ body {
right: calc(var(--margin) * var(--square)); right: calc(var(--margin) * var(--square));
width: calc(.3 * var(--square)); width: calc(.3 * var(--square));
height: calc(.3 * var(--square)); height: calc(.3 * var(--square));
background-image: url(../../images/logo-fachschaft.png); background-image: url(../images/logo-fachschaft.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: contain; background-size: contain;
} }
@ -724,3 +724,17 @@ pre.scroll-one-half {
max-height: calc(.5 * var(--square)); max-height: calc(.5 * var(--square));
overflow: auto !important; overflow: auto !important;
} }
/*
* Fragments
* =========
*/
.fragment {
opacity: 0;
transition: .3s opacity ease-in-out;
}
.fragment.visible {
opacity: 1;
}

View File

@ -1,13 +1,13 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="@language"> <html lang="@language">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<title>@title</title> <title>@title</title>
<!-- TODO: Convert stylesheets --> <!-- TODO: Convert stylesheets -->
<link rel="stylesheet" href="css/latex.css"> <link rel="stylesheet" href="css/latex.css"/>
<!-- <link rel="stylesheet" href="lib/css/zenburn.css">--> <!-- <link rel="stylesheet" href="lib/css/zenburn.css">-->
</head> </head>
<body> <body>

@ -1 +1 @@
Subproject commit f6959e532ad422107105f4510adba4bca3e88fb0 Subproject commit 89f02dc72d83d6b6874d3bb5b646384b54211a42

View File

@ -7,10 +7,10 @@
@slide(layout=two-previews) @slide(layout=two-previews)
@left-preview @left-preview
![Klassisches Word-Dokument](svg/chapter-01/example-word-orig.svg) ![;in Klassisches Word-Dokument](svg/chapter-01/example-word-orig.svg)
@right-preview @right-preview
![Klassisches LaTeX-Dokument](svg/chapter-01/example-latex-orig.svg) ![;in Klassisches LaTeX-Dokument](svg/chapter-01/example-latex-orig.svg)
@slide(layout=content-and-preview) @slide(layout=content-and-preview)
@ -21,8 +21,8 @@
* Leslie **Lamport**, ab 1980er: Softwarepaket **LaTeX** zur einfacheren Benutzung von TeX * Leslie **Lamport**, ab 1980er: Softwarepaket **LaTeX** zur einfacheren Benutzung von TeX
<div style="display: flex; justify-content: space-between; align-items: stretch;"> <div style="display: flex; justify-content: space-between; align-items: stretch;">
<figure><img src="svg/chapter-01/knuth.jpg" style="height: 13em"><figcaption>Donald Knuth</figcaption></figure> <figure><img src="svg/chapter-01/knuth.jpg" style="height: 13em"/><figcaption>Donald Knuth</figcaption></figure>
<figure><img src="svg/chapter-01/lamport.jpg" style="height: 13em"><figcaption>Leslie Lamport</figcaption></figure> <figure><img src="svg/chapter-01/lamport.jpg" style="height: 13em"/><figcaption>Leslie Lamport</figcaption></figure>
</div> </div>
@preview @preview
@ -49,7 +49,12 @@
* Gleichmäßiger Grauwert * Gleichmäßiger Grauwert
* … * …
<figure style="display: flex; justify-content: space-between; width: 100%; align-items: flex-end;"><img src="svg/chapter-01/satzspiegel.svg" style="height: 8em"><figcaption style="margin-left: 1em; font-size: .8em">Satzspiegel-Konstruktion nach Villard (<a class="dark-font" href="https://commons.wikimedia.org/wiki/File:Satzspiegel-4.svg">Quelle</a>)</figcaption></figure> <figure style="display: flex; justify-content: space-between; width: 100%; align-items: flex-end;">
<img src="svg/chapter-01/satzspiegel.svg" style="height: 8em;"/>
<figcaption style="margin-left: 1em; font-size: .8em">
Satzspiegel-Konstruktion nach Villard (<a class="dark-font" href="https://commons.wikimedia.org/wiki/File:Satzspiegel-4.svg">Quelle</a>)
</figcaption>
</figure>
@preview @preview
![](svg/chapter-01/vergleich-makro.svg) ![](svg/chapter-01/vergleich-makro.svg)
@ -67,9 +72,9 @@
* … * …
<div style="display: flex; justify-content: space-between; align-items: flex-end;"> <div style="display: flex; justify-content: space-between; align-items: flex-end;">
<figure><img src="svg/chapter-01/schriftschnitte-crop.svg" style="height: 1.7em;"><figcaption style="font-size: .8em;">Schriftschnitte:<br>gerade,&nbsp;schräg,&nbsp;kursiv</figcaption></figure> <figure><img src="svg/chapter-01/schriftschnitte-crop.svg" style="height: 1.7em;"/><figcaption style="font-size: .8em;">Schriftschnitte:<br/>gerade,&nbsp;schräg,&nbsp;kursiv</figcaption></figure>
<figure><img src="svg/chapter-01/schriftgrade.svg" style="height: 2.2em;"><figcaption style="font-size: .8em">Schriftgrade:<br>klein,&nbsp;klein&nbsp;vergrößert,&nbsp;groß</figcaption></figure> <figure><img src="svg/chapter-01/schriftgrade.svg" style="height: 2.2em;"/><figcaption style="font-size: .8em">Schriftgrade:<br/>klein,&nbsp;klein&nbsp;vergrößert,&nbsp;groß</figcaption></figure>
</div> </div>
@preview @preview