Dark and Ligth mode skin is now easily switchable

- mode can be switched from cookies (settings UI is not added yet, a separate GitHub issue has been added for it already)
- fixed cases if masthead is turned off completely in the site config, the search must work nicely (with the hotkey) even if it is turned off
- added support for tiny tooltips (similar to the classic short ones) that can have predefined text
- added support for static tooltips (that remain steady even if the content is scrolled)
- added some enhancements around hiding the tooltip
Signed-off-by: Hofi <hofione@gmail.com>

Signed-off-by: Hofi <hofione@gmail.com>

Author: HofiOne

_includes/globals.html

@@ -5,7 +5,8 @@
 <script async="false">
 
   const searchEnabled = {% if site.search == true %} true {% else %} false {% endif %};
-  const searchFromMastHead = {% if site.search_from_masthead == true %} true {% else %} false {% endif %};
+  const hasMastHead = {% if site.masthead != false %} true {% else %} false {% endif %};
+  const searchFromMastHead = {% if site.masthead != false and site.search_from_masthead == true %} true {% else %} false {% endif %};
 
   const docRoot = '{{ site.baseurl }}';
 
@@ -40,4 +41,33 @@
     return defaultValue;
   }
 
+  function compareDOMRect(rect1, rect2) {
+    return {
+      top: rect1.top === rect2.top,
+      right: rect1.right === rect2.right,
+      bottom: rect1.bottom === rect2.bottom,
+      left: rect1.left === rect2.left,
+      width: rect1.width === rect2.width,
+      height: rect1.height === rect2.height
+    };
+  }
+
+  function getElementPositionRelativeToRoot(element) {
+    var rect = element.getBoundingClientRect();
+
+    // Calculate the position relative to the document
+    var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+    var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+
+    var position = {
+      top: rect.top + scrollTop,
+      left: rect.left + scrollLeft
+    };
+    return position;
+  }
+
+  function comparePositions(pos1, pos2) {
+    return pos1.top === pos2.top && pos1.left === pos2.left;
+  }
+
 </script>

_includes/masthead.html

@@ -1,6 +1,17 @@
 {% capture logo_path %}{{ site.logo }}{% endcapture %}
 
 <div class="masthead {% if site.masthead.sticky == true %}sticky{% endif %}">
+
+  {% comment %}<!-- 
+    TODO: Far from perfect but working solution for now to have static (none moving) tooltips
+          It's satisfying now as 
+            - we do have only in the masthead such controls
+            - eliminates the need to add a real tooltip to each of the elements that require such a tooltip
+            - it aids the detection of wether the tooltip needs to be hiding (e.g on tooltip movements caused by scrolling)
+  -->{% endcomment %}
+  <span id="tooltip" class="tooltip"></span>
+  <span id="tooltipRenderer" class="tooltip visible"></span>
+
   <div class="masthead__inner-wrap">
     <div class="masthead__menu">
       <nav id="site-nav" class="greedy-nav">
@@ -36,11 +47,11 @@
         {% if site.search == true %}
           {% comment %}<!-- search__toggle is kept for backward compatibility -->{% endcomment %}
           <label class="sr-only" for="search-button">
-            {{ site.data.ui-text[site.locale].search_label_text | default: 'Toggle search (Shift + Ctrl + F or ESC to close)' }}
+            {{ site.data.ui-text[site.locale].search_label_text | default: 'Toggle search (`Shift + Ctrl + F`, ESC to close)' }}
           </label>
-          <button id="search-button" class="masthead_button search__toggle" type="button">
-            <span id="search_hint" class="">{{ site.data.ui-text[site.locale].search_label | default: "Toggle search (Shift + Ctrl + F or ESC to close)" }}</span>
-            <i class="masthead_button_icon fas fa-search" style="font-size: 120%;"></i>
+          <button id="search-button" class="masthead_button search__toggle" type="button" >
+            <i class="masthead_button_icon content-tooltip tooltip-align-center text-content-tooltip fas fa-search" style="font-size: 120%;"
+              data-tooltip-text="{{ site.data.ui-text[site.locale].search_label | default: 'Toggle search (`Shift + Ctrl + F`, ESC to close)' }}"></i>
           </button>
         {% endif %}
 

_includes/search/search_form.html

@@ -3,10 +3,10 @@
   {%- case search_provider -%}
 
   {%- when "lunr" -%}
-    {% if site.search_from_masthead == false %}
+    {% if site.search_from_masthead == false or site.masthead == false %}
       {% include /search/search_input.html %}
     {% endif %}
-    <div id="results" class="results {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}"></div>
+    <div id="results" class="results {% if site.search_from_masthead and site.masthead != false %}from-masthead{% else %}from-search-content{% endif %}"></div>
 
   {%- when "google" -%}
     {% include /search/search_input.html %}

_includes/search/search_input.html

@@ -2,12 +2,12 @@
 {%- case search_provider -%}
 
 {%- when "lunr" -%}
-  <form class="search-content__form {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}" 
+  <form class="search-content__form {% if site.search_from_masthead and site.masthead != false %}from-masthead{% else %}from-search-content{% endif %}" 
     onkeydown="return event.key != 'Enter';" role="search">
     <label class="sr-only" for="search">
       {{ site.data.ui-text[site.locale].search_label_text | default: 'Enter your search term...' }}
     </label>
-    <input type="search" id="search" class="search-input {% if site.search_from_masthead %}from-masthead{% else %}from-search-content{% endif %}" 
+    <input type="search" id="search" class="search-input {% if site.search_from_masthead and site.masthead != false %}from-masthead{% else %}from-search-content{% endif %}" 
       placeholder="{{ site.data.ui-text[site.locale].search_placeholder_text | default: 'Enter your search term...' }}" />    
     <a class="search-help content-tooltip tooltip-align-center full-content-tooltip nav-link fas fa-info-circle" href="{{ '/lunr_search_help.html' | relative_url }}"></a>
   </form>