publication overview page, search completed

assets/sass/components/_button.scss

@@ -2,7 +2,7 @@
   position: relative;
   display: inline-block;
   padding: 3px 9px;
-  margin: 0.5rem;
+  margin: 0.25rem;
   cursor: pointer;
   text-decoration: none !important;
   border-radius: 0.25rem;
@@ -16,6 +16,18 @@
     @include translate(-50%, -50%);
   }
 
+  &__micro {
+    height: 20px;
+    font-size: 14px;
+    line-height: 14px;
+  }
+
+  &__mini {
+    height: 24px;
+    font-size: 15px;
+    line-height: 15px;
+  }
+
   &__small {
     height: 28px;
     font-size: 16px;
@@ -24,6 +36,7 @@
   &__medium {
     height: 32px;
     font-size: 17px;
+    line-height: 17px;
   }
 
   &__large {
@@ -51,5 +64,20 @@
         border: 1px solid themed('link-hover');
       }
     }
+
+    &[data-variant="contained"] {
+      &[data-color="primary"], &[data-color="default"] {
+        color: #111;
+        background: themed('button-primary-color');
+        @include box-shadow(1px, 1px, 3px, 0, themed('share-shadow-color'));
+        border: none;
+
+        @include on-event {
+          color: #111;
+          background: darken(themed('button-primary-color'), 4%);
+          border: none;
+        }
+      }
+    }
   }
 }

assets/sass/components/_search.scss

@@ -73,7 +73,6 @@
     left: 0;
     width: 100%;
     height: 100%;
-    margin: 4px 0;
 
     @include themify($themes) {
       background-color: themed('body-background-color');
@@ -124,6 +123,29 @@
         margin: 0.25rem 0;
       }
     }
+
+    &__close {
+      position: absolute;
+      cursor: pointer;
+      
+      &[data-dir="ltr"] {
+        right: 0.5rem;
+        top: -1.5rem;
+      }
+      
+      &[data-dir="rtl"] {
+        left: 0.5rem;
+        top: -1.5rem;
+      }
+
+      @include themify($themes) {
+        color: themed('social-icon-color');
+
+        @include on-event {
+          color: themed('social-icon-hover-color');
+        }
+      }
+    }
   }
 }
 

assets/sass/pages/_publication.scss

@@ -35,19 +35,158 @@
     @media only screen and (max-width: 600px) {
       margin: 1rem 0;
     }
+
+    a {
+      @include themify($themes) {
+        color: themed('title-color');
+      }
+    }
   }
 
   &__meta {
     margin: 0 0.25rem;
     display: inline-block;
+
+    @include themify($themes) {
+      color: themed('meta-color');
+    }
   }
 
   &__summary {
     margin-top: 0.75rem;
     margin-bottom: 1rem;
+    font-size: 1rem;
   }
 
-  &__links {
+  &__btn {
+    padding: 0 0.25rem;
+    border-radius: 0.2rem;
     
+    @include themify($themes) {
+      color: themed('body-color') !important;
+      background-color: themed('donation-background-color');
+      @include on-event {
+        background-color: darken(themed('donation-background-color'), 5%);
+      }
+    }
+  }
+
+  &__box {
+    width: 100%;
+    height: auto;
+    border-radius: 0.2rem;
+    padding: 1rem;
+    position: relative;
+
+    @include flexbox();
+    @include flex-grow(1);
+    @include flex-direction(column);
+    @include justify-content(flex-start);
+    @include themify($themes) {
+      border: 1px solid themed('content-box-border-color');
+      background-color: themed('body-background-color');
+    }
+
+    @include on-event {
+      @include box-shadow(1px, 1px, 3px, 0px, rgba(0, 0, 0, 0.25));
+      background-color: rgba(125, 125, 125, 0.1);
+    }
+
+    &--title {
+      font-size: 1rem;
+      font-family: $title-font;
+      
+      @include themify($themes) {
+        color: themed('title-color');
+      }
+    }
+
+    &--desc {
+      font-size: 0.9rem;
+      margin: 0.5rem 0;
+    }
+
+    &--links {
+      width: 100%;
+      font-size: 0.9rem;
+
+      @include flexbox();
+      @include flex-wrap(wrap);
+
+      a {
+        margin: 0.125rem;
+        z-index: z('card-outter');
+        
+        @include themify($themes) {
+          color: themed('meta-color');
+          text-decoration: none;
+
+          @include on-event {
+            color: themed('link-hover');
+          }
+        }
+      }
+
+      &[data-dir="ltr"] {
+        a {
+            &:first-child {
+            margin-right: 1rem;
+          }
+        }
+      }
+      &[data-dir="rtl"] {
+        a {
+            &:first-child {
+            margin-left: 1rem;
+          }
+        }
+      }
+    }
   }
 }
+
+.pgrid {
+  position: relative;
+  margin-bottom: 1rem;
+
+  .full {
+    width: 100%;
+  }
+
+  .half {
+    width: 50%;
+  }
+}
+
+/* clear fix */
+.pgrid:after {
+  content: '';
+  display: block;
+  clear: both;
+}
+
+/* ---- .grid-item ---- */
+
+.pgrid-sizer {
+  padding: 0.5rem;
+}
+
+.pgrid-sizer,
+.pgrid-item {
+  width: 49.5%;
+}
+
+.pgrid-item {
+  float: left;
+  border-radius: 0.25rem;
+  padding: 0.51rem;
+  position: relative;
+  opacity: 1;
+  height: auto;
+  cursor: pointer;
+}
+
+.pgrid-item img {
+  display: block;
+  max-width: 100%;
+}

assets/sass/themes/_hacker.scss

@@ -25,7 +25,7 @@ $hacker: (
     navbar-dropdown-item-hover-color: #E08C48,
     sidebar-title-color: #E3CD26,
     sidebar-li-color: #A1AD64,
-    taxo-title-color: #996287,
+    taxo-title-color: #9c9299,
     taxo-num-color: #E3CD26,
     taxo-num-background-color: #252526,
     taxo-tags-background-color: lighten(#151715, 10%),

data/button.toml

@@ -1,6 +1,6 @@
 # restart hugo after set the values
 dark_primary_color = "#82aaff"
-light_primary_color = "#728fcb"
+light_primary_color = "#ccc"
-hacker_primary_color = "#cddc39"
+hacker_primary_color = "#cdf5cc"
-solarized_primary_color = "#689f38"
+solarized_primary_color = "#c5e0df"
-kimbie_primary_color = "#8ab1b0"
+kimbie_primary_color = "#d1c4e9"

layouts/_default/list.searchindex.json

@@ -7,7 +7,7 @@
       {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "shorttitle" $element.Params.shorttitle "booktitle" $element.Params.booktitle "uri" $element.Permalink "tags" $element.Params.tags "authors" $element.Params.authors "abstract" $element.Params.abstract "ENTRYTYPE" $element.Params.ENTRYTYPE "publication" $element.Params.publication "publishDate" $element.Params.publishDate) -}}
     {{- end -}}
   {{ else }}
-    {{ $paginator := .Paginate (where .Pages "Type" .Type) }}
+    {{ $paginator := .Paginate (where .Pages "Type" .Type) ($.Param "pubPaginate") }}
     {{- range $index, $element := $paginator.Pages -}}
       {{- $.Scratch.Add "searchindex" (dict "id" $index "title" $element.Title "shorttitle" $element.Params.shorttitle "booktitle" $element.Params.booktitle "uri" $element.Permalink "tags" $element.Params.tags "authors" $element.Params.authors "abstract" $element.Params.abstract "ENTRYTYPE" $element.Params.ENTRYTYPE "publication" $element.Params.publication "publishDate" $element.Params.publishDate) -}}
     {{- end -}}

layouts/partials/head/scripts.html

@@ -498,17 +498,19 @@
     var enableSearchHighlight = JSON.parse({{ $enableSearchHighlight | jsonify }});
     {{ $searchResultPosition := ($.Param "searchResultPosition") }}
     var searchResultPosition = JSON.parse({{ $searchResultPosition | jsonify }});
+    {{ $sectionType := .Type }}
+    var sectionType = JSON.parse({{ $sectionType | jsonify }});
 
     var fuse = null;
 
-    function initFuse() {
+    (function initFuse() {
       var xhr = new XMLHttpRequest();
       xhr.open('GET', permalink + "index.json");
       xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
       xhr.onload = function () {
         if (xhr.status === 200) {
           fuse = new Fuse(JSON.parse(xhr.response.toString('utf-8')), {
-            keys: ['title', 'description', 'content'],
+            keys: sectionType.includes('publication') ? ['title', 'description', 'content'] : ['title', 'abstract'],
             includeMatches: enableSearchHighlight,
             shouldSort: true,
             threshold: 0.4,
@@ -517,13 +519,14 @@
             maxPatternLength: 32,
             minMatchCharLength: 1,
           });
+          window.fuse = fuse;
         }
         else {
           console.error('[' + xhr.status + ']Error:', xhr.statusText);
         }
       };
       xhr.send();
-    }
+    })();
 
     function makeLi(ulElem, obj) {
       var li = document.createElement('li');
@@ -839,24 +842,18 @@
       return content;
     };
 
-    initFuse();
-
     var searchElem = document.getElementById('search');
     var searchMobile = document.getElementById('search-mobile');
 
     searchElem ?
     searchElem.addEventListener('input', function(e) {
-      if (!e.target.value) {
+      if (!e.target.value | window.innerWidth < 770) {
         document.getElementById('search-results').setAttribute('class', 'dropdown');
         searchResult ? searchResult.setAttribute('data-display', 'none') : null;
         summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
         return null;
       }
 
-      if (window.innerWidth < 770) {
-        return null;
-      }
-
       searchText = e.target.value;
       var results = fuse.search(e.target.value);
 
@@ -913,16 +910,6 @@
       }
     }) : null;
 
-    function indexInParent(node) {
-      var children = node.parentNode.childNodes;
-      var num = 0;
-      for (var i = 0; i < children.length; i++) {
-        if (children[i] == node) return num;
-        if (children[i].nodeType == 1) num++;
-      }
-      return -1;
-    }
-
     var searchMenuElem = document.getElementById("search-menu");
     var activeItem = document.querySelector('#search-menu .dropdown-item.is-active');
     var activeIndex = null;
@@ -1094,16 +1081,16 @@
       var ul = document.createElement('ul');
       
       if (!searchText) {
-        searchResult.setAttribute('data-display', 'none');
+        searchResult ? searchResult.setAttribute('data-display', 'none') : null;
-        summaryContainer.setAttribute('data-display', 'block');
+        summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
       } else if (results) {
         if (results && results.length) {
           results.forEach(function (result) {
             makeLi(ul, result);
           });
 
-          searchResult.setAttribute('data-display', 'block');
+          searchResult ? searchResult.setAttribute('data-display', 'block') : null;
-          summaryContainer.setAttribute('data-display', 'none');
+          summaryContainer ? summaryContainer.setAttribute('data-display', 'none') : null;
         }
       }
 
@@ -1116,16 +1103,16 @@
       var ul = document.createElement('ul');
 
       if (!searchText) {
-        searchResult.setAttribute('data-display', 'none');
+        searchResult ? searchResult.setAttribute('data-display', 'none') : null;
-        summaryContainer.setAttribute('data-display', 'block');
+        summaryContainer ? summaryContainer.setAttribute('data-display', 'block') : null;
       } else if (results) {
         if (results && results.length) {
           results.forEach(function (result) {
             makeHighlightLi(ul, result);
           });
 
-          searchResult.setAttribute('data-display', 'block');
+          searchResult ? searchResult.setAttribute('data-display', 'block') : null;
-          summaryContainer.setAttribute('data-display', 'none');
+          summaryContainer ? summaryContainer.setAttribute('data-display', 'none') : null;
         }
       }
 

layouts/partials/publication/pub-links.html

@@ -1,12 +1,12 @@
-<div class="pub__links">
+<div>
-  {{ with .Params.link }}
+  <button title="Cite Button" aria-label="Cite Button" id="citeBtn" class="button button__micro" data-color="default" data-variant="contained">
-    <a href="{{ . }}" title="{{ . }}" target="_blank" rel="noreferrer" class="button button__medium" data-color="default">
-      url
-    </a>
-  {{ end }}
-  <button title="Cite Button" aria-label="Cite Button" id="citeBtn" class="button button__medium" data-color="default">
     cite
   </button>
+  {{ with .Params.links }}
+    {{ range . }}
+        <a href="{{ .link }}" title="{{ .name }}" class="button button__micro" data-color="default" data-variant="contained" target="_blank" rel="noreferrer">{{ .name }}</a>
+    {{ end }}
+  {{ end }}
 </div>
 
 <div class="modal micromodal-slide" id="modal" aria-hidden="true">

layouts/partials/publication/pub-list.html

@@ -1,6 +1,6 @@
 <div class="pub__list">
   {{ $paginator := .Paginate (where .Pages "Type" .Type) ($.Param "pubPaginate") }}
-  <ul>
+  <ul class="pub__ul" data-display="block">
     {{ range $paginator.Pages }}
     <li class="pub__item">
       <a href="{{ .Permalink }}">
@@ -31,4 +31,5 @@
     </li>
     {{ end }}
   </ul>
+  {{ partial "publication/pub-search-result" . }}
 </div>

layouts/partials/publication/pub-overview.html

@@ -0,0 +1,38 @@
+{{ $paginator := .Paginate (where .Pages "Type" .Type) }}
+{{ $ctx := . }}
+<div class="pub__list">
+  <ul class="pub__ul">
+    <div class="pgrid">
+      <div class="pgrid-sizer"></div>
+      {{ range $index, $element := $paginator.Pages }}
+        {{ range $idx, $elem := .Pages }}
+          {{ if .Params.pinned }}
+            <div class="pgrid-item">
+              <div class="pub__box">
+                <a href="{{ .Permalink }}" class="showcase__box--link" aria-label="{{ .Title }}"></a>
+                <div class="pub__box--title">
+                  {{ .Title }}
+                </div>
+                <div class="pub__box--desc">
+                  {{ .Params.abstract }}
+                </div>
+                <div class="pub__box--links" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
+                  <a href="{{ .FirstSection.Permalink }}/{{ .Params.ENTRYTYPE }}">
+                    🎯 {{ .Params.ENTRYTYPE }}
+                  </a>
+                  {{ with .Params.links }}
+                    {{ range . }}
+                      <a href="{{ .link }}" class="pub__btn" target="_blank" rel="noreferrer">
+                        {{ .name }}
+                      </a>
+                    {{ end }}
+                  {{ end }}
+                </div>
+              </div>
+            </div>
+          {{ end }}
+        {{ end }}
+      {{ end }}
+    </div>
+  </ul>
+</div>

layouts/partials/publication/pub-search-result.html

@@ -0,0 +1,2 @@
+<ul class="pub__result" data-display="none">
+</ul>

layouts/partials/script/pub-list-script.html

@@ -1,37 +1,22 @@
 {{ $shave := resources.Get "js/shave.min.js" | resources.Fingerprint }}
 <script defer src="{{ $shave.RelPermalink }}"></script>
-{{ $fuzzysort := resources.Get "js/fuzzysort.min.js" | resources.Fingerprint }}
+{{ $fuse := resources.Get "js/fuse.min.js" | resources.Fingerprint }}
-<script defer src="{{ $fuzzysort.RelPermalink }}"></script>
+<script defer src="{{ $fuse.RelPermalink }}"></script>
 
 <script>
-  {{ $permalink := .Permalink }}
+  {{ $enableSearchHighlight := ($.Param "enableSearchHighlight") }}
-  var permalink = JSON.parse({{ $permalink | jsonify }});
+  var enableSearchHighlight = JSON.parse({{ $enableSearchHighlight | jsonify }});
-  var data = null;
+  {{ $isFirstSection := eq .Permalink .FirstSection.Permalink }}
-  const options = {
+  var isFirstSection = JSON.parse({{ $isFirstSection | jsonify }});
-    limit: 100, // don't return more results than you need!
-    allowTypo: false, // if you don't care about allowing typos
-    threshold: -10000, // don't return bad results
-    keys: ['title', 'abstract'],
-  }
   
   document.addEventListener('DOMContentLoaded', function () {
-    // search
+    var originHtmlText = JSON.stringify(document.querySelector('.pub__ul').innerHTML);
-    (function loadData() {
-      var xhr = new XMLHttpRequest();
-      xhr.open('GET', permalink + "index.json");
-      xhr.setRequestHeader('Content-Type', 'application/json; charset=utf-8');
-      xhr.onload = function () {
-        if (xhr.status === 200) {
-          data = JSON.parse(xhr.response.toString('utf-8'));
-        } else {
-          console.error('[' + xhr.status + ']Error:', xhr.statusText);
-        }
-      };
-      xhr.send();
-    })();
 
+    // search
     var pubSearch = document.getElementById('pubSearch');
     var pubList = document.querySelector('.pub__list');
+    var pubUl = document.querySelector('.pub__ul');
+    var pubResult = document.querySelector('.pub__result');
 
     var makeLi = function(ulElem, obj) {
       var li = document.createElement('li');
@@ -93,34 +78,181 @@
       ulElem.appendChild(li);
     }
 
+    var makeHighlightLi = function (ulElem, obj) {
+      var li = document.createElement('li');
+      li.className = 'pub__item';
+      
+      var a = document.createElement('a');
+      a.innerHTML = obj.item.title;
+      a.setAttribute('href', obj.item.uri);
+
+      var descDiv = null;
+      if (obj.item.abstract) {
+        descDiv = document.createElement('div');
+        descDiv.innerHTML = obj.item.abstract;
+        descDiv.className = 'pub__summary';
+      }
+
+      var metaDiv = null;
+      
+      if (obj.matches && obj.matches.length) {
+        for (var i = 0; i < obj.matches.length; i++) {
+          a.innerHTML = obj.item.title;
+
+          if (obj.matches[i].key === 'title') {
+            a.innerHTML = generateHighlightedText(obj.item.title, obj.matches[i].indices);
+          }
+
+          if (obj.item.booktitle) {
+            var span = document.createElement('span');
+            span.className = 'p2';
+            span.innerHTML = ' - ' + obj.item.booktitle;
+            a.appendChild(span);
+          } else if (obj.item.shorttitle) {
+            var span = document.createElement('span');
+            span.className = 'p2';
+            span.innerHTML = ' - ' + obj.item.shorttitle;
+            a.appendChild(span);
+          }
+
+          metaDiv = document.createElement('div');
+          if (obj.item.publishDate) {
+            var dateSpan = document.createElement('span');
+            dateSpan.className = 'caption pub__meta';
+            dateSpan.innerText = '📅 ' + obj.item.publishDate.slice(0, 10);
+            metaDiv.appendChild(dateSpan);
+          }
+
+          if (obj.item.authors) {
+            var authorsSpan = document.createElement('span');
+            authorsSpan.className = 'caption pub__meta';
+            authorsSpan.innerText = '✍️ ' + obj.item.authors.toString();
+            metaDiv.appendChild(authorsSpan);
+          }
+
+          if (obj.item.publication) {
+            var pubSpan = document.createElement('span');
+            pubSpan.className = 'caption pub__meta';
+            pubSpan.innerText = '📚 ' + obj.item.publication;
+            metaDiv.appendChild(pubSpan);
+          }
+
+          if (obj.item.ENTRYTYPE) {
+            var typeSpan = document.createElement('span');
+            typeSpan.className = 'caption pub__meta';
+            typeSpan.innerText = '🎯 ' + obj.item.ENTRYTYPE;
+            metaDiv.appendChild(typeSpan);
+          }
+
+          if (obj.matches[i].key === 'abstract') {
+            descDiv.innerHTML = generateHighlightedText(obj.matches[i].value, obj.matches[i].indices);
+          }
+        }
+
+        li.appendChild(a);
+        if (metaDiv) {
+          li.appendChild(metaDiv);
+        }
+        if (descDiv) {
+          li.appendChild(descDiv);
+        }
+        ulElem.appendChild(li);
+      }
+    }
+
+    function generateHighlightedText(text, regions) {
+      if (!regions) {
+        return text;
+      }
+
+      var content = '', nextUnhighlightedRegionStartingIndex = 0;
+
+      regions.forEach(function (region) {
+        if (region[0] === region[1]) {
+          return null;
+        }
+
+        content += '' +
+          text.substring(nextUnhighlightedRegionStartingIndex, region[0]) +
+          '<span class="search__highlight">' +
+          text.substring(region[0], region[1] + 1) +
+          '</span>' +
+          '';
+        nextUnhighlightedRegionStartingIndex = region[1] + 1;
+      });
+
+      content += text.substring(nextUnhighlightedRegionStartingIndex);
+
+      return content;
+    };
+
     pubSearch ?
     pubSearch.addEventListener('input', function(e) {
-      var originUl = pubList.querySelector('ul');
+      var results = fuse.search(e.target.value);
-      var ul = document.createElement('ul');
       
-      if (!e.target.value) {
+      if (enableSearchHighlight) {
-        data.forEach(function (elem) {
+        renderSearchHighlightResults(e.target.value, results);
-          makeLi(ul, elem);
+      } else {
-        });
+        renderSearchResults(e.target.value, results);
-        originUl.parentNode.replaceChild(ul, originUl);
-      } else if (data) {
-        var results = fuzzysort.go(e.target.value, data, options);
-        if (results && results.length) {
-          var sortedResult = results.sort(function (a, b) {
-            var aDate = new Date(a.obj.publishDate);
-            var bDate = new Date(b.obj.publishDate);
-            return bDate.getTime() - aDate.getTime();
-          });
-
-          sortedResult.forEach(function (elem) {
-            makeLi(ul, elem.obj);
-          });
-
-          originUl.parentNode.replaceChild(ul, originUl);
-        }
       }
     }) : null;
 
+    function renderSearchResults(searchText, results) {
+      var originUl = document.querySelector('.pub__ul');
+      var newUl = document.createElement('ul');
+      newUl.setAttribute('class', 'pub__ul');
+
+      if (!searchText) {
+        fuse ? fuse.list.forEach(function(item) {
+          makeLi(newUl, item);
+        }) : null;
+        pubResult ? pubResult.setAttribute('data-display', 'none') : null;
+        originUl ? originUl.setAttribute('data-display', 'block') : null;
+      } else if (results) {
+        if (results && results.length) {
+          results.forEach(function (result) {
+            makeLi(newUl, result);
+          });
+
+          pubResult ? pubResult.setAttribute('data-display', 'block') : null;
+          originUl ? originUl.setAttribute('data-display', 'none') : null;
+        }
+      }
+
+      originUl.parentNode.replaceChild(newUl, originUl);
+    }
+
+    function renderSearchHighlightResults(searchText, results) {
+      var originUl = document.querySelector('.pub__ul');
+      var newUl = document.createElement('ul');
+      newUl.setAttribute('class', 'pub__ul');
+
+      if (!searchText) {
+        if (isFirstSection) {
+          originUl.innerHTML = JSON.parse(originHtmlText);
+          return null;
+        } else {
+          fuse ? fuse.list.forEach(function (item) {
+            makeLi(newUl, item);
+          }) : null;
+        }
+
+        pubResult ? pubResult.setAttribute('data-display', 'none') : null;
+        originUl ? originUl.setAttribute('data-display', 'block') : null;
+      } else if (results) {
+        if (results && results.length) {
+          results.forEach(function (result) {
+            makeHighlightLi(newUl, result);
+          });
+
+          pubResult ? pubResult.setAttribute('data-display', 'block') : null;
+          originUl ? originUl.setAttribute('data-display', 'none') : null;
+        }
+      }
+
+      originUl.parentNode.replaceChild(newUl, originUl);
+    }
+
     // shave
     shave('.pub__summary', 150);
   });

layouts/partials/script/pub-overview-script.html

@@ -0,0 +1,43 @@
+{{ $masonry := resources.Get "js/masonry.pkgd.min.js" | resources.Fingerprint }}
+<script defer src="{{ $masonry.RelPermalink }}"></script>
+{{ $imagesloaded := resources.Get "js/imagesloaded.pkgd.min.js" | resources.Fingerprint }}
+<script defer src="{{ $imagesloaded.RelPermalink }}"></script>
+
+<script>
+  window.onload = function () {
+    // ========================= masonry =========================
+    var grid = document.querySelector('.pgrid');
+    var msnry = new Masonry(grid, {
+      itemSelector: '.pgrid-item',
+      columnWidth: '.pgrid-sizer',
+      percentPosition: true,
+    });
+    imagesLoaded(grid).on('progress', function () {
+      msnry.layout();
+    });
+    
+    enquire.register("screen and (max-width:769px)", {
+      match: function () {
+        document.querySelectorAll('.pgrid-item').forEach(function (elem) {
+          elem.classList.add('full');
+          elem.classList.remove('half');
+        });
+        document.querySelectorAll('.pgrid-sizer').forEach(function (elem) {
+          elem.classList.add('full');
+          elem.classList.remove('half');
+        });
+      },
+      unmatch: function () {
+        document.querySelectorAll('.pgrid-item').forEach(function (elem) {
+          elem.classList.add('half');
+          elem.classList.remove('full');
+        });
+        document.querySelectorAll('.pgrid-sizer').forEach(function (elem) {
+          elem.classList.add('half');
+          elem.classList.remove('full');
+        });
+      },
+    });
+    // ===========================================================
+  }
+</script>

layouts/partials/search/search-result-desktop.html

@@ -1,5 +1,8 @@
 <div class="search-result" data-display="none">
   <div class="search-result__header">
+    <div class="search-result__close" data-dir="{{ if or (ne ($.Param "languagedir") "rtl") (eq ($.Param "sidebarPosition") "left") }}ltr{{ else }}rtl{{ end }}">
+      {{ partial "svgs/etc/cancel.svg" (dict "width" 28 "height" 28) }}
+    </div>
   </div>
   <div class="search-result__body">
     <ul>

layouts/partials/sidebar/sidebar-single.html

@@ -11,7 +11,7 @@
       </label>
     {{ end }}
   </div>
-  <div class="toc {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}">
+  <div class="toc {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}">
     {{ .TableOfContents }}
   </div>
 </section>

layouts/partials/taxonomy/taxonomy-categories.html

@@ -9,7 +9,7 @@
         {{ range $index, $element := .Site.Taxonomies.categories }}
         {{ if $index }}
             <span class="tag">
-                <a href="{{ $element.Page.RelPermalink }}" class="is-categories taxo__link" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}">
+                <a href="{{ $element.Page.RelPermalink }}" class="is-categories taxo__link" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
                     <span class="taxo__text">
                         {{ $element.Page.Title }}
                     </span>

layouts/partials/taxonomy/taxonomy-series.html

@@ -9,7 +9,7 @@
         {{ range $index, $element := .Site.Taxonomies.series }}
         {{ if $index }}
             <span class="tag">
-                <a href="{{ $element.Page.RelPermalink }}" class="is-series taxo__link" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}">
+                <a href="{{ $element.Page.RelPermalink }}" class="is-series taxo__link" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
                     <span class="taxo__text">
                         {{ $element.Page.Title }}
                     </span>

layouts/partials/taxonomy/taxonomy-tags.html

@@ -9,7 +9,7 @@
         {{ range $index, $element := .Site.Taxonomies.tags }}
         {{ if $index }}
             <span class="tag">
-                <a href="{{ $element.Page.RelPermalink }}" class="is-tags taxo__link" data-dir="{{ if eq ($.Param "languagedir") "rtl" }}rtl{{ else }}ltr{{ end }}">
+                <a href="{{ $element.Page.RelPermalink }}" class="is-tags taxo__link" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
                     <span class="taxo__text">
                         {{ $element.Page.Title }}
                     </span>

layouts/publication/list.html

@@ -1,11 +1,19 @@
 {{ define "main" }}
 <main class="main pub inner" data-sidebar-position="{{ $.Param "sidebarPosition" }}">
+  {{ if eq .Permalink .FirstSection.Permalink }}
+    <section class="pub__section lmr">
+      {{ partial "publication/pub-toolbar" . }}
+      {{ partial "publication/pub-overview" . }}
+      {{ partial "script/pub-overview-script" . }}
+    </section>
+  {{ else }}
     <section class="pub__section lmr">
       {{ partial "publication/pub-toolbar" . }}
       {{ partial "publication/pub-list" . }}
       <div class="grow"></div>
       {{ partial "pagination/pagination" . }}
     </section>
+  {{ end }}
 
   {{ partial "script/pub-list-script" . }}
   <div class="hide">