emanote/static_gen/Opinions/Layout.html

915 lines
28 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset='UTF-8' />
<meta name='viewport' content='width=device-width, initial-scale=1' />
<title>
Keyboard-Layouts Home
</title>
<meta property='og:description' content='Since around 2006 i basically write only using the NEO2-Layout. There are many advantages that are not obvious to an onlooker right away.' />
<meta property='og:site_name' content='Home' />
<meta property='og:image' content />
<meta property='og:type' content='website' />
<meta property='og:title' content='Keyboard-Layouts' />
<base href='/' />
<link href='favicon.svg' rel='icon' />
<script>
window.MathJax = {
startup: {
ready: () => {
MathJax.startup.defaultReady();
}
}
};
</script>
<script async id='MathJax-script' src='https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js'></script>
<!-- mermaid.js --><script src='https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js'></script>
<script>
mermaid.initialize({startOnLoad:false});
mermaid.init(undefined,document.querySelectorAll(".mermaid"));
</script>
<!-- highlight.js -->
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/styles/hybrid.min.css' />
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/highlight.min.js'></script>
<!-- Include languages that Emanote itself uses -->
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/haskell.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.6.0/languages/nix.min.js'></script>
<script>hljs.highlightAll();</script>
<link href='tailwind.css?instanceId=7bed6aba-2ac0-4b33-bcfe-215581a3352f' rel='stylesheet' type='text/css' />
<style>
/* Heist error element */
strong.error {
color: lightcoral;
font-size: 90%;
font-family: monospace;
}
/* External link icon */
a[data-linkicon]:not([data-linkicon=""]):not([data-linkicon="none"])::after {
/* filter converts black to rgb(156,163,175) */
filter: invert(71%) sepia(3%) saturate(904%) hue-rotate(179deg) brightness(92%) contrast(87%);
margin-left: 1px;
}
a[data-linkicon]:not([data-linkicon=""]):not([data-linkicon="none"]):hover::after {
/* filter converts black to rgb(175,85,99) */
filter: invert(32%) sepia(10%) saturate(834%) hue-rotate(176deg) brightness(92%) contrast(88%);
}
a[data-linkicon=""]::after {
content: ""
}
a[data-linkicon=none]::after {
content: ""
}
a[data-linkicon="external"]::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14' /%3E%3C/svg%3E");
}
a[data-linkicon="external"][href^="mailto:"]::after {
content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='none' viewBox='0 0 24 24' stroke='black' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z' /%3E%3C/svg%3E");
}
</style>
<!-- What goes in this file will appear on near the end of <head>--><link rel='preload' href='_emanote-static/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf' as='font' type='font/ttf' crossorigin />
<style>
@font-face {
font-family: 'WorkSans';
/* FIXME: This ought to be: ${ema:emanoteStaticLayerUrl}/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf */
src: url(_emanote-static/fonts/Work_Sans/WorkSans-VariableFont_wght.ttf) format("truetype");
font-display: swap;
}
body {
font-family: 'WorkSans', sans-serif;
font-variation-settings: 'wght' 350;
}
a.mavenLinkBold {
font-variation-settings: 'wght' 400;
}
strong {
font-variation-settings: 'wght' 500;
}
h1,
h2,
h3,
h4,
h5,
h6,
header,
.header-font {
font-family: 'WorkSans', sans-serif;
}
h1 {
font-variation-settings: 'wght' 500;
}
h2 {
font-variation-settings: 'wght' 400;
}
h3 {
font-variation-settings: 'wght' 300;
}
</style>
<link rel='stylesheet' href='_emanote-static/inverted-tree.css' />
<link rel='stylesheet' href='_emanote-static/stork/flat.css' />
<!-- Custom Stork-search styling for Emanote -->
<style>
#stork-search-container {
z-index: 1000;
background-color: rgb(15 23 42/.8);
}
.stork-overflow-hidden-important {
overflow: hidden !important;
}
</style>
<script src='_emanote-static/stork/stork.js'></script>
<script data-emanote-base-url='/'>
window.emanote = {};
window.emanote.stork = {
searchShown: false,
toggleSearch: function () {
document.getElementById('stork-search-container').classList.toggle('hidden');
window.emanote.stork.searchShown = document.body.classList.toggle('stork-overflow-hidden-important');
if (window.emanote.stork.searchShown) {
document.getElementById('stork-search-input').focus();
}
},
clearSearch: function () {
document.getElementById('stork-search-container').classList.add('hidden');
document.body.classList.remove('stork-overflow-hidden-important');
window.emanote.stork.searchShown = false;
},
init: function () {
const indexName = 'emanote-search'; // used to match input[data-stork] attribute value
const baseUrl = document.currentScript.getAttribute('data-emanote-base-url') || '/';
const indexUrl = baseUrl + '-/stork.st';
if (document.readyState !== 'complete') {
window.addEventListener('load', function () {
stork.initialize(baseUrl + '_emanote-static/stork/stork.wasm');
stork.register(indexName, indexUrl);
});
document.addEventListener('keydown', event => {
if (window.emanote.stork.searchShown && event.key === 'Escape') {
window.emanote.stork.clearSearch();
event.preventDefault();
} else if ((event.key == 'k' || event.key == 'K') && (event.ctrlKey || event.metaKey)) {
window.emanote.stork.toggleSearch();
event.preventDefault();
}
});
} else {
// Override existing on Ema's hot-reload
stork.register(indexName, indexUrl, { forceOverwrite: true });
}
}
};
window.emanote.stork.init();
</script>
</head>
<!-- DoNotFormat -->
<!-- DoNotFormat -->
<body class='bg-gray-400 overflow-y-scroll'>
<div class='container mx-auto'>
<nav id='breadcrumbs' class='w-full text-gray-700 md:hidden'>
<div class='flex justify-left'>
<div class='w-full px-2 py-2 bg-gray-50'>
<ul class='flex flex-wrap text-lg'>
<li class='inline-flex items-center'>
<img style='width: 1rem;' src='favicon.svg' />
</li>
<li class='inline-flex items-center'>
<a class='px-1 font-bold' href=''>
Home
</a>
<svg fill='currentColor' viewBox='0 0 20 20' class='w-auto h-5 text-gray-400'>
<path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'></path>
</svg>
</li>
<li class='inline-flex items-center'>
<a class='px-1 font-bold' href='Opinions'>
Opinions
</a>
<svg fill='currentColor' viewBox='0 0 20 20' class='w-auto h-5 text-gray-400'>
<path fill-rule='evenodd' d='M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z' clip-rule='evenodd'></path>
</svg>
</li>
</ul>
</div>
<button class='inline px-2 py-1 bg-gray-50 outline-none cursor-pointer focus:outline-none' title='Search (Ctrl+K)' type='button' onclick='window.emanote.stork.toggleSearch()'>
<svg xmlns='http://www.w3.org/2000/svg' style='width: 1rem;' class='hover:text-purple-700' f
fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
<path stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path>
</svg>
</button>
<button class='inline px-2 py-1 text-white bg-purple-600 outline-none cursor-pointer focus:outline-none' title='Toggle sidebar' type='button' onclick="toggleHidden('sidebar')">
<svg xmlns='http://www.w3.org/2000/svg' class='w-4' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 6h16M4 12h16M4 18h16'></path>
</svg>
</button>
<script>
function toggleHidden(elemId) {
document.getElementById(elemId).classList.toggle("hidden");
}
</script>
</div>
</nav>
<div id='container' class='flex flex-nowrap flex-col md:flex-row bg-gray-50 md:mt-8 md:shadow-2xl md:mb-8'>
<!-- Sidebar column -->
<nav id='sidebar' class='flex-shrink hidden leading-relaxed md:block md:sticky md:top-0 md:h-full md:w-48 xl:w-64'>
<div class='px-2 py-2 text-gray-800'>
<div id='indexing-links' class='flex flex-row float-right p-2 space-x-2 text-gray-500'>
<a href='-/tags' title='View tags'>
<svg style='width: 1rem;' class='hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'>
</path>
</svg>
</a>
<a href='-/all' title='Expand full tree'>
<svg style='width: 1rem;' class='hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'>
</path>
</svg>
</a>
<a title='Search (Ctrl+K)' class='cursor-pointer' onclick='window.emanote.stork.toggleSearch()'>
<svg xmlns='http://www.w3.org/2000/svg' style='width: 1rem;' class='hover:text-purple-700' f
fill='none' viewBox='0 0 24 24' stroke='currentColor' stroke-width='2'>
<path stroke-linecap='round' stroke-linejoin='round' d='M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z'></path>
</svg>
</a>
</div>
<div id='site-logo' class='pl-2'>
<div class='flex items-center my-2 space-x-2 justify-left'>
<a href='' title='Go to Home'>
<!-- The style width attribute here is to prevent huge
icon from displaying at those rare occasions when Tailwind
hasn't kicked in immediately on page load
-->
<img style='width: 1rem;' class='transition transform hover:scale-110 hover:opacity-80' src='favicon.svg' />
</a>
<a class='font-bold truncate' title='Go to Home' href=''>
Home
</a>
</div>
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
<path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
</svg>
<a class='hover:underline truncate' title='About' href='About'>
About
</a>
<span class='text-gray-300' title='3 children inside'>
3
</span>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
<path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
</svg>
<a class='hover:underline truncate' title='Android' href='Android'>
Android
</a>
<span class='text-gray-300' title='1 children inside'>
1
</span>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
<path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
</svg>
<a class='hover:underline truncate' title='Coding' href='Coding'>
Coding
</a>
<span class='text-gray-300' title='2 children inside'>
2
</span>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'>
</path>
</svg>
<a class='hover:underline truncate' title='Logik für Dummies' href='Logik'>
Logik für Dummies
</a>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-700' viewBox='0 0 20 20' fill='currentColor'>
<path fill-rule='evenodd' d='M2 6a2 2 0 012-2h4l2 2h4a2 2 0 012 2v1H8a3 3 0 00-3 3v1.5a1.5 1.5 0 01-3 0V6z' clip-rule='evenodd'></path>
<path d='M6 12a2 2 0 012-2h8a2 2 0 012 2v2a2 2 0 01-2 2H2h2a2 2 0 002-2v-2z'></path>
</svg>
<a class='font-bold hover:underline truncate' title='Opinions' href='Opinions'>
Opinions
</a>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'>
</path>
</svg>
<a class='hover:underline truncate' title='Editors' href='Opinions/Editors'>
Editors
</a>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z'>
</path>
</svg>
<a class='font-bold text-purple-600 hover:underline truncate' title='Keyboard-Layouts' href='Opinions/Layout'>
Keyboard-Layouts
</a>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
<path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
</svg>
<a class='hover:underline truncate' title='Stuff' href='Stuff'>
Stuff
</a>
<span class='text-gray-300' title='1 children inside'>
1
</span>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg class='w-4 h-4 flex-shrink-0 inline' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 21h10a2 2 0 002-2V9.414a1 1 0 00-.293-.707l-5.414-5.414A1 1 0 0012.586 3H7a2 2 0 00-2 2v14a2 2 0 002 2z'>
</path>
</svg>
<a class='hover:underline truncate' title='Todo' href='TODO'>
Todo
</a>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
<path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
</svg>
<a class='hover:underline truncate' title='Uni' href='Uni'>
Uni
</a>
<span class='text-gray-300' title='2 children inside'>
2
</span>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
<!-- Variable bindings for this tree-->
<!-- Rendering of this tree -->
<div class='pl-2'>
<!-- Node's rootLabel-->
<div class='flex items-center my-2 space-x-2 justify-left'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-4 h-4 flex-shrink-0 inline text-gray-500' viewBox='0 0 20 20' fill='currentColor'>
<path d='M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z'></path>
</svg>
<a class='hover:underline truncate' title='Unix' href='Unix'>
Unix
</a>
<span class='text-gray-300' title='1 children inside'>
1
</span>
</div>
<!-- Node's children forest, displayed only on active trees
TODO: Use <details> to toggle visibility?
-->
</div>
</div>
</nav>
<!-- Main body column -->
<div class='flex-1 w-full overflow-x-auto bg-white'>
<main class='px-4 py-4'>
<!-- DoNotFormat -->
<!-- DoNotFormat -->
<nav id='uptree' class='flipped tree' style='transform-origin: 50%;'>
<ul class='root'>
<li>
<ul>
<li>
<div class='text-gray-900 forest-link'>
<a href='Opinions'>
Opinions
</a>
</div>
<ul>
<li>
<div class='text-gray-900 forest-link'>
<a href=''>
Home
</a>
</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
<h1 class='flex items-end justify-center mb-4 p-3 bg-purple-100 text-5xl font-extrabold text-black rounded'>
<a class='z-40 tracking-tighter '>
Keyboard-Layouts
</a>
</h1>
<article class='overflow-auto'>
<!-- What goes in this file will appear on top of note body-->
<h1 id='my-keyboard-layout' class='pb-2 mb-2 text-5xl font-bold text-center'>My Keyboard-Layout</h1>
<p class='mb-3'>
Since around 2006 i basically write only using the <a href='https://neo-layout.org' class='text-purple-600 hover:underline' data-linkicon='external' target='_blank' rel='noopener'>NEO2</a>-Layout. There are many advantages that are not obvious to an onlooker right away.
</p>
<p class='mb-3'>
Dont get me wrong. I still can type QWERTZ - just because you learn an additional layout does not mean that you forget everything from before.
</p>
<p class='mb-3'>
The secret sauce lies in the deeper layers. Especially layer 3 having all the “hard to reach” things like brackets, braces, etc. right on the home row. And the 4th layer is <em>magic</em> for text-navigation. Left hand has the full navigation, right hand has the complete Numpad - even on laptop-keyboards that are lacking those.
</p>
<p class='mb-3'>
For me as a person having the usual German Keyboard with AltGr this just means:
</p>
<ul class='my-3 ml-6 space-y-1 list-disc'>
<li>
Putting the thumb down on AltGr - it is above there anyway.
</li>
<li>
Use left hand as normal arrow-keys (that work EVERYWHERE because they are just arrow keys)
</li>
<li>
Also use Home/End/PgUp/PgDown/…
</li>
</ul>
<p class='mb-3'>
Before i always had to switch over or hope that a thing had support for vi-style “hjkl”.
</p>
<p class='mb-3'>
Thats why i also prefer <a href='Opinions/Editors' class='text-purple-600 mavenLinkBold hover:underline' data-wikilink-type='WikiLinkNormal'>Neovim</a> as my primary editor - just not having to touch your mouse at any time for anything is such a godsend <span class='emoji' data-emoji='smile' style='font-family: emoji'>😄</span>
</p>
<p class='mb-3'>
Best thing: If you dont want to switch, there is also a “Neo-QWERTZ”-variant .. where you can just try the deeper layers while not leaving your QWERTZ-layout behind. But i have just seen and never tried it. Your experience may be sub-par.
</p>
<!-- div class="flex items-center justify-center mt-2">
<ema:metadata>
<with var="template">
<a class="text-gray-300 hover:text-${theme}-600 text-sm" title="Edit this page on GitHub"
href="${value:editBaseUrl}/${ema:note:source-path}">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
</svg>
</a>
</with>
</ema:metadata>
</div -->
</article>
<div class='flex flex-col lg:flex-row lg:space-x-2'>
</div>
<section class='flex flex-wrap items-end justify-center my-4 space-x-2 space-y-2 font-mono text-sm'>
</section>
<!-- What goes in this file will at the very end of the main div -->
</main>
</div>
</div>
<footer class='flex items-center justify-center mt-2 mb-8 space-x-4 text-center text-gray-800'>
<div>
<a href='' title='Go to Home page'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-6 h-6 hover:text-purple-700' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6'></path>
</svg>
</a>
</div>
<div>
<a href='-/all' title='View Index'>
<svg class='w-6 h-6 hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4'>
</path>
</svg>
</a>
</div>
<div>
<a href='https://emanote.srid.ca' target='_blank' title='Generated by Emanote 0.8.1.10'>
<img class='w-6 h-6 hover:text-purple-700' src='_emanote-static/emanote-logo.svg' />
</a>
</div>
<div>
<a href='-/tags' title='View tags'>
<svg class='w-6 h-6 hover:text-purple-700' fill='none' stroke='currentColor' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z'>
</path>
</svg>
</a>
</div>
<div>
<a href='-/tasks' title='View tasks'>
<svg xmlns='http://www.w3.org/2000/svg' class='w-6 h-6 hover:text-purple-700' fill='none' viewBox='0 0 24 24' stroke='currentColor'>
<path stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z'></path>
</svg>
</a>
</div>
</footer>
</div>
<div id='stork-search-container' class='hidden fixed w-screen h-screen inset-0 backdrop-filter backdrop-blur-sm'>
<div class='fixed w-screen h-screen inset-0' onclick='window.emanote.stork.toggleSearch()'></div>
<div class='container mx-auto p-10 mt-10'>
<div class='stork-wrapper-flat container mx-auto'>
<input id='stork-search-input' data-stork='emanote-search' class='stork-input' placeholder='Search (Ctrl+K) ...' />
<div data-stork='emanote-search-output' class='stork-output'></div>
</div>
</div>
</div>
</body>
</html>