summary view mode added, switch for toc, sidebar view mode,

README.md

@@ -1,6 +1,7 @@
 # Zzo theme for Hugo
 
 Thank you for click me!. Zzo theme is a blog theme for Hugo with free(always), and many features. If you find any bugs, or wanna share your custom color skin, or have some good idea to share with me and others who use this theme, feel free to open [github](https://github.com/zzossig/hugo-theme-zzo/issues) issue or pull request so that I can make this theme better.
+![zzo theme for Hugo](https://user-images.githubusercontent.com/52706977/68638044-ace72a80-0543-11ea-94d9-329ef0228f4f.gif)
 
 ## Table of contents
 
@@ -21,7 +22,6 @@ Thank you for click me!. Zzo theme is a blog theme for Hugo with free(always), a
 
 ## Features
 
-* Grid customizing
 * Multiple sub themes(dark, light, solarized, hacker)
 * A mobile menu
 * CSS grid and flex for layout
@@ -223,19 +223,21 @@ myname = "yourname"
 whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
 
 # body
-enableToc = true
 enableBreadcrumb = true
 enablePhotoSwipe = true
 enableSearch = true
 enableMark = true
 enableGoToTop = true
 enableWhoami = true
-summaryShape = "classic" # card, classic
+summaryShape = "card" # card, classic, compact
+archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
 
 # sidebar
+enableSidebar = true
 enableSidebarTags = true
 enableSidebarSeries = true
 enableSidebarCategories = true
+enableToc = true
 itemsPerCategory = 5
 
 # comment

assets/js/zzo.js

@@ -28,6 +28,10 @@ $(document).ready(function() {
       }
       
       $(".single__contents :header").each(function () {
+        if (!$("#toggle-toc").is(":checked")) {
+            return null;
+        }
+
         if ($(window).scrollTop() >= $(this).position().top) {
           var id = $(this).attr('id');
           $('.toc a').removeClass('active');
@@ -52,6 +56,10 @@ $(document).ready(function() {
       }
 
       $(".single__contents :header").each(function () {
+        if (!$("#toggle-toc").is(":checked")) {
+            return null;
+        }
+        
         if ($(window).scrollTop() >= $(this).position().top) {
           var id = $(this).attr('id');
           $('.toc a').removeClass('active');

assets/sass/abstracts/_variables.scss

@@ -6,7 +6,7 @@ $code-font-stack: Consolas, "Andale Mono WT", "Andale Mono", "Lucida Console", "
   "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Liberation Mono", "Nimbus Mono L", Monaco, "Courier New", Courier,
   monospace !default;
 
-$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer");
+$z-indexes: ("modal", "navbar", "dropdown", "header", "grid", "search", "content", "footer", "taxo", "toc");
 $ls: (
   base: -10,
   heading: 10,

assets/sass/components/_summary.scss

@@ -58,6 +58,9 @@
 
   hr {
     margin-top: 1.5rem;
+    @include themify($themes) {
+        border-top: 1px solid themed('hr-color');
+    }
   }
   &:not(:last-child) {
     hr {
@@ -96,7 +99,7 @@
 
   &__flex-box {
     @include flexbox();
-    margin-top: 0.5rem;
+    margin-top: 1rem;
     margin-bottom: 1rem;
   }
 
@@ -127,9 +130,27 @@
   }
 
   hr {
-    border-radius: 5rem;
+    @include themify($themes) {
-    @include themify($themes) {      
+        border-top: 1px solid themed('hr-color');
-      border-top: 1px solid themed('hr-color');
     }
   }
 }
+
+.summary-compact {
+  padding: 0 1rem;
+  &__flexbox {
+    @include flexbox();
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+  &__meta {
+    padding: 1rem 0;
+  }
+
+  hr {
+    @include themify($themes) {
+        border-top: 1px solid themed('hr-color');
+    }
+  }
+}

assets/sass/components/_switch.scss

@@ -0,0 +1,65 @@
+.switch {
+  position: relative;
+  display: inline-block;
+  width: 28px;
+  height: 14px;
+  margin-bottom: 0.6rem;
+  margin-left: 1rem;
+}
+
+.switch input { 
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.slider {
+  position: absolute;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  @include transition(all, 0.2s, ease);
+  @include themify($themes) {
+    background-color: themed('switch-background-color');
+  }
+}
+
+.slider:before {
+  position: absolute;
+  content: "";
+  height: 11px;
+  width: 11px;
+  left: 1.72px;
+  bottom: 1.72px;  
+  @include transition(all, 0.2s, ease);
+  @include themify($themes) {
+    background-color: themed('switch-button-color');
+  }
+}
+
+input:checked + .slider {
+  @include themify($themes) {
+    background-color: themed('switch-active-color');
+  }
+}
+
+input:focus + .slider {
+  @include themify($themes) {
+    box-shadow: 0 0 1px themed('switch-active-color');
+  }  
+}
+
+input:checked + .slider:before {
+  @include translateX(13px);
+}
+
+/* Rounded sliders */
+.slider.round {
+  border-radius: 8.5px;
+}
+
+.slider.round:before {
+  border-radius: 50%;
+}

assets/sass/components/_taxo.scss

@@ -1,6 +1,7 @@
 .taxo {
   padding: 0.25rem;
   margin: 2.5rem 0;
+  z-index: z('taxo');
 
   &__title {
     font-weight: 700;

assets/sass/components/_toc.scss

@@ -2,17 +2,23 @@
   width: 100%;
   max-width: 250px;
   position: fixed;
-  top: 4.5rem;
+  top: 6.5rem;
   font-size: 0.85rem;
   padding-left: 0.5rem;
+  z-index: z('toc');
   
   #toc {
     position: relative;
   }
 
+  &__flexbox {
+    @include flexbox();
+    @include align-items(center);
+  }
+
   &__title {
     font-size: 0.9rem;
-    margin-bottom: 1rem;
+    margin-top: 0.5rem;
     @include themify($themes) {
       color: themed('toc-label-color');
     }

assets/sass/layout/_footer.scss

@@ -174,4 +174,10 @@
   .dropdown:hover .dropdown-content {
     display: block;
   }
+
+  hr {
+    @include themify($themes) {
+      border-top: 1px solid themed('hr-color') !important;
+    }
+  }
 }

assets/sass/main.scss

@@ -153,6 +153,7 @@ $whoami_border_color: {{ $scr.Get "whoami_border_color" }};
 @import 'components/tooltip';
 @import 'components/gtt';
 @import 'components/whoami';
+@import 'components/switch';
 
 @import 'pages/body';
 @import 'pages/home';

assets/sass/themes/_dark.scss

@@ -6,7 +6,7 @@ $dark: (
     title-color: #ffd866,
     meta-color: #FCFCFA,
     body-color: #FCFCFA,
-    hr-color: #403E41,
+    hr-color: #595B5C,
     body-background-color: #2D2A2E,
     backdrop-background-color: #212121,
     dropdown-border-color: #212121,
@@ -92,4 +92,7 @@ $dark: (
     gtt-hover-color: #82aaff,
     gtt-hover-background-color: lighten(#403E41, 5%),
     whoami-border-color: #90a4ae,
+    switch-background-color: #403E41,
+    switch-button-color: #FCFCFA,
+    switch-active-color: #FF6188,
 );

data/_config/_default/params.toml

@@ -6,19 +6,21 @@ myname = "zzossig"
 whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
 
 # body
-enableToc = true
 enableBreadcrumb = true
 enablePhotoSwipe = true
 enableSearch = true
 enableMark = true
 enableGoToTop = true
 enableWhoami = true
-summaryShape = "classic" # card, classic
+summaryShape = "card" # card, classic, compact
+archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
 
 # sidebar
+enableSidebar = true
 enableSidebarTags = true
 enableSidebarSeries = true
 enableSidebarCategories = true
+enableToc = true
 itemsPerCategory = 5
 
 # footer

exampleSite/config.toml

@@ -32,19 +32,21 @@ rssLimit = 100
   whoami = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In sit amet cursus massa. Vestibulum eu posuere est. Suspendisse erat purus, mollis in leo quis, hendrerit fringilla felis."
 
   # body
-  enableToc = true
   enableBreadcrumb = true
   enablePhotoSwipe = true
   enableSearch = true
   enableMark = true
   enableGoToTop = true
   enableWhoami = true
-  summaryShape = "card" # card, classic
+  summaryShape = "card" # card, classic, compact
+  archiveGroupByDate = "2006-01" # "2006-01": group by month, "2006": group by year
   
   # sidebar
+  enableSidebar = true
   enableSidebarTags = true
   enableSidebarSeries = true
   enableSidebarCategories = true
+  enableToc = true
   itemsPerCategory = 5
 
   # footer

layouts/_default/list.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main class="main-main">
+<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
     {{ partial "body/breadcrumb" . }}
     <article class="list">
         <header class="list__header">
@@ -20,7 +20,10 @@
 
     {{ partial "pagination/pagination-list" . }}
 </main>
-<aside class="main-side">
+
-    {{ partial "sidebar/sidebar-list" . }}
+{{ if $.Param "enableSidebar" }}
-</aside>
+    <aside class="main-side">
+        {{ partial "sidebar/sidebar-list" . }}
+    </aside>
+{{ end }}
 {{ end }}

layouts/_default/single.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-<main class="main-main">
+<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
   {{ if eq .Site.Params.enableBreadcrumb true }}
   {{ partial "body/breadcrumb" . }}
   {{ end }}
@@ -19,7 +19,10 @@
     {{ partial "body/photoswipe" . }}
   </div>
 </main>
+
+{{ if $.Param "enableSidebar" }}
 <aside class="main-side">
   {{ partial "sidebar/sidebar-single" . }}
 </aside>
 {{ end }}
+{{ end }}

layouts/_default/summary.html

@@ -1,67 +1,9 @@
 {{ if eq (lower .Site.Params.summaryShape) "card" }}
-<article class="summary-card">
+  {{ partial "summary/card" . }}
-  <header>
-    <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
-    <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read</h6>
-  </header>
-  {{ $params := .Params }}
-  <div class="summary-card__content">
-    <div class="summary-card__text p2">
-      {{ with $params.Description }}
-      {{ . }}
-      {{ else }}
-      {{ .Summary }}
-      {{ end }}
-    </div>
-    {{ if $params.featured_image }}
-    <div class="summary-card__image-wrapper">
-      {{ with (print "images/" $params.featured_image) }}
-      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image">
-      {{ end }}
-    </div>
-    {{ else if $params.featured_video }}
-    {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}
-    <div class="summary-card__video-wrapper">
-      <video class="summary-card__video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
-        {{ with print ("videos/" | relURL) $params.featured_video }}
-        <source src="{{ . | relURL }}" type='video/mp4'>
-        {{ end }}
-      </video>
-    </div>
-    {{ end }}
-    {{ end }}
-  </div>
-  <hr />
-</article>
 {{ else if eq (lower .Site.Params.summaryShape) "classic" }}
-<article class="summary-classic">
+  {{ partial "summary/classic" . }}
-  <div class="summary-classic__flex-box">
+{{ else if eq (lower .Site.Params.summaryShape) "compact" }}
-    {{ $params := .Params }}
+  {{ partial "summary/compact" . }}
-    {{ if $params.featured_image }}
-    <div class="summary-classic__image-wrapper">
-      {{ with (print "images/" $params.featured_image) }}
-      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-classic__image">
-      {{ end }}
-    </div>    
-    {{ end }}
-    <div class="summary-classic__content">
-      <header>
-        <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
-        <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
-        </h6>
-      </header>
-      <div>
-        <div class="summary-classic__text p2">
-          {{ with $params.Description }}
-          {{ . }}
-          {{ else }}
-          {{ .Summary }}
-          {{ end }}
-        </div>
-      </div>
-    </div>    
-  </div>
-  <hr />
-</article>
 {{ else }}
+  {{ printf "%#v" "Not supported shape. Please edit config params(summaryShape)." }}
 {{ end }}

layouts/archive/list.html

@@ -10,7 +10,7 @@
 </span>
 <main class="main archive">
   <div>
-    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate "2006-01" }}
+    {{ range (and (where .Site.RegularPages "Type" "!=" "about") (where .Site.RegularPages "Type" "!=" "archive")).GroupByDate .Site.Params.archiveGroupByDate }}
     <span class="archive__key">{{ .Key }}</span>
     <ul class="archive__ul">
       {{ range .Pages }}

layouts/index.html

@@ -1,7 +1,7 @@
 {{ define "title" }}{{ .Site.Title }}{{ end }}
 
 {{ define "main" }}
-<main class="main-main">
+<main class="{{ if $.Param "enableSidebar" }}main-main{{ else }}main{{ end }}">
     <article class="{{ with .Section }}section-{{ . | urlize }} {{ end }}single-view">
         <div class="content">
             {{ .Content }}
@@ -16,7 +16,10 @@
 
     {{ partial "pagination/pagination-list" . }}
 </main>
-<aside class="main-side">
+
-    {{ partial "sidebar/sidebar-home" . }}
+{{ if $.Param "enableSidebar" }}
-</aside>
+    <aside class="main-side">
+        {{ partial "sidebar/sidebar-home" . }}
+    </aside>
+{{ end }}
 {{ end }}

layouts/partials/sidebar/sidebar-home.html

@@ -1,3 +1,5 @@
+{{ if $.Param "enableSidebar" }}
+
 {{ $currentSection := .Section }}
 {{ $currentID := "" }}
 {{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
@@ -18,4 +20,6 @@
 
 {{ partial "taxonomy/taxonomy-tags" . }}
 {{ partial "taxonomy/taxonomy-categories" . }}
-{{ partial "taxonomy/taxonomy-series" . }}
+{{ partial "taxonomy/taxonomy-series" . }}
+
+{{ end }}

layouts/partials/sidebar/sidebar-list.html

@@ -1,9 +1,11 @@
+{{ if $.Param "enableSidebar" }}
+
 {{ $currentSection := .Section }}
 {{ $currentID := "" }}
 {{ with .File }}{{ $currentID = .UniqueID }}{{ end }}
 <div class="sidebar">
     {{ partial "sidebar/site-search" . }}
-    {{ range .Pages }}
+    {{ range first .Site.Params.itemsPerCategory .Pages }}
     <section class="sidebar-list">
         <a href="{{ .RelPermalink }}" class="sidebar-list__title p1 {{ if eq $currentSection .Section }}active{{ end }}">{{ .Title }}</a>
         <ul class="sidebar-list__ul">
@@ -18,4 +20,6 @@
 
 {{ partial "taxonomy/taxonomy-tags" . }}
 {{ partial "taxonomy/taxonomy-categories" . }}
-{{ partial "taxonomy/taxonomy-series" . }}
+{{ partial "taxonomy/taxonomy-series" . }}
+
+{{ end }}

layouts/partials/sidebar/sidebar-single.html

@@ -1,8 +1,15 @@
+{{ if $.Param "enableSidebar" }}
 {{ if $.Param "enableToc" }}
 
 <div class="sidebar">
-  <div class="toc">
+  <div class="toc__flexbox">
     <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
+    <label class="switch">
+      <input id="toggle-toc" type="checkbox" checked>
+      <span class="slider round"></span>
+    </label>
+  </div>
+  <div class="toc">    
     <ul id="toc"></ul>
   </div>
 </div>
@@ -14,6 +21,7 @@
   $(document).ready(function () {
     var navbar = $('.navbar');
 
+    // toc
     $("#toc").toc({ content: ".single__contents", headings: "h1,h2,h3,h4" });
     $('#toc > li').each(function () {
       $(this).find('ul').css('display', 'none');
@@ -104,7 +112,17 @@
         });
       }
     });
+
+    // toc visibility
+    $("#toggle-toc").change(function() {
+      if (this.checked) {
+        $('.toc').removeClass('hide');
+      } else {
+        $('.toc').removeClass('hide').addClass('hide');
+      }
+    });
   });   
 </script>
 
+{{ end }}
 {{ end }}

layouts/partials/summary/card.html

@@ -0,0 +1,34 @@
+<article class="summary-card">
+  <header>
+    <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
+    <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read</h6>
+  </header>
+  {{ $params := .Params }}
+  <div class="summary-card__content">
+    <div class="summary-card__text p2">
+      {{ with $params.Description }}
+      {{ . }}
+      {{ else }}
+      {{ .Summary }}
+      {{ end }}
+    </div>
+    {{ if $params.featured_image }}
+    <div class="summary-card__image-wrapper">
+      {{ with (print "images/" $params.featured_image) }}
+      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image">
+      {{ end }}
+    </div>
+    {{ else if $params.featured_video }}
+    {{ with print ("videos/poster/" | relURL) $params.featured_video_poster }}
+    <div class="summary-card__video-wrapper">
+      <video class="summary-card__video" controls preload='none' poster='{{ . | relURL }}' data-setup='{"fluid": true}'>
+        {{ with print ("videos/" | relURL) $params.featured_video }}
+        <source src="{{ . | relURL }}" type='video/mp4'>
+        {{ end }}
+      </video>
+    </div>
+    {{ end }}
+    {{ end }}
+  </div>
+  <hr />
+</article>

layouts/partials/summary/classic.html

@@ -0,0 +1,29 @@
+<article class="summary-classic">
+  <div class="summary-classic__flex-box">
+    {{ $params := .Params }}
+    {{ if $params.featured_image }}
+    <div class="summary-classic__image-wrapper">
+      {{ with (print "images/" $params.featured_image) }}
+      <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-classic__image">
+      {{ end }}
+    </div>
+    {{ end }}
+    <div class="summary-classic__content">
+      <header>
+        <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
+        <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
+        </h6>
+      </header>
+      <div>
+        <div class="summary-classic__text p2">
+          {{ with $params.Description }}
+          {{ . }}
+          {{ else }}
+          {{ .Summary }}
+          {{ end }}
+        </div>
+      </div>
+    </div>
+  </div>
+  <hr />
+</article>

layouts/partials/summary/compact.html

@@ -0,0 +1,13 @@
+<article class="summary-compact">
+  <div class="summary-compact__flex-box">
+    {{ $params := .Params }}
+    <div class="summary-compact__meta">
+      <header>
+        <h5 class="title h6"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
+        <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read
+        </h6>
+      </header>
+    </div>
+  </div>
+  <hr />
+</article>