feat(hide serach hints): adds toggle search hints

and some style refinement

Author: fabianmoronzirfas

_includes/search-bar.html

@@ -1,5 +1,20 @@
 <div id="flex-search">
-  <input class="searchfield flex-search-item" id="lunr-search" placeholder="Search" /> <button id="lunr-clear" class="flex-search-item">Clear</button>
+    <input class="searchfield flex-search-item" id="lunr-search" placeholder="Search" /> <button id="lunr-clear" class="flex-search-item">Clear</button>
+</div>
+<div class="flex-search-advanced-hints">
+    <div id="advanced-search-hint">
+        <label for="advanced-search-toggle">Advanced search:</label>
+        <input type="checkbox" name="toggle" id="advanced-search-toggle" checked>
+        <div id="advanced-search-text" >
+            <p>
+                <em>If your terms don't match, try to use some special search terms.<br>
+            You can use wildcards: like <code>lerp*</code> or <code>co*lor*</code>. <br>
+            Or try using boosts: <code>fill^10 color</code>. This means the weight of fill is 10 times higher then color<br>
+            Read more about the search engine <a href="https://lunrjs.com/guides/searching.html">here</a>
+          </em>
+            </p>
+        </div>
+    </div>
 </div>
 <div id="flex-search-results">
 </div>

_layouts/entry.html

@@ -8,8 +8,7 @@
 }
 </style>
 <div id="distance">
-
-  {%- include search-bar.html -%}
+{%- include search-bar.html -%}
 </div>
 {% include entry-card.html entry=page ispage=true %}
 {{content}}

_sass/_reference-index.scss renamed to _sass/_reference.scss

@@ -25,6 +25,8 @@ h1#new-cat-index {
 
 .sub-category {
     column-width: 250px;
+    column-rule: 1px dotted #9636FC;
+    // column-gap: 1em;
     /* border-bottom: 1px dotted #9636FC; */
 }
 
@@ -34,6 +36,9 @@ h1#new-cat-index {
     /* border-bottom: 1px dotted #9636FC; */
 }
 
+.heading-sub-category{
+    padding-bottom: 1em;
+}
 .heading-category {
     border-top: 1px dotted #9636FC;
 }
@@ -64,33 +69,45 @@ h1#new-cat-index {
 /* .entry-heading{
      margin-top: 0;
     } */
-
+.ref-entry{
+    padding-bottom: 1em;
+    height:7.5em;
+    padding-left: 0.2em;
+}
 .summary,
 .ref-entry {
     break-inside: avoid;
 }
 
 .summary {
-    min-height: 6em;
-    margin-top: 0.5em;
+    // min-height: 4.5em;
+    // height: 4.5em;
+    margin-top: 0.2em;
+    font-size: 1.1em;
+    margin-bottom:0;
+    line-height: 1.25em;
+    code{
+        padding: 0;
+        vertical-align: bottom;
+        font-size: 0.9em;
+    }
 }
 
 #flex-search {
     display: flex;
-}
-
-#flex-search>* {
+ * {
     margin-right: 0.5em;
-}
-
-#flex-search>button {
+ }
+ button {
     margin-right: 0 !important;
     background-color: white;
     background: white;
     background-image: none;
     border: 1px solid #9636FC;
 }
 
+}
+
 .flex-search-item,
 .flex-search-item::placeholder {
     font-family: 'Times New Roman', Times, serif;
@@ -115,15 +132,42 @@ button.flex-search-item:active {
     background: black !important;
 }
 
-#flex-search-results>.search-result-container>.ref-entry {
+#flex-search-results> .search-result-container > .ref-entry {
     padding-top: 0.5em;
     border-top: 1px dotted #9636FC;
 }
 
-#flex-search-results>.search-result-container>.ref-entry>p.summary {
+#flex-search-results>.search-result-container>.ref-entry > p.summary {
     min-height: 0;
 }
 
 .search-result-container {
     padding-top: 1em;
+}
+
+#advanced-search-hint{
+    input{
+        display:none;
+    }
+    label{
+        font-style: italic;
+        border-bottom: 1px solid #9636FC;
+        // text-decoration: underline;
+        &:hover{
+            background-image: url("/assets/images/stripe_c40ccfac0db9e43c48e95a530d787366.png");
+        }
+    }
+}
+#advanced-search-hint input[type="checkbox"]:checked + div {
+    opacity: 0;
+    max-height: 0;
+    border: none;
+  }
+
+#advanced-search-text{
+    max-height: 99em;
+    height: auto;
+    opacity: 1;
+    overflow: hidden;
+    transition: opacity .5s linear, max-height .5s linear;
 }

assets/css/styles.sass

@@ -355,7 +355,7 @@ a.textgrow
         font-size: 30px
         border-bottom: 1px solid $textColor
 
-@import 'reference-index'
+@import 'reference'
 
 // ------------------------
 // old basil css. Overwrite new settings