milahu/alchi
1
0
Fork 0
Code Issues Pull requests Packages Projects Releases Wiki Activity

fix layout for narrow screens

Browse source
This commit is contained in:
Milan Hauth 2022-10-03 17:06:46 +02:00
parent ecceadcd55
commit b23a3b8d1f
1 changed files with 164 additions and 144 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

308
src/whoaremyfriends/wersindmeinefreunde.html
View file

@ -300,13 +300,44 @@
height: 0;
border: none;
}
.pre-line {
white-space:pre-line;
}
body {
font-family: sans-serif;
font-size: 10pt;
}
body.screen-layout {
text-align: center;
}
body.screen-layout article#content {
--print-margin: 15mm;
--narrow-screen-margin: 5%;
text-align: left;
/* DIN A5 */
/*
max-width: 148mm;
padding: 0 min(var(--print-margin), var(--narrow-screen-margin));
box-sizing: border-box;
outline: solid 1px grey;
*/
}
.narrow-scroll {
width: 100%;
overflow: auto;
}
/*
body.screen-layout article#content table {
width: 100%;
overflow: auto;
}
*/
h1 {
font-size: 250%;
font-weight:normal;
@ -529,14 +560,17 @@
transform-origin: top left;
}
table.two-properties th {
border-right: solid 1px black; /* FIXME pixel hinting */
/*border-right: solid 1px black; /* FIXME pixel hinting */
text-align: right;
vertical-align: top;
padding-right: 5px;
font-weight: normal;
}
table.two-properties th:after {
content: ":";
}
table.two-properties td {
border-left: solid 1px black; /* FIXME pixel hinting */
/*border-left: solid 1px black; /* FIXME pixel hinting */
vertical-align: top;
}
table.two-properties td {
@ -545,6 +579,7 @@
padding-left: 5px;
}
table.two-properties td+td {
border-left: solid 1px black;
text-align: left;
padding-left: 5px;
}
@ -684,13 +719,16 @@
printSetup: {
// https://bindery.info/docs/#printsetup
// setLayout(newVal) -> automatically set paper size from layout https://github.com/evnbr/bindery/issues/112
// DIN A5 = 1 page
layout: Bindery.Layout.BOOKLET, // default layout for print: PAGES SPREADS BOOKLET
paper: Bindery.Paper.A4_LANDSCAPE, // paper format: A5_PORTRAIT A4_LANDSCAPE
marks: Bindery.Marks.NONE, // NONE CROP BLEED BOTH
bleed: '-12pt', // workaround: bleed is biased by +12pt -> padding-top: calc(var(--bindery-bleed) + 12pt);
},
pageSetup: {
// DIN A5 = 1 page
size: { width: '148mm', height: '209mm' }, // A5. height -1mm to avoid pagebreak https://github.com/evnbr/bindery/issues/109
// print margins
margin: {
// --bindery-margin-top
// usually 10mm. 20mm for long binding. 30mm to make room for running-header (workaround)
@ -727,7 +765,7 @@
<body>
<body class="screen-layout">
<!-- dont indent body content. shallow xml -->
@ -755,7 +793,7 @@
<div class="vspace" style="height:2em"></div>
<img class="darkmode-invert" style="width:16em" src="../images/alchi.pallas-symbol.svg">
<img class="darkmode-invert" style="max-width:16em" src="../images/alchi.pallas-symbol.svg">
<div class="vspace" style="height:2em"></div>
@ -884,7 +922,7 @@
<div class="para">
4. Menschen sind unterschiedlich nach:<br>
<div class="hspace" style="width:1.1em"></div>Geschlecht, Alter, Persönlichkeitstyp.
<div class="hspace" style="max-width:1.1em"></div>Geschlecht, Alter, Persönlichkeitstyp.
</div>
<div class="para">
@ -990,7 +1028,7 @@
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:2em" src="../images/alchi.pallas-pattern.svg">
<img class="darkmode-invert" style="max-width:18em;margin:2em 0" src="../images/alchi.pallas-pattern.svg">
</div>
<div class="para">
@ -1326,7 +1364,7 @@
</h3>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:2em" src="../images/alchi.pallas-pattern.nocircles.64points.svg">
<img class="darkmode-invert" style="max-width:18em;margin:2em" src="../images/alchi.pallas-pattern.nocircles.64points.svg">
</div>
</section>
@ -1419,7 +1457,7 @@
<!-- TODO svg Pallas-Muster mit runden Linien -->
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:2em" src="../images/alchi.pallas-pattern.roundlines.svg">
<img class="darkmode-invert" style="max-width:18em;margin:2em" src="../images/alchi.pallas-pattern.roundlines.svg">
</div>
</section>
@ -1442,7 +1480,7 @@
<!-- FIXME svg text color is black with darkreader browser extension, should be white -->
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:2em" src="../images/alchi.pallas-pattern.doublelines.svg">
<img class="darkmode-invert" style="max-width:18em;margin:2em" src="../images/alchi.pallas-pattern.doublelines.svg">
</div>
</section>
@ -1533,7 +1571,7 @@
</div>
<div class="xcenter">
<img class="darkmode-invert" style="margin:2em; width:80%" src="../images/alchi.two-step-test.screening-and-test.positive-negative.true-false.svg">
<img class="darkmode-invert" style="margin:2em; max-width:28em" src="../images/alchi.two-step-test.screening-and-test.positive-negative.true-false.svg">
</div>
</section>
@ -1668,7 +1706,7 @@
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:9em;margin:2em" src="../images/alchi.pallas-pattern.pair-m1s-f3s.svg">
<img class="darkmode-invert" style="max-width:9em;margin:2em" src="../images/alchi.pallas-pattern.pair-m1s-f3s.svg">
</div>
</section>
@ -1707,7 +1745,7 @@
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:9em;margin:2em" src="../images/alchi.pallas-pattern.square-m1s-f3s-m4l-f2l.svg">
<img class="darkmode-invert" style="max-width:9em;margin:2em" src="../images/alchi.pallas-pattern.square-m1s-f3s-m4l-f2l.svg">
</div>
<div class="para">
@ -1779,7 +1817,7 @@
</div>
<div class="xcenter">
<img class="darkmode-invert" style="height:8em;margin-top:1em" src="../images/alchi.peer-exchange.partnertausch.svg">
<img class="darkmode-invert" style="max-width:20em;margin-top:1em" src="../images/alchi.peer-exchange.partnertausch.svg">
</div>
<div class="para">
@ -1922,7 +1960,7 @@
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:13.5em;margin:2em" src="../images/alchi.pallas-pattern.pallas-key-m1.svg">
<img class="darkmode-invert" style="max-width:13.5em;margin:2em" src="../images/alchi.pallas-pattern.pallas-key-m1.svg">
</div>
</section>
@ -1990,7 +2028,7 @@
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:2em" src="../images/alchi.pallas-pattern.two-squares.svg">
<img class="darkmode-invert" style="max-width:18em;margin:2em" src="../images/alchi.pallas-pattern.two-squares.svg">
</div>
<!-- TODO gemeinsame korelation von inneres alter und inneres geschlecht = gleiche diagonale im kreuz -->
@ -2193,7 +2231,8 @@ TODO style="break-before:page"?
-->
</div>
<table class="four-basetypes nowrap" style="margin-top:1em; margin-bottom:1em">
<div class="xcenter">
<table class="four-basetypes nowrap narrow-scroll" syle="margin-top:1em; margin-bottom:1em">
<tbody>
<!-- nutzlos
<tr>
@ -2613,6 +2652,7 @@ TODO style="break-before:page"?
</tbody>
</table>
</div>
<!--
<div class="para">
@ -2693,7 +2733,7 @@ TODO style="break-before:page"?
<!-- TODO move? or merge with section "körpertypen" -->
<div class="xcenter">
<img class="darkmode-invert" style="height:10em;margin-top:0.5em;" src="../images/alchi.four-body-shapes.svg">
<img class="darkmode-invert" style="max-width:17em;margin-top:0.5em;" src="../images/alchi.four-body-shapes.svg">
</div>
<div class="para">
@ -2759,7 +2799,8 @@ TODO style="break-before:page"?
Verhalten zeigt Typ durch <b>typische Stress-Reaktion</b>.
</div>
<table style="width:100%; margin-top:0.5em">
<div class="xcenter">
<table style="max-width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
@ -2804,6 +2845,7 @@ TODO style="break-before:page"?
</td>
</tr>
</table>
</div>
<div class="para">
Dieser Test funktioniert schon für Kleinkinder.
@ -2894,7 +2936,8 @@ TODO style="break-before:page"?
Diese Namen nutzten Psychologen vor 2000 Jahren in Griechenland (Antike, Klassik).
</div>
<table style="width:100%; margin-top:0.5em">
<div class="xcenter">
<table style="max-width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
@ -2939,6 +2982,7 @@ TODO style="break-before:page"?
</td>
</tr>
</table>
</div>
<div class="para">
... die Übersetzungen für Typen 234 sind einfach,
@ -3034,7 +3078,8 @@ TODO style="break-before:page"?
</div>
-->
<table style="width:100%; margin-top:0.5em">
<div class="xcenter">
<table style="max-width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
@ -3079,6 +3124,7 @@ TODO style="break-before:page"?
</td>
</tr>
</table>
</div>
<div class="para">
Warum Schwarz-Weiss?
@ -3098,9 +3144,8 @@ TODO style="break-before:page"?
für sensible Augen.
</div>
<table style="width:100%; margin-top:0.5em">
<div class="xcenter">
<table style="max-width:100%; margin-top:0.5em">
<tr>
<td>
<table style="margin:auto; border:solid 1px black">
@ -3145,6 +3190,7 @@ TODO style="break-before:page"?
</td>
</tr>
</table>
</div>
<div class="para">
Warum diese Farben?
@ -3439,7 +3485,7 @@ TODO style="break-before:page"?
relativ zu 100:
</div>
<table class="macro-ratios">
<table class="macro-ratios" style="max-width:30em">
<tr>
<td style="text-align:right; padding-top:0.5em; padding-right:0.5em">3.</td>
<td style="padding-top:0.5em; padding-right:0.5em">CFP =</td>
@ -3489,7 +3535,7 @@ TODO style="break-before:page"?
relativ zu 100:
</div>
<table class="macro-ratios">
<table class="macro-ratios" style="max-width:30em">
<tr>
<td style="text-align:right; padding-top:0.5em; padding-right:0.5em">3.</td>
<td style="padding-top:0.5em; padding-right:0.5em">CFP =</td>
@ -3749,47 +3795,6 @@ TODO style="break-before:page"?
<hr>
<section id="pallas-four-types-inner-gender-and-inner-age">
<h4>Inneres Geschlecht und Inneres Alter</h4>
<table title="Innere Eigenschaften" style="margin:auto; margin-top:0.5em; border:solid 1px black">
<tr>
<td>1. jung + männlich</td>
<td></td>
<td>3. jung + weiblich</td>
</tr>
<tr>
<td></td>
<td>Innere Eigenschaften</td>
<td></td>
</tr>
<tr>
<td>4. alt + männlich</td>
<td></td>
<td>2. alt + weiblich</td>
</tr>
</table>
<div class="para">
Andere Alchemisten sagen:
Typen 13 sind männlich,
Typen 24 sind weiblich.
</div>
<div class="para">
Alternative Übersetzung:
1234 = Mann Frau Kind Alter = er sie es es
</div>
</section>
<section id="pallas-four-types-no-type">
<h3>Kein Typ</h3>
@ -3866,95 +3871,97 @@ TODO style="break-before:page"?
<h3>Inneres Geschlecht</h3>
<div class="xcenter">
<table class="two-properties">
<tr>
<th>Typen</th>
<th scope="row">Typen</th>
<td>14</td>
<td>23</td>
</tr>
<tr>
<th>Gehirn</th>
<th scope="row">Gehirn</th>
<td>männliches Gehirn</td>
<td>weibliches Gehirn</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>tough-minded</td>
<td>tender-minded</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>sachlich</td>
<td>emotional</td>
</tr>
<tr>
<th>Bindungen</th>
<th scope="row">Bindungen</th>
<td>Einzelgänger</td>
<td>gesellig</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>braucht Einsamkeit</td>
<td>braucht Gesellschaft</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Freigeist</td>
<td>Mitläufer</td>
</tr>
<tr>
<th>Politik</th>
<th scope="row">Politik</th>
<td>Rechts</td>
<td>Links</td>
</tr>
<tr>
<th>Schlaf</th>
<th scope="row">Schlaf</th>
<td>leichter Schlaf</td>
<td>tiefer Schlaf</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>schwache Träume</td>
<td>lebhafte Träume</td>
</tr>
<tr>
<th>Bewegung</th>
<th scope="row">Bewegung</th>
<td>Feinmotorik</td>
<td>Grobmotorik</td>
</tr>
<tr>
<th>Talent</th>
<th scope="row">Talent</th>
<td>Hard Skills</td>
<td>Soft Skills</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Task Focus</td>
<td>People Focus</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>mit Autos spielen</td>
<td>mit Puppen spielen</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>kompetent</td>
<td>kommunikativ</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Denker</td>
<td>Redner</td>
</tr>
<!-- template
<tr>
<th></th>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
-->
</table>
</div>
</section>
<!-- end of <section id="inner-properties-inner-gender" -->
@ -3963,75 +3970,77 @@ TODO style="break-before:page"?
<h3>Inneres Alter</h3>
<div class="xcenter">
<table class="two-properties">
<tr>
<th>Typen</th>
<th scope="row">Typen</th>
<td>13</td>
<td>24</td>
</tr>
<tr>
<th>Gehirn</th>
<th scope="row">Gehirn</th>
<td>junges Gehirn</td>
<td>altes Gehirn</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Fühlen</td>
<td>Wissen</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Neugier</td>
<td>Erfahrung</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>ablenkbar</td>
<td>Starrsinn</td>
</tr>
<tr>
<th>Politik</th>
<th scope="row">Politik</th>
<td>Freiheit</td>
<td>Sicherheit</td>
</tr>
<tr>
<th>Arbeit</th>
<th scope="row">Arbeit</th>
<td>Forschung</td>
<td>Produktion</td>
</tr>
<tr>
<th>Strategie</th>
<th scope="row">Strategie</th>
<td>Änderung</td>
<td>Wiederholung</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Abwechslung</td>
<td>Routine</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Variation</td>
<td>Monotonie</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Open Minded</td>
<td>Narrow Minded</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Glückspiel</td>
<td>Geduldspiel</td>
</tr>
<!--
<tr>
<th></th>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
-->
</table>
</div>
</section>
<!-- end of <section id="inner-properties-inner-age" -->
@ -4048,65 +4057,67 @@ TODO style="break-before:page"?
Jeder Typ ist <b>Doppeltes Gegenteil</b> vom anderen Typ.
</div>
<div class="xcenter">
<table class="two-properties">
<tr>
<th>Typen</th>
<th scope="row">Typen</th>
<td>12</td>
<td>34</td>
</tr>
<tr>
<th>Korrelationen</th>
<th scope="row">Korrelationen</th>
<td>männlich = jung</td>
<td>weiblich = jung</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>weiblich = alt</td>
<td>männlich = alt</td>
</tr>
<tr>
<th>Kultur</th>
<th scope="row">Kultur</th>
<td>Primitivkultur</td>
<td>Hochkultur</td>
</tr>
<tr>
<th>Politik</th>
<th scope="row">Politik</th>
<td>Kapitalismus</td>
<td>Sozialismus</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Individualismus</td>
<td>Kollektivismus</td>
</tr>
<tr>
<th></th>
<th scope="row"></th>
<td>Egoisten</td>
<td>Altruisten</td>
</tr>
<tr>
<th>Sport</th>
<th scope="row">Sport</th>
<td>Einzelkämpfer</td>
<td>Teamsport</td>
</tr>
<tr>
<th>William Sheldon</th>
<th scope="row">William Sheldon</th>
<td>mesomorph</td>
<td>extramorph</td>
</tr>
<tr>
<th>Gewichtsklasse</th>
<th scope="row">Gewichtsklasse</th>
<td>Mittelgewicht</td>
<td>Extremgewicht</td>
</tr>
<!--
<tr>
<th></th>
<th scope="row"></th>
<td></td>
<td></td>
</tr>
-->
</table>
</div>
</section>
<!-- end of <section id="inner-properties-inner-diagonal" -->
@ -4233,17 +4244,11 @@ TODO style="break-before:page"?
<!-- TODO less height -->
<div class="xcenter">
<table class="four-basetypes" style="margin-top:1em;margin-bottom:1em">
<tbody>
<tr>
<th scope="row">
<div class="annotation" onClick="clickAnnotation(this)" title='
TODO fix table borders. css grid?
TODO layout: keep table on one page
'>Alchi</div>
</th>
<th scope="row">Typ</th>
<td>103</td>
<td>1</td>
<td>104</td>
@ -4305,11 +4310,13 @@ TODO style="break-before:page"?
</tr>
</tbody>
</table>
</div>
<div class="xcenter">
<table class="four-basetypes" style="margin-top:1em;margin-bottom:1em">
<tbody>
<tr>
<th scope="row">Alchi</th>
<th scope="row">Typ</th>
<td>203</td>
<td>2</td>
<td>204</td>
@ -4346,6 +4353,7 @@ TODO style="break-before:page"?
</tr>
</tbody>
</table>
</div>
@ -4353,10 +4361,11 @@ TODO style="break-before:page"?
<div class="xcenter">
<table class="four-basetypes" style="margin-top:1em;margin-bottom:1em">
<tbody>
<tr>
<th scope="row">Alchi</th>
<th scope="row">Typ</th>
<td>301</td>
<td>3</td>
<td>302</td>
@ -4393,11 +4402,13 @@ TODO style="break-before:page"?
</tr>
</tbody>
</table>
</div>
<div class="xcenter">
<table class="four-basetypes" style="margin-top:1em;margin-bottom:1em">
<tbody>
<tr>
<th scope="row">Alchi</th>
<th scope="row">Typ</th>
<td>401</td>
<td>4</td>
<td>402</td>
@ -4434,6 +4445,7 @@ TODO style="break-before:page"?
</tr>
</tbody>
</table>
</div>
<!-- no space on this page
@ -4519,7 +4531,7 @@ TODO move
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:2em" src="../images/alchi.pallas-pattern.line-of-four.f2-m1-f3-m4.svg">
<img class="darkmode-invert" style="max-width:18em;margin:2em" src="../images/alchi.pallas-pattern.line-of-four.f2-m1-f3-m4.svg">
</div>
<div class="para">
@ -4559,7 +4571,7 @@ TODO move
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:27em;margin:2em" src="../images/alchi.pallas-pattern.subtypes-with-arrows.m4-f2-m1-f3-m4-f2.svg">
<img class="darkmode-invert" style="max-width:27em;margin:2em" src="../images/alchi.pallas-pattern.subtypes-with-arrows.m4-f2-m1-f3-m4-f2.svg">
</div>
</section>
@ -5852,7 +5864,7 @@ TODO move
<h4>Typen 12</h4>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.five-value-scales.1-2.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.five-value-scales.1-2.svg">
</div>
<div class="para">
@ -5874,7 +5886,7 @@ TODO move
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.pallas-pattern.1-2.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.pallas-pattern.1-2.svg">
</div>
</section>
@ -5890,7 +5902,7 @@ TODO move
<h4>Typen 13</h4>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.five-value-scales.1-3.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.five-value-scales.1-3.svg">
</div>
<div class="para">
@ -5907,7 +5919,7 @@ TODO move
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.five-value-scales.1-3.todo-title.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.five-value-scales.1-3.todo-title.svg">
</div>
</section>
@ -5917,7 +5929,7 @@ TODO move
<h4>Typen 14</h4>
<div class="xcenter">
<svg class="foldme" title="five-value-scales 1 4" style="width:18em;margin:1em"
<svg class="foldme" title="five-value-scales 1 4" style="max-width:18em;margin:1em"
version="1.1" viewBox="0 200 800 400" xmlns="http://www.w3.org/2000/svg"
>
<style>
@ -6023,7 +6035,7 @@ TODO move
</div>
<div class="xcenter">
<svg class="foldme" title="five-value-scales 4 1" style="width:18em;margin:1em"
<svg class="foldme" title="five-value-scales 4 1" style="max-width:18em;margin:1em"
version="1.1" viewBox="0 200 800 400" xmlns="http://www.w3.org/2000/svg"
>
<style>
@ -6127,7 +6139,7 @@ TODO move
<h4>Typen 104 203</h4>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.five-value-scales.m104-f203.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.five-value-scales.m104-f203.svg">
</div>
<div class="para">
@ -6157,7 +6169,7 @@ TODO move
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.pallas-pattern.m3l-f1l-m2l-f4l.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.pallas-pattern.m3l-f1l-m2l-f4l.svg">
</div>
</section>
@ -6173,7 +6185,7 @@ TODO move
<h4>Typen 103 204</h4>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.five-value-scales.m103-m204.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.five-value-scales.m103-m204.svg">
</div>
<div class="para">
@ -6205,7 +6217,7 @@ TODO move
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.pallas-pattern.m4l-m1s-m2l-m3s.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.pallas-pattern.m4l-m1s-m2l-m3s.svg">
</div>
</section>
@ -6215,7 +6227,7 @@ TODO move
<h4>Typen 104 302</h4>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.five-value-scales.m104-f302.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.five-value-scales.m104-f302.svg">
</div>
<div class="para">
@ -6246,7 +6258,7 @@ TODO move
</div>
<div class="xcenter">
<img class="darkmode-invert" style="width:18em;margin:1em" src="../images/alchi.pallas-pattern.f2s-m1s-f3s-m4s.svg">
<img class="darkmode-invert" style="max-width:18em;margin:1em" src="../images/alchi.pallas-pattern.f2s-m1s-f3s-m4s.svg">
</div>
@ -6273,7 +6285,7 @@ TODO move
<h4>Typen 103 402</h4>
<div class="xcenter">
<svg class="foldme" title="five-value-scales 103 402" style="width:18em;margin:1em"
<svg class="foldme" title="five-value-scales 103 402" style="max-width:18em;margin:1em"
version="1.1" viewBox="0 200 800 400" xmlns="http://www.w3.org/2000/svg"
>
<style>
@ -6387,7 +6399,7 @@ TODO move
</div>
<div class="xcenter">
<svg class="foldme" title="Compatibility Chart: M103S M402L" style="width:18em;height:auto;margin:1em"
<svg class="foldme" title="Compatibility Chart: M103S M402L" style="max-width:18em;height:auto;margin:1em"
version="1.1" viewBox="0 400 800 200" xmlns="http://www.w3.org/2000/svg">
<style>svg { --fg: black; --bg: white; } /* light mode */
@media screen {
@ -6709,14 +6721,15 @@ TODO move
Lineare Operatoren kann man darstellen als Linien:
</div>
<table title="Lineare Operatoren als Linien" style="width:100%; text-align:center">
<div class="xcenter">
<table title="Lineare Operatoren als Linien" style="text-align:center">
<tbody>
<tr>
<td style="width:50%">
<img src="../images/alchi.math.addition-1-2-3.svg" class="darkmode-invert" style="width:60%">
<img src="../images/alchi.math.addition-1-2-3.svg" class="darkmode-invert" style="max-width:10em">
</td>
<td style="width:50%">
<img src="../images/alchi.math.subtraction-1-2--1.svg" class="darkmode-invert" style="width:60%">
<img src="../images/alchi.math.subtraction-1-2--1.svg" class="darkmode-invert" style="max-width:10em">
</td>
</tr>
<tr>
@ -6733,6 +6746,7 @@ TODO move
</tr>
</tbody>
</table>
</div>
@ -6743,14 +6757,15 @@ TODO move
Zirkulare Operatoren kann man darstellen als Zirkel:
</div>
<table title="Zirkulare Operatoren als Zirkel" style="width:100%; text-align:center">
<div class="xcenter">
<table title="Zirkulare Operatoren als Zirkel" style="text-align:center">
<tbody>
<tr>
<td style="width:50%">
<img src="../images/alchi.math.multiplication-2-3-6.svg" class="darkmode-invert" style="width:60%">
<img src="../images/alchi.math.multiplication-2-3-6.svg" class="darkmode-invert" style="max-width:10em">
</td>
<td style="width:50%">
<img src="../images/alchi.math,division-6-3-2.svg" class="darkmode-invert" style="width:60%">
<img src="../images/alchi.math,division-6-3-2.svg" class="darkmode-invert" style="max-width:10em">
</td>
</tr>
<tr>
@ -6767,6 +6782,7 @@ TODO move
</tr>
</tbody>
</table>
</div>
<div class="para">
Multiplikation und Division sind dreidimensional,
@ -7443,7 +7459,7 @@ TODO are <section> nested or flat?
</div>
<div class="xcenter">
<img class="darkmode-invert" src="../images/alchi.world-population-chart.bryan-long-2009.linear-graph.svg">
<img class="darkmode-invert" style="max-width:44em" src="../images/alchi.world-population-chart.bryan-long-2009.linear-graph.svg">
</div>
<div class="para">
@ -7455,7 +7471,7 @@ TODO are <section> nested or flat?
<div class="xcenter">
<!-- based on http://econosystemics.com/?p=9 -->
<img class="darkmode-invert" src="../images/alchi.world-population-chart.bryan-long-2009.logarithmic-graph.svg">
<img class="darkmode-invert" style="max-width:44em" src="../images/alchi.world-population-chart.bryan-long-2009.logarithmic-graph.svg">
</div>
<div class="para">
@ -8087,7 +8103,7 @@ TODO are <section> nested or flat?
<!-- TODO move -->
<section id="hope-dies-last">
<section id="why-do-i-write-so-weird">
<h4>Warum schreibe ich so komisch?</h4>
@ -10720,7 +10736,8 @@ but for deliverance from fear.
</div>
-->
<pre class="para" style="font-size:90%; margin-top:5em">
<div class="xcenter">
<pre class="para narrow-scroll" style="font-size:90%; margin-top:5em">
M4S F2S M1S F3S M4S F2S M1S F3S
x x x x
@ -10753,6 +10770,7 @@ M3L F1L M2L F4L M3L F1L M2L F4L
o o o o
</pre>
</div>
</section>
@ -10808,6 +10826,8 @@ function callMakeBinderyBook(_event) {
console.log('make-bindery-book', renderButton);
makeBinderyBook();
renderButton.innerHTML = 'Rendering book layout for printing. Please wait a few seconds ...';
document.body.classList.remove('screen-layout');
//document.body.classList.add('print-layout'); // not used
renderButton.onclick = null;
// TODO is this doing what i mean?
renderButton.enabled = false;