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.
2020-05-02 15:40:39 +02:00 · 2020-05-02 15:40:39 +02:00 · 70c1e8153e
parent ebdcb8755b
commit 70c1e8153e
6 changed files with 27 additions and 23 deletions
--- a/web/dart/reorganize_html.dart
+++ b/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());

--- a/web/eittland.org
+++ b/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]:
--- a/web/en/nyqy.org
+++ b/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]:
--- a/web/nyqy.org
+++ b/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]:
--- a/web/style/style.scss
+++ b/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 {
-        background: fade-out($light, 0.2);
+    .gentree {
+        filter: invert(100%);
+        transition: filter 1s ease-in-out;
    }
 }

@ -470,4 +476,5 @@ th, td {

 img {
    max-height: 600px;
+    max-width: 100%;
 }
--- a/web/taso.org
+++ b/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]: