Multiple languages ​​for the narrative web and optional other additions (#1051)

* Navweb: multi-language configuration.
* Navweb: multi-language exec, navigation menu, css
* Navweb: make css responsive for multi-language
* Language menu must work with a non english lang
* Avoid to copy common files for each language
* Use cms and archive in multi-languages
* Add the default index.
* Some cleanup.
* Images: performances improvement with image_size

Need to use the magic library (python-magic, python3-magic, ...)
If this library don't exist on the system, continue to use the Gdk method.

- force archive if we use CMS
- remove some unused code
- some strings are not translatable
- stay on the same page when you change language
- add image in the ancestor tree for all levels and not for the first 5

performances:
- copy images and thumbs only for the first language
* Some minor corrections and performances test
* Update comments for methods and functions
* Narweb: add show tags option
* Try to translate tags and suppress the colon (:)
* Narweb: integrate of webcal for multilang use
For each lang, we use the related calendar if it exists
* Death string only translated for the locale lang
* set correct url for extrapage.
* Add optional toggle for html sections
* show birth and death date if close option selected
* No background in references section with Mainz css
* Remove photo from list incompatible with multilang
* Add the first photo to the place page marker
* Add associated persons.
* Solves 'undefined' in map popup.
* Calendar: Set the background for the current day
* Thumbnail align problem with long description.
* Set the contact page date to the note date
* Add a scroll to top button.
* Increase the nb of generations since we can scroll
* Difficult to see the "go to top" icon.
* Better management for the toggle switch

data/css/Web_Basic-Spruce.css

@@ -165,6 +165,7 @@ a[href]:hover, a[href]:active {
 ----------------------------------------------------- */
 div#nav, #subnavigation {
     border: solid 1px #EAEEF4; /* needed by IE7 */
+    position: relative;
 }
 #subnavigation ul {
     overflow: hidden;
@@ -202,6 +203,35 @@ div#nav ul li.CurrentSection a {
 #subnavigation ul li.CurrentSection a {
     background-color: #FFF;
 }
+div#nav li.lang {
+    font-size: smaller;
+    font-family: sans-serif;
+    padding-top: .3em;
+    padding-bottom: .3em;
+    font-weight: bold;
+}
+div#nav li.lang:hover > ul {
+    visibility: visible;
+    opacity: 1;
+}
+div#nav ul.lang {
+    position: absolute;
+    visibility: hidden;
+    padding: 0px;
+    opacity: 0;
+    z-index: 999;
+    background-color: #EAEEF4;
+    top: -1em;
+    font-size: larger;
+    font-family: sans-serif;
+}
+div#nav ul.lang:hover {
+    float: initial;
+}
+div#nav ul.lang li {
+    float: none;
+    padding: 1px 2px;
+}
 
 /* Alphabet Navigation
 ----------------------------------------------------- */
@@ -320,6 +350,21 @@ div#nav::after {
     .content {
         padding: 0em 0.5em;
     }
+    .lang {
+        position: relative;
+    }
+    .lang > .lang {
+        top: 0;
+        left: 100%;
+        margin-top: -6px;
+        margin-left: -1px;
+        -webkit-border-radius: 0 6px 6px 6px;
+        -moz-border-radius: 0 6px 6px 6px;
+        border-radius: 0 6px 6px 6px;
+    }
+    .lang:hover > .lang {
+        display: block;
+    }
 }
 
 /* Main Table
@@ -588,7 +633,7 @@ table.eventlist td.ColumnPlace {
     font-weight: normal;
 }
 #GalleryDisplay {
-    margin: 0px auto;
+    margin: 10px auto;
     position: relative;
 }
 #GalleryDisplay img {
@@ -662,6 +707,7 @@ div#SourceDetail {
       #Contact #GalleryDisplay img {
     display: block;
     max-width: 950px;
+    width: 100%;
     height: auto;
     float: right;
 }
@@ -672,12 +718,12 @@ div#SourceDetail {
         max-width: 100%;
     }
 }
-#Home p, #Introduction p {
+#Home p, #Introduction p, #Contact p {
     padding-left: 15px;
 }
 .subsection {
     clear: both;
-    overflow: hidden;
+    overflow-x: auto;
 }
 .subsection p {
     margin: 0px;
@@ -689,6 +735,10 @@ div#SourceDetail {
 table.relationships tr:hover {
     background-color: #BFD0EA;
 }
+div.content table.tags {
+    text-align: left;
+    width: auto;
+}
 div#families table.fixed_subtables table.eventlist {
     table-layout: fixed;
 }
@@ -710,10 +760,16 @@ div#families table.attrlist td.ColumnType {
 #indivgallery {
     background-color: white;
 }
+#indivgallery a {
+    color: black;
+    text-decoration: none;
+    word-wrap: break-word;
+    display: block;
+}
 #gallery .gallerycell {
     float: left;
     width: 130px;
-    height: 150px;
+    height: 160px;
     text-align: center;
     margin: 0;
     background-color: white;
@@ -726,7 +782,8 @@ div#families table.attrlist td.ColumnType {
 }
 #indivgallery .thumbnail {
     float: left;
-    width: 130px;
+    width: 160px;
+    height: 220px;
     font-size: smaller;
     text-align: center;
     margin: 0.8em 0.5em;
@@ -1047,3 +1104,43 @@ body#fullyearlinked #YearGlance tbody td:hover .date {
     border-radius: 45px;
     border: 5px solid;
 }
+h4 button.icon {
+    width: 0.9em;
+    border: 0px solid;
+    padding: 0;
+    opacity: 1;
+    transform: rotate(90deg);
+    transition: transform 200ms ease-out 0s;
+    background: transparent;
+}
+h4 button.icon-close {
+    transform: rotate(90deg);
+    transition: transform 0.2s linear;
+}
+h4 button.icon-open {
+    transform: rotate(180deg);
+    transition: transform 0.2s linear;
+}
+svg {
+  fill: #204D91;
+}
+/* Go to the top of the page */
+#gototop {
+  display: none;
+  position: fixed;
+  bottom: 10px;
+  right: 20px;
+  z-index: 999;
+  border: none;
+  background-color: transparent;
+  color: black;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 40px;
+  height: 40px;
+  padding: 0px;
+}
+
+#gototop:hover {
+  background-color: #EAEEF4;
+}