Seperated css files; added search form to register and styled the button

HaWeb/Controllers/RegisterController.cs

@@ -1,3 +1,4 @@
+namespace HaWeb.Controllers;
 using System.Diagnostics;
 using Microsoft.AspNetCore.Mvc;
 using HaWeb.Models;
@@ -9,8 +10,18 @@ using HaXMLReader.EvArgs;
 using HaDocument.Models;
 using System.Collections.Concurrent;
 using HaWeb.FileHelpers;
-
+using System.Threading.Tasks;
-namespace HaWeb.Controllers;
+using Microsoft.AspNetCore.Http;
+using Microsoft.AspNetCore.WebUtilities;
+using Microsoft.Extensions.Configuration;
+using Microsoft.Net.Http.Headers;
+using HaWeb.Filters;
+using HaWeb.XMLParser;
+using System.Text.Json.Serialization;
+using System.Text.Json;
+using Microsoft.FeatureManagement.Mvc;
+using System.Runtime.InteropServices;
+using Microsoft.AspNetCore.Http.Features;
 
 [Route("Register/[action]/{id?}")]
 public class RegisterController : Controller {
@@ -26,6 +37,7 @@ public class RegisterController : Controller {
         _readerService = readerService;
     }
 
+    [HttpGet]
     public IActionResult Register(string? id) {
         // Setup settings and variables
         var lib = _lib.GetLibrary();
@@ -47,21 +59,10 @@ public class RegisterController : Controller {
         if (comments == null) return error404();
 
         // Parsing
-        var res = new List<CommentModel>();
+        var res = _createCommentModelForschungRegister(category, comments); 
-        foreach (var comm in comments) {
-            var parsedComment = HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, comm, category, Settings.ParsingState.CommentType.Comment);
-            List<string>? parsedSubComments = null;
-            if (comm.Kommentare != null) {
-                parsedSubComments = new List<string>();
-                foreach (var subcomm in comm.Kommentare.OrderBy(x => x.Value.Order)) {
-                    parsedSubComments.Add(HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, subcomm.Value, category, Settings.ParsingState.CommentType.Subcomment));
-                }
-            }
-            res.Add(new CommentModel(parsedComment, parsedSubComments));
-        }
 
         // Model instantiation
-        var model = new RegisterViewModel(category, id, res, title, false) {
+        var model = new RegisterViewModel(category, id, res, title, false, true) {
             AvailableCategories = availableCategories,
         };
 
@@ -69,6 +70,7 @@ public class RegisterController : Controller {
         return View("Index", model);
     }
 
+    [HttpGet]
     public IActionResult Bibelstellen(string? id) {
         // Setup settings and variables
         var lib = _lib.GetLibrary();
@@ -90,21 +92,10 @@ public class RegisterController : Controller {
         if (comments == null) return error404();
 
         // Parsing
-        var res = new List<CommentModel>();
+        var res = _createCommentModelBibel(category, comments);
-        foreach (var comm in comments) {
-            var parsedComment = HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, comm, category, Settings.ParsingState.CommentType.Comment);
-            List<string>? parsedSubComments = null;
-            if (comm.Kommentare != null) {
-                parsedSubComments = new List<string>();
-                foreach (var subcomm in comm.Kommentare.OrderBy(x => x.Value.Lemma.Length).ThenBy(x => x.Value.Lemma)) {
-                    parsedSubComments.Add(HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, subcomm.Value, category, Settings.ParsingState.CommentType.Subcomment));
-                }
-            }
-            res.Add(new CommentModel(parsedComment, parsedSubComments));
-        }
 
         // Model instantiation
-        var model = new RegisterViewModel(category, id, res, title, false) {
+        var model = new RegisterViewModel(category, id, res, title, false, false) {
             AvailableCategories = availableCategories,
         };
 
@@ -112,6 +103,7 @@ public class RegisterController : Controller {
         return View("Index", model);
     }
 
+    [HttpGet]
     public IActionResult Forschung(string? id) {
         // Setup settings and variables
         var lib = _lib.GetLibrary();
@@ -140,21 +132,10 @@ public class RegisterController : Controller {
         if (comments == null) return error404();
 
         // Parsing
-        var res = new List<CommentModel>();
+        var res = _createCommentModelForschungRegister(category, comments);
-        foreach (var comm in comments) {
-            var parsedComment = HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, comm, category, Settings.ParsingState.CommentType.Comment);
-            List<string>? parsedSubComments = null;
-            if (comm.Kommentare != null) {
-                parsedSubComments = new List<string>();
-                foreach (var subcomm in comm.Kommentare.OrderBy(x => x.Value.Order)) {
-                    parsedSubComments.Add(HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, subcomm.Value, category, Settings.ParsingState.CommentType.Subcomment));
-                }
-            }
-            res.Add(new CommentModel(parsedComment, parsedSubComments));
-        }
 
         // Model instantiation
-        var model = new RegisterViewModel(category, id, res, title, true) {
+        var model = new RegisterViewModel(category, id, res, title, true, true) {
             AvailableCategories = availableCategories,
             AvailableSideCategories = AvailableSideCategories
         };
@@ -163,6 +144,16 @@ public class RegisterController : Controller {
         return View("Index", model);
     }
 
+    [HttpPost]
+    [DisableFormValueModelBinding]
+    [ValidateAntiForgeryToken]
+    [Route("/Register/Forschung/{id}")]
+    [Route("/Register/Register/{id}")]
+    [Route("/Register/Bibelstellen/{id}")]
+    public IActionResult Search(string? id) {
+        return Ok();
+    }
+
     private string? normalizeID(string? id, string defaultid) {
         if (id == null) return null;
         return id.ToUpper();
@@ -181,6 +172,40 @@ public class RegisterController : Controller {
         return Redirect("/Error404");
     }
 
+    private List<CommentModel> _createCommentModelForschungRegister(string category, IOrderedEnumerable<Comment>? comments) {
+        var lib = _lib.GetLibrary();
+        var res = new List<CommentModel>();
+        foreach (var comm in comments) {
+            var parsedComment = HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, comm, category, Settings.ParsingState.CommentType.Comment);
+            List<string>? parsedSubComments = null;
+            if (comm.Kommentare != null) {
+                parsedSubComments = new List<string>();
+                foreach (var subcomm in comm.Kommentare.OrderBy(x => x.Value.Order)) {
+                    parsedSubComments.Add(HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, subcomm.Value, category, Settings.ParsingState.CommentType.Subcomment));
+                }
+            }
+            res.Add(new CommentModel(parsedComment, parsedSubComments));
+        }
+        return res;
+    }
+
+    private List<CommentModel> _createCommentModelBibel(string category, IOrderedEnumerable<Comment>? comments) {
+        var lib = _lib.GetLibrary();
+        var res = new List<CommentModel>();
+        foreach (var comm in comments) {
+            var parsedComment = HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, comm, category, Settings.ParsingState.CommentType.Comment);
+            List<string>? parsedSubComments = null;
+            if (comm.Kommentare != null) {
+                parsedSubComments = new List<string>();
+                foreach (var subcomm in comm.Kommentare.OrderBy(x => x.Value.Lemma.Length).ThenBy(x => x.Value.Lemma)) {
+                    parsedSubComments.Add(HTMLHelpers.CommentHelpers.CreateHTML(lib, _readerService, subcomm.Value, category, Settings.ParsingState.CommentType.Subcomment));
+                }
+            }
+            res.Add(new CommentModel(parsedComment, parsedSubComments));
+        }
+        return res;
+    }
+
     // private IEnumerable<Comment> Search(IEnumerable<Comment> all) {
     //     var ret = new ConcurrentBag<Comment>();
     //     var cnt = 0;

HaWeb/HaWeb.csproj

@@ -8,8 +8,8 @@
   </PropertyGroup>
 
 <ItemGroup>
-    <Content Remove="wwwroot\css\site.css" />
+    <!-- <Content Remove="wwwroot\css\site.css" />
-    <Content Include="wwwroot\css\site.css" Watch="false" />
+    <Content Include="wwwroot\css\site.css" Watch="false" /> -->
 </ItemGroup>
   
   <Target Name="Tailwind" BeforeTargets="Build">

HaWeb/Models/RegisterViewModel.cs

@@ -6,6 +6,7 @@ public class RegisterViewModel {
     public string Id { get; private set; }
     public string Title { get; private set; }
     public bool AllowSendIn { get; private set; }
+    public bool AllowSearch { get; private set; }
 
     private List<(string, string)>? _AvailableCategories;
     private List<(string, string)>? _AvailableSideCategories;
@@ -42,11 +43,12 @@ public class RegisterViewModel {
         }
     }
 
-    public RegisterViewModel(string category, string id, List<CommentModel> parsedComments, string title, bool allowSendIn) {
+    public RegisterViewModel(string category, string id, List<CommentModel> parsedComments, string title, bool allowSendIn, bool allowSearch) {
         this.Category = HttpUtility.HtmlAttributeEncode(category);
         this.Id = HttpUtility.HtmlAttributeEncode(id);
         this.ParsedComments = parsedComments;
         this.Title = HttpUtility.HtmlEncode(title);
         this.AllowSendIn = allowSendIn;
+        this.AllowSearch = allowSearch;
     }
 }

HaWeb/Views/Register/Index.cshtml

@@ -36,6 +36,13 @@
                 </a>
             </div>
             }
+            @if (Model.AllowSearch) {
+            <form class="ha-registersearchform" asp-controller="Register" asp-action="Search" asp-route-id="@string.Empty" method="post" >
+                <input class="ha-registersearchtext" type="text" name="search" placeholder="Suchbegriff..." />
+                <input type="hidden" name="category" value="@Model.Category" />
+                <button class="ha-registersearchbutton" type="submit">Suchen</button>
+            </form>
+            }
             <div class="ha-register-nav" id="ha-register-nav">
                 <div class="ha-register-left-nav">
                     @if (Model.AvailableCategories != null) {

HaWeb/package-lock.json

@@ -16,6 +16,7 @@
         "cssnano": "^5.1.11",
         "postcss": "^8.4.14",
         "postcss-cli": "^9.1.0",
+        "postcss-import": "^14.1.0",
         "tailwindcss": "^3.0.24"
       }
     },
@@ -133,9 +134,9 @@
       }
     },
     "node_modules/arg": {
-      "version": "5.0.1",
+      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
     "node_modules/array-union": {
@@ -211,9 +212,9 @@
       }
     },
     "node_modules/browserslist": {
-      "version": "4.20.3",
+      "version": "4.20.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.4.tgz",
-      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
+      "integrity": "sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw==",
       "dev": true,
       "funding": [
         {
@@ -226,10 +227,10 @@
         }
       ],
       "dependencies": {
-        "caniuse-lite": "^1.0.30001332",
+        "caniuse-lite": "^1.0.30001349",
-        "electron-to-chromium": "^1.4.118",
+        "electron-to-chromium": "^1.4.147",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.3",
+        "node-releases": "^2.0.5",
         "picocolors": "^1.0.0"
       },
       "bin": {
@@ -261,9 +262,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001339",
+      "version": "1.0.30001352",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001339.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001352.tgz",
-      "integrity": "sha512-Es8PiVqCe+uXdms0Gu5xP5PF2bxLR7OBp3wUzUnuO7OHzhOfCyg3hdiGWVPVxhiuniOzng+hTc1u3fEQ0TlkSQ==",
+      "integrity": "sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA==",
       "dev": true,
       "funding": [
         {
@@ -303,18 +304,6 @@
         "fsevents": "~2.3.2"
       }
     },
-    "node_modules/chokidar/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/cliui": {
       "version": "7.0.4",
       "resolved": "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz",
@@ -515,7 +504,7 @@
     "node_modules/defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
       "dev": true
     },
     "node_modules/dependency-graph": {
@@ -528,14 +517,14 @@
       }
     },
     "node_modules/detective": {
-      "version": "5.2.0",
+      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
       "dev": true,
       "dependencies": {
-        "acorn-node": "^1.6.1",
+        "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
-        "minimist": "^1.1.1"
+        "minimist": "^1.2.6"
       },
       "bin": {
         "detective": "bin/detective.js"
@@ -624,9 +613,9 @@
       }
     },
     "node_modules/electron-to-chromium": {
-      "version": "1.4.137",
+      "version": "1.4.150",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.150.tgz",
-      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
+      "integrity": "sha512-MP3oBer0X7ZeS9GJ0H6lmkn561UxiwOIY9TTkdxVY7lI9G6GVCKfgJaHaDcakwdKxBXA4T3ybeswH/WBIN/KTA==",
       "dev": true
     },
     "node_modules/emoji-regex": {
@@ -677,18 +666,6 @@
         "node": ">=8.6.0"
       }
     },
-    "node_modules/fast-glob/node_modules/glob-parent": {
-      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-      "dev": true,
-      "dependencies": {
-        "is-glob": "^4.0.1"
-      },
-      "engines": {
-        "node": ">= 6"
-      }
-    },
     "node_modules/fastq": {
       "version": "1.13.0",
       "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.13.0.tgz",
@@ -779,15 +756,15 @@
       }
     },
     "node_modules/glob-parent": {
-      "version": "6.0.2",
+      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
       "dependencies": {
-        "is-glob": "^4.0.3"
+        "is-glob": "^4.0.1"
       },
       "engines": {
-        "node": ">=10.13.0"
+        "node": ">= 6"
       }
     },
     "node_modules/globby": {
@@ -864,7 +841,7 @@
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -984,9 +961,9 @@
       }
     },
     "node_modules/node-releases": {
-      "version": "2.0.4",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
-      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
+      "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==",
       "dev": true
     },
     "node_modules/normalize-path": {
@@ -1001,7 +978,7 @@
     "node_modules/normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true,
       "engines": {
         "node": ">=0.10.0"
@@ -1230,6 +1207,23 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "dependencies": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "postcss": "^8.0.0"
+      }
+    },
     "node_modules/postcss-js": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -1879,15 +1873,15 @@
       }
     },
     "node_modules/tailwindcss": {
-      "version": "3.0.24",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.0.tgz",
-      "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+      "integrity": "sha512-XzXq31Fj6RizhlFVNLBlDqzs0dXuIEOAknuOcKx2R/IIQbEz5DnngslYY4JNN6e9JkNBjHGm1w2XDABsADg1ng==",
       "dev": true,
       "dependencies": {
         "arg": "^5.0.1",
         "chokidar": "^3.5.3",
         "color-name": "^1.1.4",
-        "detective": "^5.2.0",
+        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.11",
@@ -1897,7 +1891,8 @@
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.12",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
         "postcss-nested": "5.0.6",
@@ -1917,6 +1912,18 @@
         "postcss": "^8.0.9"
       }
     },
+    "node_modules/tailwindcss/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/thenby": {
       "version": "1.3.4",
       "resolved": "https://registry.npmjs.org/thenby/-/thenby-1.3.4.tgz",
@@ -2119,9 +2126,9 @@
       }
     },
     "arg": {
-      "version": "5.0.1",
+      "version": "5.0.2",
-      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.1.tgz",
+      "resolved": "https://registry.npmjs.org/arg/-/arg-5.0.2.tgz",
-      "integrity": "sha512-e0hDa9H2Z9AwFkk2qDlwhoMYE4eToKarchkQHovNdLTCYMHZHeRjI71crOh+dio4K6u1IcwubQqo79Ga4CyAQA==",
+      "integrity": "sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==",
       "dev": true
     },
     "array-union": {
@@ -2166,15 +2173,15 @@
       }
     },
     "browserslist": {
-      "version": "4.20.3",
+      "version": "4.20.4",
-      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.3.tgz",
+      "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.20.4.tgz",
-      "integrity": "sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==",
+      "integrity": "sha512-ok1d+1WpnU24XYN7oC3QWgTyMhY/avPJ/r9T00xxvUOIparA/gc+UPUMaod3i+G6s+nI2nUb9xZ5k794uIwShw==",
       "dev": true,
       "requires": {
-        "caniuse-lite": "^1.0.30001332",
+        "caniuse-lite": "^1.0.30001349",
-        "electron-to-chromium": "^1.4.118",
+        "electron-to-chromium": "^1.4.147",
         "escalade": "^3.1.1",
-        "node-releases": "^2.0.3",
+        "node-releases": "^2.0.5",
         "picocolors": "^1.0.0"
       }
     },
@@ -2197,9 +2204,9 @@
       }
     },
     "caniuse-lite": {
-      "version": "1.0.30001339",
+      "version": "1.0.30001352",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001339.tgz",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001352.tgz",
-      "integrity": "sha512-Es8PiVqCe+uXdms0Gu5xP5PF2bxLR7OBp3wUzUnuO7OHzhOfCyg3hdiGWVPVxhiuniOzng+hTc1u3fEQ0TlkSQ==",
+      "integrity": "sha512-GUgH8w6YergqPQDGWhJGt8GDRnY0L/iJVQcU3eJ46GYf52R8tk0Wxp0PymuFVZboJYXGiCqwozAYZNRjVj6IcA==",
       "dev": true
     },
     "chokidar": {
@@ -2216,17 +2223,6 @@
         "is-glob": "~4.0.1",
         "normalize-path": "~3.0.0",
         "readdirp": "~3.6.0"
-      },
-      "dependencies": {
-        "glob-parent": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        }
       }
     },
     "cliui": {
@@ -2376,7 +2372,7 @@
     "defined": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
-      "integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM=",
+      "integrity": "sha512-Y2caI5+ZwS5c3RiNDJ6u53VhQHv+hHKwhkI1iHvceKUHw9Df6EK2zRLfjejRgMuCuxK7PfSWIMwWecceVvThjQ==",
       "dev": true
     },
     "dependency-graph": {
@@ -2386,14 +2382,14 @@
       "dev": true
     },
     "detective": {
-      "version": "5.2.0",
+      "version": "5.2.1",
-      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/detective/-/detective-5.2.1.tgz",
-      "integrity": "sha512-6SsIx+nUUbuK0EthKjv0zrdnajCCXVYGmbYYiYjFVpzcjwEs/JMDZ8tPRG29J/HhN56t3GJp2cGSWDRjjot8Pg==",
+      "integrity": "sha512-v9XE1zRnz1wRtgurGu0Bs8uHKFSTdteYZNbIPFVhUZ39L/S79ppMpdmVOZAnoz1jfEFodc48n6MX483Xo3t1yw==",
       "dev": true,
       "requires": {
-        "acorn-node": "^1.6.1",
+        "acorn-node": "^1.8.2",
         "defined": "^1.0.0",
-        "minimist": "^1.1.1"
+        "minimist": "^1.2.6"
       }
     },
     "didyoumean": {
@@ -2455,9 +2451,9 @@
       }
     },
     "electron-to-chromium": {
-      "version": "1.4.137",
+      "version": "1.4.150",
-      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.137.tgz",
+      "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.150.tgz",
-      "integrity": "sha512-0Rcpald12O11BUogJagX3HsCN3FE83DSqWjgXoHo5a72KUKMSfI39XBgJpgNNxS9fuGzytaFjE06kZkiVFy2qA==",
+      "integrity": "sha512-MP3oBer0X7ZeS9GJ0H6lmkn561UxiwOIY9TTkdxVY7lI9G6GVCKfgJaHaDcakwdKxBXA4T3ybeswH/WBIN/KTA==",
       "dev": true
     },
     "emoji-regex": {
@@ -2497,17 +2493,6 @@
         "glob-parent": "^5.1.2",
         "merge2": "^1.3.0",
         "micromatch": "^4.0.4"
-      },
-      "dependencies": {
-        "glob-parent": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-          "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
-          "dev": true,
-          "requires": {
-            "is-glob": "^4.0.1"
-          }
-        }
       }
     },
     "fastq": {
@@ -2571,12 +2556,12 @@
       "dev": true
     },
     "glob-parent": {
-      "version": "6.0.2",
+      "version": "5.1.2",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
-      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
       "requires": {
-        "is-glob": "^4.0.3"
+        "is-glob": "^4.0.1"
       }
     },
     "globby": {
@@ -2635,7 +2620,7 @@
     "is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
-      "integrity": "sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=",
+      "integrity": "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==",
       "dev": true
     },
     "is-fullwidth-code-point": {
@@ -2726,9 +2711,9 @@
       "dev": true
     },
     "node-releases": {
-      "version": "2.0.4",
+      "version": "2.0.5",
-      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.5.tgz",
-      "integrity": "sha512-gbMzqQtTtDz/00jQzZ21PQzdI9PyLYqUSvD0p3naOhX4odFji0ZxYdnVwPTxmSwkmxhcFImpozceidSG+AgoPQ==",
+      "integrity": "sha512-U9h1NLROZTq9uE1SNffn6WuPDg8icmi3ns4rEl/oTfIle4iLjTliCzgTsbaIFMq/Xn078/lfY/BL0GWZ+psK4Q==",
       "dev": true
     },
     "normalize-path": {
@@ -2740,7 +2725,7 @@
     "normalize-range": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/normalize-range/-/normalize-range-0.1.2.tgz",
-      "integrity": "sha1-LRDAa9/TEuqXd2laTShDlFa3WUI=",
+      "integrity": "sha512-bdok/XvKII3nUpklnV6P2hxtMNrCboOjAcyBuQnWEhO665FwrSNRxU+AqpsyvO6LgGYPspN+lu5CLtw4jPRKNA==",
       "dev": true
     },
     "normalize-url": {
@@ -2885,6 +2870,17 @@
       "dev": true,
       "requires": {}
     },
+    "postcss-import": {
+      "version": "14.1.0",
+      "resolved": "https://registry.npmjs.org/postcss-import/-/postcss-import-14.1.0.tgz",
+      "integrity": "sha512-flwI+Vgm4SElObFVPpTIT7SU7R3qk2L7PyduMcokiaVKuWv9d/U+Gm/QAd8NDLuykTWTkcrjOeD2Pp1rMeBTGw==",
+      "dev": true,
+      "requires": {
+        "postcss-value-parser": "^4.0.0",
+        "read-cache": "^1.0.0",
+        "resolve": "^1.1.7"
+      }
+    },
     "postcss-js": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/postcss-js/-/postcss-js-4.0.0.tgz",
@@ -3274,15 +3270,15 @@
       }
     },
     "tailwindcss": {
-      "version": "3.0.24",
+      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.0.24.tgz",
+      "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.1.0.tgz",
-      "integrity": "sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==",
+      "integrity": "sha512-XzXq31Fj6RizhlFVNLBlDqzs0dXuIEOAknuOcKx2R/IIQbEz5DnngslYY4JNN6e9JkNBjHGm1w2XDABsADg1ng==",
       "dev": true,
       "requires": {
         "arg": "^5.0.1",
         "chokidar": "^3.5.3",
         "color-name": "^1.1.4",
-        "detective": "^5.2.0",
+        "detective": "^5.2.1",
         "didyoumean": "^1.2.2",
         "dlv": "^1.1.3",
         "fast-glob": "^3.2.11",
@@ -3292,7 +3288,8 @@
         "normalize-path": "^3.0.0",
         "object-hash": "^3.0.0",
         "picocolors": "^1.0.0",
-        "postcss": "^8.4.12",
+        "postcss": "^8.4.14",
+        "postcss-import": "^14.1.0",
         "postcss-js": "^4.0.0",
         "postcss-load-config": "^3.1.4",
         "postcss-nested": "5.0.6",
@@ -3300,6 +3297,17 @@
         "postcss-value-parser": "^4.2.0",
         "quick-lru": "^5.1.1",
         "resolve": "^1.22.0"
+      },
+      "dependencies": {
+        "glob-parent": {
+          "version": "6.0.2",
+          "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+          "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+          "dev": true,
+          "requires": {
+            "is-glob": "^4.0.3"
+          }
+        }
       }
     },
     "thenby": {

HaWeb/package.json

@@ -15,6 +15,7 @@
     "cssnano": "^5.1.11",
     "postcss": "^8.4.14",
     "postcss-cli": "^9.1.0",
+    "postcss-import": "^14.1.0",
     "tailwindcss": "^3.0.24"
   },
   "dependencies": {

HaWeb/postcss.config.js

@@ -1,9 +1,9 @@
 module.exports = {
   plugins: [
+    require('postcss-import'),
     require('tailwindcss'),
-
     // Production:
-    require('autoprefixer'),
+    // require('autoprefixer'),
-    require('cssnano')({ preset: 'default' })
+    // require('cssnano')({ preset: 'default' })
   ],
 }

HaWeb/wwwroot/css/fonts.css

@@ -0,0 +1,76 @@
+/* Regular woff-files for regular font variants curerently
+   Instead we can use the Graphite versions of the font   
+
+@font-face {
+    font-family: 'Biolinum';
+    src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
+    font-display: swap;
+    font-weight: normal;
+    font-style: normal;
+}
+
+@font-face {
+    font-family: 'Libertine';
+    src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
+    font-display: swap;
+    font-weight: normal;
+    font-style: normal;
+}
+
+*/
+
+@font-face {
+    font-family: "Biolinum";
+    src: url("../fonts/LinBiolinum_R.woff") format("woff");
+    font-display: swap;
+    font-weight: normal;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: "Libertine";
+    src: url("../fonts/LinLibertine_R.woff") format("woff");
+    font-display: swap;
+    font-weight: normal;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: "Biolinum";
+    src: url("../fonts/LinBiolinum_RI.woff") format("woff");
+    font-display: swap;
+    font-weight: normal;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: "Biolinum";
+    src: url("../fonts/LinBiolinum_RB.woff") format("woff");
+    font-display: swap;
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: "Libertine";
+    src: url("../fonts/LinLibertine_RI.woff") format("woff");
+    font-display: swap;
+    font-weight: normal;
+    font-style: italic;
+  }
+  
+  @font-face {
+    font-family: "Libertine";
+    src: url("../fonts/LinLibertine_RB.woff") format("woff");
+    font-display: swap;
+    font-weight: bold;
+    font-style: normal;
+  }
+  
+  @font-face {
+    font-family: "Playfair";
+    src: url("../fonts/PlayfairDisplay-VariableFont_wght.ttf") format("truetype");
+    font-display: swap;
+    font-weight: normal;
+    font-style: normal;
+  }

HaWeb/wwwroot/css/footer.css

@@ -0,0 +1,59 @@
+@layer components {
+/* COLORS */
+  .ha-footer .ha-footertext {
+    @apply bg-slate-50 text-hamannSlate-900 dark:bg-slate-700 dark:text-white
+  }
+
+  .ha-footer .ha-themetoggles {
+    @apply bg-slate-200 dark:bg-slate-800 transition-colors duration-300 shadow-inner
+  }
+
+  .ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
+    @apply bg-slate-200 transition-colors duration-300
+  }
+
+  .ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
+      @apply bg-slate-50 transition-colors duration-300
+  }
+
+/* STYLES */
+  .ha-footer {
+    @apply font-serif;
+  }
+
+  .ha-footer .ha-footertext {
+    @apply p-2 px-4 mx-auto max-w-screen-desktop text-right text-sm
+  }
+
+  .ha-footer a {
+    @apply underline decoration-dotted hover:decoration-solid
+  }
+
+  .ha-footer .ha-themetoggles {
+    @apply whitespace-nowrap relative px-0.5 rounded-3xl h-4 w-[34px] 
+  }
+
+  .ha-footer .ha-themetoggles * {
+    @apply float-left
+  }
+
+  .ha-footer .ha-themetoggles input[type="radio"] {
+    @apply hidden
+  }
+
+  .ha-footer .ha-themetoggles label {
+    @apply z-10 block w-[11px] h-[11px] my-[3px] mx-[2px] rounded-3xl cursor-pointer text-center
+  }
+
+  .ha-footer .ha-themetoggles .ha-themetoggleslider {
+    @apply w-[11px] h-[11px] absolute top-[3px] rounded-3xl transition-all duration-100 ease-in-out shadow-md
+  }
+
+  .ha-footer .ha-themetoggles #ha-toggledark:checked ~ .ha-themetoggleslider {
+      @apply  left-1
+  }
+
+  .ha-footer .ha-themetoggles #ha-togglebright:checked ~ .ha-themetoggleslider {
+      @apply left-[19px]
+  }
+}

HaWeb/wwwroot/css/header.css

@@ -0,0 +1,96 @@
+@layer components {
+/* COLORS */
+  .ha-topnav-dropdown .ha-topnav-dropdown-content {
+    @apply bg-slate-50 shadow-md border-slate-400 border-b
+  }
+
+  .ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
+    @apply bg-slate-100
+  }
+
+  .ha-topnav a {
+    @apply text-slate-700 hover:text-slate-900 
+  }
+
+  .ha-topnav a.active {
+    @apply desktop:border-b-4 desktop:border-slate-200 dark:border-slate-700 dark:font-bold
+  }
+
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content {
+    @apply shadow-none desktop:shadow-md desktop:border-b
+  }
+
+  .ha-menusymbol svg {
+    @apply text-black stroke-black
+  }
+
+/* STYLES */
+  .ha-topnav {
+    @apply flex desktop:grow-0 desktop:shrink-0 md:text-lg 2xl:text-xl desktop:place-self-end xl:mb-1;
+  }
+
+  .ha-topnav a {
+    @apply hidden desktop:inline-block mr-6 2xl:mr-7
+  }
+
+  .ha-topnav a:last-child {
+    @apply mr-0;
+  }
+
+  .ha-topnav-dropdown {
+    @apply hidden desktop:relative desktop:inline-block;
+  }
+
+  .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+    @apply desktop:block;
+  }
+
+  .ha-topnav-dropdown .ha-topnav-dropdown-content {
+    @apply hidden mr-6 pt-1 right-0 desktop:absolute min-w-[130px] z-50;
+  }
+
+  .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+    @apply pl-2 pr-3 py-2 block mr-0;
+  }
+
+  .ha-topnav-dropdown .ha-topnav-dropdown-content .active {
+    @apply border-none
+  }
+
+  .ha-topnav a.active {
+    @apply underline underline-offset-2 desktop:no-underline
+  }
+
+  .ha-topnav.ha-topnav-collapsed {
+    @apply block w-full h-full mt-4 text-base desktop:flex desktop:w-fit desktop:mt-0 md:text-lg 2xl:text-xl
+  }
+
+  .ha-topnav.ha-topnav-collapsed a {
+    @apply block py-1 w-full text-left clear-both desktop:inline-block desktop:py-0 desktop:w-fit
+  }
+
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
+    @apply block desktop:inline-block
+  }
+
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown:hover
+    .ha-topnav-dropdown-content {
+    @apply desktop:block
+  }
+
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content {
+    @apply block shadow-none border-none pt-0 desktop:hidden desktop:pt-2
+  }
+
+  .ha-topnav.ha-topnav-collapsed
+    .ha-topnav-dropdown
+    .ha-topnav-dropdown-content
+    a {
+    @apply py-1 desktop:py-2
+  }
+}

HaWeb/wwwroot/css/icons.css

@@ -0,0 +1,201 @@
+/* Symbols, Icons, Drawings, Tooltips */
+.ha-menu-arrowsymbol::after {
+    display: inline-block;
+    margin-left: 0.2em;
+    vertical-align: 0.2em;
+    content: "";
+    border-top: 0.3em solid;
+    border-right: 0.3em solid transparent;
+    border-bottom: 0;
+    border-left: 0.3em solid transparent;
+  }
+  
+  .ha-menusymbol {
+    border-radius: 4px;
+  }
+  
+  .ha-menusymbol svg {
+    width: 24px;
+    height: 24px;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: miter;
+    fill: none;
+  }
+  
+  .ha-tooltip .ha-tooltiptext {
+    white-space: nowrap;
+    visibility: hidden;
+    min-width: 160px;
+    bottom: 155%;
+    left: 50%;
+    margin-left: -80px;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+  
+  .ha-tooltip .ha-tooltiptext::after {
+    content: "";
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    /* border-color: rgb(226 232 240 / var(--tw-bg-opacity)) transparent transparent
+      transparent; */
+  }
+  
+  .ha-tooltip:hover .ha-tooltiptext {
+    visibility: visible;
+    opacity: 1;
+  }
+  
+  .ha-open-btn-collapsed-box::before {
+    content: "\200E+";
+    font-weight: 900;
+  }
+  
+  .ha-close-btn-collapsed-box::before {
+    content: "\200E\00D7";
+    font-weight: 900;
+  }
+  
+  .ha-uploadheader .ha-usedfilesheaderlist .ha-plussign {
+    content: "\200E+ ";
+    font-weight: bold;
+    display: inline-block;
+    background-color: lightslategray;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+  }
+  
+  /* Tooltip text */
+  .ha-uploadform .ha-uploadmessage {
+    visibility: visible;
+    text-align: center;
+    padding: 5px 0;
+    border-radius: 6px;
+   
+    /* Position the tooltip text - see examples below! */
+    position: absolute;
+    z-index: 1;
+  
+    margin-top: 0.5rem;
+    width: 360px;
+    top: 100%;
+    left: 50%;
+    margin-left: -180px; /* Use half of the width (120/2 = 60), to center the tooltip */
+  
+    opacity: 0;
+    transition: opacity 1s;
+  }
+  
+  .ha-uploadform .ha-uploadmessage::after {
+    content: " ";
+    position: absolute;
+    bottom: 100%;  /* At the top of the tooltip */
+    left: 50%;
+    margin-left: -5px;
+    border-width: 5px;
+    border-style: solid;
+    border-color: transparent transparent grey transparent;
+  
+  }
+  
+  
+  .ha-lds-ellipsis {
+    display: none;
+    position: absolute;
+    bottom: 20px;
+  }
+  
+  .ha-lds-ellipsis-load {
+    display: none;
+    position: relative;
+    width: 38px;
+    bottom: 8px;
+  }
+  
+  .ha-lds-ellipsis-publish {
+    display: none;
+    position: absolute;
+    left: -50px;
+    bottom: 16px;
+  }
+  
+  .ha-lds-ellipsis div,
+  .ha-lds-ellipsis-load div,
+  .ha-lds-ellipsis-publish div {
+    position: absolute;
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #000;
+    animation-timing-function: cubic-bezier(0, 1, 1, 0);
+  }
+  
+  .ha-lds-ellipsis div:nth-child(1),
+  .ha-lds-ellipsis-load div:nth-child(1),
+  .ha-lds-ellipsis-publish div:nth-child(1) {
+    left: 6px;
+    animation: ha-lds-ellipsis1 0.6s infinite;
+  }
+  
+  .ha-lds-ellipsis div:nth-child(2),
+  .ha-lds-ellipsis-load div:nth-child(2),
+  .ha-lds-ellipsis-publish div:nth-child(2) {
+    left: 4px;
+    animation: ha-lds-ellipsis2 0.6s infinite;
+  }
+  
+  .ha-lds-ellipsis div:nth-child(3),
+  .ha-lds-ellipsis-load div:nth-child(3),
+  .ha-lds-ellipsis-publish div:nth-child(3) {
+    left: 16px;
+    animation: ha-lds-ellipsis2 0.6s infinite;
+  }
+  
+  .ha-lds-ellipsis div:nth-child(4),
+  .ha-lds-ellipsis-load div:nth-child(4),
+  .ha-lds-ellipsis-publish div:nth-child(4) {
+    left: 30px;
+    animation: ha-lds-ellipsis3 0.6s infinite;
+  }
+  
+  @keyframes ha-lds-ellipsis1 {
+    0% {
+      transform: scale(0);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  
+  @keyframes ha-lds-ellipsis3 {
+    0% {
+      transform: scale(1);
+    }
+    100% {
+      transform: scale(0);
+    }
+  }
+  
+  @keyframes ha-lds-ellipsis2 {
+    0% {
+      transform: translate(0, 0);
+    }
+    100% {
+      transform: translate(16px, 0);
+    }
+  }
+  
+  .ha-cross::before,
+  .ha-cross::after {
+    content: "";
+  }
+  
+  .ha-cross::before {
+    -webkit-transform: skewY(-27deg);
+    transform: skewY(-27deg);
+  }

HaWeb/wwwroot/css/letter.css

@@ -0,0 +1,377 @@
+@layer components {
+/* COLORS */
+  .ha-letterhead .ha-metadata .ha-tooltiptext {
+    @apply shadow-sm bg-slate-50 border-hamannSlate-900 text-hamannSlate-900 border dark:border-none dark:shadow dark:bg-slate-800
+  }
+
+  .ha-tooltip .ha-tooltiptext::after {
+    @apply border-t-slate-600 dark:border-t-slate-800 border-l-transparent border-r-transparent border-b-transparent
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
+    @apply rounded-lg border shadow-inner border-hamannSlate-900 text-hamannSlate-900 dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill.ha-newpill {
+    @apply dark:text-white dark:bg-slate-800 dark:shadow-md dark:border-slate-400
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before {
+    @apply border-b-2 border-hamannSlate-900 dark:border-gray-200
+  }
+
+  .ha-letterheader {
+    @apply bg-slate-50 dark:bg-slate-900 dark:text-slate-50 border-slate-300 dark:border-slate-50 border-b-2 dark:shadow-xl
+  }
+
+  .ha-letterheader .ha-lettertabs a {
+    @apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-200
+  }
+
+  .ha-letterheader .ha-lettertabs a.active {
+    @apply border-b-[3px] border-slate-300 dark:border-slate-50 text-hamannHighlight dark:!text-gray-200 dark:font-bold
+  }
+
+  .ha-letterheader .ha-lettermetalinks {
+    @apply border-b-2 border-slate-300
+  }
+
+  .ha-letterheader .ha-lettermetalinks a {
+    @apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-200
+  }
+
+  .ha-letterbody {
+    @apply bg-slate-50 dark:bg-slate-900 dark:shadow-xl
+  }
+
+  .ha-lettertext {
+    @apply bg-slate-50 dark:bg-slate-900 border-slate-200 sm:border-l-2  sm:dark:border-none
+  }
+
+  .ha-marginals {
+    @apply bg-slate-50 dark:bg-slate-900
+  }
+
+  .ha-additions {
+    @apply hidden bg-slate-50 dark:bg-slate-900
+  }
+
+  .ha-additions .ha-edits .ha-editentries table tr:nth-child(even) {
+    @apply bg-slate-100 dark:bg-slate-900
+  }
+
+  .ha-linecount.ha-firstline {
+    @apply rounded-lg sm:border sm:bg-slate-50 sm:shadow-inner sm:border-slate-600 text-slate-800 dark:text-white sm:dark:bg-slate-800 sm:dark:shadow-md sm:dark:border-slate-400
+  }
+
+  .ha-linecount .ha-zhpage,
+  .ha-linecount .ha-zhline {
+    @apply sm:bg-slate-50 sm:dark:bg-slate-900
+  }
+
+  .ha-tradzhtext .ha-marginal::before,
+  .ha-lettertext .ha-marginal:before {
+    @apply bg-hamannSlate-500 dark:bg-slate-500
+  } 
+
+  .ha-tradzhtext .ha-marginalbox,
+  .ha-lettertext .ha-marginalbox {
+    @apply bg-slate-50 dark:bg-slate-900
+  }
+
+  .ha-tradzhtext .ha-marginalbox.ha-expanded-box .ha-marginallist,
+  .ha-lettertext .ha-marginalbox.ha-expanded-box .ha-marginallist {
+    @apply shadow-md dark:shadow-lg pb-1 bg-slate-100 dark:bg-slate-600
+  }
+
+  .ha-tradzhtext .ha-btn-collapsed-box,
+  .ha-lettertext .ha-btn-collapsed-box {
+    @apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-200
+  }
+
+/* STYLES */
+  .ha-letterheader {
+    @apply rounded-t-sm pt-8 md:pt-12 px-6 md:px-16
+  }
+
+  .ha-letterheader .ha-letterheadernav {
+    @apply mt-9 flex grow
+  }
+
+  .ha-letterheader .ha-lettertabs {
+    @apply flex grow
+  }
+
+  .ha-letterheader .ha-lettertabs a {
+    @apply inline-block px-1 mr-1 md:mr-3 cursor-pointer
+  }
+
+  .ha-letterheader .ha-lettertabs .ha-marginalsbtn {
+    @apply md:hidden;
+  }
+
+  .ha-letterheader .ha-lettertabs a.active {
+    @apply pointer-events-none 
+  }
+
+  .ha-letterheader .ha-lettertabs a:first {
+    @apply pl-0
+  }
+
+  .ha-letterheader .ha-lettermetalinks {
+    @apply self-end 
+  }
+
+  .ha-letterheader .ha-lettermetalinks a {
+    @apply self-end caps-petite
+  }
+
+  .ha-letterheader .ha-lettermetalinks .ha-hkb {
+    @apply inline-block caps-allpetite
+  }
+
+  .ha-letterbody {
+    @apply flex flex-row flex-nowrap rounded-b-sm
+  }
+
+  .ha-lettertext {
+    @apply max-w-[38rem] desktop:max-w-[45rem] sm:shrink-0 ml-4 sm:ml-12 px-4 pt-4 pb-8 relative flow-root font-serif leading-[1.48]  numeric-mediaeval
+  }
+
+  .ha-marginals {
+    @apply hidden max-w-3xl ml-4 md:ml-12 px-4 py-4 relative leading-[1.48] numeric-mediaeval
+  }
+
+  .ha-marginals table td {
+    @apply align-text-top
+  }
+
+  .ha-marginals .ha-marginalfromto {
+    @apply whitespace-nowrap text-sm font-semibold pr-4
+  }
+
+  .ha-marginals .ha-marginaltext .ha-bzg {
+    @apply inline
+  }
+
+  .ha-marginals .ha-marginaltext a {
+    @apply underline decoration-dotted hover:decoration-solid
+  }
+
+  .ha-additions .ha-tradition div {
+    @apply inline
+  }
+
+  .ha-additions .ha-tradition {
+    @apply max-w-4xl
+  }
+
+  .ha-additions {
+    @apply ml-4 md:ml-12 px-4 pt-4 pb-4 relative font-serif leading-[1.48] numeric-mediaeval
+  }
+
+  .ha-additions .ha-app {
+    @apply !block font-bold pt-6
+  }
+
+  .ha-additions .ha-app + br {
+    @apply hidden
+  }
+
+  .ha-additions .ha-tradition .ha-app:first-child {
+    @apply pt-0
+  }
+
+  .ha-additions .ha-tradition {
+    @apply hyphenate
+  }
+
+  .ha-additions .ha-tradition .ha-tradzhtext {
+    @apply !flow-root font-serif relative w-fit -ml-4 pl-4 unhyphenate
+  }
+
+  .ha-additions .ha-tradition a {
+    @apply !underline decoration-dotted hover:decoration-solid 
+  }
+
+  .ha-additions .ha-hands {
+    @apply pt-6
+  }
+
+  .ha-additions .ha-hands .ha-handstitle {
+    @apply font-bold
+  }
+
+  .ha-additions .ha-hands .ha-handentries .ha-handfrom,
+  .ha-additions .ha-hands .ha-handentries .ha-handto {
+    @apply inline text-sm font-semibold whitespace-nowrap
+  }
+
+  .ha-additions .ha-hands .ha-handentries .ha-handperson {
+    @apply inline pl-4 whitespace-nowrap
+  }
+
+  .ha-additions .ha-edits .ha-editstitle {
+    @apply font-bold
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editfromto {
+    @apply whitespace-nowrap
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editfrom,
+  .ha-additions .ha-edits .ha-editentries .ha-editto {
+    @apply inline text-sm font-semibold whitespace-nowrap
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreference {
+    @apply whitespace-nowrap
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreference div {
+    @apply inline
+  }
+
+  .ha-additions .ha-edits {
+    @apply pt-6 max-w-4xl
+  }
+
+  .ha-additions .ha-edits .ha-editstitle {
+    @apply font-bold
+  }
+
+  .ha-additions .ha-edits .ha-editsinfo {
+    @apply pb-4 hyphenate
+  }
+
+  .ha-additions .ha-edits .ha-editentries tr td {
+    @apply align-text-top
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreas div {
+    @apply inline font-sans
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editfromto {
+    @apply pr-1 pl-1
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreference {
+    @apply border-r-2 pl-1 pr-3 text-sm
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreference br {
+    @apply hidden
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreas {
+    @apply pl-3 w-full
+  }
+
+  .ha-additions .ha-edits .ha-editentries .ha-editreas .ha-zh * {
+    @apply !font-serif
+  }
+
+  .ha-lettertext div {
+    @apply inline
+  }
+
+  .ha-linecount.ha-firstline {
+    @apply hidden sm:inline-block rounded px-1.5 sm:py-0.5 sm:pb-1 sm:leading-none caps-allpetite normal-nums whitespace-nowrap
+  }
+
+  .ha-linecount {
+    @apply sm:absolute sm:right-full sm:mr-2 sm:text-right text-xs sm:mt-1 font-sans select-none
+  }
+
+  .ha-linecount .ha-zhline {
+    @apply hidden sm:inline
+  }
+
+  .ha-linecount .ha-zhpage {
+    @apply inline-block sm:inline;
+  }
+
+  .ha-linecount .ha-zhpage,
+  .ha-linecount .ha-zhline {
+    @apply px-1 sm:pb-1 caps-allpetite normal-nums
+  }
+
+  .ha-linecount .ha-hiddenlinecount {
+    @apply !hidden
+  }
+
+  .ha-tradzhtext .ha-marginal::before,
+  .ha-lettertext .ha-marginal::before {
+    @apply absolute top-[0.2rem] bottom-[0.1rem] left-0 w-0.5 content-['']
+  } 
+
+  .ha-tradzhtext .ha-marginalbox,
+  .ha-lettertext .ha-marginalbox {
+    @apply hidden select-none hover:select-auto hyphenate pl-2 md:block absolute left-full ml-2 desktop:ml-10 mt-1 w-[16rem] desktop:w-[28rem] text-sm leading-tight rounded-sm font-sans 
+  }
+
+  .ha-tradzhtext .ha-marginalbox .ha-marginallist,
+  .ha-lettertext .ha-marginalbox .ha-marginallist {
+    @apply text-sm leading-tight flex flex-wrap gap-x-6 pr-1
+  }
+
+  .ha-tradzhtext .ha-marginalbox .ha-marginallist .ha-marginal,
+  .ha-lettertext .ha-marginalbox .ha-marginallist .ha-marginal {
+    @apply pl-2 inline relative
+  }
+
+  .ha-tradzhtext .ha-marginalbox .ha-marginallist .ha-marginal a,
+  .ha-lettertext .ha-marginalbox .ha-marginallist .ha-marginal a {
+    @apply !underline decoration-dotted hover:decoration-solid 
+  }
+
+  .ha-tradzhtext .ha-marginalbox .ha-marginallist .ha-marginal,
+  .ha-lettertext .ha-marginalbox .ha-marginallist .ha-marginal,
+  .ha-tradzhtext .ha-marginalbox .ha-marginallist .ha-marginal *,
+  .ha-lettertext .ha-marginalbox .ha-marginallist .ha-marginal * {
+    @apply min-h-0 min-w-0 overflow-ellipsis overflow-hidden
+  }
+
+  .ha-tradzhtext .ha-btn-collapsed-box,
+  .ha-lettertext .ha-btn-collapsed-box {
+    @apply absolute left-full desktop:ml-7 hidden md:block cursor-pointer leading-none mt-0.5
+  }
+
+  .ha-minwidth .ha-tradzhtext,
+  .ha-lettertext.ha-minwidth {
+    @apply min-w-[38rem] desktop:min-w-[55rem]
+  }
+
+  .ha-minwidth .ha-tradzhtext .ha-alignright,
+  .ha-lettertext.ha-minwidth .ha-alignright {
+    @apply float-right mr-[20%]
+  }
+
+  .ha-lettertext.ha-minwidth .ha-aligncenter {
+    @apply absolute left-1/3 whitespace-nowrap -translate-x-1/2
+  }
+}
+
+.ha-lettertext .ha-marginalbox:before {
+    content: "";
+  }
+  
+  .ha-lettertext .ha-marginalbox .ha-marginal::after {
+    content: "";
+  }
+  
+  .ha-lettertext .ha-marginalbox .ha-marginal:last-of-type::after {
+    content: "";
+  }
+
+  
+.ha-tradzhtext .ha-marginalbox.ha-collapsed-box .ha-marginallist .ha-marginal,
+.ha-lettertext .ha-marginalbox.ha-collapsed-box .ha-marginallist .ha-marginal {
+    display: -webkit-inline-box;
+    -webkit-box-orient: vertical;
+}
+
+.ha-additions .ha-edits .ha-editentries tr td:nth-of-type(2)::after {
+    content: "";
+}

HaWeb/wwwroot/css/letterhead.css

@@ -0,0 +1,70 @@
+@layer components {
+/* COLORS */
+
+
+/* STYLES */
+  .ha-letterhead {
+    @apply flex flex-row
+  }
+
+  .ha-letterhead .ha-letternumber {
+    @apply flex text-5xl desktop:font-normal desktop:text-6xl mr-4 desktop:mr-6
+  }
+
+  .ha-letterhead .ha-letternumber .ha-letternumberinline {
+    @apply inline align-middle leading-none
+  }
+
+  .ha-letterhead .ha-metadata {
+    @apply flex self-end grow shrink-0
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadatarows {
+    @apply flex flex-col
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow {
+    @apply flex flex-row leading-snug
+  }
+
+  .strikethrough {
+    @apply line-through
+  }
+
+  .ha-letterhead
+    .ha-metadata
+    .ha-metadatarows
+    .ha-metadataupperrow
+    .ha-metadatadate {
+    @apply flex caps-petite numeric-mediaeval
+  }
+
+  .ha-letterhead .ha-metadata .ha-tooltip {
+    @apply self-center cursor-default inline-block relative 
+  }
+
+  .ha-letterhead .ha-metadata .ha-tooltiptext {
+    @apply rounded text-sm px-1 py-0.5 absolute z-10 text-center
+  }
+
+  .ha-letterhead .ha-metadata .ha-tooltiptext::after {
+    @apply absolute top-full left-1/2
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill {
+    @apply text-sm rounded px-1.5 ml-2 py-0.5 leading-none caps-allpetite tracking-wide
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross {
+    @apply relative inline-block
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::before,
+  .ha-letterhead .ha-metadata .ha-metadataupperrow .ha-pill .ha-cross::after {
+    @apply w-full h-0 absolute right-0 top-1/2
+  }
+
+  .ha-letterhead .ha-metadata .ha-metadatarows .hametadatapersons {
+    @apply flex leading-snug
+  }
+}

HaWeb/wwwroot/css/register.css

@@ -0,0 +1,241 @@
+@layer components {
+/* COLORS */
+  .ha-register .ha-register-head,
+  .ha-register .ha-register-body {
+    @apply bg-slate-50 dark:bg-slate-900 dark:text-slate-50 dark:shadow-xl
+  }
+
+  .ha-register .ha-register-head {
+    @apply border-b-2 border-slate-200
+  }
+
+  .ha-register .ha-register-head .ha-register-add a {
+    @apply rounded border border-hamannSlate-50 hover:shadow-md hover:border-hamannSlate-300
+  }
+
+  .ha-register .ha-register-head .ha-register-add a .ha-register-add-plusbutton {
+    @apply rounded-l bg-slate-200 border-r border-hamannSlate-50
+  }
+
+  .ha-register .ha-register-head .ha-register-add a:hover .ha-register-add-plusbutton {
+    @apply border-hamannSlate-300 text-hamannSlate-700
+  }
+
+  .ha-register .ha-register-head .ha-register-add a .ha-register-add-text {
+
+  }
+
+  .ha-register .ha-register-head .ha-register-nav a {
+    @apply text-slate-700 hover:text-slate-900 dark:text-white dark:hover:text-gray-300
+  }
+
+  .ha-register .ha-register-head .ha-register-nav a.active {
+    @apply border-b-2 border-slate-200 dark:!text-gray-200 dark:font-bold
+  }
+
+  .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks,
+  .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks {
+    @apply desktop:bg-slate-50 dark:bg-slate-900 dark:text-slate-50
+  }
+
+  .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks::before,
+  .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks::before {
+    @apply bg-hamannSlate-500 dark:bg-slate-500
+  }
+
+  .ha-register .ha-register-body .ha-commenthead .ha-letlinks.ha-expanded-box {
+    @apply shadow-md dark:shadow-lg
+  }
+
+  .ha-register .ha-btn-collapsed-box {
+    @apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer mt-0.5
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks .ha-hkb {
+    @apply text-slate-900 dark:text-white
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks a {
+    @apply hover:text-hamannSlate-900 dark:hover:text-gray-200 no-underline hover:underline
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
+    @apply text-slate-700 dark:text-white
+  }
+
+
+/* STYLES */
+  .ha-register {
+    @apply w-full font-serif numeric-mediaeval
+  }
+
+  .ha-register .ha-register-head,
+  .ha-register .ha-register-body {
+    @apply pt-9 md:pt-12 px-9 md:px-16
+  }
+
+  .ha-register .ha-register-head {
+    @apply rounded-t-sm
+  }
+
+  .ha-register .ha-register-head h1 {
+    @apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6 inline-block
+  }
+
+  .ha-register .ha-register-head .ha-register-add {
+    @apply inline-block relative bottom-[0.33rem] ml-2
+  }
+
+  .ha-register .ha-register-head .ha-register-add a {
+    @apply -mt-4 mb-6 flex flex-row w-fit text-sm font-sans
+  }
+
+  .ha-register .ha-register-head .ha-register-add a .ha-register-add-plusbutton {
+    @apply px-2 leading-none text-xl font-bold pb-0.5
+  }
+
+  .ha-register .ha-register-head .ha-register-add a:hover .ha-register-add-plusbutton {
+    
+  }
+
+  .ha-register .ha-register-head .ha-register-add a .ha-register-add-text {
+    @apply pl-1 pr-2 leading-none pt-1
+  }
+
+  .ha-register .ha-register-head .ha-register-nav {
+    @apply font-sans
+  }
+
+  .ha-register .ha-register-head .ha-register-nav a {
+    @apply inline-block px-1 mr-1 md:mr-3
+  }
+
+  .ha-register .ha-register-head .ha-register-nav a:first {
+    @apply pl-0
+  }
+
+  .ha-register .ha-register-head .ha-register-nav .ha-register-left-nav {
+    @apply inline-block
+  }
+
+  .ha-register .ha-register-head .ha-register-nav .ha-register-right-nav {
+    @apply inline-block
+  }
+
+  .ha-register .ha-register-body {
+    @apply md:pr-96 pb-9 md:pb-12 rounded-b-sm
+  }
+
+  .ha-register .ha-register-body .ha-comment {
+    @apply block mb-9 md:mb-12
+  }
+
+  .ha-register .ha-register-body .ha-comment a {
+    @apply underline decoration-dotted hover:decoration-solid
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-headcomment {
+    @apply desktop:relative block
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-subcomment {
+    @apply desktop:relative block ml-8 mt-2
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead {
+    @apply block
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-lemma {
+    @apply inline font-bold
+  }
+
+  .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-comment
+    .ha-commenthead
+    .ha-lemma {
+    @apply inline font-normal;
+  }
+
+  .ha-register .ha-forschung .ha-register-body .ha-comment {
+    @apply mb-4 md:mb-6 -indent-4 pl-4
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks {
+    @apply inline-block font-normal text-xs md:text-sm leading-snug font-sans caps-allpetite ml-2 mt-1
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks::before {
+    @apply absolute mt-1 top-[0.1rem] bottom-[0.1rem] left-0 w-0.5 content-['']
+  }
+
+  .ha-register
+    .ha-register-body
+    .ha-comment
+    .ha-commenthead
+    .ha-letlinks
+    .ha-hkb {
+    @apply inline
+  }
+
+  .ha-register
+    .ha-neuzeit
+    .ha-register-body
+    .ha-headcomment
+    .ha-commenthead
+    .ha-letlinks,
+  .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-headcomment
+    .ha-commenthead
+    .ha-letlinks {
+    @apply desktop:left-[48rem]
+  }
+
+  .ha-register
+    .ha-neuzeit
+    .ha-register-body
+    .ha-subcomment
+    .ha-commenthead
+    .ha-letlinks,
+  .ha-register
+    .ha-forschung
+    .ha-register-body
+    .ha-subcomment
+    .ha-commenthead
+    .ha-letlinks {
+    @apply desktop:left-[46rem]
+  }
+
+  .ha-register .ha-bibel .ha-register-body .ha-commenthead .ha-lemma a {
+    @apply pl-2
+  }
+
+  .ha-register .ha-bibel .ha-register-body .ha-commenthead .ha-lemma svg {
+    @apply inline
+  }
+
+  .ha-register .ha-neuzeit .ha-register-body .ha-commenthead .ha-letlinks,
+  .ha-register .ha-forschung .ha-register-body .ha-commenthead .ha-letlinks {
+    @apply desktop:indent-0 desktop:top-0 desktop:w-80 desktop:block desktop:absolute pl-2
+  }
+
+  .ha-register .ha-register-body .ha-comment .ha-commenthead .ha-letlinks a {
+    @apply hover:text-slate-900
+  }
+
+  .ha-register .ha-headcomment .ha-btn-collapsed-box {
+    @apply left-[47.6rem]
+  }
+
+  .ha-register .ha-subcomment .ha-btn-collapsed-box {
+    @apply left-[45.6rem]
+  }
+
+  .ha-register .ha-btn-collapsed-box {
+    @apply hidden desktop:block absolute -top-[0.15rem] cursor-pointer
+  }
+}

HaWeb/wwwroot/css/scrollbutton.css

@@ -0,0 +1,13 @@
+@layer components {
+/* COLORS */
+
+
+/* STYLES */
+  .ha-scrollbutton {
+    @apply opacity-0 transition-opacity duration-500 cursor-pointer fixed left-[85%] text-center bottom-0 pb-3 pt-2 bg-slate-50 dark:bg-slate-700 dark:text-white px-2 shadow-md rounded-t-xl hover:shadow-lg text-hamannSlate-700 hover:text-hamannSlate-500
+  }
+
+  .ha-scrollbuttonarrow {
+    @apply h-8 w-8
+  }
+}

HaWeb/wwwroot/css/shared.css

@@ -0,0 +1,299 @@
+@layer components {
+/* COLORS */
+  body {
+    @apply text-black dark:text-white dark:bg-gray-800 dark:bg-none
+  }
+
+  .ha-added,
+  .ha-added *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    @apply bg-slate-300 dark:bg-slate-600
+  }
+
+  .ha-note,
+  .ha-note *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    @apply text-slate-700 dark:text-slate-500
+  }
+
+  .ha-ful,
+  .ha-ful *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    @apply border-black dark:border-white
+  }
+
+  .ha-tul,
+  .ha-tul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    @apply border-black dark:border-white
+  }
+
+  .ha-diagdel::before {
+    @apply border-black dark:border-white
+  }
+
+  .ha-lineline {
+    @apply border-black dark:border-white
+  }
+
+  .active {
+    @apply !text-hamannHighlight dark:!text-black
+  }
+
+  .active:hover {
+    @apply !text-hamannHighlight dark:!text-gray-800
+  }
+
+/* STYLES */
+  * {
+    @apply transition-colors duration-100
+  }
+
+  body {
+    @apply text-base desktop:text-lg w-full h-full;
+  }
+
+  .active {
+    @apply  pointer-events-none
+  }
+
+  .hide {
+    @apply !hidden
+  }
+
+  .ha-zhbreak {
+    @apply hidden sm:inline
+  }
+
+  .ha-up {
+    @apply -top-3 relative
+  }
+
+  .ha-bzg {
+    @apply !font-serif !text-xs !font-semibold
+  }
+
+  .ha-text {
+    @apply inline
+  }
+
+  .ha-title {
+    @apply inline italic
+  }
+
+  .ha-insertedlemma {
+    @apply inline
+  }
+
+  .ha-serif {
+    @apply font-serif
+  }
+
+  .ha-aq,
+  .ha-aq *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply font-sans
+  }
+
+  .ha-ul,
+  .ha-ul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply underline
+  }
+
+  .ha-del,
+  .ha-del *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-diagdel, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply inline line-through
+  }
+
+  .ha-hand,
+  .ha-hand *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply font-classy text-[0.9rem]
+  }
+
+  .ha-added,
+  .ha-added *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply px-0.5 rounded-sm
+  }
+
+  .ha-note,
+  .ha-note *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply italic
+  }
+
+  .ha-emph *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply italic
+  }
+
+  .ha-sup *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal, .ha-marginal *, .ha-btn-collapsed-box) {
+    @apply relative -top-[0.3em] text-[80%]
+  }
+
+  /* TODO: Something dooesnt work here */
+  .ha-super {
+    @apply numeric-normal relative text-xs leading-none align-baseline -top-[0.3em]
+  }
+
+  .ha-sub {
+    @apply relative text-xs leading-none align-baseline -bottom-[0.25em]
+  }
+
+  .ha-ful,
+  .ha-ful *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    @apply inline border-b pb-[2px]
+  }
+
+  .ha-dul,
+  .ha-dul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    @apply underline decoration-double
+  }
+
+  .ha-tul,
+  .ha-tul *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    @apply underline border-b-[3px] border-double
+  }
+
+  .up {
+    @apply relative -top[0.5em]
+  }
+
+  .ha-alignright {
+    @apply float-right
+  }
+
+  .ha-aligncenter {
+    @apply absolute left-1/2 whitespace-nowrap -translate-x-1/2
+  }
+
+  .ha-lineline {
+    @apply border-t w-1/3 mx-40 mt-[0.6rem] absolute
+  }
+
+  .ha-sal {
+    @apply inline-block ml-6
+  }
+
+  /* Classes for indents */
+  .ha-indent-1 {
+    @apply pl-2 sm:pl-4
+  }
+
+  .ha-indent-2 {
+    @apply pl-4 sm:pl-8
+  }
+
+  .ha-indent-3 {
+    @apply pl-6 sm:pl-12
+  }
+
+  .ha-indent-4 {
+    @apply pl-8 sm:pl-16
+  }
+
+  .ha-indent-5 {
+    @apply pl-10 sm:pl-20
+  }
+
+  .ha-indent-6 {
+    @apply pl-20 sm:pl-44
+  }
+
+  .ha-indent-7 {
+    @apply pl-32 sm:pl-64
+  }
+
+  .ha-collapsed-box,
+  .ha-collapsed-box * {
+    @apply z-0 overflow-hidden min-w-0 min-h-0 overflow-ellipsis cursor-default
+  }
+
+  .ha-expanded-box {
+    @apply pb-1 z-[1000] !h-auto !max-h-screen
+  }
+}
+
+  .ha-nr::before {
+    content: " \200E\25E6";
+  }
+  
+  .ha-nr::after {
+    content: " \200E\25E6";
+  }
+  
+  .ha-added::before {
+    content: "";
+  }
+  
+  .ha-added::after {
+    content: "";
+  }
+  
+  .ha-note::before {
+    content: "";
+  }
+  
+  .ha-note::after {
+    content: "";
+  }
+  
+  .ha-bzg::after {
+    content: "]";
+  }
+
+  * {
+    scroll-behavior: smooth;
+    text-decoration-skip-ink: all;
+  }
+  
+  html {
+    overflow-y: scroll;
+  }
+
+  body {
+    background-image: url("../img/subtlenet2.png");
+    background-repeat: repeat;
+  }  
+
+  .ha-diagdel {
+    text-decoration: none !important;
+    text-decoration-line: none !important;
+    position: relative;
+    display: inline-block !important;
+  }
+  
+  .ha-diagdel::before,
+  .ha-diagdel::after {
+    content: "";
+    width: 100%;
+    height: 0%;
+    position: absolute;
+    right: 0;
+    bottom: 1.4ex;
+  }
+  
+  .ha-diagdel::before {
+    border-width: 1px;
+    border-style: solid;
+    -webkit-transform: skewY(-36deg);
+    transform: skewY(-36deg);
+  }
+  
+  .ha-del .ha-del,
+  .ha-del .ha-del *:not(.ha-linecount *, .ha-linecount, .ha-marginalbox *, .ha-marginalbox, .ha-marginal *, .ha-marginal, .ha-btn-collapsed-box) {
+    -moz-text-decoration-style: double;
+    -webkit-text-decoration-style: double !important;
+    text-decoration-thickness: 1px;
+    text-decoration-style: double;
+  }
+  
+  .ha-del .ha-del .ha-ul,
+  .ha-ul .ha-del .ha-del,
+  .ha-del .ha-ul .ha-del {
+    text-decoration: line-through underline;
+    -moz-text-decoration-style: double;
+    -webkit-text-decoration-style: double !important;
+    text-decoration-thickness: 1px;
+    text-decoration-style: double;
+  }
+  
+  .ha-del .ha-ul,
+  .ha-ul .ha-del {
+    text-decoration: line-through underline;
+    text-decoration-thickness: 1px;
+    text-decoration-skip-ink: auto;
+    -webkit-text-decoration-skip-ink: auto;
+  }

HaWeb/wwwroot/css/static.css

@@ -0,0 +1,71 @@
+@layer components {
+/* COLORS */
+  .ha-static {
+    @apply bg-slate-50 dark:bg-gray-900
+  }
+
+  .ha-static h3 {
+    @apply text-hamannHighlight dark:text-white dark:font-bold
+  }
+
+  .ha-static table th {
+    @apply text-hamannHighlight dark:text-white dark:font-bold
+  }
+
+  .ha-static table tr:nth-child(even) {
+    @apply bg-slate-200 dark:bg-slate-700
+  }
+
+/* STYLES */
+  .ha-static {
+    @apply w-full py-12 px-12 md:px-16 hyphenate font-serif
+  }
+
+  .ha-static h1 {
+    @apply font-bold text-xl desktop:font-normal desktop:text-4xl mb-6
+  }
+
+  .ha-static h2 {
+    @apply my-3 mt-4 text-lg desktop:text-2xl
+  }
+
+  .ha-static h3 {
+    @apply mt-4 mb-2
+  }
+
+  .ha-static table {
+    @apply my-3 w-full;
+  }
+
+  .ha-static table th {
+    @apply pl-2 pr-2 desktop:pr-4 text-left font-normal
+  }
+
+  .ha-static table tr td {
+    @apply pl-2 pr-2 desktop:pr-4 align-top desktop:whitespace-nowrap;
+  }
+
+  .ha-static table tr td:last-child {
+    @apply desktop:whitespace-normal
+  }
+
+  .ha-static p {
+    @apply my-4
+  }
+
+  .ha-static a {
+    @apply underline decoration-dotted
+  }
+
+  .ha-static a:hover {
+    @apply underline decoration-solid
+  }
+
+  .ha-static .ha-footnote {
+    @apply relative text-sm desktop:text-base
+  }
+
+  .ha-static .ha-footnote .ha-footnote-ref {
+    @apply inline-block absolute text-right w-8 -left-10
+  }
+}

HaWeb/wwwroot/css/tables.css

@@ -0,0 +1,534 @@
+.ha-table {
+    overflow: hidden;
+    white-space: nowrap;
+    font-variant-numeric: tabular-nums !important;
+  }
+  
+  .ha-hatab-0-2 {
+    display: inline;
+    position: static;
+    min-width: 50%;
+  }
+  
+  .ha-hatab-1-2 {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    min-width: 50%;
+  }
+  
+  .ha-hatab-0-3 {
+    display: inline;
+    position: static;
+    min-width: 33.333%;
+  }
+  
+  .ha-hatab-1-3 {
+    display: inline-block;
+    position: absolute;
+    left: 33%;
+    min-width: 33.333%;
+  }
+  
+  .ha-hatab-2-3 {
+    display: inline-block;
+    position: absolute;
+    left: 66%;
+    min-width: 33.333%;
+  }
+  
+  .ha-hatab-0-4 {
+    display: inline;
+    position: static;
+    min-width: 25%;
+  }
+  
+  .ha-hatab-1-4 {
+    display: inline-block;
+    position: absolute;
+    left: 25%;
+    min-width: 25%;
+  }
+  
+  .ha-hatab-2-4 {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    min-width: 25%;
+  }
+  
+  .ha-hatab-3-4 {
+    display: inline-block;
+    position: absolute;
+    left: 75%;
+    min-width: 25%;
+  }
+  
+  .ha-hatab-0-5 {
+    display: inline;
+    position: static;
+    min-width: 20%;
+  }
+  
+  .ha-hatab-1-5 {
+    display: inline-block;
+    position: absolute;
+    left: 20%;
+    min-width: 20%;
+  }
+  
+  .ha-hatab-2-5 {
+    display: inline-block;
+    position: absolute;
+    left: 40%;
+    min-width: 20%;
+  }
+  
+  .ha-hatab-3-5 {
+    display: inline-block;
+    position: absolute;
+    left: 60%;
+    min-width: 20%;
+  }
+  
+  .ha-hatab-4-5 {
+    display: inline-block;
+    position: absolute;
+    left: 80%;
+    min-width: 20%;
+  }
+  
+  .ha-hatab-0-6 {
+    display: inline;
+    position: static;
+    min-width: 16.667%;
+  }
+  
+  .ha-hatab-1-6 {
+    display: inline-block;
+    position: absolute;
+    left: 16.667%;
+    min-width: 16.667%;
+  }
+  
+  .ha-hatab-2-6 {
+    display: inline-block;
+    position: absolute;
+    left: 33.333%;
+    min-width: 16.667%;
+  }
+  
+  .ha-hatab-3-6 {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    min-width: 16.667%;
+  }
+  
+  .ha-hatab-4-6 {
+    display: inline-block;
+    position: absolute;
+    left: 66.667%;
+    min-width: 16.667%;
+  }
+  
+  .ha-hatab-5-6 {
+    display: inline-block;
+    position: absolute;
+    left: 83.333%;
+    min-width: 16.667%;
+  }
+  
+  .ha-hatab-0-7 {
+    display: inline;
+    position: static;
+    min-width: 14.286%;
+  }
+  
+  .ha-hatab-1-7 {
+    display: inline-block;
+    position: absolute;
+    left: 14.286%;
+    min-width: 14.286%;
+  }
+  
+  .ha-hatab-2-7 {
+    display: inline-block;
+    position: absolute;
+    left: 28.571%;
+    min-width: 14.286%;
+  }
+  
+  .ha-hatab-3-7 {
+    display: inline-block;
+    position: absolute;
+    left: 42.857%;
+    min-width: 14.286%;
+  }
+  
+  .ha-hatab-4-7 {
+    display: inline-block;
+    position: absolute;
+    left: 57.143%;
+    min-width: 14.286%;
+  }
+  
+  .ha-hatab-5-7 {
+    display: inline-block;
+    position: absolute;
+    left: 71.429%;
+    min-width: 14.286%;
+  }
+  
+  .ha-hatab-6-7 {
+    display: inline-block;
+    position: absolute;
+    left: 85.714%;
+    min-width: 14.286%;
+  }
+  
+  .ha-hatab-0-8 {
+    display: inline;
+    position: static;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-1-8 {
+    display: inline-block;
+    position: absolute;
+    left: 12.5%;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-2-8 {
+    display: inline-block;
+    position: absolute;
+    left: 25%;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-3-8 {
+    display: inline-block;
+    position: absolute;
+    left: 37.5%;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-4-8 {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-5-8 {
+    display: inline-block;
+    position: absolute;
+    left: 62.5%;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-6-8 {
+    display: inline-block;
+    position: absolute;
+    left: 75%;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-7-8 {
+    display: inline-block;
+    position: absolute;
+    left: 87.5%;
+    min-width: 12.5%;
+  }
+  
+  .ha-hatab-0-9 {
+    display: inline;
+    position: static;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-1-9 {
+    display: inline-block;
+    position: absolute;
+    left: 11.111%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-2-9 {
+    display: inline-block;
+    position: absolute;
+    left: 22.222%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-3-9 {
+    display: inline-block;
+    position: absolute;
+    left: 33.333%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-4-9 {
+    display: inline-block;
+    position: absolute;
+    left: 44.444%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-5-9 {
+    display: inline-block;
+    position: absolute;
+    left: 55.555%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-6-9 {
+    display: inline-block;
+    position: absolute;
+    left: 66.666%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-7-9 {
+    display: inline-block;
+    position: absolute;
+    left: 77.777%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-8-9 {
+    display: inline-block;
+    position: absolute;
+    left: 88.888%;
+    min-width: 11.111%;
+  }
+  
+  .ha-hatab-0-10 {
+    display: inline-block;
+    position: absolute;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-1-10 {
+    display: inline-block;
+    position: absolute;
+    left: 10%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-2-10 {
+    display: inline-block;
+    position: absolute;
+    left: 20%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-3-10 {
+    display: inline-block;
+    position: absolute;
+    left: 30%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-4-10 {
+    display: inline-block;
+    position: absolute;
+    left: 40%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-5-10 {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-6-10 {
+    display: inline-block;
+    position: absolute;
+    left: 60%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-7-10 {
+    display: inline-block;
+    position: absolute;
+    left: 70%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-8-10 {
+    display: inline-block;
+    position: absolute;
+    left: 80%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-9-10 {
+    display: inline-block;
+    position: absolute;
+    left: 90%;
+    min-width: 10%;
+  }
+  
+  .ha-hatab-0-11 {
+    display: inline-block;
+    position: absolute;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-1-11 {
+    display: inline-block;
+    position: absolute;
+    left: 9.091%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-2-11 {
+    display: inline-block;
+    position: absolute;
+    left: 18.182%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-3-11 {
+    display: inline-block;
+    position: absolute;
+    left: 27.273%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-4-11 {
+    display: inline-block;
+    position: absolute;
+    left: 36.364%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-5-11 {
+    display: inline-block;
+    position: absolute;
+    left: 45.455%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-6-11 {
+    display: inline-block;
+    position: absolute;
+    left: 54.545%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-7-11 {
+    display: inline-block;
+    position: absolute;
+    left: 63.636%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-8-11 {
+    display: inline-block;
+    position: absolute;
+    left: 72.727%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-9-11 {
+    display: inline-block;
+    position: absolute;
+    left: 81.818%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-10-11 {
+    display: inline-block;
+    position: absolute;
+    left: 90.909%;
+    min-width: 9.091%;
+  }
+  
+  .ha-hatab-0-12 {
+    display: inline-block;
+    position: absolute;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-1-12 {
+    display: inline-block;
+    position: absolute;
+    left: 8.333%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-2-12 {
+    display: inline-block;
+    position: absolute;
+    left: 16.666%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-3-12 {
+    display: inline-block;
+    position: absolute;
+    left: 25%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-4-12 {
+    display: inline-block;
+    position: absolute;
+    left: 33.333%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-5-12 {
+    display: inline-block;
+    position: absolute;
+    left: 41.666%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-6-12 {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-7-12 {
+    display: inline-block;
+    position: absolute;
+    left: 58.333%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-8-12 {
+    display: inline-block;
+    position: absolute;
+    left: 66.666%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-9-12 {
+    display: inline-block;
+    position: absolute;
+    left: 75%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-10-12 {
+    display: inline-block;
+    position: absolute;
+    left: 83.333%;
+    min-width: 8.333%;
+  }
+  
+  .ha-hatab-11-12 {
+    display: inline-block;
+    position: absolute;
+    left: 91.666%;
+    min-width: 8.333%;
+  }
+  

HaWeb/wwwroot/css/tailwind-extensions.css

@@ -0,0 +1,32 @@
+.hyphenate {
+    hyphens: auto;
+  }
+  
+  .unhyphenate {
+    hyphens: none;
+  }
+  
+  .numeric-mediaeval {
+    font-variant-numeric: oldstyle-nums;
+  }
+  
+  .numeric-normal {
+    font-variant-numeric: normal;
+  }
+  
+  .caps-allpetite {
+    font-variant-caps: all-petite-caps;
+  }
+  
+  .caps-petite {
+    font-variant-caps: petite-caps;
+  }
+  
+  .caps-normal {
+    font-variant-caps: normal;
+  }
+  
+  .break-inside-avoid {
+    break-inside: avoid;
+  }
+  

HaWeb/wwwroot/css/tailwind.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

HaWeb/wwwroot/css/upload.css

@@ -0,0 +1,195 @@
+@layer components {
+/* COLORS */
+
+
+/* STYLES */
+  .ha-adminuploadfields {
+    @apply flex flex-row flex-wrap gap-x-4 gap-y-4
+  }
+
+  .ha-adminuploadfields .ha-uploadfield {
+    @apply block shrink-0 grow bg-slate-50 rounded shadow basis-64 max-w-xs
+  }
+
+  .ha-adminuploadfields .ha-uploadfield:hover {
+    @apply brightness-110
+  }
+
+  .ha-adminuploadfields .ha-uploadfield.active {
+    @apply !text-black brightness-110 shadow-inner
+  }
+
+  .ha-adminuploadfields .ha-uploadfield .ha-uploadfieldname {
+    @apply px-3 pt-2 pb-1
+  }
+
+  .ha-adminuploadfields .ha-uploadusedfiles {
+    @apply text-sm whitespace-nowrap overflow-hidden text-ellipsis w-auto bg-slate-200 border-t border-slate-300 bg-opacity-30 px-2 py-0.5 
+  }
+
+  .ha-adminuploadfields .ha-uploadusedfiles.ha-uploadusedfilesnotfound {
+    @apply bg-slate-500 border-slate-500
+  }
+
+  .ha-adminuploadfields .ha-uploadpublishforms {
+    @apply flex flex-row gap-x-4 grow
+  }
+
+  .ha-adminuploadfields .ha-uploadform {
+    @apply bg-slate-50 rounded shadow grow relative 
+  }
+
+  .ha-adminuploadfields .ha-uploadform .ha-uploadtext {
+    @apply text-center
+  }
+
+  .ha-adminuploadfields .ha-uploadform .ha-lds-ellipsis {
+    @apply left-1/2 -ml-[20px]
+  }
+
+  .ha-adminuploadfields .ha-uploadform .ha-uploadfilelabel {
+    @apply inline-block px-4 py-1 pt-2 cursor-pointer w-full h-full hover:bg-slate-100
+  }
+
+  .ha-adminuploadfields .ha-uploadform .ha-uploadmessage {
+    @apply text-sm bg-slate-700 bg-opacity-30 px-1 rounded-sm
+  }
+
+  .ha-adminuploadfields .ha-publishbutton  {
+    @apply inline-block px-2 py-1 pt-2 cursor-pointer w-full h-full bg-slate-50 shadow shrink hover:bg-slate-100
+  }
+
+  .ha-adminuploadfields .ha-publishbutton .ha-publishtext {
+    @apply text-center
+  }
+
+  .ha-adminuploadfields .ha-publishbutton .ha-publishmessage {
+    @apply text-sm bg-slate-700 bg-opacity-30 px-1 rounded-sm
+  }
+
+  .ha-uploadheader {
+    @apply bg-slate-50 w-full mt-4 px-16 pt-12 pb-8 flex flex-row
+  }
+
+  .ha-uploadheader h1 {
+    @apply text-5xl
+  }
+
+  .ha-uploadcontainer {
+    @apply w-full bg-slate-50 flex flex-col gap-y-2 h-full
+  }
+
+  .ha-uploadcontainer .ha-publishfilelist {
+    @apply px-16 mb-8
+  }
+
+  .ha-uploadcontainer .ha-publishfilelist .ha-publishfilelisttitle {
+    @apply text-xl mb-2
+  }
+
+  .ha-uploadcontainer .ha-publishfilelist td {
+    @apply align-text-top pr-6
+  }
+
+  .ha-uploadcontainer .ha-publishfilelist .ha-publishfilelabel {
+    @apply relative mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
+  }
+
+  .ha-uploadcontainer .ha-availablefiles {
+    @apply px-16 border border-slate-200 hover:border-slate-800 py-2 cursor-pointer select-none
+  }
+
+  .ha-uploadcontainer .ha-availablefiles .ha-availablefilestitle {
+    @apply text-2xl
+  }
+
+  .ha-uploadcontainer .ha-availablefiles .ha-usedfilelist {
+
+  }
+
+  .ha-filesheader {
+    @apply mb-8
+  }
+
+  .ha-availablefileslist {
+    @apply px-16 pt-4
+  }
+
+  .ha-uploadcontainer .ha-errorswarnings {
+    @apply flex flex-row gap-x-2
+  }
+
+  .ha-uploadcontainer .ha-errorswarnings .ha-criticalerrors,
+  .ha-uploadcontainer .ha-errorswarnings .ha-warnings {
+    @apply basis-1/2 min-w-[40%] min-h-[400px] overflow-x-hidden overflow-y-scroll grow shrink
+  }
+
+  .ha-uploadcontainer .ha-errorswarnings .ha-criticalerrors {
+    @apply bg-red-200
+  }
+
+  .ha-uploadcontainer .ha-errorswarnings .ha-warnings {
+    @apply bg-orange-200
+  }
+
+  .ha-uploadcontainer .ha-crossfilechecking {
+    @apply w-full bg-cyan-200 grow shrink-0 h-full min-h-[400px]
+  }
+
+  .ha-uploadcontainer .ha-hamannfilechooser {
+    @apply px-16 pb-16 
+  }
+
+  /* Classes for FileList Component */
+  .ha-filelistfieldset {
+    
+  }
+
+  .ha-filelistfieldset .ha-filelistlegend {
+    @apply mb-2 text-xl
+  }
+
+  .ha-selectfilesform {
+    
+  }
+
+  .ha-selectfilesform .ha-filelistfile {
+    @apply flex flex-row gap-x-4 px-1 items-center
+  }
+
+  .ha-selectfilesform .ha-filelistfile:nth-child(even) {
+    @apply bg-slate-100
+  }
+
+  .ha-selectfilesform .ha-filelistlist {
+    @apply h-96 overflow-x-hidden overflow-y-scroll pr-4
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistname {
+    @apply font-mono
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction {
+    @apply text-sm
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistproduction {
+    @apply inline-block border rounded-md text-teal-600 border-teal-600 px-2 mr-2
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistusedproduction .ha-filelistused {
+    @apply inline-block border rounded-md text-indigo-600 border-indigo-600 px-2 
+  }
+
+  .ha-selectfilesform .ha-filelistfile .ha-filelistmodified {
+    @apply grow text-right
+  }
+
+  .ha-selectfilesform .ha-filelistoutput {
+    @apply mt-4 ml-6 
+  }
+
+  .ha-selectfilesform .ha-filelistbutton {
+    @apply mt-4 ml-6 rounded-md px-3 border-2 border-blue-600 hover:border-2 hover:shadow active:shadow-inner hover:border-blue-800 cursor-pointer float-right;
+  }
+}

HaWeb/wwwroot/css/vorlage.css

@@ -0,0 +1,6 @@
+@layer components {
+/* COLORS */
+
+
+/* STYLES */
+}