Startseite hinzugefügt.

Sowohl die Texte als auch die Bilder sind noch vorläufig, aber es ist
ein Anfang.

overrides/assets/stylesheets/extra.css

@@ -1,6 +1,7 @@
 * {
     --md-primary-fg-color: #06889C;
     --md-accent-fg-color: #4AA44A;
+    --md-primary-fg-color--dark: #06889C;
 }
 .tx-container {
     --md-accent-fg-color: #4AA44A;
@@ -22,11 +23,12 @@
     margin: 0;
     padding: 0;
 }
-.md-header-nav__button.md-logo img {
+.md-header-nav__button.md-logo img, .md-nav__title .md-nav__button.md-logo img, .md-nav__title .md-nav__button.md-logo svg {
     width: auto;
     height: 100%;
     margin: 0;
     padding: 0;
+
 }
 .md-header-nav__title {
     margin: 0;

overrides/overrides/home.html

@@ -1,6 +1,8 @@
 <!--
   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
@@ -21,295 +23,250 @@
 -->
 
 {% extends "main.html" %}
-
-<!-- Render hero under tabs -->
 {% block tabs %}
   {{ super() }}
-
-  <!-- Additional styles for landing page -->
-  <style>
-
-    /* Application header should be static for the landing page */
-    .md-header {
-      position: initial;
-    }
-
-    /* Remove spacing, as we cannot hide it completely */
-    .md-main__inner {
-        margin: 0;
-    }
-
-    /* Hide main content for now */
-    .md-content {
-      display: none;
-    }
-
-    /* Gradient background + blob */
-    .tx-container {
+<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%
-        );
+        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{
+        //background:green;
+        flex: 1 1 20rem;
+        max-width: 30rem;
+        min-width: 20rem;
+        margin:0.8em;
+    }
+    .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;
+        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{
+        //background:red;
+        display:flex;
+        justify-content:space-between;
+        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}
     }
-
-    /* Set inverted text color on hero */
     .tx-hero {
-      margin: 0 .8rem;
       color: var(--md-primary-bg-color);
     }
-
-    /* Make main headline thicker */
     .tx-hero h1 {
       margin-bottom: 1rem;
       color: currentColor;
-      font-weight: 700;
-    }
-
-    /* Ensure that blob doesn't overlap buttons */
-    .tx-hero__content {
-      padding-bottom: 6rem;
-    }
-
-    /* Adjust spacing of buttons and invert them */
+      font-weight: 900;
+   }
     .tx-hero .md-button {
       margin-top: .5rem;
       margin-right: .5rem;
       color: var(--md-primary-bg-color);
     }
-
-    /* Invert primary button */
     .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);
     }
-
-    /* Invert hover and focus button states */
-    .tx-hero .md-button:hover,
-    .tx-hero .md-button:focus {
-      background-color: var(--md-accent-fg-color);
-      color: var(--md-default-bg-color);
-      border-color: var(--md-accent-fg-color);
-    }
-
-    /* [mobile portrait -]: Adjust headline */
-    @media screen and (max-width: 30em) {
-
-      /* Make main headline smaller */
-      .tx-hero h1 {
-        font-size: 1.4rem;
-      }
-    }
-
-    /* [tablet landscape +]: Display content and image next to each other */
-    @media screen and (min-width: 60em) {
-
-      /* Hide table of contents */
-      .md-sidebar--secondary {
-        display: none;
-      }
-
-      /* Use flex layout to align items */
-      .tx-hero {
-        display: flex;
-        align-items: stretch;
-      }
-
-      /* Increase bottom spacing and set dimensions */
-      .tx-hero__content {
-        max-width: 19rem;
-        margin-top: 3.5rem;
-        padding-bottom: 14vw;
-      }
-
-      /* Swap with teaser and set dimensions */
-      .tx-hero__image {
-        width: 30rem;
-        order: 1;
-        transform: translateX(7rem);
-      }
-    }
-
-    /* [screen +]: Adjust spacing */
-    @media screen and (min-width: 76.25em) {
-
-      /* Hide navigation */
-      .md-sidebar--primary {
-        display: none;
-      }
-
-      /* Ensure the image aligns with the repository information */
-      .tx-hero__image {
-          transform: translateX(11rem);
-      }
-    }
-
-    .tab-wrap {
-        /* background-color: var(--md-primary-bg-color); */
-        border-radius: 6px;
-        text-align: center;
-        display: flex;
-        flex-wrap: wrap;
-        box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)
-    }
-    .tab-wrap:hover {
-        box-shadow: 0 12px 23px rgba(0,0,0,.23),0 10px 10px rgba(0,0,0,.19);
-    }
-    .tab {
-        display:none
-    }
-    .tab:checked:nth-of-type(1)~.tab__content:nth-of-type(1) {
-        opacity: 1;
-        position: relative;
-        z-index: 100;
-    }
-    .tab:checked:nth-of-type(2)~.tab__content:nth-of-type(2) {
-        opacity: 1;
-        position: relative;
-        z-index: 100;
-    }
-    .tab:checked:nth-of-type(3)~.tab__content:nth-of-type(3) {
-        opacity: 1;
-        position: relative;
-        z-index: 100;
-    }
-    .tab:checked:nth-of-type(4)~.tab__content:nth-of-type(4) {
-        opacity: 1;
-        position: relative;
-        z-index: 100;
-    }
-    .tab:checked:nth-of-type(5)~.tab__content:nth-of-type(5) {
-        opacity: 1;
-        position: relative;
-        z-index: 100;
-    }
-    .tab:checked:nth-of-type(6)~.tab__content:nth-of-type(6) {
-        opacity: 1;
-        position: relative;
-        z-index: 100;
-    }
-    .tab:checked+label {
-        background-color: var(--md-accent-bg-color);
-        color: var(--md-accent-fg-color);
-    }
-    .tab:checked+label:hover {
-        background-color: var(--md-accent-bg-color);
-        color: var(--md-accent-fg-color);
-    }
-    .tab+label {
-        padding: .5rem 0;
-        margin: 0;
-        border-radius: 6px 6px 0 0;
-        background-color: var(--md-primary-fg-color);
-        opacity: 1;
-        cursor: pointer;
-        flex-grow: 3;
-        text-align: center;
-    }
-    .tab+label:hover {
-        background-color: var(--md-accent-fg-color);
-    }
-    .tab__content {
-        position: absolute;
-        padding: 10px 25px;
-        margin-top: -3px;
-        width: 100%;
-        background-color: var(--md-primary-bg-color);
-        z-index: -1;
-        opacity: 0;
-        left: 0;
-        border-radius: 0 0 6px 6px;
-    }
-    .tab__content:hover {
-        box-shadow: none;
-    }
-
-  </style>
-
-  <!-- Hero for landing page -->
-  <section class="tx-container">
-    <div class="md-grid md-typeset">
-      <div class="tx-hero">
-
-        <!-- Hero image -->
-          <div class="tx-hero__image">
-            <div class="tab-wrap">
-              <input type="radio" id="tab1" name="tabGroup1" class="tab" checked>
-              <label for="tab1" class="md-tabs__link">Ebene 1</label>
-              <input type="radio" id="tab2" name="tabGroup1" class="tab">
-              <label for="tab2" class="md-tabs__link">Ebene 2</label>
-              <input type="radio" id="tab3" name="tabGroup1" class="tab">
-              <label for="tab3" class="md-tabs__link">Ebene 3</label>
-              <input type="radio" id="tab4" name="tabGroup1" class="tab">
-              <label for="tab4" class="md-tabs__link">Ebene 4</label>
-              <input type="radio" id="tab5" name="tabGroup1" class="tab">
-              <label for="tab5" class="md-tabs__link">Ebene 5</label>
-              <input type="radio" id="tab6" name="tabGroup1" class="tab">
-              <label for="tab6" class="md-tabs__link">Ebene 6</label>
-              <div class="tab__content">
-                <img src="assets/images/tastatur_e1.png"
-                     alt="Tastenbelegung Ebene 1"
-                     draggable="false">
-              </div>
-              <div class="tab__content">
-                <img src="assets/images/tastatur_e2.png"
-                     alt="Tastenbelegung Ebene 2"
-                     draggable="false">
-              </div>
-              <div class="tab__content">
-                <img src="assets/images/tastatur_e3.png"
-                     alt="Tastenbelegung Ebene 3"
-                     draggable="false">
-              </div>
-              <div class="tab__content">
-                <img src="assets/images/tastatur_e4.png"
-                     alt="Tastenbelegung Ebene 4"
-                     draggable="false">
-              </div>
-              <div class="tab__content">
-                <img src="assets/images/tastatur_e5.png"
-                     alt="Tastenbelegung Ebene 5"
-                     draggable="false">
-              </div>
-              <div class="tab__content">
-                <img src="assets/images/tastatur_e6.png"
-                     alt="Tastenbelegung Ebene 6"
-                     draggable="false">
-              </div>
-            </div>
-        </div>
-
-        <!-- Hero content -->
-        <div class="tx-hero__content">
-          <h1>Neo</h1>
-          <p>{{ config.site_description }}</p>
-          <a
-            href="{{ page.next_page.url | url }}"
-            title="{{ page.next_page.title | striptags }}"
-            class="md-button md-button--primary"
-          >
-            Quickguide
-          </a>
-          <a
-            href="{{ config.repo_url }}"
-            title="{{ lang.t('source.link.title') }}"
-            class="md-button"
-          >
-            Git-Repo anzeigen
-          </a>
-        </div>
-      </div>
+</style>
+<section class="tx-background">
+    <div class="md-grid md-typeset home-box">
+    <div class="home-column tx-hero">
+      <h1>Neo</h1>
+      <p>{{ config.site_description }}</p>
+      <a href="{{ page.next_page.url | url }}" title="{{ page.next_page.title | striptags }}" class="md-button md-button--primary">Quickguide</a>
+      <a href="{{ config.repo_url }}" title="{{ lang.t('source.link.title') }}" class="md-button"> Git-Repo anzeigen </a>
     </div>
-  </section>
+    <div class="home-column">
+    <div class="tabbed-set kb-box" data-tabs="1:6"> <!-- NeoQwertz 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 Compose-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>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>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>Bone</a> — computergenerierte 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>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 viele weitere ähnliche Projekte, die die höheren Ebenen des Neo-Layouts mit
+        computeroptimierten Buchstabenpositionen optimieren. Siehe dazu etwa <a>hier</a>.</p>
+</div>
+</div>
+</section>
 {% endblock %}
-
-<!-- Content -->
 {% block content %}{% endblock %}
-
-<!-- Application footer -->
 {% block footer %}{% endblock %}