dokumentation/overrides/overrides/home.html

286 lines
13 KiB
HTML

<!--
Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com>
vim: set fdm=marker fmr=<<<,>>> :
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the
rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
sell copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
IN THE SOFTWARE.
-->
{% extends "main.html" %}
{% block tabs %}
{{ super() }}
<style>
.md-header{position:initial}
.md-main__inner{margin:0}
.md-content{display:none}
.tx-background {
padding-top: 1rem;
padding-bottom: 8rem;
margin-bottom:-6rem;
background:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1123 258'><path d='M1124,2c0,0 0,256 0,256l-1125,0l0,-48c0,0 16,5 55,5c116,0 197,-92 325,-92c121,0 114,46 254,46c140,0 214,-167 572,-166Z' style='fill: white' /></svg>") no-repeat bottom,
linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-accent-fg-color) 99%, white 99%);
}
.header-box{
width:100%;
text-align:center;
}
.header-box h1{
margin: 1em 0 0.5em;
}
.home-column{
flex: 1 1 20rem;
max-width: 30rem;
min-width: 20rem;
margin: 0.8rem;
}
.tabbed-set label {
padding: .9375em .8em .78125em !important;
}
@media screen and (max-width:30em){
.home-column {
flex: 1 1 15rem;
min-width: 15rem;
}
.tabbed-set label {
padding: .9375em 0.4em .78125em !important;
}
}
.home-middlething{
//background:yellow;
display:flex;
justify-content:center;
flex-wrap:wrap;
max-width:45rem;
}
.home-vorteil{
align-self: center;
max-width: 20rem;
min-width: 15rem;
vertical-align: middle;
margin: 0 1em 0 1em;
flex: 1 1 15rem;
background:white;
}
.home-image{
align-self: center;
margin: 1rem;
max-width: 20rem;
min-width: 15rem;
flex: 1 1 15rem;
}
.kb-box{
margin:auto !important;
margin-top:2em !important;
margin-bottom:2em !important;
max-width:600px;
background:white;
border-radius: 10px!important;
box-shadow:0 0 10px rgba(0,0,0,0.4);
}
.kb-box img{
margin:auto;
display:block;
}
.home-box{
display:flex;
//justify-content:space-between;
justify-content:space-around;
flex-wrap:wrap
}
@media screen and (min-width:60em){
.md-sidebar--secondary{display:none}
}
@media screen and (min-width:76.25em){
.md-sidebar--primary{display:none}
}
.tx-hero {
color: var(--md-primary-bg-color);
}
.tx-hero h1 {
margin-bottom: 1rem;
color: currentColor;
font-weight: 900;
}
.tx-hero .md-button {
margin-top: .5rem;
margin-right: .5rem;
color: var(--md-primary-bg-color);
}
.tx-hero .md-button--primary {
background-color: var(--md-primary-bg-color);
color: var(--md-primary-fg-color);
border-color: var(--md-primary-bg-color);
}
</style>
<section class="tx-background">
<div class="md-grid md-typeset home-box">
<div class="home-column tx-hero">
<h1>Neo</h1>
<p style="font-size:0.9rem">{{ config.site_description }}</p>
<a href="/Download" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">Download/Installation</a>
<a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button"> Git-Repo anzeigen </a>
</div>
<div class="home-column">
<div class="tabbed-set kb-box" data-tabs="1:6"> <!-- Neo Bild<<<-->
<input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" /><label for="__tabbed_1_1">Ebene 1</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo%20ebene%201.embed.svg" /></p>
</div>
<input id="__tabbed_1_2" name="__tabbed_1" type="radio" /><label for="__tabbed_1_2">Ebene 2</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo%20ebene%202.embed.svg" /></p>
</div>
<input id="__tabbed_1_3" name="__tabbed_1" type="radio" /><label for="__tabbed_1_3">Ebene 3</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo%20ebene%203.embed.svg" /></p>
</div>
<input id="__tabbed_1_4" name="__tabbed_1" type="radio" /><label for="__tabbed_1_4">Ebene 4</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo%20ebene%204.embed.svg" /></p>
</div>
<input id="__tabbed_1_5" name="__tabbed_1" type="radio" /><label for="__tabbed_1_5">Ebene 5</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo%20ebene%205.embed.svg" /></p>
</div>
<input id="__tabbed_1_6" name="__tabbed_1" type="radio" /><label for="__tabbed_1_6">Ebene 6</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo%20ebene%206.embed.svg" /></p>
</div>
</div><!--Neo>>>-->
</div>
</div>
</section>
<section>
<div class="md-grid md-typeset home-middlething" >
<div class="header-box"><h1 style>Vorteile von Neo gegenüber konventionellen Tastaturbelegungen</h1></div>
<div class="home-vorteil">
Die Anordnung der Buchstaben wurde für die deutsche Sprache optimiert:
die am häufigsten auftretenden Zeichen befinden sich in der Ruheposition direkt unter den Fingerspitzen.
Häufig hintereinander vorkommende Buchstaben liegen nicht auf dem gleichen Finger, sondern sehr häufig sogar auf verschiedenen Händen.
</div>
<div class="home-image">
<img src=assets/images/home-heatmap.png />
</div>
<div class="home-vorteil">
<p>
Zum Programmieren benötigte Symbole wie []{}()&lt;&gt;?#$~
sind sehr gut erreichbar im Hauptfeld vorhanden: Auf einer zusätzlichen Ebene,
die — ähnlich wie die Großbuchstaben mit der Umschalttaste — mit der Capslock-Taste
ausgewählt werden kann.
</p>
<p>
Die Capslock-Funktion kann mit beiden Umschalt-Tasten gleichzeitg weiter aktiviert werden.
</p>
</div>
<div class="home-image">
<img src=assets/images/home-code.JPG />
</div>
<div class="home-vorteil">
<p>
Auch die Navigationstasten, die bei herkömmlichen Tastaturen weit abgeschlagen am rechten Rand liegen, bringt Neo direkt ins Hauptfeld.
Man kann diese Ebene mit der „Qwertz-<>|“- oder der „Alt Gr“-Taste auswählen.
</p>
<p>
Diese Ebene lässt sich wie die Großbuchstabenebene durch gleichzeitiges Betätigen dieser beiden Tasten sperren.
</p>
</div>
<div class="home-image">
<img src=assets/images/home-nav.JPG />
</div>
<div class="home-vorteil">
<p>
Jede Menge griechische und Mathematische Zeichen befinden sich auf den Ebenen 5 und 6 — Man erreicht diese durch Kombination der Modifikatoren für die anderen Ebenen.
</p>
</div>
<div class="home-image">
<img src=assets/images/home-math.png />
</div>
<div class="home-vorteil">
<p>
Viele weitere Zeichen lassen sich mit der <a href="Benutzerhandbuch/Tote-Tasten-und-Compose">Compose</a>-Funktion zusammensetzen:
Man betätigt zunächst die Compose-Taste ♫, die sich auf Ebene 3 auf der Tabulatortaste befindet und gibt anschließend
Zeichen ein, die man kombinieren möchte.
Damit lassen sich viele tausende weitere Zeichen eingeben, für die auf den sechs Ebenen kein Platz mehr war.
</p>
</div>
<div class="home-image">
<img src=assets/images/home-compose.png />
</div>
</div>
<div class="md-grid md-typeset home-box">
<div class="header-box"><h1 style>Variationen mit anderer Anordnung der Buchstaben</h1></div>
<div class="home-column">
<h3> <a href="Layouts/neoqwertz">NeoQwertz</a> — von Neo ohne Umlernen profitieren</h3>
<div class="tabbed-set kb-box" data-tabs="2:6"> <!-- NeoQwertz Bild<<<-->
<input checked="checked" id="__tabbed_2_1" name="__tabbed_2" type="radio" /><label for="__tabbed_2_1">Ebene 1</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo_qwertz%20ebene%201.embed.svg" /></p>
</div>
<input id="__tabbed_2_2" name="__tabbed_2" type="radio" /><label for="__tabbed_2_2">Ebene 2</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo_qwertz%20ebene%202.embed.svg" /></p>
</div>
<input id="__tabbed_2_3" name="__tabbed_2" type="radio" /><label for="__tabbed_2_3">Ebene 3</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo_qwertz%20ebene%203.embed.svg" /></p>
</div>
<input id="__tabbed_2_4" name="__tabbed_2" type="radio" /><label for="__tabbed_2_4">Ebene 4</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo_qwertz%20ebene%204.embed.svg" /></p>
</div>
<input id="__tabbed_2_5" name="__tabbed_2" type="radio" /><label for="__tabbed_2_5">Ebene 5</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo_qwertz%20ebene%205.embed.svg" /></p>
</div>
<input id="__tabbed_2_6" name="__tabbed_2" type="radio" /><label for="__tabbed_2_6">Ebene 6</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20neo_qwertz%20ebene%206.embed.svg" /></p>
</div>
</div><!--NeoQwertz >>>-->
<p>
Mit <a href="Layouts/neoqwertz">NeoQwertz</a> kann man die komfortable Navigation und einfache Eingabe von Symbolen und Sonderzeichen von
Neo auch mit dem Qwertz-Layout benutzen. Ebenen 5 und 6 wurden ebenfalls mitpermutiert, damit man sich
die Positionen der Zeichen leicht merken/herleiten kann.
</p>
</div>
<div class="home-column">
<h3> <a href="Layouts/bone">Bone</a> — computerverbesserte Weiterentwicklung</h3>
<div class="tabbed-set kb-box" data-tabs="3:6"> <!--Bone-Bild <<<-->
<input checked="checked" id="__tabbed_3_1" name="__tabbed_3" type="radio" /><label for="__tabbed_3_1">Ebene 1</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20bone%20ebene%201.embed.svg" /></p>
</div>
<input id="__tabbed_3_2" name="__tabbed_3" type="radio" /><label for="__tabbed_3_2">Ebene 2</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20bone%20ebene%202.embed.svg" /></p>
</div>
<input id="__tabbed_3_3" name="__tabbed_3" type="radio" /><label for="__tabbed_3_3">Ebene 3</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20bone%20ebene%203.embed.svg" /></p>
</div>
<input id="__tabbed_3_4" name="__tabbed_3" type="radio" /><label for="__tabbed_3_4">Ebene 4</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20bone%20ebene%204.embed.svg" /></p>
</div>
<input id="__tabbed_3_5" name="__tabbed_3" type="radio" /><label for="__tabbed_3_5">Ebene 5</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20bone%20ebene%205.embed.svg" /></p>
</div>
<input id="__tabbed_3_6" name="__tabbed_3" type="radio" /><label for="__tabbed_3_6">Ebene 6</label><div class="tabbed-content">
<p><img alt="Image" src="Layouts/de%20bone%20ebene%206.embed.svg" /></p>
</div>
</div> <!-- Bone >>>-->
<p>Mit <a href="Layouts/bone">Bone</a> wurde die Position der Buchstaben gegenüber Neo nochmal optimiert.
Ebenen 3 und 4 sind unverändert und Ebenen 5 und 6 entsprechend angepasst.</p>
<p>Es gibt auch unzählige weitere ähnliche Projekte, die die höheren Ebenen des Neo-Layouts mit
computeroptimierten Buchstabenpositionen kombinieren. Siehe dazu etwa <a href="Layouts/Varianten">hier</a>.</p>
</div>
</div>
</section>
{% endblock %}
{% block content %}{% endblock %}
{% block footer %}{% endblock %}