From 8b42cd062e395acc3cb26a404b6b16dc8d5b9529 Mon Sep 17 00:00:00 2001
From: Alnotz <fredh0001@net-c.fr>
Date: Sat, 30 Oct 2021 01:29:03 +0200
Subject: [PATCH] =?UTF-8?q?Distinction=20du=20th=C3=A8me?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 BEPO/BEPO.sh  | 157 +++++++++++++++++++---------
 BEPO/BEPO.svg | 277 ++++++++++++++++++++++++++++++--------------------
 2 files changed, 278 insertions(+), 156 deletions(-)

diff --git a/BEPO/BEPO.sh b/BEPO/BEPO.sh
index 944e02f..65cf536 100644
--- a/BEPO/BEPO.sh
+++ b/BEPO/BEPO.sh
@@ -29,7 +29,6 @@ ALTSH=('&#x00b6;' '&#x201e;' '&#x201c;' '&#x201d;' '&#x2264;' '&#x2265;' '&#x201
 ########################################################
 echo '''<?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg 
-  xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:svg="http://www.w3.org/2000/svg" 
   xmlns="http://www.w3.org/2000/svg" 
   width="1680" 
@@ -39,49 +38,111 @@ echo '''<?xml version="1.0" encoding="UTF-8" standalone="no"?>
   <title>Disposition BÉPO</title>
   <desc>Personalisation du clavier BÉPO avec la norme ISO/IEC 9995-7.</desc>
   <style>
-    /*Style d’ensemble*/
-    svg
+    @media (prefers-color-scheme: light)
     {
-      background: #e1e1e1;
-      color: #908f90;
+      /*Style d’ensemble*/
+      svg
+      {
+        background: #e1e1e1;
+        color: #908f90;
+      }
+      /*Style de touche*/
+      rect
+      {
+        fill: #fffcf7;
+        stroke: #a09fa0;
+      }
+      /*Styles des caractères*/
+      text
+      {
+        font-family: monospace;
+        font-size: 40px;
+      }
+      text.base
+      {
+        fill: purple;
+      }
+      text.shift
+      {
+        fill: blue;
+      }
+      text.alt
+      {
+        fill: green;
+      }
+      text.combo
+      {
+        fill: orange;
+      }
+      text.dead
+      {
+        font-weight: bold;
+      }
+      image#cc_circle
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
+      image#cc_by
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
     }
-    /*Styles des caractères*/
-    text
+    @media (prefers-color-scheme: dark)
     {
-      font-family: monospace;
-      font-size: 40px;
-    }
-    text.base
-    {
-      fill: purple;
-    }
-    text.shift
-    {
-      fill: blue;
-    }
-    text.alt
-    {
-      fill: green;
-    }
-    text.combo
-    {
-      fill: orange;
-    }
-    text.dead
-    {
-      font-weight: bold;
-    }
-    image#cc_circle
-    {
-      height: 22px!important;
-      margin-left: 3px;
-      vertical-align: text-bottom;
-    }
-    image#cc_zero
-    {
-      height: 22px!important;
-      margin-left: 3px;
-      vertical-align: text-bottom;
+      /*Style d’ensemble*/
+      svg
+      {
+        background: #908f90;
+        color: #e1e1e1;
+      }
+      /*Style de touche*/
+      rect
+      {
+        fill: #a09fa0;
+        stroke: #fffcf7;
+      }
+      /*Styles des caractères*/
+      text
+      {
+        font-family: monospace;
+        font-size: 40px;
+      }
+      text.base
+      {
+        fill: purple;
+      }
+      text.shift
+      {
+        fill: blue;
+      }
+      text.alt
+      {
+        fill: green;
+      }
+      text.combo
+      {
+        fill: orange;
+      }
+      text.dead
+      {
+        font-weight: bold;
+      }
+      image#cc_circle
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
+      image#cc_by
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
     }
   </style>''' > $DEST
 ########################################################
@@ -96,7 +157,7 @@ do
   do
     KX=$((10+$KC*120))
     echo '  <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
-    echo '    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST
+    echo '    <rect x="0" y="0" width="100" height="100" rx="10"/>' >> $DEST
     echo '    <text class="base" x="10" y="90">'${BASE[$(($KC+14*$KL))]}'</text>' >> $DEST
     echo '    <text class="shift" x="10" y="45">'${SHIFT[$(($KC+14*$KL))]}'</text>' >> $DEST
     echo '    <text class="alt" x="50" y="90">'${ALTER[$(($KC+14*$KL))]}'</text>' >> $DEST
@@ -111,7 +172,7 @@ for KC in {0..2}
 do
   KX=$((10+$KC*120))
   echo '  <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
-  echo '    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST
+  echo '    <rect x="0" y="0" width="100" height="100" rx="10"/>' >> $DEST
   echo '    <text class="base" x="10" y="90">'${HBASE[$(($KC))]}'</text>' >> $DEST
   echo '    <text class="shift" x="10" y="45"></text>' >> $DEST
   echo '    <text class="alt" x="50" y="90"></text>' >> $DEST
@@ -122,7 +183,7 @@ for KC in {10..13}
 do
   KX=$((10+$KC*120))
   echo '  <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
-  echo '    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST
+  echo '    <rect x="0" y="0" width="100" height="100" rx="10"/>' >> $DEST
   echo '    <text class="base" x="10" y="90">'${HBASE[$(($KC-7))]}'</text>' >> $DEST
   echo '    <text class="shift" x="10" y="45"></text>' >> $DEST
   echo '    <text class="alt" x="50" y="90"></text>' >> $DEST
@@ -133,7 +194,7 @@ done
 KC=3
 KX=$((10+$KC*120))
 echo '  <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
-echo '    <rect x="0" y="0" width="820" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST
+echo '    <rect x="0" y="0" width="820" height="100" rx="10"/>' >> $DEST
 echo '    <text class="base" x="10" y="80">&#x2423;</text>' >> $DEST
 echo '    <text class="shift" x="10" y="35">&#x2336;</text>' >> $DEST
 echo '    <text class="alt" x="770" y="80">_</text>' >> $DEST
@@ -145,7 +206,7 @@ KY=$((10+$KL*120))
 KC=13
 KX=$((10+$KC*120))
 echo '  <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
-echo '    <rect x="0" y="0" width="100" height="220" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST
+echo '    <rect x="0" y="0" width="100" height="220" rx="10"/>' >> $DEST
 echo '    <text class="base" x="10" y="190">&#9094;</text>' >> $DEST
 echo '    <text class="shift" x="10" y="45">&#9166;</text>' >> $DEST
 echo '    <text class="alt" x="50" y="190"></text>' >> $DEST
@@ -157,7 +218,7 @@ KY=$((10+$KL*120))
 KC=12
 KX=$((10+$KC*120))
 echo '  <g id="keyl'$KL'c'$KC'" transform="translate('$KX' '$KY')">' >> $DEST
-echo '    <rect x="0" y="0" width="220" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>' >> $DEST
+echo '    <rect x="0" y="0" width="220" height="100" rx="10"/>' >> $DEST
 echo '    <text class="base" x="10" y="90">&#8679;</text>' >> $DEST
 echo '    <text class="shift" x="10" y="45"></text>' >> $DEST
 echo '    <text class="alt" x="150" y="90"></text>' >> $DEST
@@ -170,7 +231,7 @@ echo '''  <g xmlns:cc="http://creativecommons.org/ns#" xmlns:dct="http://purl.or
     </text>
     <a href="https://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">
       <image x="48em" y="-1em" id="cc_circle" href="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"/>
-      <image x="calc(48em + 22px)" y="-1em" id="cc_zero" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/>
+      <image x="calc(48em + 22px)" y="-1em" id="cc_by" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/>
     </a>
   </g>''' >> $DEST
 echo '</svg>' >> $DEST
diff --git a/BEPO/BEPO.svg b/BEPO/BEPO.svg
index b5f7d83..742cd4e 100644
--- a/BEPO/BEPO.svg
+++ b/BEPO/BEPO.svg
@@ -1,6 +1,5 @@
 <?xml version="1.0" encoding="UTF-8" standalone="no"?>
 <svg 
-  xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:svg="http://www.w3.org/2000/svg" 
   xmlns="http://www.w3.org/2000/svg" 
   width="1680" 
@@ -10,508 +9,570 @@
   <title>Disposition BÉPO</title>
   <desc>Personalisation du clavier BÉPO avec la norme ISO/IEC 9995-7.</desc>
   <style>
-    /*Style d’ensemble*/
-    svg
+    @media (prefers-color-scheme: light)
     {
-      background: #e1e1e1;
-      color: #908f90;
+      /*Style d’ensemble*/
+      svg
+      {
+        background: #e1e1e1;
+        color: #908f90;
+      }
+      /*Style de touche*/
+      rect
+      {
+        fill: #fffcf7;
+        stroke: #a09fa0;
+      }
+      /*Styles des caractères*/
+      text
+      {
+        font-family: monospace;
+        font-size: 40px;
+      }
+      text.base
+      {
+        fill: purple;
+      }
+      text.shift
+      {
+        fill: blue;
+      }
+      text.alt
+      {
+        fill: green;
+      }
+      text.combo
+      {
+        fill: orange;
+      }
+      text.dead
+      {
+        font-weight: bold;
+      }
+      image#cc_circle
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
+      image#cc_by
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
     }
-    /*Styles des caractères*/
-    text
+    @media (prefers-color-scheme: dark)
     {
-      font-family: monospace;
-      font-size: 40px;
-    }
-    text.base
-    {
-      fill: purple;
-    }
-    text.shift
-    {
-      fill: blue;
-    }
-    text.alt
-    {
-      fill: green;
-    }
-    text.combo
-    {
-      fill: orange;
-    }
-    text.dead
-    {
-      font-weight: bold;
-    }
-    image#cc_circle
-    {
-      height: 22px!important;
-      margin-left: 3px;
-      vertical-align: text-bottom;
-    }
-    image#cc_zero
-    {
-      height: 22px!important;
-      margin-left: 3px;
-      vertical-align: text-bottom;
+      /*Style d’ensemble*/
+      svg
+      {
+        background: #908f90;
+        color: #e1e1e1;
+      }
+      /*Style de touche*/
+      rect
+      {
+        fill: #a09fa0;
+        stroke: #fffcf7;
+      }
+      /*Styles des caractères*/
+      text
+      {
+        font-family: monospace;
+        font-size: 40px;
+      }
+      text.base
+      {
+        fill: purple;
+      }
+      text.shift
+      {
+        fill: blue;
+      }
+      text.alt
+      {
+        fill: green;
+      }
+      text.combo
+      {
+        fill: orange;
+      }
+      text.dead
+      {
+        font-weight: bold;
+      }
+      image#cc_circle
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
+      image#cc_by
+      {
+        height: 22px!important;
+        margin-left: 3px;
+        vertical-align: text-bottom;
+      }
     }
   </style>
   <g id="keyl0c0" transform="translate(10 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">$</text>
     <text class="shift" x="10" y="45">#</text>
     <text class="alt" x="50" y="90">&#x2013;</text>
     <text class="combo" x="50" y="45">&#x00b6;</text>
   </g>
   <g id="keyl0c1" transform="translate(130 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">"</text>
     <text class="shift" x="10" y="45">1</text>
     <text class="alt" x="50" y="90">&#x2014;</text>
     <text class="combo" x="50" y="45">&#x201e;</text>
   </g>
   <g id="keyl0c2" transform="translate(250 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">«</text>
     <text class="shift" x="10" y="45">2</text>
     <text class="alt" x="50" y="90">&lt;</text>
     <text class="combo" x="50" y="45">&#x201c;</text>
   </g>
   <g id="keyl0c3" transform="translate(370 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">»</text>
     <text class="shift" x="10" y="45">3</text>
     <text class="alt" x="50" y="90">&gt;</text>
     <text class="combo" x="50" y="45">&#x201d;</text>
   </g>
   <g id="keyl0c4" transform="translate(490 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">(</text>
     <text class="shift" x="10" y="45">4</text>
     <text class="alt" x="50" y="90">[</text>
     <text class="combo" x="50" y="45">&#x2264;</text>
   </g>
   <g id="keyl0c5" transform="translate(610 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">)</text>
     <text class="shift" x="10" y="45">5</text>
     <text class="alt" x="50" y="90">]</text>
     <text class="combo" x="50" y="45">&#x2265;</text>
   </g>
   <g id="keyl0c6" transform="translate(730 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">@</text>
     <text class="shift" x="10" y="45">6</text>
     <text class="alt" x="50" y="90">^</text>
     <text class="combo" x="50" y="45">&#x2016;</text>
   </g>
   <g id="keyl0c7" transform="translate(850 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">+</text>
     <text class="shift" x="10" y="45">7</text>
     <text class="alt" x="50" y="90">±</text>
     <text class="combo" x="50" y="45">&#x00ac;</text>
   </g>
   <g id="keyl0c8" transform="translate(970 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">-</text>
     <text class="shift" x="10" y="45">8</text>
     <text class="alt" x="50" y="90">&#x002d;</text>
     <text class="combo" x="50" y="45">&#x00bc;</text>
   </g>
   <g id="keyl0c9" transform="translate(1090 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">/</text>
     <text class="shift" x="10" y="45">9</text>
     <text class="alt" x="50" y="90">÷</text>
     <text class="combo" x="50" y="45">&#x00bd;</text>
   </g>
   <g id="keyl0c10" transform="translate(1210 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">*</text>
     <text class="shift" x="10" y="45">0</text>
     <text class="alt" x="50" y="90">×</text>
     <text class="combo" x="50" y="45">&#x00be;</text>
   </g>
   <g id="keyl0c11" transform="translate(1330 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">=</text>
     <text class="shift" x="10" y="45">°</text>
     <text class="alt" x="50" y="90">&#x2260;</text>
     <text class="combo" x="50" y="45">&#x2032;</text>
   </g>
   <g id="keyl0c12" transform="translate(1450 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">%</text>
     <text class="shift" x="10" y="45">`</text>
     <text class="alt" x="50" y="90">&#x2030;</text>
     <text class="combo" x="50" y="45">&#x2033;</text>
   </g>
   <g id="keyl0c13" transform="translate(1570 10)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#9003;</text>
     <text class="shift" x="10" y="45"> </text>
     <text class="alt" x="50" y="90"> </text>
     <text class="combo" x="50" y="45"> </text>
   </g>
   <g id="keyl1c0" transform="translate(10 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#8677;</text>
     <text class="shift" x="10" y="45">&#8676;</text>
     <text class="alt" x="50" y="90"> </text>
     <text class="combo" x="50" y="45"> </text>
   </g>
   <g id="keyl1c1" transform="translate(130 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">b</text>
     <text class="shift" x="10" y="45">B</text>
     <text class="alt" x="50" y="90">|</text>
     <text class="combo" x="50" y="45">_</text>
   </g>
   <g id="keyl1c2" transform="translate(250 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">é</text>
     <text class="shift" x="10" y="45">É</text>
     <text class="alt" x="50" y="90">&#x0301;&#x25cc;</text>
     <text class="combo" x="50" y="45">’</text>
   </g>
   <g id="keyl1c3" transform="translate(370 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">p</text>
     <text class="shift" x="10" y="45">P</text>
     <text class="alt" x="50" y="90">&amp;</text>
     <text class="combo" x="50" y="45">§</text>
   </g>
   <g id="keyl1c4" transform="translate(490 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">o</text>
     <text class="shift" x="10" y="45">O</text>
     <text class="alt" x="50" y="90">œ</text>
     <text class="combo" x="50" y="45">Œ</text>
   </g>
   <g id="keyl1c5" transform="translate(610 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">è</text>
     <text class="shift" x="10" y="45">È</text>
     <text class="alt" x="50" y="90">&#x0300;&#x25cc;</text>
     <text class="combo" x="50" y="45">`</text>
   </g>
   <g id="keyl1c6" transform="translate(730 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#770;&#x25cc;</text>
     <text class="shift" x="10" y="45">!</text>
     <text class="alt" x="50" y="90">¡</text>
     <text class="combo" x="50" y="45">^</text>
   </g>
   <g id="keyl1c7" transform="translate(850 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">v</text>
     <text class="shift" x="10" y="45">V</text>
     <text class="alt" x="50" y="90">&#x030c;&#x25cc;</text>
     <text class="combo" x="50" y="45">&#x02c7;</text>
   </g>
   <g id="keyl1c8" transform="translate(970 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">d</text>
     <text class="shift" x="10" y="45">D</text>
     <text class="alt" x="50" y="90">&#x2212;</text>
     <text class="combo" x="50" y="45">&#x221d;</text>
   </g>
   <g id="keyl1c9" transform="translate(1090 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">l</text>
     <text class="shift" x="10" y="45">L</text>
     <text class="alt" x="50" y="90">&#x00f8;</text>
     <text class="combo" x="50" y="45">£</text>
   </g>
   <g id="keyl1c10" transform="translate(1210 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">j</text>
     <text class="shift" x="10" y="45">J</text>
     <text class="alt" x="50" y="90">ü</text>
     <text class="combo" x="50" y="45">Ü</text>
   </g>
   <g id="keyl1c11" transform="translate(1330 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">z</text>
     <text class="shift" x="10" y="45">Z</text>
     <text class="alt" x="50" y="90">&#x0336;&#x25cc;</text>
     <text class="combo" x="50" y="45">&#x0335;&#x25cc;</text>
   </g>
   <g id="keyl1c12" transform="translate(1450 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">w</text>
     <text class="shift" x="10" y="45">W</text>
     <text class="alt" x="50" y="90">ö</text>
     <text class="combo" x="50" y="45">Ö</text>
   </g>
   <g id="keyl1c13" transform="translate(1570 130)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#9094;</text>
     <text class="shift" x="10" y="45">&#9166;</text>
     <text class="alt" x="50" y="90">&#9094;</text>
     <text class="combo" x="50" y="45">&#9166;</text>
   </g>
   <g id="keyl2c0" transform="translate(10 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#8683;</text>
     <text class="shift" x="10" y="45"> </text>
     <text class="alt" x="50" y="90"> </text>
     <text class="combo" x="50" y="45"> </text>
   </g>
   <g id="keyl2c1" transform="translate(130 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">a</text>
     <text class="shift" x="10" y="45">A</text>
     <text class="alt" x="50" y="90">æ</text>
     <text class="combo" x="50" y="45">Æ</text>
   </g>
   <g id="keyl2c2" transform="translate(250 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">u</text>
     <text class="shift" x="10" y="45">U</text>
     <text class="alt" x="50" y="90">ù</text>
     <text class="combo" x="50" y="45">Ù</text>
   </g>
   <g id="keyl2c3" transform="translate(370 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">i</text>
     <text class="shift" x="10" y="45">I</text>
     <text class="alt" x="50" y="90">&#x0308;&#x25cc;</text>
     <text class="combo" x="50" y="45">&#x0307;&#x25cc;</text>
   </g>
   <g id="keyl2c4" transform="translate(490 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">e</text>
     <text class="shift" x="10" y="45">E</text>
     <text class="alt" x="50" y="90">€</text>
     <text class="combo" x="50" y="45">&#x00a4;</text>
   </g>
   <g id="keyl2c5" transform="translate(610 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">,</text>
     <text class="shift" x="10" y="45">;</text>
     <text class="alt" x="50" y="90">'</text>
     <text class="combo" x="50" y="45">&#x0326;&#x25cc;</text>
   </g>
   <g id="keyl2c6" transform="translate(730 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">c</text>
     <text class="shift" x="10" y="45">C</text>
     <text class="alt" x="50" y="90">&#x0327;&#x25cc;</text>
     <text class="combo" x="50" y="45">©</text>
   </g>
   <g id="keyl2c7" transform="translate(850 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">t</text>
     <text class="shift" x="10" y="45">T</text>
     <text class="alt" x="50" y="90">&#x1d49;</text>
     <text class="combo" x="50" y="45">™</text>
   </g>
   <g id="keyl2c8" transform="translate(970 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">s</text>
     <text class="shift" x="10" y="45">S</text>
     <text class="alt" x="50" y="90">ß</text>
     <text class="combo" x="50" y="45">&#x017f;</text>
   </g>
   <g id="keyl2c9" transform="translate(1090 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">r</text>
     <text class="shift" x="10" y="45">R</text>
     <text class="alt" x="50" y="90">&#x0306;&#x25cc;</text>
     <text class="combo" x="50" y="45">&#x00ae;</text>
   </g>
   <g id="keyl2c10" transform="translate(1210 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">n</text>
     <text class="shift" x="10" y="45">N</text>
     <text class="alt" x="50" y="90">&#x0303;&#x25cc;</text>
     <text class="combo" x="50" y="45">~</text>
   </g>
   <g id="keyl2c11" transform="translate(1330 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">m</text>
     <text class="shift" x="10" y="45">M</text>
     <text class="alt" x="50" y="90">&#x0304;&#x25cc;</text>
     <text class="combo" x="50" y="45">-</text>
   </g>
   <g id="keyl2c12" transform="translate(1450 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">ç</text>
     <text class="shift" x="10" y="45">Ç</text>
     <text class="alt" x="50" y="90">©</text>
     <text class="combo" x="50" y="45">&#x1F12F;</text>
   </g>
   <g id="keyl2c13" transform="translate(1570 250)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#9094;</text>
     <text class="shift" x="10" y="45">&#9166;</text>
     <text class="alt" x="50" y="90">&#9094;</text>
     <text class="combo" x="50" y="45">&#9166;</text>
   </g>
   <g id="keyl3c0" transform="translate(10 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#8679;</text>
     <text class="shift" x="10" y="45"> </text>
     <text class="alt" x="50" y="90"> </text>
     <text class="combo" x="50" y="45"> </text>
   </g>
   <g id="keyl3c1" transform="translate(130 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">ê</text>
     <text class="shift" x="10" y="45">Ê</text>
     <text class="alt" x="50" y="90">/</text>
     <text class="combo" x="50" y="45">^</text>
   </g>
   <g id="keyl3c2" transform="translate(250 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">à</text>
     <text class="shift" x="10" y="45">À</text>
     <text class="alt" x="50" y="90">\</text>
     <text class="combo" x="50" y="45">,</text>
   </g>
   <g id="keyl3c3" transform="translate(370 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">y</text>
     <text class="shift" x="10" y="45">Y</text>
     <text class="alt" x="50" y="90">{</text>
     <text class="combo" x="50" y="45">‘</text>
   </g>
   <g id="keyl3c4" transform="translate(490 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">x</text>
     <text class="shift" x="10" y="45">X</text>
     <text class="alt" x="50" y="90">}</text>
     <text class="combo" x="50" y="45">’</text>
   </g>
   <g id="keyl3c5" transform="translate(610 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">.</text>
     <text class="shift" x="10" y="45">:</text>
     <text class="alt" x="50" y="90">…</text>
     <text class="combo" x="50" y="45">⋅</text>
   </g>
   <g id="keyl3c6" transform="translate(730 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">k</text>
     <text class="shift" x="10" y="45">K</text>
     <text class="alt" x="50" y="90">~</text>
     <text class="combo" x="50" y="45">&#x2011;</text>
   </g>
   <g id="keyl3c7" transform="translate(850 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">’</text>
     <text class="shift" x="10" y="45">?</text>
     <text class="alt" x="50" y="90">¿</text>
     <text class="combo" x="50" y="45">&#x0313;&#x25cc;</text>
   </g>
   <g id="keyl3c8" transform="translate(970 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">q</text>
     <text class="shift" x="10" y="45">Q</text>
     <text class="alt" x="50" y="90">&#x030a;&#x25cc;</text>
     <text class="combo" x="50" y="45">&#x0315;&#x25cc;</text>
   </g>
   <g id="keyl3c9" transform="translate(1090 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">g</text>
     <text class="shift" x="10" y="45">G</text>
     <text class="alt" x="50" y="90">µ</text>
     <text class="combo" x="50" y="45">&#x2020;</text>
   </g>
   <g id="keyl3c10" transform="translate(1210 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">h</text>
     <text class="shift" x="10" y="45">H</text>
     <text class="alt" x="50" y="90">&#x0323;&#x25cc;</text>
     <text class="combo" x="50" y="45">&#x2021;</text>
   </g>
   <g id="keyl3c11" transform="translate(1330 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">f</text>
     <text class="shift" x="10" y="45">F</text>
     <text class="alt" x="50" y="90">&#x0328;&#x25cc;</text>
     <text class="combo" x="50" y="45">&#x2022;</text>
   </g>
   <g id="keyl3c12" transform="translate(1450 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#8679;</text>
     <text class="shift" x="10" y="45">&#8679;</text>
     <text class="alt" x="50" y="90">&#8679;</text>
     <text class="combo" x="50" y="45">&#8679;</text>
   </g>
   <g id="keyl3c13" transform="translate(1570 370)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#8679;</text>
     <text class="shift" x="10" y="45">&#8679;</text>
     <text class="alt" x="50" y="90">&#8679;</text>
     <text class="combo" x="50" y="45">&#8679;</text>
   </g>
   <g id="keyl4c0" transform="translate(10 490)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#x2388;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="50" y="90"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl4c1" transform="translate(130 490)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#x2318;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="50" y="90"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl4c2" transform="translate(250 490)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#x2387;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="50" y="90"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl4c10" transform="translate(1210 490)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#x21ee;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="50" y="90"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl4c11" transform="translate(1330 490)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#x2318;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="50" y="90"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl4c12" transform="translate(1450 490)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#x2325;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="50" y="90"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl4c13" transform="translate(1570 490)">
-    <rect x="0" y="0" width="100" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#x2388;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="50" y="90"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl4c3" transform="translate(370 490)">
-    <rect x="0" y="0" width="820" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="820" height="100" rx="10"/>
     <text class="base" x="10" y="80">&#x2423;</text>
     <text class="shift" x="10" y="35">&#x2336;</text>
     <text class="alt" x="770" y="80">_</text>
     <text class="combo" x="770" y="35">&#x237d;</text>
   </g>
   <g id="keyl1c13" transform="translate(1570 130)">
-    <rect x="0" y="0" width="100" height="220" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="100" height="220" rx="10"/>
     <text class="base" x="10" y="190">&#9094;</text>
     <text class="shift" x="10" y="45">&#9166;</text>
     <text class="alt" x="50" y="190"></text>
     <text class="combo" x="50" y="45"></text>
   </g>
   <g id="keyl3c12" transform="translate(1450 370)">
-    <rect x="0" y="0" width="220" height="100" fill="#fffcf7" stroke="#a09fa0" rx="10"/>
+    <rect x="0" y="0" width="220" height="100" rx="10"/>
     <text class="base" x="10" y="90">&#8679;</text>
     <text class="shift" x="10" y="45"></text>
     <text class="alt" x="150" y="90"></text>
@@ -523,7 +584,7 @@
     </text>
     <a href="https://creativecommons.org/publicdomain/zero/1.0?ref=chooser-v1" target="_blank" rel="license noopener noreferrer" style="display:inline-block;">
       <image x="48em" y="-1em" id="cc_circle" href="https://mirrors.creativecommons.org/presskit/icons/cc.svg?ref=chooser-v1"/>
-      <image x="calc(48em + 22px)" y="-1em" id="cc_zero" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/>
+      <image x="calc(48em + 22px)" y="-1em" id="cc_by" href="https://mirrors.creativecommons.org/presskit/icons/by.svg?ref=chooser-v1"/>
     </a>
   </g>
 </svg>