Better display of images, especially generated trees

Images now have a default maximum width of 100%.

Generated tree images now must be marked with class `gentree' and will
be color-inverted (i.e. their black parts will be white, while the
transparent background remains transparent) with dark themes.

The TOC and the language dropdown have been inverted.

web/dart/reorganize_html.dart

@@ -126,12 +126,12 @@ Future<Element> makeNavbar() async {
           ..attributes['href'] = '/'
           ..append(makeIcon(['fas', 'fa-home']))));
 
-  // TOC icon
-  navbar_content.append(await makeTocDropDown());
-
   // Add languages
   navbar_content.append(await makeLanguages());
 
+  // TOC icon
+  navbar_content.append(await makeTocDropDown());
+
   // Share icon
   navbar_content.append(await makeShare());
 

web/eittland.org

@@ -195,7 +195,6 @@
   similaire  à celui  du sud  de l’Angleterre,  grâce au  Gulf Stream  malgré sa
   latitude élevée, similaire à celle de l’Écosse.
 
-  #+ATTR_HTML: :width 100%
   #+ATTR_LATEX: :float sideways
   #+CAPTION: Biomes eittlandais
   #+NAME: img:map-biomes
@@ -343,13 +342,11 @@
     Kalmar reconnu Eittlainde comme pays  indépendant, mais intégra tout de même
     les colonies groënlandaises de l’Eittlande à l’Union.
 
-    #+ATTR_HTML: :width 100%
     #+ATTR_LATEX: :float sideways
     #+CAPTION: États eittlandais
     #+NAME: img:eittland-states
     [[file:img/eittland/map-political.png][file:img/eittland/map-political.png]]
 
-    #+ATTR_HTML: :width 100%
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Provinces eittlandaises
     #+NAME: img:eittland-provinces
@@ -459,7 +456,6 @@
     l’Écosse et le nord de l’Angleterre.
 
     #+NAME: img:map-world
-    #+ATTR_HTML: :width 100%
     #+CAPTION: Emplacement d’Eittlande dans l’Océan Atlantique.
     [[file:img/eittland/map-world.jpg][file:img/eittland/map-world.jpg]]
 
@@ -467,7 +463,6 @@
     principaux lieux et principales villes du pays avec la carte [[img:map-simple]]
 
     #+NAME: img:map-simple
-    #+ATTR_HTML: :width 100%
     #+CAPTION: Carte simplifiée d’Eittlande
     [[file:img/eittland/map-simple.jpg][file:img/eittland/map-simple.jpg]]
 
@@ -476,7 +471,6 @@
 
     #+NAME: img:map-typo
     #+ATTR_LATEX: :float sideways
-    #+ATTR_HTML: :width 100%
     #+CAPTION: Topologie d’Eittlande
     [[file:img/eittland/map-hq.jpg][file:img/eittland/map-hq.jpg]]
 
@@ -980,7 +974,7 @@
       $input
     #+END_SRC
     #+NAME: arbre:vowels
-    #+ATTR_HTML: :alt Arbre des voyelles de l’Eittlandais :width 100%
+    #+ATTR_HTML: :alt Arbre des voyelles de l’Eittlandais :class gentree
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Arbre des caractéristiques distinctives des voyelles de l’Eittlandais
     #+RESULTS[401d3c4bfc06b5ba8a491d6cad9f4d624edc4d9f]:
@@ -1212,7 +1206,7 @@
       $input
     #+END_SRC
     #+NAME: arbre:cons
-    #+ATTR_HTML: :alt Arbre des consonnes de l’Eittlandais :width 100%
+    #+ATTR_HTML: :alt Arbre des consonnes de l’Eittlandais :class gentree
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Arbre des caractéristiques distinctives des consonnes de l’Eittlandais
     #+RESULTS[c8ade388ef8459b89ca4c74696b0bd21fba46d34]:

web/en/nyqy.org

@@ -440,7 +440,7 @@
       $input
     #+END_SRC
     #+NAME: arbre:vowels
-    #+ATTR_HTML: :alt Arbre des voyelles du Ñyqy :align center
+    #+ATTR_HTML: :alt Arbre des voyelles du Ñyqy :align center :class gentree
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Arbre des caractéristiques des voyelles du Ñyqy
     #+RESULTS[e1f2ca12b3da614823629b888c369ed0ddf3e4a5]:
@@ -483,7 +483,7 @@
       $input
     #+END_SRC
     #+NAME: arbre:cons
-    #+ATTR_HTML: :alt Arbre des consonnes du Ñyqy :align center
+    #+ATTR_HTML: :alt Arbre des consonnes du Ñyqy :align center :class gentree
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Arbre des caractéristiques des consonnes du Ñyqy
     #+RESULTS[ea6462370981c1a011d17d703545ec6e6f38f4de]:

web/nyqy.org

@@ -543,14 +543,17 @@
       (conlanging/tree-to-dot nyqy-vowels)
     #+END_SRC
 
+    #+RESULTS[7197a00f9fd897443b1727910097ffe6aceb2ada]: vow-tree
+    : graph{graph[dpi=300];node[shape=plaintext];graph[bgcolor="transparent"];0[label="[vowel]"];1[label="[back]"];0 -- 1;11[label="[tense]"];1 -- 11;111[label="[high]"];11 -- 111;1111[label="/u/"];111 -- 1111;112[label="{high}"];11 -- 112;1121[label="/ɤ/"];112 -- 1121;12[label="{tense}"];1 -- 12;121[label="[high]"];12 -- 121;1211[label="/ʊ/"];121 -- 1211;122[label="{high}"];12 -- 122;1221[label="/ɔ/"];122 -- 1221;2[label="{back}"];0 -- 2;21[label="[tense]"];2 -- 21;211[label="[high]"];21 -- 211;2111[label="/y/"];211 -- 2111;212[label="{high}"];21 -- 212;2121[label="/ø/"];212 -- 2121;22[label="{tense}"];2 -- 22;221[label="[high]"];22 -- 221;2211[label="/ɪ/"];221 -- 2211;222[label="{high}"];22 -- 222;2221[label="/ɛ/"];222 -- 2221;}
+
     #+BEGIN_SRC dot :file img/nyqy/vowel-feature-tree.png :var input=vow-tree :exports results :eval yes
       $input
     #+END_SRC
     #+NAME: arbre:vowels
-    #+ATTR_HTML: :alt Arbre des voyelles du Ñyqy :align center :width 100%
+    #+ATTR_HTML: :alt Arbre des voyelles du Ñyqy :align center :class gentree
     #+CAPTION: Arbre des caractéristiques des voyelles du Ñyqy
     #+RESULTS:
-    : graph{graph[dpi=300];node[shape=plaintext];graph[bgcolor="transparent"];0[label="N"];1[label="N"];0 -- 1;11[label="GEN"];1 -- 11;12[label="N"];1 -- 12;121[label="Adj"];12 -- 121;122[label="N"];12 -- 122;1221[label="Dem"];122 -- 1221;1222[label="N"];122 -- 1222;12221[label="Num"];1222 -- 12221;12222[label="N"];1222 -- 12222;122221[label="Poss"];12222 -- 122221;122222[label="N"];12222 -- 122222;12223[label="Num"];1222 -- 12223;123[label="Adj"];12 -- 123;2[label="Rel"];0 -- 2;}
+    [[file:img/nyqy/vowel-feature-tree.png]]
 
     Voici une description des voyelles du Ñyqy :
     - e ::  il s’agit de la  voyelle antérieure mi-ouverte non-arrondie  [ɛ] que
@@ -648,7 +651,7 @@
       $input
     #+END_SRC
     #+NAME: arbre:cons
-    #+ATTR_HTML: :alt Arbre des consonnes du Ñyqy :align center :width 100%
+    #+ATTR_HTML: :alt Arbre des consonnes du Ñyqy :align center :class gentree
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Arbre des caractéristiques des consonnes du Ñyqy
     #+RESULTS:
@@ -1009,7 +1012,7 @@
    #   $input
    # #+END_SRC
    # #+NAME: arbre:syntaxe:basique
-   # #+attr_html: :alt Arbre de syntaxe basique du Ñyqy :width 800px
+   # #+attr_html: :alt Arbre de syntaxe basique du Ñyqy :class gentree
    # #+CAPTION: Arbre de syntaxe basique du Ñyqy
    # #+RESULTS:
    # [[file:img/nyqy/basic-syntax.png]]
@@ -1099,11 +1102,11 @@
     #+RESULTS[b65d47c0e3188121f8bcbde11627477b0a6b2904]: nom-syntax-tree
     : graph{graph[dpi=300];node[shape=plaintext];graph[bgcolor="transparent"];0[label="N'"];1[label="N'"];0 -- 1;11[label="GEN"];1 -- 11;12[label="N'"];1 -- 12;121[label="Adj"];12 -- 121;122[label="N'"];12 -- 122;1221[label="Dem"];122 -- 1221;1222[label="N'"];122 -- 1222;12221[label="Num₁₂"];1222 -- 12221;12222[label="N'"];1222 -- 12222;122221[label="Poss"];12222 -- 122221;122222[label="N"];12222 -- 122222;12223[label="Num₆"];1222 -- 12223;123[label="Adj"];12 -- 123;2[label="Rel"];0 -- 2;}
 
-    #+BEGIN_SRC dot :file img/nyqy/syntax-nominal-clauses.png :var input=nom-syntax-tree :exports results :eval yes :cache yes
+    #+BEGIN_SRC dot :file img/nyqy/syntax-nominal-clauses.png :var input=nom-syntax-tree :exports results :eval yes :cache yes :class gentree
       $input
     #+END_SRC
     #+NAME: nom-clause-syntax-tree
-    #+ATTR_HTML: :alt Arbre syntaxique des clauses nominales du Ñyqy :align center
+    #+ATTR_HTML: :alt Arbre syntaxique des clauses nominales du Ñyqy :align center :class gentree
     #+ATTR_LATEX: :height 12cm
     #+CAPTION: Arbre syntaxique des clauses nominales du Ñyqy
     #+RESULTS[901e0acb85c38044b47c5a3bacee9aaf7df72251]:

web/style/style.scss

@@ -119,6 +119,11 @@ $postamble-height: 55px;
     th {
         background: darken($light, 5%);
     }
+
+    .gentree {
+        filter: invert(0%);
+        transition: filter 1s ease-in-out;
+    }
 }
 
 .dark, .black {
@@ -177,8 +182,9 @@ $postamble-height: 55px;
         background: darken($dark, 2.5%);
     }
 
-    img {
+    .gentree {
-        background: fade-out($light, 0.2);
+        filter: invert(100%);
+        transition: filter 1s ease-in-out;
     }
 }
 
@@ -470,4 +476,5 @@ th, td {
 
 img {
     max-height: 600px;
+    max-width: 100%;
 }

web/taso.org

@@ -251,7 +251,7 @@
       $input
     #+END_SRC
     #+NAME: arbre:vow
-    #+ATTR_HTML: :alt Arbre des voyelles du Tãso :align center :width 100%
+    #+ATTR_HTML: :alt Arbre des voyelles du Tãso :align center :class gentree
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Arbre des caractéristiques des voyelles du Tãso
     #+RESULTS[eff961e714f2313ac2e974637800b18d5c11c928]:
@@ -357,7 +357,7 @@
       $input
     #+END_SRC
     #+NAME: arbre:cons
-    #+ATTR_HTML: :alt Arbre des consonnes du Tãso :align center :width 100%
+    #+ATTR_HTML: :alt Arbre des consonnes du Tãso :align center :class gentree
     #+ATTR_LATEX: :float sideways
     #+CAPTION: Arbre des caractéristiques des consonnes du Tãso
     #+RESULTS[9bf7d97ca85780e74e9fbb5fc69cbc9800439890]: