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_Nebraska.css

@@ -238,10 +238,10 @@ div#alphanav, div#nav, div#subnavigation {
     width: 100%;
     margin: 0;
     background-color: #A97;
+    position: relative;
 }
 div#alphanav ul, div#nav ul, div#subnavigation ul {
     list-style: none;
-    min-width: 770px;
     height: 24px;
     margin: 0;
     padding: 0px 0px 0px 16px;
@@ -282,6 +282,43 @@ div#nav ul li.CurrentSection a:hover {
 div#subnavigation ul li.CurrentSection a {
     border-width: 0 0 1px 0;
 }
+div#nav li.lang {
+    position: relative;
+    padding-top: 3px;
+    padding-left: 8px;
+    font: bold .7em sans;
+}
+div#nav li.lang:hover > ul {
+    visibility: visible;
+    opacity: 1;
+}
+div#nav ul.lang {
+    position: absolute;
+    visibility: hidden;
+    opacity: 0;
+    height: auto;
+    width: auto;
+    z-index: 999;
+    overflow: visible;
+    background-color: #A97;
+    top: -1em;
+    border-width: 2px 0px 1px 0px;
+    padding: 0px;
+}
+div#nav ul.lang li:after {
+    content: "";
+}
+div#nav li.lang ul.lang li {
+    float: none;
+    background-color: #A97;
+    margin-left: 10px;
+    padding: 0px 0px;
+}
+div#nav li.lang ul.lang li a {
+    float: none;
+    width: auto;
+    font: bold .9em sans;
+}
 
 /* Responsive navigation */
 button.navIcon {
@@ -347,7 +384,6 @@ div#nav::after {
         position: absolute;
         right: 0;
         top: 0;
-        margin-right: 10px;
     }
     .nav.responsive ::after {
         /* need to remove the "|" when we are in the dropdown menu. */
@@ -371,6 +407,28 @@ div#nav::after {
     .content {
         padding: 0em 0.5em;
     }
+    div#nav ul li.lang {
+        padding-top: 3px;
+        padding-bottom: 6px;
+        padding-left: 0px;
+    }
+    .lang {
+        position: relative;
+        padding-top: 3px;
+        padding-left: 8px;
+    }
+    .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
@@ -1113,6 +1171,10 @@ div#parents table.infolist tbody tr td.ColumnValue ol li {
 table.relationships tr:hover {
     background-color:#C1B398;
 }
+div.content table.tags {
+    text-align: left;
+    width: auto;
+}
 div#families table.infolist {
     margin-top:.5em;
 }
@@ -1185,7 +1247,8 @@ div#Addresses table.infolist tr td a, div#Addresses table.infolist tr td p a {
 #indivgallery .thumbnail {
     margin:0;
     float:left;
-    width:130px;
+    width:160px;
+    height:220px;
     text-align:center;
     background-color: #F6F2EE;
 }
@@ -1632,3 +1695,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: #542;
+}
+/* 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: #696969;
+}