Startseite hinzugefügt.

Sowohl die Texte als auch die Bilder sind noch vorläufig, aber es ist
ein Anfang.
This commit is contained in:
Ulli Kehrle 2020-11-08 00:51:02 +01:00
parent 91012f7add
commit 9a7ca58870
Signed by: hrnz
GPG Key ID: 06E88726998AB3C7
19 changed files with 232 additions and 267 deletions

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 73 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 73 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 69 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 68 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 72 KiB

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 71 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 392 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 358 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 18 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 22 KiB

View File

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

View File

@ -1,6 +1,8 @@
<!-- <!--
Copyright (c) 2016-2020 Martin Donath <martin.donath@squidfunk.com> 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 Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to of this software and associated documentation files (the "Software"), to
deal in the Software without restriction, including without limitation the deal in the Software without restriction, including without limitation the
@ -21,295 +23,250 @@
--> -->
{% extends "main.html" %} {% extends "main.html" %}
<!-- Render hero under tabs -->
{% block tabs %} {% block tabs %}
{{ super() }} {{ super() }}
<style>
<!-- Additional styles for landing page --> .md-header{position:initial}
<style> .md-main__inner{margin:0}
.md-content{display:none}
/* Application header should be static for the landing page */ .tx-background {
.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 {
padding-top: 1rem; padding-top: 1rem;
padding-bottom: 8rem;
margin-bottom:-6rem;
background: 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, 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( linear-gradient(to bottom, var(--md-primary-fg-color), var(--md-accent-fg-color) 99%, white 99%);
to bottom, }
var(--md-primary-fg-color), .header-box{
var(--md-accent-fg-color) 99%, width:100%;
white 99% 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 { .tx-hero {
margin: 0 .8rem;
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
} }
/* Make main headline thicker */
.tx-hero h1 { .tx-hero h1 {
margin-bottom: 1rem; margin-bottom: 1rem;
color: currentColor; color: currentColor;
font-weight: 700; font-weight: 900;
} }
/* Ensure that blob doesn't overlap buttons */
.tx-hero__content {
padding-bottom: 6rem;
}
/* Adjust spacing of buttons and invert them */
.tx-hero .md-button { .tx-hero .md-button {
margin-top: .5rem; margin-top: .5rem;
margin-right: .5rem; margin-right: .5rem;
color: var(--md-primary-bg-color); color: var(--md-primary-bg-color);
} }
/* Invert primary button */
.tx-hero .md-button--primary { .tx-hero .md-button--primary {
background-color: var(--md-primary-bg-color); background-color: var(--md-primary-bg-color);
color: var(--md-primary-fg-color); color: var(--md-primary-fg-color);
border-color: var(--md-primary-bg-color); border-color: var(--md-primary-bg-color);
} }
</style>
/* Invert hover and focus button states */ <section class="tx-background">
.tx-hero .md-button:hover, <div class="md-grid md-typeset home-box">
.tx-hero .md-button:focus { <div class="home-column tx-hero">
background-color: var(--md-accent-fg-color); <h1>Neo</h1>
color: var(--md-default-bg-color); <p>{{ config.site_description }}</p>
border-color: var(--md-accent-fg-color); <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>
/* [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>
</div> </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 %} {% endblock %}
<!-- Content -->
{% block content %}{% endblock %} {% block content %}{% endblock %}
<!-- Application footer -->
{% block footer %}{% endblock %} {% block footer %}{% endblock %}