offset an html anchor, anchor copy icon changed, footer links flex

README.md

@@ -1,6 +1,10 @@
 English | 
 [한국어](https://github.com/zzossig/hugo-theme-zzo/blob/master/README.ko.md)
 
+## Hugo Theme Zzo
+
+Zzo is a blog theme for Hugo. It includes almost all features that a blog theme should have. Search, Gallery, so on. It looks simple but once you deep dive into it, you can find out lots of functionalities.
+
 ## 📄 Documentation
 
 [https://zzo-docs.vercel.app/zzo](https://zzo-docs.vercel.app/zzo)
@@ -28,8 +32,11 @@ Your support will be of great help in maintaining the project.
 * Publication Page
 * Resume Page
 * Presentation Page
-* Showcase Page
 
 ## Minimum Hugo version
 
 Hugo version 0.65.0 or higher is required.
+
+## Screenshot
+
+![Hugo Theme Zzo Screenshot](images/screenshot.png)

assets/sass/base/_helpers.scss

@@ -27,6 +27,10 @@
   @include justify-content(center);
 }
 
+.flexwrap {
+  @include flex-wrap(wrap);
+}
+
 .basicflex-column {
   @include flexbox();
   @include align-items(center);

assets/sass/pages/_single.scss

@@ -249,19 +249,12 @@
       @include clippy();
       @include transition(all, 0.2s, ease);
     }
-    .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
-    }
     .chroma .copy-to-clipboard {
       position: absolute;
       right: 4px;
       top: 5px;      
       border-radius: 2px;
       z-index: z('clipboard');
-      @include transition(all, 0.2s, ease);
-    }
-    .chroma .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
     }
     .language-code .copy-to-clipboard {
       position: absolute;
@@ -269,10 +262,6 @@
       top: 5px;      
       border-radius: 2px;
       z-index: z('clipboard');
-      @include transition(all, 0.2s, ease);
-    }
-    .language-code .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
     }
     .highlight > .copy-to-clipboard {
       position: absolute;
@@ -280,10 +269,6 @@
       top: 5px;      
       border-radius: 2px;
       z-index: z('clipboard');
-      @include transition(all, 0.2s, ease);
-    }
-    .highlight > .copy-to-clipboard:hover {
-      @include translateY(-0.1rem);
     }
 
     blockquote {

layouts/partials/comments/utterances.html

@@ -3,11 +3,13 @@
 <script>
   document.addEventListener('DOMContentLoaded', function () {
     function checkTheme(local, base) {
-      if (local === "dark" || base === "dark") {
+      var currentTheme = local || base;
+
+      if (currentTheme === "dark") {
         return "photon-dark";
-      } else if (local === "hacker" || base === "hacker") {
+      } else if (currentTheme === "hacker") {
         return "photon-dark";
-      } else if (local === "kimbie" || base === "kimbie") {
+      } else if (currentTheme === "kimbie") {
         return "github-dark-orange";
       } else {
         return "github-light";
@@ -30,7 +32,6 @@
       myScript.setAttribute('theme', utterTheme);
       myScript.setAttribute('crossorigin', 'anonymous');
       myScript.setAttribute('async', '');
-
       myScript.onload = function() {
       }
 

layouts/partials/footer/site-footer.html

@@ -4,10 +4,12 @@
     {{ partial "footer/go-to-top" . }}
     <hr />
 
-    <div class="basicflex">
+    <div class="basicflex flexwrap">
         {{ range $.Param "footerLinks" }}
+            {{ if .link }}
                 <a href="{{ .link }}" class="footer__link" target="_blank" rel="noreferrer">{{ .name }}</a>
             {{ end }}
+        {{ end }}
     </div>
 
     <div class="footer__poweredby">

layouts/partials/head/scripts.html

@@ -293,11 +293,13 @@
           return null;
         }
 
+        if (navbar.classList.contains('scrolling')) {
           if (!navbar.classList.contains('navbar--hide')) {
             navbar.classList.add('navbar--hide');
           } else if (navbar.classList.contains('navbar--show')) {
             navbar.classList.remove('navbar--show');
           }
+        }
 
         if (singleContentsElem) {
           if (singleContentsElem.querySelectorAll(tocLevels).length > 0) {
@@ -363,11 +365,13 @@
           gttBtn.style.display = "none";
         }
 
+        if (navbar.classList.contains('scrolling')) {
           if (navbar.classList.contains('navbar--hide')) {
             navbar.classList.remove('navbar--hide');
           } else if (!navbar.classList.contains('navbar--show')) {
             navbar.classList.add('navbar--show');
           }
+        }
 
         if (singleContentsElem) {
           if (singleContentsElem.querySelectorAll(tocLevels).length > 0) {

layouts/partials/navbar/site-nav.html

@@ -1,4 +1,4 @@
-<nav class="navbar" role="navigation" aria-label="main navigation" data-dir="{{ if $.Param "navbardir" }}{{ $.Param "navbardir" }}{{ else }}{{ $.Param "languagedir" | default "ltr" }}{{ end }}">
+<nav class="navbar scrolling" role="navigation" aria-label="main navigation" data-dir="{{ if $.Param "navbardir" }}{{ $.Param "navbardir" }}{{ else }}{{ $.Param "languagedir" | default "ltr" }}{{ end }}">
   <div class="navbar__brand">
     {{ if $.Param "logo" | default true }}
     <a href="{{ "/" | relLangURL }}" title="{{ i18n "tooltip-home" }}" rel="home" class="{{ if eq ($.Param "logoType") "long" }}navbar__long-link{{ else }}navbar__logo-link{{ end }}">

layouts/partials/script/single-script.html

@@ -107,6 +107,18 @@
     if ((enableToc || toc) && document.querySelector('.toc')) {
       var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents');
 
+      tableOfContentsElem.onmouseenter = function() {
+        if (navbar.classList.contains('scrolling')) {
+          navbar.classList.remove('scrolling');
+        }
+      }
+
+      tableOfContentsElem.onmouseleave = function() {
+        if (!navbar.classList.contains('scrolling')) {
+          navbar.classList.add('scrolling');
+        }
+      }
+
       if (false === tocFolding) {
 
       } else {
@@ -125,9 +137,12 @@
           tableOfContentsElem.querySelectorAll('a').forEach(function (elem) {
             elem.addEventListener('click', function () {
               var id = elem.getAttribute('id');
+
+              if (!navbar.classList.contains('scrolling')) {
                 navbar.classList.remove('navbar--show');
                 navbar.classList.remove('navbar--hide');
                 navbar.classList.add('navbar--hide');
+              }
               
               document.querySelector('.toc').querySelectorAll('a').forEach(function (elem) {
                 elem.classList.remove('active');
@@ -223,6 +238,62 @@
     // =================================================================
 
 
+    // ========================== foot notes ===========================
+    var footNoteRefs = document.querySelectorAll('.footnote-ref');
+    var footNoteBackRefs = document.querySelectorAll('.footnote-backref');
+
+    footNoteRefs ? 
+    footNoteRefs.forEach(function(elem, idx) {
+      elem.onmouseenter = function () {
+        if (navbar.classList.contains('scrolling')) {
+          navbar.classList.remove('scrolling');
+        }
+      }
+
+      elem.onmouseleave = function () {
+        if (!navbar.classList.contains('scrolling')) {
+          setTimeout(function () {
+            navbar.classList.add('scrolling');
+          }, 100);
+        }
+      }
+
+      elem.onclick = function () {
+        if (!navbar.classList.contains('scrolling')) {
+          navbar.classList.remove('navbar--show');
+          navbar.classList.remove('navbar--hide');
+          navbar.classList.add('navbar--hide');
+        }
+      }
+    }) : null;
+
+    footNoteBackRefs ? 
+    footNoteBackRefs.forEach(function(elem, idx) {
+      elem.onmouseenter = function () {
+        if (navbar.classList.contains('scrolling')) {
+          navbar.classList.remove('scrolling');
+        }
+      }
+
+      elem.onmouseleave = function () {
+        if (!navbar.classList.contains('scrolling')) {
+          setTimeout(function() {
+            navbar.classList.add('scrolling');
+          }, 100);
+        }
+      }
+
+      elem.onclick = function () {
+        if (!navbar.classList.contains('scrolling')) {
+          navbar.classList.remove('navbar--show');
+          navbar.classList.remove('navbar--hide');
+          navbar.classList.add('navbar--hide');
+        }
+      }
+    }) : null;
+    // =================================================================
+
+
     // ======================== markdown table =========================
     var tables = document.querySelectorAll('.single__contents > table');
     for (let i = 0; i < tables.length; i++) {
@@ -244,6 +315,7 @@
 
     headers ? 
     headers.forEach(function (elem) {
+      var size = parseInt(elem.tagName.substr(1), 10) * 2;
       var url = encodeURI(document.location.origin + document.location.pathname);
       var link = url + "#" + elem.getAttribute('id');
       var newElemOuter = document.createElement('span');
@@ -253,11 +325,12 @@
       newElemOuter.style.position = 'relative';
 
       var newElemInner = document.createElement('span');
-      newElemInner.style.fontSize = '1rem';
       newElemInner.style.position = 'absolute';
       newElemInner.style.top = '50%';
+      newElemInner.style.left = '0.75rem';
       newElemInner.style.transform = 'translateY(-50%)';
-      newElemInner.innerText = "🔗";
+      newElemInner.innerHTML = `
+<svg fill="currentColor" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="${32 - size}px" height="${32 - size}px"><path d="M 5.5625 0 C 4.136719 0 2.707031 0.542969 1.625 1.625 C -0.539063 3.789063 -0.539063 7.335938 1.625 9.5 L 5.28125 13.15625 C 5.667969 13.554688 6.304688 13.558594 6.703125 13.171875 C 7.101563 12.785156 7.105469 12.148438 6.71875 11.75 L 3.03125 8.0625 C 1.632813 6.664063 1.632813 4.429688 3.03125 3.03125 C 4.429688 1.632813 6.664063 1.632813 8.0625 3.03125 L 12.96875 7.9375 C 14.367188 9.335938 14.367188 11.570313 12.96875 12.96875 C 12.804688 13.132813 12.621094 13.25 12.4375 13.375 C 11.980469 13.6875 11.859375 14.308594 12.171875 14.765625 C 12.484375 15.222656 13.105469 15.34375 13.5625 15.03125 C 13.847656 14.835938 14.125 14.625 14.375 14.375 C 16.539063 12.210938 16.539063 8.664063 14.375 6.5 L 9.5 1.625 C 8.417969 0.542969 6.988281 0 5.5625 0 Z M 10.78125 8.875 C 10.738281 8.882813 10.695313 8.894531 10.65625 8.90625 C 10.507813 8.9375 10.371094 9 10.25 9.09375 C 10.039063 9.253906 9.820313 9.429688 9.625 9.625 C 7.460938 11.789063 7.460938 15.335938 9.625 17.5 L 14.5 22.375 C 16.664063 24.539063 20.210938 24.539063 22.375 22.375 C 24.539063 20.210938 24.539063 16.664063 22.375 14.5 L 18.71875 10.875 C 18.476563 10.578125 18.089844 10.441406 17.714844 10.527344 C 17.34375 10.613281 17.050781 10.90625 16.964844 11.277344 C 16.878906 11.652344 17.015625 12.039063 17.3125 12.28125 L 20.96875 15.9375 C 22.367188 17.335938 22.367188 19.570313 20.96875 20.96875 C 19.570313 22.367188 17.335938 22.367188 15.9375 20.96875 L 11.03125 16.0625 C 9.632813 14.664063 9.632813 12.429688 11.03125 11.03125 C 11.152344 10.90625 11.300781 10.820313 11.4375 10.71875 C 11.839844 10.472656 12.015625 9.976563 11.855469 9.53125 C 11.699219 9.085938 11.25 8.8125 10.78125 8.875 Z"/></svg>`;
 
       if (languagedir === "rtl") {
         newElemInner.style.left = '-2rem';