mirror of https://codeberg.org/Sonoj/osamc.de
743 lines
20 KiB
HTML
743 lines
20 KiB
HTML
|
|
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<link rel="icon" href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAADElEQVQI12P4//8/AAX+Av7czFnnAAAAAElFTkSuQmCC">
|
|
<meta name="robots" content="noindex,nofollow">
|
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
|
<title>Software zum Klavierüben</title>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
</head>
|
|
|
|
<body>
|
|
|
|
<h1>Software zum Klavierüben</h1>
|
|
|
|
<nav> <small> <div id="toc"></div> </small></nav>
|
|
|
|
<hr/>
|
|
|
|
<div id="contents">
|
|
|
|
<p>Dies sind die Ergebnisse eines Vergleiches von sogenannten "Pianotrainern", d.h. Computerprogramme,
|
|
die dabei helfen sollen Klavierstücke zu erlernen und zu spielen, teilweise ohne Vorkentnisse.</p>
|
|
<ul>
|
|
<li>Alle aufgelisteten Programme sind Free and Open Source.</li>
|
|
<li>Fast alle sind Cross-Platform</li>
|
|
<li>Bis auf "Pianobooster" ist kein Programm übersetzbar.</li>
|
|
<li>Alle Programme funktionieren auf MIDI Basis und benutzen .mid Dateien als Klavierstücke.</li>
|
|
<li>Fast alle Programme sind "Klavier von oben"-Tabs.</li>
|
|
</ul>
|
|
<p>Die beiden besten Programme, hauptsächlich durch Ausschlußverfahren, sind "Sightread" und "Pianobooster",
|
|
die genauer vorgestellt werden. Am Ende des Dokumentes findet sich eine Liste mit weiteren Programm und einem
|
|
kurzen Kommentar zur Bewertung.</p>
|
|
<h1>Pianobooster</h1>
|
|
<p>Zusammenfassung: Ein hässliches Programm, in das aber pädagogischer Aufwand gesteckt wurde.</p>
|
|
<ul>
|
|
<li><a href="https://www.pianobooster.org/">https://www.pianobooster.org/</a></li>
|
|
<li>Hat pädagogisch aufbereitetes Material</li>
|
|
<li>Hände getrennt übbar.</li>
|
|
<li>Mit einstellbarer Begleitmusik als akustisches Metronom. Begleitmusik ist musikalisch oft "amateurhaft" (falsche Harmonien etc.)</li>
|
|
<li>Benutzt akustisches Feedback ob man falsch ist.</li>
|
|
<li>Verschiedene Niveau-Stufen von "Anhören" über "Nur Rhythmus klopfen", "Nur weiterspielen wenn ich spiele" bis hin zu "dazu spielen"</li>
|
|
<li>Hat einen Genauigkeitsbalken, wie gut man spielt, für das eine Stück.</li>
|
|
<li>Aber insgesamt keine Möglichkeit zu erkennen, ob man sich über längere Zeit verbessert hat. Weder richtige Analyse (wie ein Klavierlehrer) noch Gamification-Stats.</li>
|
|
<li>"Nur" Notenansicht, kein "Klavier von Oben"</li>
|
|
<li>Unterstüzt MIDI-Keyboards mit leuchtenden Tasten</li>
|
|
<li>Keine Fingersätze</li>
|
|
<li>Keine Dynamik</li>
|
|
<li>Umfangreiche Einstellungsmöglichkeiten wie Tempo, Transposition, Farben etc.</li>
|
|
<li>Alte hässliche GUI. Wirkt sehr "90er Jahr Hobbyprogramm".
|
|
<ul>
|
|
<li>Braucht schon inoffiziellen Qt5-Fork.</li>
|
|
</ul></li>
|
|
<li>Paketmanagervariante hat keine Musik und keine Übersetzunge dabei</li>
|
|
<li>AppImage-Variante hat aber Musik und Übersetzungen.</li>
|
|
<li>Interner Fluidsynth mit Pulse/Alsa oder ALSA Midi. JACK als default-off compile option.</li>
|
|
</ul>
|
|
<h1>Sightread</h1>
|
|
<p>Zusammenfassung: Solide Web-Application, die genau so viele Features hat, dass man es schnell
|
|
benutzen kann.</p>
|
|
<ul>
|
|
<li><a href="https://sightread.dev/">https://sightread.dev/</a></li>
|
|
<li><a href="https://github.com/sightread/sightread">https://github.com/sightread/sightread</a></li>
|
|
<li>Web Browser, NPM basiert. Ging aber unkompliziert zu installieren. Oder die öffentliche Version nehmen.</li>
|
|
<li>Gute öffentliche Webseite, wo man komfortable auswählen kann was man spielen möchte, mit Vorschau.</li>
|
|
<li>Eingebaute Klänge.</li>
|
|
<li>Web-Midi-Latenz ist ausreichend gering.</li>
|
|
<li>Umfangreiche Einstellungsmöglichkeiten wie Tempo, Transposition, Farben etc.</li>
|
|
<li>Keine Statistiken, wie viel man richtig spielt.</li>
|
|
<li>Generell keine Möglichkeit zu erkennen, ob man sich verbessert hat. Weder richtige Analyse (wie ein Klavierlehrer) noch Gamification-Stats.
|
|
<ul>
|
|
<li>Ist auf der Roadmap.</li>
|
|
</ul></li>
|
|
<li>Notenraster nicht in der Vorschau angezeigt, Vorrausschauen fast unmöglich.</li>
|
|
<li>Kann zwischen "Klavier von Oben" und Noten umschalten. Noten sind aber nur MIDI, daher Rechtschreibfehler.</li>
|
|
<li>Keine Fingersätze</li>
|
|
<li>Keine Dynamik</li>
|
|
</ul>
|
|
<h1>Weitere Software</h1>
|
|
<h2>Trainer</h2>
|
|
<p>Hier Programme, die entweder nicht so gut sind wie die beiden vorgstellten, oder tatsächlich technisch
|
|
defekt sind. Evtl. handelt es sich um aufgegebene Projekte.</p>
|
|
<ul>
|
|
<li>"Linthesia" by Alberto Fanjul
|
|
<ul>
|
|
<li><a href="https://linthesia.sourceforge.net/">https://linthesia.sourceforge.net/</a></li>
|
|
<li><a href="https://github.com/linthesia/linthesia">https://github.com/linthesia/linthesia</a></li>
|
|
<li>Eingebaute Bibliothek von Stücken</li>
|
|
<li>Internes ALSA Midi, umständlicher Connection-Dialog und MIDI Latenzprobleme.</li>
|
|
<li>Falsch skalierende, aber freundliche GUI.</li>
|
|
<li>Fork von "Synthesia", das mitlerweise proprietär ist. Synthesia ist aber auch nicht viel besser.</li>
|
|
<li>Gibt es nicht als Paket (AUR ist das falsche), aber Meson vom Git war einfach genug.</li>
|
|
</ul></li>
|
|
<li>"Piano from Above"
|
|
<ul>
|
|
<li><a href="https://github.com/brian-pantano/PianoFromAbove">https://github.com/brian-pantano/PianoFromAbove</a></li>
|
|
<li>FOSS, aber nur Windows</li>
|
|
</ul></li>
|
|
<li>"Symphonium"
|
|
<ul>
|
|
<li>Eingebaute Musik ist viel zu schwierig, selbst wenn man Klavier spielen kann. Zum reinkommen in das Programm braucht es was anderes.</li>
|
|
<li>JACK Client kaputt</li>
|
|
<li>Wirkt unfertig, sehr geringer Funktionsumfang, alles voller Qt Standardzeug.</li>
|
|
<li><a href="https://symphonium.net/">https://symphonium.net/</a></li>
|
|
<li><a href="https://github.com/ttdm/Symphonium">https://github.com/ttdm/Symphonium</a></li>
|
|
</ul></li>
|
|
<li>Musicope
|
|
<ul>
|
|
<li><a href="https://github.com/oldrich-s/musicope">https://github.com/oldrich-s/musicope</a></li>
|
|
<li>Keine eigenen Stücke eingebaut.</li>
|
|
<li>Node.js mit bugs im Code, lief erstmal nicht.</li>
|
|
</ul></li>
|
|
</ul>
|
|
<h2>Keine Trainer</h2>
|
|
<p>Hier Programme, die nicht dazu gedacht sind Klavierstücke zu erlernen.
|
|
Sie tauchen aber evtl. in Listen und Suchergebnissen zu unserem Thema auf.</p>
|
|
<ul>
|
|
<li>"Piano Trainer" von ZaneH
|
|
<ul>
|
|
<li>Für Tonleitern, Akkorde, Intervalle etc.</li>
|
|
<li><a href="https://zaneh.itch.io/piano-trainer">https://zaneh.itch.io/piano-trainer</a></li>
|
|
<li><a href="https://github.com/ZaneH/piano-trainer">https://github.com/ZaneH/piano-trainer</a></li>
|
|
</ul></li>
|
|
<li>"Solfege" von GNU
|
|
<ul>
|
|
<li>Gehörbildung</li>
|
|
<li><a href="https://www.gnu.org/software/solfege/">https://www.gnu.org/software/solfege/</a></li>
|
|
</ul></li>
|
|
<li>"Minuet" von KDE
|
|
<ul>
|
|
<li>Gehörbildung und Grundübungen wie Tonleitern</li>
|
|
<li><a href="https://minuet.kde.org/">https://minuet.kde.org/</a></li>
|
|
</ul></li>
|
|
<li>"Jalmus" von Chrid Richard
|
|
<ul>
|
|
<li>Abstrakte Blattspielübungen, aber keine Stücke.</li>
|
|
<li>Abandonware mit kaputter Webseite</li>
|
|
<li><a href="https://sourceforge.net/projects/jalmus/">https://sourceforge.net/projects/jalmus/</a></li>
|
|
</ul></li>
|
|
</ul>
|
|
<h1>Fazit</h1>
|
|
<p>Vermutlich wird man mit diesen Programmen nicht das Klavier spielen erlernen können, selbst mit den
|
|
beiden "guten" Programmen nicht. Musikalische Parameter wie Dynamik werden nicht beachtet, Fingersätze
|
|
werden nicht gezeigt, von elementar wichtiger Handhaltung und Armbewegungen ganz zu schweigen.</p>
|
|
<p>Der Notenmodus beider Programme eignet sich ein wenig zum Blattspielen, wenn es rein um mechanisches
|
|
Abarbeiten der Töne geht. Nicht überflüssig, aber reicht nicht.</p>
|
|
<p>Erst wenn man schon weiß, was am Klaverispielen wichtig ist, werden die Programme als rein mechanische Trainer
|
|
begrenzt nützlich. Klavierunterricht von einem realen Menschen kann auf keinen Fall hierdurch ersetzt
|
|
werden, höchstens in begrenztem Umfang ergänzt.</p>
|
|
<p>Als reines Motivationsmittel, um das Üben weniger ätzend zu gestalten, einigen sie sich auch nicht,
|
|
da die nötigen Gamification-Elemente wie Statistiken, Challenges, Quoten, Achievements etc. fehlen.</p>
|
|
<p>Das Musikmaterial muss auch aufbereitet werden. Einfach ein MIDI reinstecken ist auch nicht automatisch gut.
|
|
Pianobooster hat hier als einziges Programm ein bischen Mühe aufgewendet.</p>
|
|
<p>Die "Piano von Oben"-Tabs Ansicht mag einem zeigen welche Tasten man spielt, aber dann kann man lieber
|
|
ein Video auf Youtube gucken, wo genau diese Elemente auch vorhanden sind. Das ist immer noch nicht gut,
|
|
aber wenigstens sieht man die Handhaltung und Armbewegung.</p>
|
|
<p>Schließlich ist es nicht wenig Aufwand die Programme selbst erstmal zu lernen: Timing, Abstände etc.
|
|
Sie sind eher wie Spiele und es ist zweifelhaft ob sich das Gelernte auf richtige Instrumenten umsetzen lässt.
|
|
Synthesia, Linthesia und Musicope sagen sogar von sich selbst, sie seien "Musical Games". Dafür fehlen aber,
|
|
wie gesagt, die Eigenschaften die ein Spiel spaßig machen. Es klingt eher als eine Ausrede und Vorversicherung,
|
|
damit niemand den Programmen vorwerfen kann man würde damit nicht effektiv Klavier lernen können.</p>
|
|
<p>Sightread gibt den Disclaimer:</p>
|
|
<blockquote>
|
|
<p>Sightread works best in conjunction with a Piano teacher. Falling notes will allow you to have more fun with less experience, but it is no replacement for formal education. Learning music theory will help you get a more holistic music experience than learning solely learning how to play songs.</p>
|
|
</blockquote>
|
|
|
|
</div> <!-- div content -->
|
|
|
|
</body>
|
|
|
|
<style>
|
|
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
|
|
|
|
/* Document
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Correct the line height in all browsers.
|
|
* 2. Prevent adjustments of font size after orientation changes in iOS.
|
|
*/
|
|
|
|
html {
|
|
line-height: 1.15; /* 1 */
|
|
-webkit-text-size-adjust: 100%; /* 2 */
|
|
}
|
|
|
|
/* Sections
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove the margin in all browsers.
|
|
*/
|
|
|
|
body {
|
|
margin: 0;
|
|
}
|
|
|
|
/**
|
|
* Render the `main` element consistently in IE.
|
|
*/
|
|
|
|
main {
|
|
display: block;
|
|
}
|
|
|
|
/**
|
|
* Correct the font size and margin on `h1` elements within `section` and
|
|
* `article` contexts in Chrome, Firefox, and Safari.
|
|
*/
|
|
|
|
h1 {
|
|
font-size: 2em;
|
|
margin: 0.67em 0;
|
|
}
|
|
|
|
/* Grouping content
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Add the correct box sizing in Firefox.
|
|
* 2. Show the overflow in Edge and IE.
|
|
*/
|
|
|
|
hr {
|
|
box-sizing: content-box; /* 1 */
|
|
height: 0; /* 1 */
|
|
overflow: visible; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
* 2. Correct the odd `em` font sizing in all browsers.
|
|
*/
|
|
|
|
pre {
|
|
font-family: monospace, monospace; /* 1 */
|
|
font-size: 1em; /* 2 */
|
|
}
|
|
|
|
/* Text-level semantics
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove the gray background on active links in IE 10.
|
|
*/
|
|
|
|
a {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/**
|
|
* 1. Remove the bottom border in Chrome 57-
|
|
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
|
|
*/
|
|
|
|
abbr[title] {
|
|
border-bottom: none; /* 1 */
|
|
text-decoration: underline; /* 2 */
|
|
text-decoration: underline dotted; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Add the correct font weight in Chrome, Edge, and Safari.
|
|
*/
|
|
|
|
b,
|
|
strong {
|
|
font-weight: bolder;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the inheritance and scaling of font size in all browsers.
|
|
* 2. Correct the odd `em` font sizing in all browsers.
|
|
*/
|
|
|
|
code,
|
|
kbd,
|
|
samp {
|
|
font-family: monospace, monospace; /* 1 */
|
|
font-size: 1em; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Add the correct font size in all browsers.
|
|
*/
|
|
|
|
small {
|
|
font-size: 80%;
|
|
}
|
|
|
|
/**
|
|
* Prevent `sub` and `sup` elements from affecting the line height in
|
|
* all browsers.
|
|
*/
|
|
|
|
sub,
|
|
sup {
|
|
font-size: 75%;
|
|
line-height: 0;
|
|
position: relative;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
/* Embedded content
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Remove the border on images inside links in IE 10.
|
|
*/
|
|
|
|
img {
|
|
border-style: none;
|
|
}
|
|
|
|
/* Forms
|
|
========================================================================== */
|
|
|
|
/**
|
|
* 1. Change the font styles in all browsers.
|
|
* 2. Remove the margin in Firefox and Safari.
|
|
*/
|
|
|
|
button,
|
|
input,
|
|
optgroup,
|
|
select,
|
|
textarea {
|
|
font-family: inherit; /* 1 */
|
|
font-size: 100%; /* 1 */
|
|
line-height: 1.15; /* 1 */
|
|
margin: 0; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Show the overflow in IE.
|
|
* 1. Show the overflow in Edge.
|
|
*/
|
|
|
|
button,
|
|
input { /* 1 */
|
|
overflow: visible;
|
|
}
|
|
|
|
/**
|
|
* Remove the inheritance of text transform in Edge, Firefox, and IE.
|
|
* 1. Remove the inheritance of text transform in Firefox.
|
|
*/
|
|
|
|
button,
|
|
select { /* 1 */
|
|
text-transform: none;
|
|
}
|
|
|
|
/**
|
|
* Correct the inability to style clickable types in iOS and Safari.
|
|
*/
|
|
|
|
button,
|
|
[type="button"],
|
|
[type="reset"],
|
|
[type="submit"] {
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
/**
|
|
* Remove the inner border and padding in Firefox.
|
|
*/
|
|
|
|
button::-moz-focus-inner,
|
|
[type="button"]::-moz-focus-inner,
|
|
[type="reset"]::-moz-focus-inner,
|
|
[type="submit"]::-moz-focus-inner {
|
|
border-style: none;
|
|
padding: 0;
|
|
}
|
|
|
|
/**
|
|
* Restore the focus styles unset by the previous rule.
|
|
*/
|
|
|
|
button:-moz-focusring,
|
|
[type="button"]:-moz-focusring,
|
|
[type="reset"]:-moz-focusring,
|
|
[type="submit"]:-moz-focusring {
|
|
outline: 1px dotted ButtonText;
|
|
}
|
|
|
|
/**
|
|
* Correct the padding in Firefox.
|
|
*/
|
|
|
|
fieldset {
|
|
padding: 0.35em 0.75em 0.625em;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the text wrapping in Edge and IE.
|
|
* 2. Correct the color inheritance from `fieldset` elements in IE.
|
|
* 3. Remove the padding so developers are not caught out when they zero out
|
|
* `fieldset` elements in all browsers.
|
|
*/
|
|
|
|
legend {
|
|
box-sizing: border-box; /* 1 */
|
|
color: inherit; /* 2 */
|
|
display: table; /* 1 */
|
|
max-width: 100%; /* 1 */
|
|
padding: 0; /* 3 */
|
|
white-space: normal; /* 1 */
|
|
}
|
|
|
|
/**
|
|
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
|
|
*/
|
|
|
|
progress {
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
/**
|
|
* Remove the default vertical scrollbar in IE 10+.
|
|
*/
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
}
|
|
|
|
/**
|
|
* 1. Add the correct box sizing in IE 10.
|
|
* 2. Remove the padding in IE 10.
|
|
*/
|
|
|
|
[type="checkbox"],
|
|
[type="radio"] {
|
|
box-sizing: border-box; /* 1 */
|
|
padding: 0; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Correct the cursor style of increment and decrement buttons in Chrome.
|
|
*/
|
|
|
|
[type="number"]::-webkit-inner-spin-button,
|
|
[type="number"]::-webkit-outer-spin-button {
|
|
height: auto;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the odd appearance in Chrome and Safari.
|
|
* 2. Correct the outline style in Safari.
|
|
*/
|
|
|
|
[type="search"] {
|
|
-webkit-appearance: textfield; /* 1 */
|
|
outline-offset: -2px; /* 2 */
|
|
}
|
|
|
|
/**
|
|
* Remove the inner padding in Chrome and Safari on macOS.
|
|
*/
|
|
|
|
[type="search"]::-webkit-search-decoration {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
/**
|
|
* 1. Correct the inability to style clickable types in iOS and Safari.
|
|
* 2. Change font properties to `inherit` in Safari.
|
|
*/
|
|
|
|
::-webkit-file-upload-button {
|
|
-webkit-appearance: button; /* 1 */
|
|
font: inherit; /* 2 */
|
|
}
|
|
|
|
/* Interactive
|
|
========================================================================== */
|
|
|
|
/*
|
|
* Add the correct display in Edge, IE 10+, and Firefox.
|
|
*/
|
|
|
|
details {
|
|
display: block;
|
|
}
|
|
|
|
/*
|
|
* Add the correct display in all browsers.
|
|
*/
|
|
|
|
summary {
|
|
display: list-item;
|
|
}
|
|
|
|
/* Misc
|
|
========================================================================== */
|
|
|
|
/**
|
|
* Add the correct display in IE 10+.
|
|
*/
|
|
|
|
template {
|
|
display: none;
|
|
}
|
|
|
|
/**
|
|
* Add the correct display in IE 10.
|
|
*/
|
|
|
|
[hidden] {
|
|
display: none;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* Sakura.css v1.0.0
|
|
* ================
|
|
* Minimal css theme.
|
|
* Project: https://github.com/oxalorg/sakura
|
|
*/
|
|
/* Body */
|
|
html {
|
|
font-size: 62.5%;
|
|
font-family: serif; }
|
|
|
|
body {
|
|
font-size: 1.8rem;
|
|
line-height: 1.618;
|
|
max-width: 38em;
|
|
margin: auto;
|
|
color: #4a4a4a;
|
|
background-color: #f9f9f9;
|
|
padding: 13px; }
|
|
|
|
@media (max-width: 684px) {
|
|
body {
|
|
font-size: 1.53rem; } }
|
|
|
|
@media (max-width: 382px) {
|
|
body {
|
|
font-size: 1.35rem; } }
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
line-height: 1.1;
|
|
font-family: Verdana, Geneva, sans-serif;
|
|
font-weight: 700;
|
|
overflow-wrap: break-word;
|
|
word-wrap: break-word;
|
|
-ms-word-break: break-all;
|
|
word-break: break-word;
|
|
-ms-hyphens: auto;
|
|
-moz-hyphens: auto;
|
|
-webkit-hyphens: auto;
|
|
hyphens: auto; }
|
|
|
|
h1 {
|
|
font-size: 2.35em; }
|
|
|
|
h2 {
|
|
font-size: 2.00em; }
|
|
|
|
h3 {
|
|
font-size: 1.75em; }
|
|
|
|
h4 {
|
|
font-size: 1.5em; }
|
|
|
|
h5 {
|
|
font-size: 1.25em; }
|
|
|
|
h6 {
|
|
font-size: 1em; }
|
|
|
|
small, sub, sup {
|
|
font-size: 75%; }
|
|
|
|
hr {
|
|
border-color: #2c8898; }
|
|
|
|
a {
|
|
text-decoration: none;
|
|
color: #2c8898; }
|
|
a:hover {
|
|
color: #982c61;
|
|
border-bottom: 2px solid #4a4a4a; }
|
|
|
|
ul {
|
|
padding-left: 1.4em; }
|
|
|
|
li {
|
|
margin-bottom: 0.4em; }
|
|
|
|
blockquote {
|
|
font-style: italic;
|
|
margin-left: 1.5em;
|
|
padding-left: 1em;
|
|
border-left: 3px solid #2c8898; }
|
|
|
|
img {
|
|
max-width: 100%; }
|
|
|
|
/* Pre and Code */
|
|
pre {
|
|
background-color: #f1f1f1;
|
|
display: block;
|
|
padding: 1em;
|
|
overflow-x: auto; }
|
|
|
|
code {
|
|
font-size: 0.9em;
|
|
padding: 0 0.5em;
|
|
background-color: #f1f1f1;
|
|
white-space: pre-wrap; }
|
|
|
|
pre > code {
|
|
padding: 0;
|
|
background-color: transparent;
|
|
white-space: pre; }
|
|
|
|
/* Tables */
|
|
table {
|
|
text-align: justify;
|
|
width: 100%;
|
|
border-collapse: collapse; }
|
|
|
|
td, th {
|
|
padding: 0.5em;
|
|
border-bottom: 1px solid #f1f1f1; }
|
|
|
|
/* Buttons, forms and input */
|
|
input, textarea {
|
|
border: 1px solid #4a4a4a; }
|
|
input:focus, textarea:focus {
|
|
border: 1px solid #2c8898; }
|
|
|
|
textarea {
|
|
width: 100%; }
|
|
|
|
.button, button, input[type="submit"], input[type="reset"], input[type="button"] {
|
|
display: inline-block;
|
|
padding: 5px 10px;
|
|
text-align: center;
|
|
text-decoration: none;
|
|
white-space: nowrap;
|
|
background-color: #2c8898;
|
|
color: #f9f9f9;
|
|
border-radius: 1px;
|
|
border: 1px solid #2c8898;
|
|
cursor: pointer;
|
|
box-sizing: border-box; }
|
|
.button[disabled], button[disabled], input[type="submit"][disabled], input[type="reset"][disabled], input[type="button"][disabled] {
|
|
cursor: default;
|
|
opacity: .5; }
|
|
.button:focus, .button:hover, button:focus, button:hover, input[type="submit"]:focus, input[type="submit"]:hover, input[type="reset"]:focus, input[type="reset"]:hover, input[type="button"]:focus, input[type="button"]:hover {
|
|
background-color: #982c61;
|
|
border-color: #982c61;
|
|
color: #f9f9f9;
|
|
outline: 0; }
|
|
|
|
textarea, select, input[type] {
|
|
color: #4a4a4a;
|
|
padding: 6px 10px;
|
|
/* The 6px vertically centers text on FF, ignored by Webkit */
|
|
margin-bottom: 10px;
|
|
background-color: #f1f1f1;
|
|
border: 1px solid #f1f1f1;
|
|
border-radius: 4px;
|
|
box-shadow: none;
|
|
box-sizing: border-box; }
|
|
textarea:focus, select:focus, input[type]:focus {
|
|
border: 1px solid #2c8898;
|
|
outline: 0; }
|
|
|
|
input[type="checkbox"]:focus {
|
|
outline: 1px dotted #2c8898; }
|
|
|
|
label, legend, fieldset {
|
|
display: block;
|
|
margin-bottom: .5rem;
|
|
font-weight: 600; }
|
|
</style>
|
|
|
|
</html>
|
|
|
|
<!-- Table of Contents -->
|
|
<script>
|
|
// Source: https://stackoverflow.com/questions/187619/is-there-a-javascript-solution-to-generating-a-table-of-contents-for-a-page
|
|
// by https://stackoverflow.com/users/23501/ate%c5%9f-g%c3%b6ral
|
|
|
|
window.onload = function () {
|
|
var toc = "";
|
|
var level = 0;
|
|
|
|
document.getElementById("contents").innerHTML =
|
|
document.getElementById("contents").innerHTML.replace(
|
|
/<h([\d])>([^<]+)<\/h([\d])>/gi,
|
|
function (str, openLevel, titleText, closeLevel) {
|
|
if (openLevel != closeLevel) {
|
|
return str;
|
|
}
|
|
|
|
if (openLevel > level) {
|
|
toc += (new Array(openLevel - level + 1)).join("");
|
|
} else if (openLevel < level) {
|
|
toc += (new Array(level - openLevel + 1)).join("");
|
|
}
|
|
|
|
level = parseInt(openLevel);
|
|
|
|
var anchor = titleText.replace(/ /g, "_");
|
|
toc += "<a href=\"#" + anchor + "\">" + titleText + "</a> | ";
|
|
|
|
|
|
return "<h" + openLevel + "><a name=\"" + anchor + "\">"
|
|
+ titleText + "</a></h" + closeLevel + ">";
|
|
}
|
|
);
|
|
|
|
if (level) {
|
|
toc += (new Array(level + 1)).join("");
|
|
}
|
|
|
|
document.getElementById("toc").innerHTML += toc;
|
|
};
|
|
</script>
|
|
|
|
|