Cursor-Placement (TODO:, mobile, bilder, pdf)

src/dynamic/handschriften.njk

@@ -90,6 +90,7 @@ eleventyNavigation:
         <select onchange="window.location.href=this.value" id="listselect">
       {% set ort = "" %}
       {% set count = 0 %}
+      <option class="font-bold" value="#top">↑&nbsp;Übersicht</option>
       {%- for post in collections.handschriften -%}
         {% if count % 1 == 0 and ort !== post.data.Short %}
           <option value="#{{ post.data.Ort }}">{{ post.data.Short }}</option>
@@ -106,7 +107,7 @@ eleventyNavigation:
   {%- for post in collections.handschriften -%}
     <div class="category handschrift-sammlung !bg-slate-100 !py-5 !mb-12" id="{{ post.data.Ort | safe }}">
       <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=" basis-4/5 flex flex-col md:flex-row flex-wrap gap-x-4 gap-y-5 justify-start">{{ post.content | safe }}</div>
+      <div class=" basis-4/5 flex flex-col sm:flex-row flex-wrap gap-x-4 gap-y-5 justify-start">{{ post.content | safe }}</div>
     </div>
   {%- endfor -%}
 </div>

src/layouts/base.njk

@@ -81,6 +81,16 @@
         }
       }
 
+      function isInViewport(element) {
+        const rect = element.getBoundingClientRect();
+        return (
+            rect.top >= 0 &&
+            rect.left >= 0 &&
+            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
+            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
+        );
+    }
+
       // Scripts for filtering lists
       let dictionary = [];
       let categories = [];
@@ -272,7 +282,11 @@
           categories = document
             .getElementById("list")
             .getElementsByClassName("category");
-          {# $("input[name='keyword']").focus(); #}
+
+          var searchinput = document.querySelector("input[name='keyword']");
+          if (searchinput !== null && isInViewport(searchinput)) {
+            $("input[name='keyword']").focus();
+          }
           $("input[name='keyword']").keyup(search);
 
           // Scrolling & List updating
@@ -289,7 +303,7 @@
             window.onscroll = function () {
               var scrollPosition = document.documentElement.scrollTop || document.body.scrollTop;
               for (i in sections) {
-                if (sections[i] <= scrollPosition) {
+                if (sections[i] <= scrollPosition + 60) {
                   var opt = select.querySelector('option[value="#' + i + '"]');
                   if (opt !== null) {
                     opt.selected = true;

src/static/css/site.css

@@ -158,7 +158,7 @@
     }
 
     .handschrift-sammlung .handschrift {
-      @apply border md:basis-[48%] xl:basis-[31.5%] shrink-0 bg-white py-1
+      @apply border sm:basis-[48%] xl:basis-[31.5%] shrink-0 bg-white py-1
     }
 
     .handschrift-sammlung .ueberschrift-gruppe {