code-tab added, outer toc bug fix, grid ui bux fix

README.ko.md

@@ -1040,6 +1040,31 @@ A notice disclaimer
 
 ```bash
 {{< box >}}
-Some markdown contents
+Some contents
 {{< /box >}}
 ```
+
+### boxmd
+
+```bash
+{{< boxmd >}}
+Some markdown contents
+{{< /boxmd >}}
+```
+
+### code / codes => Tabbed code-block. indentation matters.
+
+```bash
+{{< codes java javascript >}}
+  {{< code >}}
+  ```java
+  System.out.println('Hello World!');
+  ```
+  {{< /code >}}
+  {{< code >}}
+  ```javascript
+  console.log('Hello World!');
+  ```
+  {{< /code >}}
+{{< /codes >}}
+```

README.md

@@ -1033,6 +1033,31 @@ A notice disclaimer
 
 ```bash
 {{< box >}}
-Some markdown contents
+Some contents
 {{< /box >}}
 ```
+
+### boxmd
+
+```bash
+{{< boxmd >}}
+Some markdown contents
+{{< /boxmd >}}
+```
+
+### code / codes => Tabbed code-block. indentation matters.
+
+```bash
+{{< codes java javascript >}}
+  {{< code >}}
+  ```java
+  System.out.println('Hello World!');
+  ```
+  {{< /code >}}
+  {{< code >}}
+  ```javascript
+  console.log('Hello World!');
+  ```
+  {{< /code >}}
+{{< /codes >}}
+```

assets/sass/base/_reset.scss

@@ -109,6 +109,15 @@ th {
   }
 }
 
+b,
+strong {
+  font-weight: bold;
+}
+
+dfn {
+  font-style: italic;
+}
+
 figcaption {  
   font-style: italic;
   font-size: 0.9rem;

assets/sass/base/_typography.scss

@@ -1,15 +1,18 @@
 /**
  * Basic typography style for copy text
  */
+
+html {
+  -webkit-text-size-adjust: 100%;
+}
+
 body {
   font: normal 125% / 1.4 $text-font-stack;
-  -webkit-text-size-adjust: 100%;
 }
 
 code,
 pre {
   font: normal 125% / 1.8 $code-font-stack;
-  -webkit-text-size-adjust: 100%;
 }
 
 .h1 {

assets/sass/components/_summary.scss

@@ -78,6 +78,7 @@
 }
 
 .summary-classic {
+  padding: 0 1rem;
   @include animation('slide-in-down .2s .3s 1 ease-in both');
 
   .title {

assets/sass/components/_tab.scss

@@ -0,0 +1,59 @@
+.tab {
+  position: relative;
+
+  &__links {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 30px;
+    z-index: z('clipboard');
+    border-top-left-radius: 0.25rem;
+
+    @include flexbox();
+    @include align-items(center);
+    @include justify-content(flex-start);
+    @include themify($codeblock) {
+      background-color: themed('content-pre-header-background-color');
+    }
+  }
+
+  &__link {
+    height: 30px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    font-size: 13.8px;
+    font-family: $title-font;
+    text-transform: capitalize;
+    padding: 0.25rem 0.5rem;
+
+    &:first-child {
+      border-top-left-radius: 0.25rem;
+    }
+    
+    @include transition(all, 0.2s, ease-in);
+    @include themify($themes) {
+      color: themed('navbar-title-color');
+      border-top: 1px solid transparent;
+      &.active {
+        border-top: 1px solid themed('content-pre-header-background-color');
+      }
+    }
+
+    @include themify($codeblock) {
+      background-color: themed('content-pre-header-background-color');
+
+      &.active {
+        background-color: themed('content-pre-background-color');
+      }
+
+      @include on-event {
+        background-color: themed('content-pre-background-color');
+      }
+    }
+  }
+
+  &__content {
+    display: none;
+  }
+}

assets/sass/components/_toc.scss

@@ -8,7 +8,7 @@
   z-index: z('toc');
 
   @include no-select;
-  @include animation('slide-in-down-little .2s .3s 1 ease-in both');
+  @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
   
   #TableOfContents {
     position: relative;
@@ -26,6 +26,14 @@
     position: absolute;
   }
 
+  &__flexbox--outer[data-position="fixed"] {
+    @include flexbox();
+    @include align-items(center);
+    top: 4.2rem;
+    left: 1rem;
+    position: absolute;
+  }
+
   &__title {
     font-size: 0.9rem;
     margin-top: 0.5rem;

assets/sass/layout/_grid.scss

@@ -35,7 +35,6 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
 }
 
 .main {
-    padding: 0 1rem;
     grid-area: 3 / 1 / 4 / 3;
 }
 
@@ -67,15 +66,15 @@ $grid_column_gap: $grid_column_gap_width + $grid_column_gap_unit;
 
 .inner {
     display: grid;
-    grid-template-columns: 250px 1fr 1fr;
+    grid-template-columns: 266px 1fr 1fr;
     grid-template-rows: 1fr;
     grid-column-gap: 16px;
     grid-row-gap: 0px;
 
     @if $sidebar_position == "left" {
-        grid-template-columns: 250px 1fr 1fr;
+        grid-template-columns: 266px 1fr 1fr;
     } @else {
-        grid-template-columns: 1fr 1fr 250px;
+        grid-template-columns: 1fr 1fr 266px;
     }
 }
 

assets/sass/layout/_sidebar.scss

@@ -14,7 +14,7 @@
         &:hover {
           color: themed('link-hover');
         }
-      }    
+      }
     }
 
     &__ul {

assets/sass/main.scss

@@ -70,6 +70,7 @@ $cursive-font: {{ .Site.Data.font.cursive_font }};
 @import 'components/donation';
 @import 'components/box';
 @import 'components/modal';
+@import 'components/tab';
 
 @import 'pages/404';
 @import 'pages/about';

assets/sass/pages/_archive.scss

@@ -1,12 +1,16 @@
 .archive {
   position: relative;
-  padding: 2rem 2rem 0;
   width: 100%;
+  padding: 2rem 2rem 0;
 
   @include flexbox();
   @include flex-direction(column);
   @include justify-content(flex-start);
 
+  @media only screen and (max-width:768px) {
+    padding: 2rem 1rem 0;
+  }
+
   &__container {
     width: 100%;
   }

assets/sass/pages/_list.scss

@@ -1,4 +1,18 @@
 .list {
+  &__main {
+
+  }
+
+  &__sidebar {
+    &.l {
+      margin-left: 1rem;
+    }
+
+    &.r {
+      margin-right: 1rem;
+    }
+  }
+
   &__header {
     display: flex;
     align-items: center;

assets/sass/pages/_single.scss

@@ -129,6 +129,7 @@
       overflow: auto;
       border-radius: 0.34rem;
       line-height: 1.5;
+      font-size: 13.8px;
     }
 
     pre:not(.chroma) {
@@ -348,7 +349,7 @@
 
           th, td {
             padding: 5px 15px;
-            font-size: 0.9rem;
+            font-size: 13.8px;
             border: 1px double themed('content-pre-border-background-color');
           }
         }

assets/sass/themes/_kimbie.scss

@@ -45,7 +45,7 @@ $kimbie: (
   single-header-title-color: #e3b583,
   single-contents-title-color: #889b4a,
   related-header-title-color: #889b4a,
-  related-link-color: #f06431,
+  related-link-color: #e3b583,
   content-box-border-color: #6e583b,
   content-box-background-color: #7c502166,
   burger-menu-color: #d3af86,

assets/sass/themes/_light.scss

@@ -27,7 +27,7 @@ $light: (
     sidebar-li-color: #424242,
     taxo-title-color: #607d8b,
     taxo-num-color: #424242,
-    taxo-num-background-color: darken(#eee, 8%),
+    taxo-num-background-color: darken(#eee, 15%),
     taxo-tags-background-color: darken(#eee, 2%),
     taxo-tags-color: #424242,
     taxo-series-background-color: darken(#eee, 2%),

exampleSite/content/showcase/_index.md

@@ -2,5 +2,5 @@
 title: "Showcase overview"
 date: 2020-01-19T15:43:38+09:00
 description: My portfolio, repos, works overview page
-enableBio: true
+enableBio: false
 ---

exampleSite/content/showcase/hugo/_index.md

@@ -3,5 +3,5 @@ title: "Hugo"
 date: 2020-01-19T21:04:11+09:00
 description: Hugo theme collection
 category: theme
-enableBio: true
+enableBio: false
 ---

layouts/partials/body/main-right.html

@@ -1,6 +1,15 @@
 <div class="wrapper__right">
   {{ if eq ($.Param "tocPosition") "outer" }}
     {{ if or ($.Param "enableToc") ($.Param "toc") }}
+      <div class="toc__flexbox--outer" data-position="fixed">
+        <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
+        {{ if $.Param "enableTocSwitch" }}
+        <label class="switch">
+          <input id="visible-toc" aria-label="Visible TOC" type="checkbox" {{ if $.Param "hideToc" }}{{ else }}checked{{ end }}>
+          <span class="slider round"></span>
+        </label>
+        {{ end }}
+      </div>
       <div class="toc toc__outer {{ if $.Param "hideToc" }}hide{{ end }}">
         {{ .TableOfContents }}
       </div>

layouts/partials/body/photoswipe.html

@@ -177,6 +177,9 @@ document.addEventListener('DOMContentLoaded', function () {
         fadeOut(itemsElem, 200);
       }, 2500);
     }
+    wrapper.ontouchstart = function() {
+      fadeIn(itemsElem, 200);
+    }
     wrapper.append(clonedElem);
     swipeWrapElem.append(wrapper);
 

layouts/partials/head/scripts.html

@@ -14,11 +14,42 @@
 <script defer src="{{ $getParents.RelPermalink }}"></script>
 {{ $fadeinout := resources.Get "js/helper/fadeinout.js" | resources.Minify | resources.Fingerprint }}
 <script defer src="{{ $fadeinout.RelPermalink }}"></script>
-
+{{ $closest := resources.Get "js/helper/closest.js" | resources.Minify }}
+<script defer src="{{ $closest.RelPermalink }}"></script>
+  
 <script>
   "use strict";
 
   document.addEventListener('DOMContentLoaded', function () {
+    // ============================ tab ============================
+    document.querySelectorAll('.tab') ? 
+    document.querySelectorAll('.tab').forEach(function(elem, idx) {
+      var containerId = elem.getAttribute('id');
+      var containerElem = elem;
+      var tabLinks = elem.querySelectorAll('.tab__link');
+      var tabContents = elem.querySelectorAll('.tab__content');
+      var ids = [];
+
+      tabLinks && tabLinks.length > 0 ?
+      tabLinks.forEach(function(link, index, self) {
+        link.onclick = function(e) {
+          for (var i = 0; i < self.length; i++) {
+            if (index === parseInt(i, 10)) {
+              if (!self[i].classList.contains('active')) {
+                self[i].classList.add('active');
+                tabContents[i].style.display = 'block';
+              }
+            } else {
+              self[i].classList.remove('active');
+              tabContents[i].style.display = 'none';
+            }
+          }
+        }
+      }) : null;
+    }) : null;
+    // =============================================================
+
+
     // ========================= go to top =========================
     var gttBtn = document.getElementById("gtt");
     gttBtn.style.display = "none";
@@ -95,7 +126,7 @@
           navbar.classList.remove('navbar--show');
         }
         
-        singleContentsElem ? 
+        singleContentsElem ?
         singleContentsElem.querySelectorAll("h1, h2, h3, h4, h5, h6").forEach(function(elem) {
           if (toggleTocElem && !toggleTocElem.checked) {
             return null;
@@ -110,20 +141,21 @@
               tocElem.querySelector('a[href="#' + id + '"]') ? 
               tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
 
-              tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
+              tableOfContentsElem.querySelector('ul') ?
+              tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
                 liElem.querySelectorAll('ul').forEach(function (ulElem) {
                   ulElem.style.display = 'none';
                 });
-              });
+              }) : null;
 
               var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
               if (curElem && curElem.nextElementSibling) {
                 curElem.nextElementSibling.style.display = 'block';
               }
-              getParents(curElem, 'ul') ? 
+              getParents(curElem, 'ul') ?
               getParents(curElem, 'ul').forEach(function (elem) {
                 elem.style.display = 'block';
-              }) : null; 
+              }) : null;
             }
           }
         }) : null;
@@ -153,9 +185,11 @@
               tocElem.querySelector('a[href="#' + id + '"]') ? 
               tocElem.querySelector('a[href="#' + id + '"]').classList.add('active') : null;
 
-              tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
-                liElem.querySelectorAll('ul').forEach(function (ulElem) {
-                  ulElem.style.display = 'none';
+              tableOfContentsElem.querySelectorAll('ul').forEach(function (rootUl) {
+                rootUl.querySelectorAll('li').forEach(function (liElem) {
+                  liElem.querySelectorAll('ul').forEach(function (ulElem) {
+                    ulElem.style.display = 'none';
+                  });
                 });
               });
 
@@ -172,11 +206,12 @@
         }) : null;
 
         if (tableOfContentsElem && document.documentElement.scrollTop < 250) {
-          tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
+          tableOfContentsElem.querySelector('ul') ?
+          tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
             liElem.querySelectorAll('ul').forEach(function (ulElem) {
               ulElem.style.display = 'none';
             });
-          });
+          }) : null;
         }
       }
       lastScrollTop = st <= 0 ? 0 : st;

layouts/partials/script/single-script.html

@@ -112,17 +112,19 @@
     {{ $enableToc := ($.Param "enableToc") }}
     {{ $toc := ($.Param "toc") }}
     {{ $hideToc := ($.Param "hideToc") }}
+    
     var enableToc = JSON.parse({{ $enableToc | jsonify }});
     var toc = JSON.parse({{ $toc | jsonify }});
     var hideToc = JSON.parse({{ $hideToc | jsonify }});
     
     if ((enableToc || toc) && document.querySelector('.toc')) {
       var tableOfContentsElem = document.querySelector('.toc').querySelector('#TableOfContents');
-      tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
+      tableOfContentsElem.querySelector('ul') ?
+      tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
         liElem.querySelectorAll('ul').forEach(function (ulElem) {
           ulElem.style.display = 'none';
         });
-      });
+      }) : null;
 
       tableOfContentsElem.querySelectorAll('a').forEach(function(elem) {
         elem.addEventListener('click', function() {
@@ -136,11 +138,12 @@
           });
           elem.classList.add('active');
 
-          tableOfContentsElem.querySelectorAll('ul > li').forEach(function (liElem) {
-            liElem.querySelectorAll('ul').forEach(function(ulElem) {
+          tableOfContentsElem.querySelector('ul') ?
+          tableOfContentsElem.querySelector('ul').querySelectorAll('li').forEach(function (liElem) {
+            liElem.querySelectorAll('ul').forEach(function (ulElem) {
               ulElem.style.display = 'none';
             });
-          });
+          }) : null;
 
           var curElem = tableOfContentsElem.querySelector(`[href="#${id}"]`);
           if (curElem && curElem.nextElementSibling) {
@@ -156,7 +159,8 @@
       });
 
       // toc visibility
-      var toggleTocElem = document.querySelector("#toggle-toc");
+      var toggleTocElem = document.getElementById("toggle-toc");
+      var visibleTocElem = document.getElementById('visible-toc');
       var tocElem = document.querySelector('.toc');
       var mainElem = document.querySelector('main');
       var sideElem = document.querySelector('side');
@@ -198,6 +202,19 @@
           }
         }
       }) : null;
+
+      visibleTocElem ?
+      visibleTocElem.addEventListener('change', function(e) {
+        if (e.target.checked) {
+          if (tocElem) {
+            fadeIn(tocElem, 200);
+          }
+        } else {
+          if (tocElem) {
+            fadeOut(tocElem, 200);
+          }
+        }
+      }) : null;
     }
     // =================================================================
 
@@ -222,7 +239,6 @@
     headers.forEach(function (elem) {
       var url = encodeURI(document.location.origin + document.location.pathname);
       var link = url + "#" + elem.getAttribute('id');
-      
       var newElemOuter = document.createElement('span');
       newElemOuter.classList.add('anchor');
       newElemOuter.classList.add('hide');
@@ -273,8 +289,8 @@
     var makeClipboard = function(elem) {
       var code = elem,
         text = elem.textContent;
-
-      if (text.length > 30) {
+        
+      if (text.length > 15) {
         if (!clipInit) {
           var text, clip = new ClipboardJS('.copy-to-clipboard', {
             text: function (trigger) {

layouts/shortcodes/box.html

@@ -1 +1 @@
-<div class="box">{{.Inner | markdownify}}</div>
+<div class="box">{{ .Inner }}</div>

layouts/shortcodes/boxmd.html

@@ -0,0 +1 @@
+<div class="box">{{ .Inner | markdownify }}</div>

layouts/shortcodes/code.html

@@ -0,0 +1,4 @@
+{{ $id := substr (md5 .Inner) 0 16 }}
+<div id="{{ $id }}" class="tab__content">
+  {{ .Inner | markdownify }}
+</div>

layouts/shortcodes/codes.html

@@ -0,0 +1,47 @@
+{{ $id := substr (md5 .Inner) 0 16 }}
+<div id="{{ $id }}" class="tab">
+  <div class="tab__links">
+    {{ range .Params }}
+      <button class="tab__link" aria-label="Tab link">{{ . }}</button>
+    {{ end }}
+  </div>
+  {{ .Inner }}
+</div>
+
+<script>
+  'use strict';
+
+  var containerId = JSON.parse({{ $id | jsonify }});
+  var containerElem = document.getElementById(containerId);
+  var tabLinks = null;
+  var tabContents = null;
+  var ids = [];
+
+  if (containerElem) {
+    tabLinks = containerElem.querySelectorAll('.tab__link');
+    tabContents = containerElem.querySelectorAll('.tab__content');
+  }
+
+  for (var i = 0; i < tabContents.length; i++) {
+    ids = ids.concat(tabContents[i].getAttribute('id'));
+    tabContents[i].style.display = 'none';
+
+    if (0 === parseInt(i, 10) && !tabContents[i].classList.contains('active')) {
+      tabContents[i].classList.add('active');
+    }
+  }
+
+  for (var i = 0; i < tabLinks.length; i++) {
+    tabLinks[i].setAttribute('id', ids[i]);
+
+    if (0 === parseInt(i, 10) && !tabLinks[i].classList.contains('active')) {
+      tabLinks[i].classList.add('active');
+    } else {
+      tabLinks[i].classList.remove('active');
+    }
+  }
+
+  if (tabContents.length > 0) {
+    tabContents[0].style.display = 'block';
+  }
+</script>

layouts/shortcodes/color.html

@@ -1 +1 @@
-<span style="color: {{ .Get 0 | default "#f48fb1" }}">{{.Inner | markdownify}}</span>
+<span style="color: {{ .Get 0 | default "#f48fb1" }}">{{ .Inner | markdownify }}</span>

layouts/shortcodes/expand.html

@@ -3,9 +3,9 @@
     <span class="expand-icon expand-icon__right">
         {{ partial "svgs/arrow/keyboard-arrow-right.svg" (dict "width" 24 "height" 24) }}
     </span>
-    {{.Get 0}}
+    {{ .Get 0 }}
   </button>
   <div class="expand__content">
-    {{.Inner | safeHTML}}
+    {{ .Inner | safeHTML }}
   </div>
 </div>

layouts/shortcodes/img.html

@@ -1,5 +1,5 @@
-<figure {{ with .Get "class" }}class="{{.}}" {{ end }}>
-  {{ with .Get "link"}}<a href="{{.}}">{{ end }}
+<figure {{ with .Get "class" }}class="{{ . }}" {{ end }}>
+  {{ with .Get "link"}}<a href="{{ . }}">{{ end }}
     {{ $base := (findRE "/[a-zA-Z0-9_]+/" .Site.BaseURL | default "/") }}
     <img data-src="{{ if eq $base "/" }}{{ .Get "src" }}{{ else }}{{ delimit $base "" }}{{ substr (.Get "src") 1 }}{{ end }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }} data-caption="{{ .Get "caption" }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='none' d='M0 0h24v24H0V0z'/%3E%3Cpath fill='%23aaa' d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-1 16H6c-.55 0-1-.45-1-1V6c0-.55.45-1 1-1h12c.55 0 1 .45 1 1v12c0 .55-.45 1-1 1zm-4.44-6.19l-2.35 3.02-1.56-1.88c-.2-.25-.58-.24-.78.01l-1.74 2.23c-.26.33-.02.81.39.81h8.98c.41 0 .65-.47.4-.8l-2.55-3.39c-.19-.26-.59-.26-.79 0z'/%3E%3C/svg%3E" class="lazyload" width="{{ .Get "width" }}" height="{{ .Get "height" }}"/>
     {{ if .Get "link"}}</a>{{ end }}
@@ -8,7 +8,7 @@
     <strong>{{ .Get "title" }}</strong>:{{ end }}
     {{ if or (.Get "caption") (.Get "attr")}}
     {{ .Get "caption" }}
-    {{ with .Get "attrlink"}}<a href="{{.}}"> {{ end }}
+    {{ with .Get "attrlink"}}<a href="{{ . }}"> {{ end }}
       {{ .Get "attr" }}
       {{ if .Get "attrlink"}}</a> {{ end }}
     {{ end }}