Minor visual improvements, aligment of search and index page elements

HaWeb/README.md

@@ -87,6 +87,8 @@ TODO Suchergebnisse beschränken
 TODO Mobile Menüs bei der Seitennavigation (Jahrszahlen, Buchstabenindex usw)
 TODO Fehlerseiten bei nicht gefundenen Seiten
 TODO Traditions durchsuchen
+TODO Briefe, in welchen Sender / Empfänger jeweils doppelt / getauscht sind 876
+TODO SEO Description & Titel
 
 Liste für Janina/Luca:
 KEIN brief für Bassa

HaWeb/Views/Shared/_Head.cshtml

@@ -18,4 +18,3 @@
 
 
 <link rel="stylesheet" href="/css/output.css" asp-append-version="true" />
-<script src="~/js/site.js" asp-append-version="true"></script>

HaWeb/Views/Shared/_Javascript.cshtml

@@ -1,15 +1,21 @@
 @* Javascript gets inlined because it ain't much (but it's honest work) *@
 
 @* Mark searched term *@
-@if(ViewData.ContainsKey("Mark")) {
+@if (ViewData.ContainsKey("Mark"))
+{
     <script src="~/js/mark.min.js" asp-append-version="true"></script>
     <script>
-        var instancesearch = new Mark(document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-comment"));
+        var elements = document.querySelectorAll(".ha-register-body, .ha-searchresultpreview, .ha-comment");
-        instancesearch.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"]});
+        if (elements.length < 1000) {
+            var instancesearch = new Mark(elements);
+            instancesearch.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
+        }
         var instanceletter = new Mark(document.querySelectorAll(".ha-letterbody"));
-        instanceletter.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "debug": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"]});
+        instanceletter.mark('@ViewData["Mark"]', { "element": "span", "className": "ha-found", "acrossElements": true, "separateWordSearch": false, "exclude": [".ha-searchresultcommentpill", ".ha-letlink", ".ha-letlinks", ".ha-hkb"] });
     </script>
 }
+
+@* Mark anchor *@
 <script>
     function markanchor() {
         var currentUrl = document.URL,
@@ -17,15 +23,16 @@
         var anchor = (urlParts.length > 1) ? urlParts[1] : null;
         if (anchor != null) {
             var element = document.getElementById(anchor);
+            var pointerelement = document.createElement("span");
+            pointerelement.classList.add("ha-location");
+            pointerelement.prepend("☛");
             if (element !== null && element.classList.contains("ha-linecount")) {
-                element.classList.add("ha-location");
+                pointerelement.classList.add("-left-5");
-                element.classList.add("font-bold");
+                pointerelement.classList.add("-top-1.5")
-                element.classList.add("mr-3");
+                element.prepend(pointerelement);
-                element.prepend("● ");
             } else if (element !== null && element.classList.contains("ha-commenthead")) {
-                element.classList.add("ha-location");
+                pointerelement.classList.add("-left-6");
-                element.classList.add("font-bold");
+                element.prepend(pointerelement);
-                element.prepend("● ");
             }
         }
     }
@@ -34,3 +41,450 @@
         markanchor();
     });
 </script>
+
+@* Mark links active *@
+<script>
+    // Marks links as active which target URL starts with the current URL
+    const markactive_startswith = function (element) {
+        var all_links = element.getElementsByTagName("a"),
+            i = 0,
+            len = all_links.length,
+            full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
+
+        for (; i < len; i++) {
+            if (full_path.startsWith(all_links[i].href.toLowerCase())) {
+                all_links[i].className += " active";
+            }
+        }
+    };
+
+    // Marks links active which target URL is exact the same as the current URL
+    const markactive_exact = function (element) {
+        var all_links = element.getElementsByTagName("a"),
+            i = 0,
+            len = all_links.length,
+            full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
+
+        for (; i < len; i++) {
+            if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
+                all_links[i].className += " active";
+            }
+        }
+    };
+
+    // Marks links as active, single links mutch match exactly, dropdown only the beginning
+    const markactive_menu = function (element) {
+        var all_links = element.getElementsByTagName("a"),
+            i = 0,
+            len = all_links.length,
+            marked = false,
+            full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
+        full_path = full_path.split("?")[0];
+
+        for (; i < len; i++) {
+            if (all_links[i].parentNode.classList.contains("ha-topnav-dropdown")) {
+                if (full_path.startsWith(all_links[i].href.toLowerCase())) {
+                    all_links[i].className += " active pointer-events-none";
+                    marked = true;
+                }
+            } else {
+                if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
+                    all_links[i].className += " active pointer-events-none";
+                    marked = true;
+                }
+            }
+        }
+
+        i = 0;
+        if (marked === false) {
+            for (; i < len; i++) {
+                if (all_links[i].classList.contains("ha-active-default")) {
+                    all_links[i].className += " active";
+                }
+            }
+        }
+    };
+
+    window.addEventListener("load", function () {
+        if (document.getElementById("ha-topnav") !== null)
+            markactive_menu(document.getElementById("ha-topnav"));
+        if (document.getElementById("ha-register-nav") !== null)
+            markactive_exact(document.getElementById("ha-register-nav"));
+        if (this.document.getElementById("ha-adminuploadfields") !== null)
+            markactive_exact(document.getElementById("ha-adminuploadfields"));
+    });
+</script>
+
+@* Menu view for mobile / small screen users *@
+<script>
+    const openmenu = function () {
+        var x = document.getElementById("ha-topnav");
+        if (x !== null) x.className += " ha-topnav-collapsed";
+        let oldbutton = document.getElementById("openmenubutton");
+        if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
+        let newbutton = document.getElementById("closemenubutton");
+        if (newbutton !== null) newbutton.setAttribute("class", "");
+    };
+
+    const closemenu = function () {
+        var x = document.getElementById("ha-topnav");
+        if (x !== null) x.className = "ha-topnav";
+        let oldbutton = document.getElementById("closemenubutton");
+        if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
+        let newbutton = document.getElementById("openmenubutton");
+        if (newbutton !== null) newbutton.setAttribute("class", "");
+    };
+
+    window.addEventListener("load", function () {
+        // Menu: Show / Hide Buttons for mobile View
+        if (
+            document.getElementById("openmenubutton") !== null &&
+            document.getElementById("closemenubutton") !== null
+        ) {
+            document
+                .getElementById("openmenubutton")
+                .addEventListener("click", openmenu);
+            document
+                .getElementById("closemenubutton")
+                .addEventListener("click", closemenu);
+        }
+    });
+</script>
+
+@* Scrolling Button *@
+<script>
+    const scrollFunction = function () {
+        button = document.getElementById("ha-scrollbutton");
+        if (button !== null) {
+            if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
+                // button.style.display = "block";
+                button.style.pointerEvents = "auto";
+                button.style.opacity = "1";
+            } else {
+                // button.style.display = "none";
+                button.style.pointerEvents = "none";
+                button.style.opacity = "0";
+            }
+        }
+    }
+
+    window.addEventListener("load", function () {
+        // Scroll button
+        if (document.getElementById("ha-scrollbutton") !== null) {
+            scrollFunction();
+            document.getElementById("ha-scrollbutton").addEventListener("click", () => {
+                document.body.scrollTop = 0; // For Safari
+                document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
+            })
+            window.addEventListener("scroll", scrollFunction);
+        }
+    });
+</script>
+
+@* Letter View: Tabs
+    TODO: Generalize, Integrate mobile-friendly version *@
+<script>
+    const showhidebutton = function (
+        buttonid,
+        divid,
+        buttonlist,
+        divlist,
+        starthidden
+    ) {
+        let button = document.getElementById(buttonid);
+        let div = document.getElementById(divid);
+
+        if (starthidden && div !== null) {
+            div.classList.add("hide");
+        }
+
+        if (!starthidden && button !== null) {
+            button.classList.add("active");
+        }
+
+        if (button !== null) {
+            button.addEventListener("click", function () {
+                for (let btn of buttonlist) {
+                    let inactivebutton = document.getElementById(btn);
+                    if (inactivebutton !== null) inactivebutton.classList.remove("active");
+                }
+
+                for (let element of divlist) {
+                    let hiddenelement = document.getElementById(element);
+                    if (hiddenelement !== null) {
+                        hiddenelement.classList.add("hide")
+                        hiddenelement.classList.remove("flow-root");
+                    };
+                }
+
+                if (button !== null) button.classList.add("active");
+                if (div !== null) {
+                    div.classList.add("flow-root");
+                    div.classList.remove("hide");
+                }
+            });
+        }
+    };
+
+    window.addEventListener("load", function () {
+        // Letter View: Show / Hide Tabs
+        let buttonlist = ["ha-lettertextbtn", "ha-additionsbtn", "ha-marginalsbtn"];
+        let divlist = ["ha-lettertext", "ha-additions", "ha-marginals"];
+
+        if (this.document.getElementById("ha-lettertextbtn") !== null) {
+            showhidebutton(
+                "ha-lettertextbtn",
+                "ha-lettertext",
+                buttonlist,
+                divlist,
+                false
+            );
+            showhidebutton(
+                "ha-additionsbtn",
+                "ha-additions",
+                buttonlist,
+                divlist,
+                true
+            );
+            showhidebutton(
+                "ha-marginalsbtn",
+                "ha-marginals",
+                buttonlist,
+                divlist,
+                true
+            );
+        } else {
+            showhidebutton(
+                "ha-lettertextbtn",
+                "ha-lettertext",
+                buttonlist,
+                divlist,
+                true
+            );
+            showhidebutton(
+                "ha-additionsbtn",
+                "ha-additions",
+                buttonlist,
+                divlist,
+                false
+            );
+            showhidebutton(
+                "ha-marginalsbtn",
+                "ha-marginals",
+                buttonlist,
+                divlist,
+                true
+            );
+        }
+    });
+</script>
+
+@* Theme reading & switching *@
+<script>
+    // Functions for switching theme
+    const go_to_dark = function () {
+        localStorage.setItem("theme", "ha-toggledark");
+        document.documentElement.classList.add("dark");
+    };
+
+    const go_to_bright = function () {
+        document.documentElement.classList.remove("dark");
+        localStorage.setItem("theme", "ha-togglebright");
+    };
+
+    // Functions for reading theme settings
+    const get_theme_settings = function (standard) {
+        var theme = localStorage.getItem("theme");
+        if (theme === null) theme = standard;
+        let toggleSwitch = document.getElementById(theme).click();
+    };
+
+    window.addEventListener("load", function () {
+        if (
+            document.getElementById("ha-togglebright") !== null &&
+            this.document.getElementById("ha-toggledark") !== null
+        ) {
+            document
+                .getElementById("ha-togglebright")
+                .addEventListener("click", go_to_bright);
+            document
+                .getElementById("ha-toggledark")
+                .addEventListener("click", go_to_dark);
+        }
+        get_theme_settings("ha-togglebright");
+    });
+</script>
+
+@* Functions for collapsing marginals, and adding a button next to those*@
+<script>
+    const getLineHeight = function (element) {
+        var temp = document.createElement(element.nodeName),
+            ret;
+        temp.setAttribute("class", element.className);
+        temp.innerHTML = "Ü";
+        element.parentNode.appendChild(temp);
+        ret = temp.getBoundingClientRect().height;
+        temp.parentNode.removeChild(temp);
+        return ret;
+    };
+
+    const collapsebox = function (element, height, lineheight) {
+        element.style.maxHeight = height + "px";
+        element.classList.add("ha-collapsed-box");
+        element.classList.remove("ha-expanded-box");
+    };
+
+    const uncollapsebox = function (element) {
+        element.classList.remove("ha-collapsed-box");
+        element.classList.add("ha-expanded-box");
+    };
+
+    const addbuttoncaollapsebox = function (element, height, hoverfunction) {
+        let btn = document.createElement("div");
+        btn.classList.add("ha-btn-collapsed-box");
+
+        if (element.classList.contains("ha-collapsed-box")) {
+            btn.classList.add("ha-open-btn-collapsed-box");
+        } else {
+            btn.classList.add("ha-close-btn-collapsed-box");
+        }
+
+        btn.addEventListener("click", function (ev) {
+            ev.stopPropagation();
+            if (element.classList.contains("ha-collapsed-box")) {
+                uncollapsebox(element);
+                btn.classList.remove("ha-open-btn-collapsed-box");
+                btn.classList.add("ha-close-btn-collapsed-box");
+                btn.classList.add("ha-collapsed-box-manually-toggled");
+            } else {
+                collapsebox(element, height);
+                btn.classList.remove("ha-close-btn-collapsed-box");
+                btn.classList.remove("ha-collapsed-box-manually-toggled");
+                btn.classList.add("ha-open-btn-collapsed-box");
+            }
+        });
+
+        if (hoverfunction) {
+            let timer = null;
+
+            element.addEventListener("mouseenter", function (ev) {
+                ev.stopPropagation();
+                timer = setTimeout(function () {
+                    if (element.classList.contains("ha-collapsed-box")) {
+                        uncollapsebox(element);
+                        btn.classList.remove("ha-open-btn-collapsed-box");
+                        btn.classList.add("ha-close-btn-collapsed-box");
+                    }
+                }, 200);
+            });
+
+            element.addEventListener("mouseleave", function (ev) {
+                ev.stopPropagation();
+                if (timer != null) {
+                    clearTimeout(timer);
+                }
+                if (
+                    element.classList.contains("ha-expanded-box") &&
+                    !btn.classList.contains("ha-collapsed-box-manually-toggled")
+                ) {
+                    collapsebox(element, height);
+                    btn.classList.remove("ha-close-btn-collapsed-box");
+                    btn.classList.add("ha-open-btn-collapsed-box");
+                }
+            });
+        }
+        element.parentNode.insertBefore(btn, element);
+    };
+
+    const overlappingcollapsebox = function (selector, hoverfunction) {
+        let boxes = document.querySelectorAll(selector);
+        let lineheight = 1;
+
+        if (boxes.length >= 1) {
+            lineheight = getLineHeight(boxes[0]);
+        }
+
+        for (var i = 0; i < boxes.length; i++) {
+            if (i < boxes.length - 1) {
+                let element = boxes[i];
+                let thisrect = element.getBoundingClientRect();
+                let nextrect = boxes[i + 1].getBoundingClientRect();
+                let overlap = thisrect.bottom - nextrect.top;
+                if (
+                    // -1 for catching lines that perfectly close up on each other
+                    overlap >= -1 &&
+                    !(window.getComputedStyle(element).display === "none")
+                ) {
+                    let newlength = 0;
+                    if (overlap >= 0)
+                        newlength = thisrect.height - overlap;
+                    else
+                        newlength = thisrect.height - lineheight;
+                    if (newlength % (lineheight * 3) <= 2)
+                        newlength -= lineheight;
+                    let remainder = newlength % lineheight;
+                    newlength = newlength - remainder - 1;
+
+                    // Line clamping for Marginals
+                    if (element.classList.contains("ha-marginalbox")) {
+                        let marginals = element.querySelectorAll(".ha-marginal");
+                        let h = 0;
+                        for (let m of marginals) {
+                            let cr = m.getBoundingClientRect();
+                            let eh = cr.bottom - cr.top;
+                            h += eh;
+                            if (h >= newlength) {
+                                let lines = Math.floor(eh / lineheight);
+                                let cutoff = Math.floor((h - newlength) / lineheight);
+                                m.style.cssText += "-webkit-line-clamp: " + (lines - cutoff) + ";";
+                            }
+                        }
+                    }
+
+                    requestAnimationFrame(() => {
+                        collapsebox(element, newlength, lineheight);
+                    });
+                    requestAnimationFrame(() => {
+                        addbuttoncaollapsebox(element, newlength, hoverfunction);
+                    });
+                }
+            }
+        }
+    };
+
+    const marginalboxwidthset = function () {
+        let lt = document.getElementById("ha-letterbody");
+        if (lt !== null) {
+            let mg = lt.querySelectorAll(".ha-lettertext .ha-marginalbox");
+            if (mg.length > 0) {
+                let ltbcr = lt.getBoundingClientRect();
+                let mgbcr = mg[0].getBoundingClientRect();
+                let nw = ltbcr.right - mgbcr.left - 18;
+
+                for (let element of mg) {
+                    element.style.width = nw + "px";
+                }
+            }
+        }
+    }
+
+
+
+    const collapseboxes = function () {
+        overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
+        overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
+        overlappingcollapsebox(".ha-commentlist .ha-letlinks", true);
+        overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
+    };
+
+    window.addEventListener("load", function () {
+        marginalboxwidthset();
+        collapseboxes();
+        var doit;
+        this.window.addEventListener("resize", function () {
+            this.clearTimeout(doit);
+            marginalboxwidthset();
+            doit = this.setTimeout(collapseboxes, 250);
+        });
+    });
+</script>

HaWeb/wwwroot/css/index.css

@@ -1,6 +1,5 @@
 @layer components {
     /* THEME OPTIONS */
-
     .ha-index {
         @apply bg-slate-50 dark:bg-slate-900
     }
@@ -59,7 +58,7 @@
     }
 
     .ha-index .ha-indexbody {
-        @apply pt-4 clear-both flex flex-row gap-x-4
+        @apply pt-6 clear-both flex flex-row gap-x-4
     }
 
     .ha-index .ha-indexbody .ha-letterlist {
@@ -124,11 +123,11 @@
     }
 
     .ha-index .ha-indexbody .ha-filterlist {
-        @apply hidden md:flex flex-col gap-y-5 pb-4 float-right max-w-lg basis-1/3 min-w-0 shrink
+        @apply hidden md:flex flex-col gap-y-9 pb-4 float-right max-w-lg basis-1/3 min-w-0 shrink
     }
 
     .ha-index .ha-indexbody .ha-filterlist .ha-filtertitle {
-        @apply text-2xl pr-4 pl-1 mb-1 pb-1 pt-3 font-serif leading-none border-b border-gray-400
+        @apply text-2xl pr-4 pl-1 mb-1 pb-1 font-serif leading-none border-b border-gray-400
     }
 
     .ha-index .ha-indexbody .ha-filterlist .ha-activefilterinfo {

HaWeb/wwwroot/css/search.css

@@ -130,7 +130,7 @@
     }
 
     .ha-search .ha-searchbody {
-        @apply pt-4 md:pr-[24rem] pb-9 md:pb-12 rounded-b-sm
+        @apply pt-6 md:pl-6 md:pr-[24rem] pb-9 md:pb-12 rounded-b-sm
     }
 
     .ha-search .ha-searchbody .ha-letterlist {
@@ -196,7 +196,7 @@
 
 
     .ha-search .ha-searchbody .ha-commentlist {
-        @apply pt-2 md:pt-4 px-9 md:px-16 numeric-mediaeval font-serif
+        @apply pt-2 md:pt-4 pr-9 pl-4 md:pr-16 md:pl-6 numeric-mediaeval font-serif
     }
 
     .ha-search .ha-searchbody .ha-commentlist .ha-comment {
@@ -233,7 +233,7 @@
       }
     
       .ha-search .ha-searchbody  .ha-forschung .ha-comment {
-        @apply mb-4 md:mb-6 -indent-4 pl-4
+        @apply mb-4 md:mb-6 -indent-4 
       }
     
       .ha-search .ha-searchbody .ha-commentlist .ha-comment .ha-commenthead .ha-letlinks {

HaWeb/wwwroot/css/shared.css

@@ -62,7 +62,7 @@
   }
 
   .ha-location {
-    @apply !text-hamannHighlight
+    @apply !text-hamannHighlight absolute text-xl hidden sm:inline-block
   }
 
 

HaWeb/wwwroot/js/site.js

@@ -1,440 +0,0 @@
-// Functions for opening and closing the menu on mobile devices
-const openmenu = function () {
-  var x = document.getElementById("ha-topnav");
-  if (x !== null) x.className += " ha-topnav-collapsed";
-  let oldbutton = document.getElementById("openmenubutton");
-  if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
-  let newbutton = document.getElementById("closemenubutton");
-  if (newbutton !== null) newbutton.setAttribute("class", "");
-};
-
-const closemenu = function () {
-  var x = document.getElementById("ha-topnav");
-  if (x !== null) x.className = "ha-topnav";
-  let oldbutton = document.getElementById("closemenubutton");
-  if (oldbutton !== null) oldbutton.setAttribute("class", "hidden");
-  let newbutton = document.getElementById("openmenubutton");
-  if (newbutton !== null) newbutton.setAttribute("class", "");
-};
-
-
-// Marks links as active which target URL starts with the current URL
-const markactive_startswith = function (element) {
-  var all_links = element.getElementsByTagName("a"),
-    i = 0,
-    len = all_links.length,
-    full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
-
-  for (; i < len; i++) {
-    if (full_path.startsWith(all_links[i].href.toLowerCase())) {
-      all_links[i].className += " active";
-    }
-  }
-};
-
-// Marks links active which target URL is exact the same as the current URL
-const markactive_exact = function (element) {
-  var all_links = element.getElementsByTagName("a"),
-    i = 0,
-    len = all_links.length,
-    full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
-
-  for (; i < len; i++) {
-    if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
-      all_links[i].className += " active";
-    }
-  }
-};
-
-// Marks links as active, single links mutch match exactly, dropdown only the beginning
-const markactive_menu = function (element) {
-  var all_links = element.getElementsByTagName("a"),
-    i = 0,
-    len = all_links.length,
-    marked = false,
-    full_path = location.href.split("#")[0].toLowerCase(); //Ignore hashes
-  full_path = full_path.split("?")[0];
-
-  for (; i < len; i++) {
-    if (all_links[i].parentNode.classList.contains("ha-topnav-dropdown")) {
-      if (full_path.startsWith(all_links[i].href.toLowerCase())) {
-        all_links[i].className += " active pointer-events-none";
-        marked = true;
-      }
-    } else {
-      if (full_path == all_links[i].href.toLowerCase() || full_path == all_links[i].href.toLowerCase() + "/") {
-        all_links[i].className += " active pointer-events-none";
-        marked = true;
-      }
-    }
-  }
-
-  i = 0;
-  if (marked === false) {
-    for (; i < len; i++) {
-      if (all_links[i].classList.contains("ha-active-default")) {
-        all_links[i].className += " active";
-      }
-    }
-  }
-};
-
-
-// Functions for collapsing marginals, and adding a button next to those
-const getLineHeight = function (element) {
-  var temp = document.createElement(element.nodeName),
-    ret;
-  temp.setAttribute("class", element.className);
-  temp.innerHTML = "Ü";
-  element.parentNode.appendChild(temp);
-  ret = temp.getBoundingClientRect().height;
-  temp.parentNode.removeChild(temp);
-  return ret;
-};
-
-const collapsebox = function (element, height, lineheight) {
-  element.style.maxHeight = height + "px";
-  element.classList.add("ha-collapsed-box");
-  element.classList.remove("ha-expanded-box");
-};
-
-const uncollapsebox = function (element) {
-  element.classList.remove("ha-collapsed-box");
-  element.classList.add("ha-expanded-box");
-};
-
-const addbuttoncaollapsebox = function (element, height, hoverfunction) {
-  let btn = document.createElement("div");
-  btn.classList.add("ha-btn-collapsed-box");
-
-  if (element.classList.contains("ha-collapsed-box")) {
-    btn.classList.add("ha-open-btn-collapsed-box");
-  } else {
-    btn.classList.add("ha-close-btn-collapsed-box");
-  }
-
-  btn.addEventListener("click", function (ev) {
-    ev.stopPropagation();
-    if (element.classList.contains("ha-collapsed-box")) {
-      uncollapsebox(element);
-      btn.classList.remove("ha-open-btn-collapsed-box");
-      btn.classList.add("ha-close-btn-collapsed-box");
-      btn.classList.add("ha-collapsed-box-manually-toggled");
-    } else {
-      collapsebox(element, height);
-      btn.classList.remove("ha-close-btn-collapsed-box");
-      btn.classList.remove("ha-collapsed-box-manually-toggled");
-      btn.classList.add("ha-open-btn-collapsed-box");
-    }
-  });
-
-  if (hoverfunction) {
-    let timer = null;
-
-    element.addEventListener("mouseenter", function (ev) {
-      ev.stopPropagation();
-      timer = setTimeout(function () {
-        if (element.classList.contains("ha-collapsed-box")) {
-          uncollapsebox(element);
-          btn.classList.remove("ha-open-btn-collapsed-box");
-          btn.classList.add("ha-close-btn-collapsed-box");
-        }
-      }, 200);
-    });
-
-    element.addEventListener("mouseleave", function (ev) {
-      ev.stopPropagation();
-      if (timer != null) {
-        clearTimeout(timer);
-      }
-      if (
-        element.classList.contains("ha-expanded-box") &&
-        !btn.classList.contains("ha-collapsed-box-manually-toggled")
-      ) {
-        collapsebox(element, height);
-        btn.classList.remove("ha-close-btn-collapsed-box");
-        btn.classList.add("ha-open-btn-collapsed-box");
-      }
-    });
-  }
-  element.parentNode.insertBefore(btn, element);
-};
-
-const overlappingcollapsebox = function (selector, hoverfunction) {
-  let boxes = document.querySelectorAll(selector);
-  let lineheight = 1;
-
-  if (boxes.length >= 1) {
-    lineheight = getLineHeight(boxes[0]);
-  }
-
-  for (var i = 0; i < boxes.length; i++) {
-    if (i < boxes.length - 1) {
-      let element = boxes[i];
-      let thisrect = element.getBoundingClientRect();
-      let nextrect = boxes[i + 1].getBoundingClientRect();
-      let overlap = thisrect.bottom - nextrect.top;
-      if (
-        // -1 for catching lines that perfectly close up on each other
-        overlap >= -1 &&
-        !(window.getComputedStyle(element).display === "none")
-      ) {
-        let newlength = 0;
-        if (overlap >= 0)
-          newlength = thisrect.height - overlap;
-        else
-          newlength = thisrect.height - lineheight;
-        if (newlength % (lineheight * 3) <= 2)
-          newlength -= lineheight;
-        let remainder = newlength % lineheight;
-        newlength = newlength - remainder - 1;
-
-        // Line clamping for Marginals
-        if (element.classList.contains("ha-marginalbox")) {
-          let marginals = element.querySelectorAll(".ha-marginal");
-          let h = 0;
-          for (let m of marginals) {
-            let cr = m.getBoundingClientRect();
-            let eh = cr.bottom - cr.top;
-            h += eh;
-            if (h >= newlength) {
-              let lines = Math.floor(eh / lineheight);
-              let cutoff = Math.floor((h-newlength) / lineheight);
-              m.style.cssText += "-webkit-line-clamp: " + (lines-cutoff) + ";";
-            }
-          }
-        }
-
-        requestAnimationFrame(() => {
-          collapsebox(element, newlength, lineheight);
-        });
-        requestAnimationFrame(() => {
-          addbuttoncaollapsebox(element, newlength, hoverfunction);
-        });
-      }
-    }
-  }
-};
-
-const marginalboxwidthset = function() {
-  let lt = document.getElementById("ha-letterbody");
-  if (lt !== null) {
-    let mg = lt.querySelectorAll(".ha-lettertext .ha-marginalbox");
-    if (mg.length > 0) {
-      let ltbcr = lt.getBoundingClientRect();
-      let mgbcr = mg[0].getBoundingClientRect();
-      let nw = ltbcr.right - mgbcr.left - 18;      
-
-      for (let element of mg) {
-        element.style.width = nw + "px";
-      }
-    }
-  }
-}
-
-/* Button to hide / show traditions, marginals and the text of the letter */
-const showhidebutton = function (
-  buttonid,
-  divid,
-  buttonlist,
-  divlist,
-  starthidden
-) {
-  let button = document.getElementById(buttonid);
-  let div = document.getElementById(divid);
-
-  if (starthidden && div !== null) {
-    div.classList.add("hide");
-  }
-
-  if (!starthidden && button !== null) {
-    button.classList.add("active");
-  }
-
-  if (button !== null) {
-    button.addEventListener("click", function () {
-      for (let btn of buttonlist) {
-        let inactivebutton = document.getElementById(btn);
-        if (inactivebutton !== null) inactivebutton.classList.remove("active");
-      }
-
-      for (let element of divlist) {
-        let hiddenelement = document.getElementById(element);
-        if (hiddenelement !== null) {
-          hiddenelement.classList.add("hide")
-          hiddenelement.classList.remove("flow-root");
-        };
-      }
-
-      if (button !== null) button.classList.add("active");
-      if (div !== null) { 
-        div.classList.add("flow-root");
-        div.classList.remove("hide");
-      }
-    });
-  }
-};
-
-const collapseboxes = function () {
-  overlappingcollapsebox(".ha-neuzeit .ha-letlinks", true);
-  overlappingcollapsebox(".ha-forschung .ha-letlinks", true);
-  overlappingcollapsebox(".ha-commentlist .ha-letlinks", true);
-  overlappingcollapsebox(".ha-lettertext .ha-marginalbox", true);
-};
-
-// Functions for switching theme
-const go_to_dark = function () {
-  localStorage.setItem("theme", "ha-toggledark");
-  document.documentElement.classList.add("dark");
-};
-
-const go_to_bright = function () {
-  document.documentElement.classList.remove("dark");
-  localStorage.setItem("theme", "ha-togglebright");
-};
-
-// Functions for reading theme settings
-const get_theme_settings = function (standard) {
-  var theme = localStorage.getItem("theme");
-  if (theme === null) theme = standard;
-  let toggleSwitch = document.getElementById(theme).click();
-};
-
-// Functions for scrolling
-const scrollFunction = function () {
-  button = document.getElementById("ha-scrollbutton");
-  if (button !== null) {
-    if (document.body.scrollTop > 300 || document.documentElement.scrollTop > 300) {
-      // button.style.display = "block";
-      button.style.pointerEvents = "auto";
-      button.style.opacity = "1";
-    } else {
-      // button.style.display = "none";
-      button.style.pointerEvents = "none";
-      button.style.opacity = "0";
-    }
-  }
-}
-
-//////////////////////////////// ONLOAD ////////////////////////////////////
-window.addEventListener("load", function () {
-  // Scroll button
-  if(document.getElementById("ha-scrollbutton") !== null) {
-    scrollFunction();
-    document.getElementById("ha-scrollbutton").addEventListener("click", () => {
-      document.body.scrollTop = 0; // For Safari
-      document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-    })
-    window.addEventListener("scroll", scrollFunction);
-  }
-
-  // Menu: Show / Hide Buttons for mobile View
-  if (
-    document.getElementById("openmenubutton") !== null &&
-    document.getElementById("closemenubutton") !== null
-  ) {
-    document
-      .getElementById("openmenubutton")
-      .addEventListener("click", openmenu);
-    document
-      .getElementById("closemenubutton")
-      .addEventListener("click", closemenu);
-  }
-
-  // Menu / Register / Search View: Mark active link
-  if (document.getElementById("ha-topnav") !== null)
-    markactive_menu(document.getElementById("ha-topnav"));
-  if (document.getElementById("ha-register-nav") !== null)
-    markactive_exact(document.getElementById("ha-register-nav"));
-  if (this.document.getElementById("ha-adminuploadfields") !== null)
-    markactive_exact(document.getElementById("ha-adminuploadfields"));
-
-  // Letter / Register View: Collapse all unfit boxes + resize observer
-  marginalboxwidthset();
-  collapseboxes();
-  var doit;
-  this.window.addEventListener("resize", function () {
-    this.clearTimeout(doit);
-    marginalboxwidthset();
-    doit = this.setTimeout(collapseboxes, 250);
-  });
-
-  // Letter View: Show / Hide Tabs
-  let buttonlist = ["ha-lettertextbtn", "ha-additionsbtn", "ha-marginalsbtn"];
-  let divlist = ["ha-lettertext", "ha-additions", "ha-marginals"];
-
-  if (this.document.getElementById("ha-lettertextbtn") !== null) {
-    showhidebutton(
-      "ha-lettertextbtn",
-      "ha-lettertext",
-      buttonlist,
-      divlist,
-      false
-    );
-    showhidebutton(
-      "ha-additionsbtn",
-      "ha-additions",
-      buttonlist,
-      divlist,
-      true
-    );
-    showhidebutton(
-      "ha-marginalsbtn",
-      "ha-marginals",
-      buttonlist,
-      divlist,
-      true
-    );
-  } else {
-    showhidebutton(
-      "ha-lettertextbtn",
-      "ha-lettertext",
-      buttonlist,
-      divlist,
-      true
-    );
-    showhidebutton(
-      "ha-additionsbtn",
-      "ha-additions",
-      buttonlist,
-      divlist,
-      false
-    );
-    showhidebutton(
-      "ha-marginalsbtn",
-      "ha-marginals",
-      buttonlist,
-      divlist,
-      true
-    );
-  }
-
-  // Theme: Get saved theme from memory and check the box accordingly
-  // Register theme toggler
-  if (
-    document.getElementById("ha-togglebright") !== null &&
-    this.document.getElementById("ha-toggledark") !== null
-  ) {
-    document
-      .getElementById("ha-togglebright")
-      .addEventListener("click", go_to_bright);
-    document
-      .getElementById("ha-toggledark")
-      .addEventListener("click", go_to_dark);
-  }
-  get_theme_settings("ha-togglebright");
-});
-
-// import resolveConfig from 'tailwindcss/resolveConfig'
-// import tailwindConfig from './tailwind.config.js'
-
-// const fullConfig = resolveConfig(tailwindConfig)
-
-// fullConfig.theme.width[4]
-// // => '1rem'
-
-// fullConfig.theme.screens.md
-// // => '768px'
-
-// fullConfig.theme.boxShadow['2xl']
-// // => '0 25px 50px -12px rgba(0, 0, 0, 0.25)'