Mobil Optimierungen

src/dynamic/handschriften.njk

@@ -25,7 +25,7 @@ eleventyNavigation:
       <div class="feld">Druck</div> Die Angaben zum jeweiligen Druck der Handschriften dienen nur zur leichteren Orientierung, informieren mithin nicht über die Druckgeschichte (Erstdrucke, Teildrucke etc.). Bei den Briefen wird auf die Ausgabe von Freye/Stammler verwiesen (abgekürzt als „FSt“ mit Briefnummer) bzw. auf den jeweiligen Erstdruck für die dort nicht enthaltenen Korrespondenzstücke. Bei den Werken wird auf wechselnde Ausgaben oder Einzeldrucke verwiesen, und zwar nach Möglichkeit auf solche, deren Text auf der jeweils genannten Handschrift beruht (siehe dazu die nachfolgende Liste der abgekürzt zitierten Literatur).</div>
   </div>
   <div class="text-xl font-bold mb-1.5">Abgekürzt zitierte Literatur</div>
-  <div class="mb-4 literaturliste twocolumns pr-8">
+  <div class="mb-4 literaturliste desktop:columns-2 pr-8">
     <ul>
       <li>
         <b>Blei 1909/13:</b> Jakob Michael Reinhold Lenz: Gesammelte Schriften. Hrsg. von Franz Blei. 5 Bde. München, Leipzig: Müller 1909-1913
@@ -84,7 +84,7 @@ eleventyNavigation:
 
 <div class="searchbar">
   <input type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
-  <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
+  <button class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
   <div class="hideifsearching">
         Ort&nbsp;
         <select onchange="window.location.href=this.value" id="listselect">
@@ -102,11 +102,11 @@ eleventyNavigation:
   <button id="scrollbutton" href="#top">↑&nbsp;hoch</button>
 </div>
 
-<div class="mt-4 w-full" id="list">
+<div class="yearlist" id="list">
   {%- for post in collections.handschriften -%}
-    <div class="bg-slate-100 p-4 handschrift-sammlung flex flex-row mb-8 w-full category" id="{{ post.data.Ort | safe }}">
+    <div class="category handschrift-sammlung !bg-slate-100 !py-5 !mb-12" id="{{ post.data.Ort | safe }}">
-      <div class="text-xl grow font-bold self-start z-0 sticky top-12 order-0 pr-4">{{ post.data.Ort | safe }}</div>
+      <div class="text-xl basis-1/5 font-bold self-start z-0 sticky top-14 pr-3 pl-3">{{ post.data.Ort | safe }}</div>
-      <div class="grow-0 shrink-0 w-[90ch] border-slate-400 flex flex-row flex-wrap gap-x-4 gap-y-5 justify-start">{{ post.content | safe }}</div>
+      <div class=" basis-4/5 flex flex-col md:flex-row flex-wrap gap-x-4 gap-y-5 justify-start">{{ post.content | safe }}</div>
     </div>
   {%- endfor -%}
 </div>

src/dynamic/posthume_ausgaben.njk

@@ -10,7 +10,7 @@ eleventyNavigation:
 
 <div class="searchbar">
       <input type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
-      <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
+      <button class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
         <select onchange="window.location.href=this.value" id="listselect">

src/dynamic/sekundaerliteratur.njk

@@ -19,7 +19,7 @@ eleventyNavigation:
 
 <div class="searchbar">
       <input type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
-      <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
+      <button class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
         <select onchange="window.location.href=this.value" id="listselect">

src/dynamic/selbstaendige_drucke.njk

@@ -12,7 +12,7 @@ eleventyNavigation:
 
 <div class="searchbar">
       <input type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
-      <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
+      <button class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
         <select onchange="window.location.href=this.value" id="listselect">

src/dynamic/theaterauffuehrungen.njk

@@ -15,7 +15,7 @@ eleventyNavigation:
 
 <div class="searchbar">
       <input type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
-      <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
+      <button class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
       <div class="hideifsearching">
         Jahr&nbsp;
         <select onchange="window.location.href=this.value" id="listselect">

src/dynamic/unselbststaendige_drucke.njk

@@ -31,11 +31,11 @@ eleventyNavigation:
 
 <div class="searchbar">
     <input type="text" name="keyword" class="form-control input-sm" placeholder="Liste durchsuchen...">
-    <button class="showifsearching" onclick="var input = this.previousElementSibling; input.value = ''; input.focus(); search();" alt="Clear the search form">Suche abbrechen</button>
+    <button class="showifsearching" onclick="searchreset();" alt="Clear the search form">Zurücksetzen</button>
     <button id="scrollbutton" href="#top">↑&nbsp;hoch</a>
 </div>
 
-<div class="mt-4" id="list">
+<div class="yearlist" id="list">
   {% set werk = "" %}
   {%- for post in collections.unselbststaendigedrucke -%}
     {% if post.data.Werk !== werk %}
@@ -44,11 +44,11 @@ eleventyNavigation:
         </div>
       {% endif %}
       {% set werk = post.data.Werk %}
-      <div class="flex flex-row mb-8 w-full category" id="{{ werk }}">
+      <div class="category !mb-12" id="{{ werk }}">
-      <div class="text-xl pl-3 pr-1 grow font-bold self-start z-0 sticky top-12 order-2" >{{ werk }}</div>
+      <div class="categorytitle grow-0 basis-1/5" >{{ werk }}</div>
-      <div class="px-4 border-r-2 grow-0 shrink-0 w-[90ch] border-slate-400">
+      <div class="categorybody grow shrink-0 basis-4/5">
     {% endif %}
-    <div class="mb-3 pl-6 -indent-6 searchable">{{ post.content | safe }}</div>
+    <div class="searchable">{{ post.content | safe }}</div>
   {%- endfor -%}
   </div>
   </div>

src/includes/bar.njk

@@ -1,4 +1,4 @@
 {% include "header.njk" %}
-{% include "nav.njk" %}
+{% include "nav.njk" %} 
 {% include "search.njk" %}
 {% include "footer.njk" %}

src/includes/footer.njk

@@ -1,4 +1,4 @@
-<footer class="hidden desktop:block text-base text-center py-1 px-4 grow-0 shrink-0 ">
+<footer class="hidden desktop:block fixed bottom-0 text-base text-center py-1 px-4 grow-0 shrink-0">
     Stand: 30.1.2023
     | <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="https://github.com/schnulller/jacoblenz">Code</a> | 
         <a class="underline underline-offset-[3px] decoration-dotted hover:decoration-solid" href="/datenschutz/">Datenschutz & Impressum</a>

src/includes/header.njk

@@ -5,13 +5,13 @@
 	<h1 class="px-3 py-2 pb-4 text-5xl font-bold text-center">
 		{{ config.title }}
 	</h1>
-	<h2 class="hidden desktop:block py-2 border-t-gray-200 px-5 text-xl text-black bg-slate-200 border-l-4 border-slate-600 shadow-sm">
+	<h2 class="hidden desktop:block py-2 border-t-gray-200 px-5 text-xl text-black bg-slate-200 border-l-4 border-lenz-11-blue shadow-sm">
 		{{ config.shortdescription }}
 		{# <br> Forschungsstelle zum Schriftsteller Jacob Michael Reinhold Lenz. #}
 	</h2>
 	</div>
 	<button class="border rounded-md w-16 h-16 desktop:hidden" id="navigation-button">
 		Menu
-	</div>
+	</button>
 </header>
 

src/includes/search.njk

@@ -1,8 +1,8 @@
 <div class="hidden desktop:block">
-    <div class="bg-slate-50 border-t border-slate-600 py-5 px-4">
+    <div class="bg-slate-50 border-t border-lenz-11-blue py-5 px-4">
         <form class="flex flex-row w-full">
-        <input class="px-1.5 italic border border-slate-600 grow" type="text" placeholder="Suchbegriff..."/>
+        <input class="px-1.5 italic border border-lenz-11-blue grow" type="text" placeholder="Suchbegriff..."/>
-        <button class="inline-block ml-2 px-2 border border-slate-600 ">Suche</button>
+        <button class="inline-block ml-2 px-2 border border-lenz-11-blue ">Suche</button>
         </form>
     </div>
 </div>

src/layouts/base.njk

@@ -42,10 +42,10 @@
     <meta name="twitter:domain" content="{% if image %}{{ image }}{% else %}{{ config.image }}{% endif %}">
 
   </head>
-  <body class="bg-slate-50 w-full h-full mx-auto flex flex-col
+  <body class="bg-slate-50 mx-auto flex flex-col
       desktop:px-12 desktop:max-w-screen-2xl desktop:flex-row">
-    <aside class="flex flex-col shrink py-4 px-3
+    <aside class="flex flex-col shrink py-4 px-3 w-full
-      desktop:px-0 desktop:py-0
+      desktop:px-0 desktop:py-0 desktop:w-auto
       desktop:shrink-0 desktop:grow-0 desktop:basis-[26rem] desktop:sticky desktop:top-0 desktop:max-h-screen desktop:min-h-screen  desktop:bg-slate-50">
       {% include "bar.njk" %}
     </aside>
@@ -115,7 +115,19 @@
         })
       }
 
-      const search = function () {
+      const search = function (evt) {
+        evt = evt || window.event;
+        var isEscape = false;
+        if ("key" in evt) {
+          isEscape = (evt.key === "Escape" || evt.key === "Esc");
+        } else {
+          isEscape = (evt.keyCode === 27);
+        }
+        if (isEscape) { 
+          searchreset();
+          return;
+        }
+
         term = $("input[name='keyword']")
           .val()
           .trim() || '';
@@ -186,38 +198,54 @@
           sw = term;
           swl = term.length;
         } else {
-          var hidden = document
+          searchreset();
-            .getElementById("list")
-            .querySelectorAll(".hidden-important");
-          for (let item of hidden) {
-            item
-              .classList
-              .remove("hidden-important");
-          }
-          found = dictionary;
-          sw = "";
-          swl = 0;
-          $(".hideifsearching").each((ind, el) => {
-            $(el).show();
-          });
-          $(".showifsearching").each((ind, el) => {
-            $(el).hide();
-          });
         }
       }
 
+      const searchreset = function() {
+        for (let item of found) {
+          $(item.element).unmark();
+        }
+
+        var hidden = document
+          .getElementById("list")
+          .querySelectorAll(".hidden-important");
+        for (let item of hidden) {
+          item
+            .classList
+            .remove("hidden-important");
+        }
+        found = dictionary;
+        sw = "";
+        swl = 0;
+        $(".hideifsearching").each((ind, el) => {
+          $(el).show();
+        });
+        $(".showifsearching").each((ind, el) => {
+          $(el).hide();
+        });
+
+        var input =  document.querySelector("input[name='keyword']"); 
+        input.value = ''; 
+        input.focus();
+      }
+
       $(document).ready(function () {
         // Mobile menu
         var menubutton = document.getElementById("navigation-button");
         var navigation = document.getElementById("navigation");
         if (menubutton !== null && navigation !== null) {
-            menubutton.addEventListener("click", () => {
+          menubutton.addEventListener("click", () => {
-              if (navigation.classList.contains("hidden")) {
+            if (navigation.classList.contains("hidden")) {
-                navigation.classList.remove("hidden");
+              navigation
-              } else {
+                .classList
-                navigation.classList.add("hidden");
+                .remove("hidden");
-              }
+            } else {
-            })
+              navigation
+                .classList
+                .add("hidden");
+            }
+          })
         }
 
         // Scroll button
@@ -241,24 +269,28 @@
             searchable = ".handschrift";
           }
           createIndex("list", searchable);
-          categories = document.getElementById("list").getElementsByClassName("category");
+          categories = document
+            .getElementById("list")
+            .getElementsByClassName("category");
           {# $("input[name='keyword']").focus(); #}
           $("input[name='keyword']").keyup(search);
 
-
+          // Scrolling & List updating
           let select = document.getElementById("listselect");
           if (select !== null) {
             var sections = {};
             var i = 0;
-            Array.prototype.forEach.call(categories, function(e) {
+            Array
-              sections[e.id] = e.offsetTop;
+              .prototype
-            });
+              .forEach
-            window.onscroll = function() {
+              .call(categories, function (e) {
+                sections[e.id] = e.offsetTop;
+              });
+            window.onscroll = function () {
               var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
               for (i in sections) {
                 if (sections[i] <= scrollPosition) {
                   var opt = select.querySelector('option[value="#' + i + '"]');
-                  console.log(opt);
                   if (opt !== null) {
                     opt.selected = true;
                   }

src/static/css/site.css

@@ -94,19 +94,23 @@
 
   @layer components {
     .searchbar {
-      @apply sticky top-0 z-20 bg-slate-100 px-4 py-0.5 pt-1.5 self-start w-full flex flex-row items-baseline gap-x-3
+      @apply sticky top-0 z-20 bg-slate-100 px-4 py-0.5 pt-1.5 self-start w-full sm:flex sm:flex-row items-baseline gap-x-3 border-b
     }
 
     .searchbar button {
-      @apply bg-white shrink py-0.5 px-1.5 border border-slate-300
+      @apply inline-block bg-white shrink py-0.5 px-1.5 border border-slate-300
     }
 
     .searchbar input {
-      @apply grow p-0.5 px-1 my-1 mb-2 border border-slate-300
+      @apply inline-block w-full sm:w-auto sm:grow p-0.5 px-1 my-1 mb-2 border border-slate-300
+    }
+
+    .hideifsearching {
+      @apply inline-block
     }
 
     .searchbar select {
-      @apply bg-white px-1.5 pt-1.5 pb-1 border border-slate-300
+      @apply inline-block bg-white px-1.5 pt-1.5 pb-1 border border-slate-300
     }
 
     .sidebar-nav li li {
@@ -117,40 +121,44 @@
       @apply font-bold
     }
 
+    .sidebar-nav .active::before {
+      @apply text-lenz-6-highlight
+    }
+
     .yearlist {
-      @apply mt-4
+      @apply mt-4 w-full
     }
 
     .yearlist .category .categorytitle {
-      @apply text-xl pr-1 pl-3 py-2 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-12 order-2
+      @apply text-xl pr-1 pl-3 grow-0 min-w-[4rem] font-bold self-start z-0 sticky top-14 sm:order-2
     }
 
     .yearlist .category .categorybody {
-      @apply px-4 border-r-2 grow py-2 border-slate-400
+      @apply sm:px-4 sm:border-r-2 grow md:border-lenz-12-lighterblue
     }
 
     .yearlist .category {
-      @apply flex flex-row w-full
+      @apply flex flex-col sm:flex-row w-full mb-5
     }
 
     .yearlist .searchable {
-      @apply mb-3 px-4 pl-6 -indent-6 
+      @apply mt-3 px-4 pl-6 -indent-6 
+    }
+
+    .yearlist .searchable:first-of-type {
+      @apply mt-0
     }
 
     .maincolumn {
       @apply basis-4/5 grow-0
     }
 
-    .Einzug {
-      
-    }
-
     .Kommentar {
       @apply !indent-0 !pl-0
     }
 
     .handschrift-sammlung .handschrift {
-      @apply border basis-[31.5%] shrink-0 bg-white
+      @apply border md:basis-[48%] xl:basis-[31.5%] shrink-0 bg-white py-1
     }
 
     .handschrift-sammlung .ueberschrift-gruppe {
@@ -174,7 +182,7 @@
     }
 
     .literaturliste li {
-      @apply pl-6 -indent-6 
+      @apply pl-6 -indent-6
     }
 
     .legende .feld {
@@ -194,6 +202,7 @@
     content: "· ";
   }
   
+
   .twocolumns {
     columns: 2;
   }

tailwind.config.js

@@ -34,17 +34,18 @@ module.exports = {
         'print': { 'raw': 'print' },
       },
       colors: {
-        'lenzHighlight': '#c00902',
+        'lenz-12-lighterblue': '#1f4060',
-        'hamannLightHighlight': '#cc7878',
+        'lenz-11-blue': '#13213f',
-        'hamannSlate': {
+        'lenz-10-darkblue': '#110a25',
-          50: '#6A829E',
+        'lenz-9-winered': '#290b22',
-          100: '#416C9E',
+        'lenz-8-darkred': '#491122',
-          200: '#3F8FEB',
+        'lenz-7-red': '#711824',
-          300: '#3270B8',
+        'lenz-6-highlight': '#9b1e24',
-          500: '#2B619E',
+        'lenz-5-pink': '#bc3047',
-          700: '#1E4570',
+        'lenz-4-rose': '#c95873',
-          900: '#173557'
+        'lenz-3-lightrose': '#cf899d',
-        }
+        'lenz-2-lightred': '#dab5c1',
+        'lenz-1-greyred': '#eadce1',
       }
     },
   },