More Menu, Added Basic Routing

2025-10-29 17:25:32 +00:00 · 2022-05-12 18:31:32 +02:00
parent 702fad0dd7
commit c0ff6cea2d
20 changed files with 582 additions and 191 deletions
--- a/HaKolloquium/src/css/site.css
+++ b/HaKolloquium/src/css/site.css
@@ -7,12 +7,14 @@
  src: url("../fonts/LinBiolinum_R.woff") format("woff");
  font-weight: normal;
  font-style: normal;
+  font-display: swap;
 }

@font-face {
  font-family: "Biolinum";
  src: url("../fonts/LinBiolinum_RI.woff") format("woff");
  font-weight: normal;
+  font-display: swap;
  font-style: italic;
 }

@@ -20,6 +22,7 @@
  font-family: "Biolinum";
  src: url("../fonts/LinBiolinum_RB.woff") format("woff");
  font-weight: bold;
+  font-display: swap;
  font-style: normal;
 }

@@ -27,6 +30,7 @@
  font-family: "Libertine";
  src: url("../fonts/LinLibertine_R.woff") format("woff");
  font-weight: normal;
+  font-display: swap;
  font-style: normal;
 }

@@ -34,6 +38,7 @@
  font-family: "Libertine";
  src: url("../fonts/LinLibertine_RI.woff") format("woff");
  font-weight: normal;
+  font-display: swap;
  font-style: italic;
 }

@@ -41,6 +46,7 @@
  font-family: "Libertine";
  src: url("../fonts/LinLibertine_RB.woff") format("woff");
  font-weight: bold;
+  font-display: swap;
  font-style: normal;
 }

--- a/HaKolloquium/vite.config.ts
+++ b/HaKolloquium/vite.config.ts
@@ -4,7 +4,6 @@ const { resolve } = require('path')

 // https://vitejs.dev/config/
 export default defineConfig({
-  assetsInclude: ['**/*.pdf'],
  build: {
    assetsInlineLimit: 0,
    // lib: {
--- a/HaWeb/.vscode/launch.json
+++ b/HaWeb/.vscode/launch.json
@@ -0,0 +1,35 @@
+{
+    "version": "0.2.0",
+    "configurations": [
+        {
+            // Use IntelliSense to find out which attributes exist for C# debugging
+            // Use hover for the description of the existing attributes
+            // For further information visit https://github.com/OmniSharp/omnisharp-vscode/blob/master/debugger-launchjson.md
+            "name": ".NET Core Launch (web)",
+            "type": "coreclr",
+            "request": "launch",
+            "preLaunchTask": "build",
+            // If you have changed target frameworks, make sure to update the program path.
+            "program": "${workspaceFolder}/bin/Debug/net6.0/HaWeb.dll",
+            "args": [],
+            "cwd": "${workspaceFolder}",
+            "stopAtEntry": false,
+            // Enable launching a web browser when ASP.NET Core starts. For more information: https://aka.ms/VSCode-CS-LaunchJson-WebBrowser
+            "serverReadyAction": {
+                "action": "openExternally",
+                "pattern": "\\bNow listening on:\\s+(https?://\\S+)"
+            },
+            "env": {
+                "ASPNETCORE_ENVIRONMENT": "Development"
+            },
+            "sourceFileMap": {
+                "/Views": "${workspaceFolder}/Views"
+            }
+        },
+        {
+            "name": ".NET Core Attach",
+            "type": "coreclr",
+            "request": "attach"
+        }
+    ]
+}
--- a/HaWeb/.vscode/tasks.json
+++ b/HaWeb/.vscode/tasks.json
@@ -0,0 +1,41 @@
+{
+    "version": "2.0.0",
+    "tasks": [
+        {
+            "label": "build",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "build",
+                "${workspaceFolder}/HaWeb.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "publish",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "publish",
+                "${workspaceFolder}/HaWeb.csproj",
+                "/property:GenerateFullPaths=true",
+                "/consoleloggerparameters:NoSummary"
+            ],
+            "problemMatcher": "$msCompile"
+        },
+        {
+            "label": "watch",
+            "command": "dotnet",
+            "type": "process",
+            "args": [
+                "watch",
+                "run",
+                "--project",
+                "${workspaceFolder}/HaWeb.csproj"
+            ],
+            "problemMatcher": "$msCompile"
+        }
+    ]
+}
--- a/HaWeb/Controllers/EditionController.cs
+++ b/HaWeb/Controllers/EditionController.cs
@@ -0,0 +1,40 @@
+using System.Diagnostics;
+using Microsoft.AspNetCore.Mvc;
+using HaWeb.Models;
+
+namespace HaWeb.Controllers;
+
+[Route("Edition/[action]")]
+[Route("Edition/[action]/Index")]
+public class EditionController : Controller
+{
+    [ResponseCache(Duration = 0, Location = ResponseCacheLocation.None, NoStore = true)]
+    public IActionResult Error()
+    {
+        return View(new ErrorViewModel { RequestId = Activity.Current?.Id ?? HttpContext.TraceIdentifier });
+    }
+    public IActionResult Kontakt()
+    {
+        return View();
+    }
+
+    public IActionResult Mitwirkende()
+    {
+        return View();
+    }
+
+    public IActionResult Richtlinien()
+    {
+        return View();
+    }
+
+    public IActionResult Werkausgabe()
+    {
+        return View();
+    }
+
+    public IActionResult Editionsgeschichte()
+    {
+        return View();
+    }
+}
--- a/HaWeb/Controllers/SearchController.cs
+++ b/HaWeb/Controllers/SearchController.cs
@@ -7,6 +7,9 @@ namespace HaWeb.Controllers;
 public class SearchController : Controller
 {

+    [Route("")]
+    [Route("Home")]
+    [Route("Home/Index")]
    public IActionResult Index()
    {
        return View();
--- a/HaWeb/HaWeb.csproj
+++ b/HaWeb/HaWeb.csproj
@@ -6,15 +6,25 @@
    <ImplicitUsings>enable</ImplicitUsings>
  </PropertyGroup>
  <ItemGroup>
-    <UpToDateCheckBuilt Include="wwwroot/css/site.css" Set="Css" />
-    <UpToDateCheckBuilt Include="postcss.config.js" Set="Css" />
-    <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
+     <!-- exclude all Content items from being watched -->
+    <Content Update="wwwroot/css/site.css" Watch="false" />
+</ItemGroup>
+  <ItemGroup>
+    <Watch Include="**\*.js" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.css" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.cs" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.cshtml" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
+    <Watch Include="**\*.csproj" Exclude="node_modules\**\*;**\*.js.map;obj\**\*;bin\**\*" />
  </ItemGroup>
  <ItemGroup>
-    <PackageReference Include="LigerShark.WebOptimizer.Core" Version="3.0.357" />
+    <UpToDateCheckBuilt Include="postcss.config.js" Set="Css" />
+    <UpToDateCheckBuilt Include="tailwind.config.js" Set="Css" />
  </ItemGroup>
  <Target Name="Tailwind" BeforeTargets="Build">
    <Exec Command="npm run css:build" />
  </Target>
+  <ItemGroup>
+    <PackageReference Include="LigerShark.WebOptimizer.Core" Version="3.0.357" />
+  </ItemGroup>

 </Project>
--- a/HaWeb/Helpers/LinkHelper.cs
+++ b/HaWeb/Helpers/LinkHelper.cs
@@ -0,0 +1,31 @@
+
+// Finds the correct link adress to any Page, Letter, or Comment, and sets Links as active if neccessary
+using Microsoft.AspNetCore.Razor.TagHelpers;
+using System.Threading.Tasks;
+
+namespace AuthoringTagHelpers.TagHelpers
+{
+    public class MenuLinkHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "a";    // Replaces <email> with <a> tag
+        }
+    }
+
+    public class LetterLinkHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "a";    // Replaces <email> with <a> tag
+        }
+    }
+
+    public class CommentLinkHelper : TagHelper
+    {
+        public override void Process(TagHelperContext context, TagHelperOutput output)
+        {
+            output.TagName = "a";    // Replaces <email> with <a> tag
+        }
+    }
+}
--- a/HaWeb/Program.cs
+++ b/HaWeb/Program.cs
@@ -2,6 +2,7 @@ var builder = WebApplication.CreateBuilder(args);

 // Add services to the container.
 builder.Services.AddControllersWithViews();
+builder.Services.AddHttpContextAccessor();
 // builder.Services.AddWebOptimizer();

 var app = builder.Build();
@@ -16,17 +17,8 @@ if (!app.Environment.IsDevelopment())
 }

 // app.UseWebOptimizer();
-
-app.UseStaticFiles();
-
-app.UseRouting();
-
 app.UseAuthorization();
-
-app.MapControllerRoute(
-    name: "default",
-    pattern: "{controller=Search}/{action=Index}/{id?}");
-
-
-
+app.UseStaticFiles();
+app.UseRouting();
+app.MapControllers();
 app.Run();
--- a/HaWeb/Views/Edition/Editionsgeschichte.cshtml
+++ b/HaWeb/Views/Edition/Editionsgeschichte.cshtml
--- a/HaWeb/Views/Edition/Kontakt.cshtml
+++ b/HaWeb/Views/Edition/Kontakt.cshtml
@@ -0,0 +1,6 @@
+@{
+    ViewData["Title"] = "Kontakt";
+    ViewData["SEODescription"] = "Johann Georg Hamann: Kommentierte Briefausgabe, Hg. v. Leonard Keidel und Janina Reibold. Durchsuchbare Online-Ausgabe der Briefe von und an Johann Georg Hamann.";
+}
+
+Hello!
--- a/HaWeb/Views/Edition/Mitwirkende.cshtml
+++ b/HaWeb/Views/Edition/Mitwirkende.cshtml
@@ -0,0 +1 @@
+Hello from Mitwirkende!
--- a/HaWeb/Views/Edition/Richtlinien.cshtml
+++ b/HaWeb/Views/Edition/Richtlinien.cshtml
--- a/HaWeb/Views/Edition/Werkausgabe.cshtml
+++ b/HaWeb/Views/Edition/Werkausgabe.cshtml
--- a/HaWeb/Views/Shared/_Layout.cshtml
+++ b/HaWeb/Views/Shared/_Layout.cshtml
@@ -18,10 +18,10 @@

 </head>

-<body>
+<body class="w-100 h-100">
    @await Html.PartialAsync("/Views/Shared/_Menu.cshtml")

-    <div class="container">
+    <div class="w-full desktop:max-w-screen-desktop mx-auto">
        <main role="main" class="pb-3">
            @RenderBody()
        </main>
--- a/HaWeb/Views/Shared/_Menu.cshtml
+++ b/HaWeb/Views/Shared/_Menu.cshtml
@@ -1,15 +1,15 @@
 <header class="sticky w-100 font-serif mb-6">
-    <nav class="flex flex-row w-100 bg-slate-50 border-t-[5px] border-gray-300 py-3 px-3 lg:px-8 flex-wrap">
+    <nav class="flex flex-row w-100 bg-slate-50 border-t-[5px] border-gray-300 py-3 px-3 desktop:px-8 flex-wrap">
        <a href="/" class="text-xl xl:text-3xl grow-0 shrink-0 text-black hover:text-black ">
            <img src="/favicon.ico" class="inline-block w-8 h-8 xl:w-12 xl:h-12 mr-2 p-1 border border-gray-900 border-t-gray-200 border-l-gray-200 " alt="HKB-Logo" loading="lazy" />
-                <span class="sm:hidden">J. G. Hamann: Kommentierte Briefausgabe</span> 
+                <span class="sm:hidden">Hamann: Komm. Briefausgabe</span> 
                <span class="hidden sm:inline md:hidden">Johan Georg Hamann: Kommentierte Briefausgabe</span> 
                <span class="hidden md:inline align-baseline">Johann Georg Hamann: Kommentierte Briefausgabe (&#x200A;H&#x200A;K&#x200A;B&#x200A;)</span>
        </a>
        <div class="flex grow shrink">

        </div>
-        <div class="ha-menusymbol inline-block lg:hidden pr-3 align-bottom">
+        <div class="ha-menusymbol inline-block desktop:hidden pr-3 align-bottom">
            <button id="openmenubutton">
                <svg role="img" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                    aria-labelledby="hamburgerIconTitle">
@@ -26,19 +26,35 @@
                </svg>
            </button>
        </div>
-        <div class="topnav" id="topnav">
+        <div class="ha-topnav " id="ha-topnav">
            <a class="" href="/">
                Suche & Briefauswahl
            </a>
-            <a class="" href="/kolloquien.html">
+            <a class="" href="/Briefe/1">
                Briefansicht
            </a>
-            <a class="" href="/acta-baende.html">
-                Register
-            </a>
-            <a class="" href="/studien.html">
+            <div class="ha-topnav-dropdown">
+                <a class="cursor-default ha-menu-arrowsymbol">
+                    Register
+                </a>
+                <div class="ha-topnav-dropdown-content">
+                    <a class="" href="/Register/Register">Register</a>
+                    <a class="" href="/Register/Bibelstellenregister">Bibelstellenregister</a>
+                    <a class="" href="/Register/Forschungsbibliographie">Forschungsbibliographie</a>
+                </div>
+            </div>
+             <div class="ha-topnav-dropdown">
+                <a class="cursor-default ha-menu-arrowsymbol">
                Edition
-            </a>
+                </a>
+                <div class="ha-topnav-dropdown-content">
+                    <a class="" href="/Edition/Kontakt">Kontakt</a>
+                    <a class="" href="/Edition/Mitwirkende">Mitwirkende</a>
+                    <a class="" href="/Edition/Richtlinien">Editionsrichtlinien</a>
+                    <a class="" href="/Edition/Editionsgeschichte">Editionsgeschichte</a>
+                    <a class="" href="/Edition/Werkausgabe">Werkausgabe</a>
+                </div>
+            </div>
        </div>
    </nav>
 </header>
@@ -46,8 +62,8 @@
 <script>

    const _openmenu = function () {
-        var x = document.getElementById("topnav");
-        if (x !== null) x.className += " responsive";
+        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");
@@ -55,8 +71,8 @@
    }

    const _closemenu = function () {
-        var x = document.getElementById("topnav");
-        if (x !== null) x.className = "topnav";
+        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");
@@ -64,9 +80,9 @@

    }

-    const _markactive = function () {
+    const _markactive = function (element) {
        // Marks links as active
-        var all_links = this.getElementsByTagName("a"),
+        var all_links = element.getElementsByTagName("a"),
            i = 0, len = all_links.length,
            full_path = location.href.split('#')[0]; //Ignore hashes

@@ -80,5 +96,6 @@

    document.getElementById("openmenubutton").addEventListener('click', _openmenu);
    document.getElementById("closemenubutton").addEventListener('click', _closemenu);
+    _markactive(document.getElementById("ha-topnav"));

 </script>
--- a/HaWeb/Views/_ViewImports.cshtml
+++ b/HaWeb/Views/_ViewImports.cshtml
@@ -1,3 +1,5 @@
@using HaWeb
@using HaWeb.Models
+@using AuthoringTagHelpers
@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers
+@addTagHelper *, AuthoringTagHelpers
--- a/HaWeb/tailwind.config.js
+++ b/HaWeb/tailwind.config.js
@@ -11,7 +11,7 @@ module.exports = {
    screens: {
      'sm': '786px',
      'md': '1024px',
-      'lg': '1312px',
+      'desktop': '1190px',
      'xl': '1440px',
      '2xl': '1680px',    
    },
--- a/HaWeb/wwwroot/css/output.css
+++ b/HaWeb/wwwroot/css/output.css
@@ -468,148 +468,280 @@ Ensure the default browser behavior of the `hidden` attribute.
  --tw-backdrop-sepia:  ;
 }

-.container {
-  width: 100%;
-}
-
-@media (min-width: 786px) {
-  .container {
-    max-width: 786px;
-  }
-}
-
-@media (min-width: 1024px) {
-  .container {
-    max-width: 1024px;
-  }
-}
-
-@media (min-width: 1312px) {
-  .container {
-    max-width: 1312px;
-  }
-}
-
-@media (min-width: 1440px) {
-  .container {
-    max-width: 1440px;
-  }
-}
-
-@media (min-width: 1680px) {
-  .container {
-    max-width: 1680px;
-  }
-}
-
 body {
+  height: 100%;
+  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
 }

-@media (min-width: 1312px) {
+@media (min-width: 1190px) {
  body {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
 }

-p {
-  margin-top: 0.75rem;
-  margin-bottom: 0.75rem;
-}
-
-h1 {
-  font-size: 1.25rem;
-  line-height: 1.75rem;
-  font-weight: 700;
-}
-
-@media (min-width: 1680px) {
-  h1 {
-    font-size: 2.25rem;
-    line-height: 2.5rem;
-    font-weight: 400;
-  }
-}
-
-h2 {
-  font-size: 1.125rem;
-  line-height: 1.75rem;
-}
-
-@media (min-width: 1680px) {
-  h2 {
-    font-size: 1.5rem;
-    line-height: 2rem;
-  }
-}
-
-a {
-  --tw-text-opacity: 1;
-  color: rgb(55 65 81 / var(--tw-text-opacity));
-}
-
-a:hover {
-  --tw-text-opacity: 1;
-  color: rgb(17 24 39 / var(--tw-text-opacity));
-}
-
-.topnav {
-  margin-bottom: 0.25rem;
+.ha-topnav {
  display: flex;
 }

@media (min-width: 1024px) {
-  .topnav {
+  .ha-topnav {
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
 }

-@media (min-width: 1312px) {
-  .topnav {
+@media (min-width: 1190px) {
+  .ha-topnav {
    flex-shrink: 0;
    flex-grow: 0;
    place-self: end;
  }
 }

+@media (min-width: 1440px) {
+  .ha-topnav {
+    margin-bottom: 0.25rem;
+  }
+}
+
@media (min-width: 1680px) {
-  .topnav {
+  .ha-topnav {
    font-size: 1.25rem;
    line-height: 1.75rem;
  }
 }

-.topnav a {
+.ha-topnav a {
+  margin-right: 1.25rem;
  display: none;
-  padding-right: 1.25rem;
+  --tw-text-opacity: 1;
+  color: rgb(55 65 81 / var(--tw-text-opacity));
 }

-@media (min-width: 1312px) {
-  .topnav a {
-    display: inline;
+.ha-topnav a:hover {
+  --tw-text-opacity: 1;
+  color: rgb(17 24 39 / var(--tw-text-opacity));
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav a {
+    display: inline-block;
  }
 }

@media (min-width: 1680px) {
-  .topnav a {
-    padding-right: 1.5rem;
+  .ha-topnav a {
+    margin-right: 1.5rem;
  }
 }

+.ha-topnav-dropdown {
+  display: none;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav-dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+    display: block;
+  }
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content {
+  right: 0px;
+  z-index: 50;
+  margin-right: 1.5rem;
+  display: none;
+  min-width: 130px;
+  border-bottom-width: 2px;
+  --tw-border-opacity: 1;
+  border-color: rgb(156 163 175 / var(--tw-border-opacity));
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 250 252 / var(--tw-bg-opacity));
+  padding-top: 0.25rem;
+  --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+  --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav-dropdown .ha-topnav-dropdown-content {
+    position: absolute;
+  }
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content a {
+  margin-right: 0px;
+  display: block;
+  padding-top: 0.5rem;
+  padding-bottom: 0.5rem;
+  padding-left: 0.5rem;
+  padding-right: 0.75rem;
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content .active {
+  border-style: none;
+}
+
+.ha-topnav-dropdown .ha-topnav-dropdown-content a:hover {
+  --tw-bg-opacity: 1;
+  background-color: rgb(243 244 246 / var(--tw-bg-opacity));
+}
+
+/* TODO INLINE .ha-container {
+        @apply max-w-[1280px]
+    } 
+    
+    .ha-maincolumn {
+        @apply bg-slate-50 mx-auto p-2 md:p-4 desktop:px-16 desktop:py-12 xl:pr-80 text-lg font-serif 
+    } 
+    
+    p {
+        @apply my-3
+    }
+
+    h1 {
+        @apply font-bold text-xl 2xl:font-normal 2xl:text-4xl
+    }
+
+    h2 {
+        @apply text-lg 2xl:text-2xl
+    } */
+
+/* Classes from .NET */
+
+/* Classes from Javascript */
+
 .active {
+  pointer-events: none;
+  --tw-text-opacity: 1 !important;
+  color: rgb(216 0 0 / var(--tw-text-opacity)) !important;
+}
+
+.active:hover {
  --tw-text-opacity: 1;
  color: rgb(216 0 0 / var(--tw-text-opacity));
 }

-.topnav.responsive {
+.ha-topnav a.active {
+  -webkit-text-decoration-line: underline;
+          text-decoration-line: underline;
+  text-underline-offset: 2px;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav a.active {
+    border-bottom-width: 4px;
+    -webkit-text-decoration-line: none;
+            text-decoration-line: none;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed {
  margin-top: 1rem;
+  display: block;
+  height: 100%;
+  width: 100%;
  font-size: 1rem;
  line-height: 1.5rem;
 }

+@media (min-width: 1024px) {
+  .ha-topnav.ha-topnav-collapsed {
+    font-size: 1.125rem;
+    line-height: 1.75rem;
+  }
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed {
+    margin-top: 0px;
+    display: flex;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+}
+
+@media (min-width: 1680px) {
+  .ha-topnav.ha-topnav-collapsed {
+    font-size: 1.25rem;
+    line-height: 1.75rem;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed a {
+  clear: both;
+  display: block;
+  width: 100%;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  text-align: left;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed a {
+    display: inline-block;
+    width: -webkit-fit-content;
+    width: -moz-fit-content;
+    width: fit-content;
+    padding-top: 0px;
+    padding-bottom: 0px;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
+  display: block;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown {
+    display: inline-block;
+  }
+
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown:hover .ha-topnav-dropdown-content {
+    display: block;
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
+  display: block;
+  border-style: none;
+  padding-top: 0px;
+  --tw-shadow: 0 0 #0000;
+  --tw-shadow-colored: 0 0 #0000;
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content {
+    display: none;
+    border-bottom-width: 1px;
+    padding-top: 0.5rem;
+    --tw-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
+    --tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);
+    box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  }
+}
+
+.ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+}
+
+@media (min-width: 1190px) {
+  .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+    padding-top: 0.5rem;
+    padding-bottom: 0.5rem;
+  }
+}
+
 .static {
  position: static;
 }
@@ -619,6 +751,11 @@ a:hover {
  position: sticky;
 }

+.mx-auto {
+  margin-left: auto;
+  margin-right: auto;
+}
+
 .mb-6 {
  margin-bottom: 1.5rem;
 }
@@ -643,6 +780,10 @@ a:hover {
  height: 2rem;
 }

+.w-full {
+  width: 100%;
+}
+
 .w-8 {
  width: 2rem;
 }
@@ -663,6 +804,10 @@ a:hover {
  flex-grow: 1;
 }

+.cursor-default {
+  cursor: default;
+}
+
 .flex-row {
  flex-direction: row;
 }
@@ -754,6 +899,7 @@ a:hover {
@font-face {
    font-family: 'Biolinum';
    src: url('../fonts/LinBiolinum_R.woff') format('woff');
+    font-display: swap;
    font-weight: normal;
    font-style: normal;
 }
@@ -761,6 +907,7 @@ a:hover {
@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_R.woff') format('woff');
+    font-display: swap;
    font-weight: normal;
    font-style: normal;
 }
@@ -772,6 +919,8 @@ a:hover {

  src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');

+  font-display: swap;
+
  font-weight: normal;

  font-style: normal;
@@ -782,6 +931,8 @@ a:hover {

  src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');

+  font-display: swap;
+
  font-weight: normal;

  font-style: normal;
@@ -792,6 +943,8 @@ a:hover {

  src: url('../fonts/LinBiolinum_RI.woff') format('woff');

+  font-display: swap;
+
  font-weight: normal;

  font-style: italic;
@@ -802,6 +955,8 @@ a:hover {

  src: url('../fonts/LinBiolinum_RB.woff') format('woff');

+  font-display: swap;
+
  font-weight: bold;

  font-style: normal;
@@ -812,6 +967,8 @@ a:hover {

  src: url('../fonts/LinLibertine_RI.woff') format('woff');

+  font-display: swap;
+
  font-weight: normal;

  font-style: italic;
@@ -822,6 +979,8 @@ a:hover {

  src: url('../fonts/LinLibertine_RB.woff') format('woff');

+  font-display: swap;
+
  font-weight: bold;

  font-style: normal;
@@ -832,6 +991,8 @@ a:hover {

  src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');

+  font-display: swap;
+
  font-weight: normal;

  font-style: normal;
@@ -842,18 +1003,19 @@ body {
  background-repeat:repeat;
 }

-ul {
-  list-style-type:circle;
-}
+/* ul {
+    list-style-type:circle;
+} */

-.ha-maincolumn {
-  max-width:1280px;
-}
-
-.ha-maincolumn p {
-  -webkit-hyphens:auto;
-      -ms-hyphens:auto;
-          hyphens:auto;
+.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 {
@@ -872,19 +1034,6 @@ ul {
  color:#000000;
 }

-@media screen and (max-width:1344px) {
-  .topnav.responsive {
-    display:block !important;
-    width:100%;
-  }
-
-  .topnav.responsive a {
-    display:block;
-    text-align:left;
-    clear:both;
-  }
-}
-
 .hover\:text-black:hover {
  --tw-text-opacity: 1;
  color: rgb(0 0 0 / var(--tw-text-opacity));
@@ -910,12 +1059,16 @@ ul {
  }
 }

-@media (min-width: 1312px) {
-  .lg\:hidden {
+@media (min-width: 1190px) {
+  .desktop\:hidden {
    display: none;
  }

-  .lg\:px-8 {
+  .desktop\:max-w-screen-desktop {
+    max-width: 1190px;
+  }
+
+  .desktop\:px-8 {
    padding-left: 2rem;
    padding-right: 2rem;
  }
--- a/HaWeb/wwwroot/css/site.css
+++ b/HaWeb/wwwroot/css/site.css
@@ -8,6 +8,7 @@
@font-face {
    font-family: 'Biolinum';
    src: url('../fonts/LinBiolinum_R.woff') format('woff');
+    font-display: swap;
    font-weight: normal;
    font-style: normal;
 }
@@ -15,6 +16,7 @@
@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_R.woff') format('woff');
+    font-display: swap;
    font-weight: normal;
    font-style: normal;
 }
@@ -24,6 +26,7 @@
@font-face {
    font-family: 'Biolinum';
    src: url('/fonts/LinBiolinum_R_G.ttf') format('truetype');
+    font-display: swap;
    font-weight: normal;
    font-style: normal;
 }
@@ -31,6 +34,7 @@
@font-face {
    font-family: 'Libertine';
    src: url('/fonts/LinLibertine_R_G.ttf') format('truetype');
+    font-display: swap;
    font-weight: normal;
    font-style: normal;
 }
@@ -38,6 +42,7 @@
@font-face {
    font-family: 'Biolinum';
    src: url('../fonts/LinBiolinum_RI.woff') format('woff');
+    font-display: swap;
    font-weight: normal;
    font-style: italic;
 }
@@ -45,6 +50,7 @@
@font-face {
    font-family: 'Biolinum';
    src: url('../fonts/LinBiolinum_RB.woff') format('woff');
+    font-display: swap;
    font-weight: bold;
    font-style: normal;
 }
@@ -52,6 +58,7 @@
@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_RI.woff') format('woff');
+    font-display: swap;
    font-weight: normal;
    font-style: italic;
 }
@@ -59,6 +66,7 @@
@font-face {
    font-family: 'Libertine';
    src: url('../fonts/LinLibertine_RB.woff') format('woff');
+    font-display: swap;
    font-weight: bold;
    font-style: normal;
 }
@@ -66,13 +74,54 @@
@font-face {
    font-family: 'Playfair';
    src: url('../fonts/PlayfairDisplay-VariableFont_wght.ttf') format('truetype');
+    font-display: swap;
    font-weight: normal;
    font-style: normal;
 }

@layer components {
    body {
-        @apply text-base lg:text-lg
+        @apply text-base desktop:text-lg w-full h-full
+    }
+
+    .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 text-gray-700 hover:text-gray-900  desktop:inline-block mr-5 2xl:mr-6
+    }
+
+    .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 bg-slate-50 min-w-[130px] shadow-md border-gray-400 border-b-2 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-dropdown .ha-topnav-dropdown-content a:hover {
+        @apply bg-gray-100
+    } 
+
+    /* TODO INLINE .ha-container {
+        @apply max-w-[1280px]
+    } 
+    
+    .ha-maincolumn {
+        @apply bg-slate-50 mx-auto p-2 md:p-4 desktop:px-16 desktop:py-12 xl:pr-80 text-lg font-serif 
    } 
    
    p {
@@ -85,30 +134,46 @@

    h2 {
        @apply text-lg 2xl:text-2xl
-    }
+    } */

-    a {
-        @apply text-gray-700 hover:text-gray-900
-    }
-
-    .topnav {
-        @apply flex lg:grow-0 lg:shrink-0 md:text-lg 2xl:text-xl lg:place-self-end mb-1
-    }
-
-    .topnav a {
-        @apply hidden lg:inline pr-5 2xl:pr-6
-    }
+    /* Classes from .NET */

+    /* Classes from Javascript */
    .active {
+        @apply !text-hamannHighlight pointer-events-none
+    }
+
+    .active:hover {
        @apply text-hamannHighlight
    }

-    .ha-maincolumn {
-        @apply bg-slate-50 mx-auto p-2 md:p-4 lg:px-16 lg:py-12 xl:pr-80 text-lg font-serif
+    .ha-topnav a.active {
+        @apply underline underline-offset-2 desktop:no-underline desktop:border-b-4
    }

-    .topnav.responsive {
-        @apply mt-4 text-base;
+    .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:shadow-md desktop:border-b desktop:pt-2
+    }
+
+    .ha-topnav.ha-topnav-collapsed .ha-topnav-dropdown .ha-topnav-dropdown-content a {
+        @apply py-1 desktop:py-2
    }
 }

@@ -117,16 +182,19 @@ body {
    background-repeat:repeat;
 }

-ul {
+/* ul {
    list-style-type:circle;
-}
+} */

-.ha-maincolumn {
-    max-width:1280px;
-}
-
-.ha-maincolumn p {
-    hyphens:auto;
+.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 {
@@ -144,16 +212,3 @@ ul {
    fill:none;
    color:#000000;
 }
-
-@media screen and (max-width:1344px) {
-    .topnav.responsive {
-        display:block !important;
-        width:100%;
-    }
-
-    .topnav.responsive a {
-        display:block;
-        text-align:left;
-        clear:both;
-    }
-}