comment added to config files, lazy summary image load, better html tag, better mobile icon, license update

LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2016-present George Cushen
+Copyright (c) 2019-present zzossig
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of
 this software and associated documentation files (the "Software"), to deal in

README.md

@@ -1,6 +1,7 @@
 # Zzo theme for Hugo
 
-🚨🚨🚨Minimum Hugo version changed to 0.60.0. This version changes the markdown rendering library, so if you are using an older version, it may not be compatible.
+🚨🚨🚨Minimum Hugo version changed to 0.60.0. This version changed the markdown rendering library, so if you are using an older version, it may not be compatible.🚨🚨🚨
+
 Thank you for click me!. Zzo theme is a blog theme powered by Hugo with free(always), and many features. 
 
 ## Table of contents
@@ -95,26 +96,29 @@ root
 2. config.toml
 
 ```bash
-baseURL = "http://example.org/"
+baseURL = "http://example.org/" # The URL of your site.
-title = "Hugo Zzo Theme"
+title = "Hugo Zzo Theme" # Title of your site
-theme = "zzo"
+theme = "zzo" # Name of Zzo theme folder in `themes/`.
 
-defaultContentLanguage = "en"
+defaultContentLanguage = "en" # Default language to use (if you setup multilingual support)
-defaultContentLanguageInSubdir = true
+defaultContentLanguageInSubdir = true # baseURL/en/, baseURL/kr/ ...
-hasCJKLanguage = true
+hasCJKLanguage = true # Set `true` for Chinese/Japanese/Korean languages.
 
 summaryLength = 70
 
-copyright = "©{year}, All Rights Reserved"
+copyright = "©{year}, All Rights Reserved" # copyright symbol: $copy; current year: {year}
 timeout = 10000
 enableEmoji = true
-paginate = 13
+paginate = 13 # Number of items per page in paginated lists.
 rssLimit = 100
 
 pygmentsOptions = "linenos=table"
-pygmentsCodefences = true
 pygmentsUseClasses = true
-pygmentsCodefencesGuessSyntax = true
+
+[markup]
+  [markup.goldmark]
+    [markup.goldmark.renderer]
+      unsafe = true
 
 [outputs]
   home = ["HTML", "RSS", "JSON", "WebAppManifest"]
@@ -196,26 +200,29 @@ You shoud make your own menu.
 5. params.toml
 
 ```bash
-logoText = "Zzo"
+logoText = "Zzo" # site navigation bar logo text.
-description = "The Zzo theme for Hugo example site."
+description = "The Zzo theme for Hugo example site." # for SEO
-custom_css = []
+custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
-custom_js = []
+custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
 
 # header
-homeHeaderType = "slide" # text, img, slide
+homeHeaderType = "text" # text, img, slide
+
+# navbar
+enableThemeChange = true # site color theme
 
 # body
-enableBreadcrumb = true
+enableBreadcrumb = true # breadcrumb for list, single page
-enablePhotoSwipe = true
+enablePhotoSwipe = true # image viewer for gallery, single page
-enableSearch = true
+enableSearch = true # site search with lunr
-enableGoToTop = true
+enableGoToTop = true # scroll to top
-enableWhoami = true
+enableWhoami = true # at the end of single page
 summaryShape = "classic" # card, classic, compact
 archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
-archivePaginate = 13
+archivePaginate = 13 # items per page
-paginateWindow = 1
+paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
 
-# whoami
+# whoami: usage - home page sidebar, single page bottom of post. all values can be empty
 myname = "zzossig"
 email = "zzossig@gmail.com"
 whoami = "Web Developer"
@@ -225,23 +232,22 @@ organization = "Hugo"
 link = "https://github.com/zzossig/hugo-theme-zzo"
 
 # sidebar
-enableBio = true
+enableBio = true # home page sidebar
-enableSidebar = true
+enableSidebar = true # if you want to make full width of contents
-enableSidebarTags = true
+enableSidebarTags = true # if you want to use tags.
 enableSidebarSeries = true
 enableSidebarCategories = true
-enableToc = true
+enableToc = true # single page table of contents
-enableTocSwitch = true
+enableTocSwitch = true # single page table of contents visibility switch
-itemsPerCategory = 5
+itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
-searchLanguages = ['en']
+searchLanguages = ['en'] # lunr multilanguage search. https://github.com/MihaiValentin/lunr-languages
 
 # footer
-showPoweredBy = true
+showPoweredBy = true # show footer text: Powered by Hugo and Zzo theme
-showFeedLinks = true
+showFeedLinks = true # RSS Feed 
-showSocialLinks = true
+showSocialLinks = true # email, facebook, twitter ...
-enableLangChange = true
+enableLangChange = true # show button at bottom left of footer.
-enableThemeChange = true
+themeOptions = ["dark", "light", "hacker", "solarized", "custom"] # select options for site color theme
-themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
 
 # comment
 enableComment = true
@@ -294,7 +300,7 @@ commento = false
   google_analytics = ""
   google_tag_manager = ""
 
-[socialOptions]
+[socialOptions] # if set, social icons will show up.
   email = "mailto:your@email.com"
   facebook = "http://example.org/"
   twitter = "http://example.org/"
@@ -530,23 +536,15 @@ assets/js/custom.js
 
 1. Make a skin.toml file in data folder. (data/skin.toml)
 
-2. Copy the contents of themes/zzo/data/skin.toml file and paste it into the skin.toml file you created above.
+2. Set custom_theme_primary_color variable. The range of value that can be set is from "0" to "359".
 
-3. Change the color you want.
+3. Restart hugo.
-
-4. Edit config/_default/params.toml file. The option name must be custom.
-
-```bash
-...
-themeOptions = ["custom", "dark", ...]
-...
-```
 
 5. Once you change the skin.toml file, restart hugo.
 
 ### custom syntax highlighting
 
-1. Make a skin.toml file at root/data folder. Set the chroma_theme value as you want. Refer this [link](https://xyproto.github.io/splash/docs/all.html). If chroma_theme include - or _ like special character, just delete it.
+1. Make a skin.toml file at root/data folder. Set the chroma_theme value as you want. Refer this [link](https://xyproto.github.io/splash/docs/all.html). If chroma_theme value include - or _ like special character, just delete it.
 For example, if you want use solarized-dark256 style, set the param like this.
 ```
 root/data/skin.toml
@@ -722,13 +720,14 @@ You can add some config option parameters at data/flowchartjs.json
 ### img
 
 ```bash
-{{% img src="https://example.com" title="Image4" caption="Image description" alt="image alt" %}}
+// path: static/images/whoami/avatar.jpg
+{{% img src="/images/whoami/avatar.jpg" title="Image4" caption="Image description" alt="image alt" %}}
 ```
 
 ### notice
 
 ```bash
-{{% notice note %}}
+{{% notice note %}} # note, info, tip, warning
 A notice disclaimer
 {{% /notice %}}
 ```

assets/sass/abstracts/_mixins.scss

@@ -27,6 +27,16 @@
   }
 }
 
+@mixin respond-up($breakpoint) {
+  // If the key exists in the map
+  @if map-has-key($breakpoints, $breakpoint) {
+    // Prints a media query based on the value
+    @media (min-width: map-get($breakpoints, $breakpoint)) {
+      @content;
+    }
+  }
+}
+
 @mixin pseudo($display: block, $pos: absolute, $content: "") {
   content: $content;
   display: $display;

assets/sass/components/_notice.scss

@@ -33,40 +33,48 @@ div.notices p:first-child:after {
 
 div.notices.info p:first-child:after {
     content: 'Info';
+    font-family: $title-font;
 }
 
 div.notices.warning p:first-child:after {
     content: 'Warning';
+    font-family: $title-font;
 }
 
 div.notices.note p:first-child:after {
     content: 'Note';
+    font-family: $title-font;
 }
 
 div.notices.tip p:first-child:after {
     content: 'Tip';
+    font-family: $title-font;
 }
 
 div.notices.note {
     border-top: 30px solid #6bb1e0;
     background: #e6f3fb;
     color: rgba(47, 103, 141, 0.995) !important;
+    font-family: $content-font;
 }
 
 div.notices.info {
     border-top: 30px solid #f1b37e;
     background: #fefaf5;
     color: rgba(150, 90, 38, 0.995) !important;
+    font-family: $content-font;
 }
 
 div.notices.tip {
     border-top: 30px solid #84c578;
     background: #e8f7e6;
     color: rgba(72, 125, 63, 0.995) !important;
+    font-family: $content-font;
 }
 
 div.notices.warning {
     border-top: 30px solid #d58181;
     background: #fbeded;
     color: rgba(132, 56, 56, 0.995) !important;
+    font-family: $content-font;
 }

assets/sass/layout/_navigation.scss

@@ -26,12 +26,14 @@
   }
 
   &__slide-down {
+    @include respond-up(sm) {
       @for $i from 1 through 8 {
         &:nth-child(#{$i}) {
           @include animation('slide-in-down .25s #{$i * .1}s 1 ease both');
         }
       }
     }    
+  }
   
   &__brand {
     height: $grid_navbar_height;
@@ -336,6 +338,7 @@
       display: block;
       font-size: 1rem;
 
+      @include no-select;
       @include themify($themes) {
         color: themed("dropdown-item-color");
         @include on-event {
@@ -382,7 +385,6 @@
     @include flexbox();
     @include align-items(center);
     @include justify-content(flex-end);
-    
   }
 
   .dropdown {
@@ -441,6 +443,7 @@
       display: block;
       font-size: 1rem;
 
+      @include no-select;
       @include themify($themes) {
         color: themed("dropdown-item-color");
         @include on-event {

assets/sass/pages/_single.scss

@@ -112,7 +112,6 @@
         top: 0;
         right: 0;
         left: 0;
-        //padding: 50px 7px;
         font-size: $code-font-size;
         font-family: $title-font;
         font-weight: bold;

assets/sass/themes/_dark.scss

@@ -17,7 +17,7 @@ $dark: (
     dropdown-item-color: #FCFCFA,    
     navbar-border-bottom-color: #2D2A2E,
     navbar-background-color: #403E41,
-    navbar-mobile-background-color: #4a4a4a,
+    navbar-mobile-background-color: #3a3a3a,
     navbar-title-color: #FCFCFA,
     navbar-title-hover-color: #FFD866,
     navbar-title-active-color: #FF6188,

exampleSite/config/_default/config.toml

@@ -1,17 +1,17 @@
-baseURL = "http://example.org/"
+baseURL = "http://example.org/" # The URL of your site.
-title = "Hugo Zzo Theme"
+title = "Hugo Zzo Theme" # Title of your site
-theme = "zzo"
+theme = "zzo" # Name of Zzo theme folder in `themes/`.
 
-defaultContentLanguage = "en"
+defaultContentLanguage = "en" # Default language to use (if you setup multilingual support)
-defaultContentLanguageInSubdir = true
+defaultContentLanguageInSubdir = true # baseURL/en/, baseURL/kr/ ...
-hasCJKLanguage = true
+hasCJKLanguage = true # Set `true` for Chinese/Japanese/Korean languages.
 
 summaryLength = 70
 
-copyright = "©{year}, All Rights Reserved"
+copyright = "©{year}, All Rights Reserved" # copyright symbol: $copy; current year: {year}
 timeout = 10000
 enableEmoji = true
-paginate = 13
+paginate = 13 # Number of items per page in paginated lists.
 rssLimit = 100
 
 pygmentsOptions = "linenos=table"

exampleSite/config/_default/params.toml

@@ -1,23 +1,26 @@
-logoText = "Zzo"
+logoText = "Zzo" # site navigation bar logo text.
-description = "The Zzo theme for Hugo example site."
+description = "The Zzo theme for Hugo example site." # for SEO
-custom_css = []
+custom_css = [] # custom_css = ["scss/custom.scss"] and then make file at root/assets/scss/custom.scss
-custom_js = []
+custom_js = [] # custom_js = ["js/custom.js"] and then make file at root/assets/js/custom.js
 
 # header
 homeHeaderType = "text" # text, img, slide
 
+# navbar
+enableThemeChange = true # site color theme
+
 # body
-enableBreadcrumb = true
+enableBreadcrumb = true # breadcrumb for list, single page
-enablePhotoSwipe = true
+enablePhotoSwipe = true # image viewer for gallery, single page
-enableSearch = true
+enableSearch = true # site search with lunr
-enableGoToTop = true
+enableGoToTop = true # scroll to top
-enableWhoami = true
+enableWhoami = true # at the end of single page
 summaryShape = "classic" # card, classic, compact
 archiveGroupByDate = "2006" # "2006-01": group by month, "2006": group by year
-archivePaginate = 13
+archivePaginate = 13 # items per page
-paginateWindow = 1
+paginateWindow = 1 # setting it to 1 gives 7 buttons, 2 gives 9, etc. If set 1: [1 ... 4 5 6 ... 356] [1 2 3 4 5 ... 356] etc
 
-# whoami
+# whoami: usage - home page sidebar, single page bottom of post. all values can be empty
 myname = "zzossig"
 email = "zzossig@gmail.com"
 whoami = "Web Developer"
@@ -27,23 +30,22 @@ organization = "Hugo"
 link = "https://github.com/zzossig/hugo-theme-zzo"
 
 # sidebar
-enableBio = true
+enableBio = true # home page sidebar
-enableSidebar = true
+enableSidebar = true # if you want to make full width of contents
-enableSidebarTags = true
+enableSidebarTags = true # if you want to use tags.
 enableSidebarSeries = true
 enableSidebarCategories = true
-enableToc = true
+enableToc = true # single page table of contents
-enableTocSwitch = true
+enableTocSwitch = true # single page table of contents visibility switch
-itemsPerCategory = 5
+itemsPerCategory = 5 # maximum number of posts shown in the sidebar.
-searchLanguages = ['en']
+searchLanguages = ['en'] # lunr multilanguage search. https://github.com/MihaiValentin/lunr-languages
 
 # footer
-showPoweredBy = true
+showPoweredBy = true # show footer text: Powered by Hugo and Zzo theme
-showFeedLinks = true
+showFeedLinks = true # RSS Feed 
-showSocialLinks = true
+showSocialLinks = true # email, facebook, twitter ...
-enableLangChange = true
+enableLangChange = true # show button at bottom left of footer.
-enableThemeChange = true
+themeOptions = ["dark", "light", "hacker", "solarized", "custom"] # select options for site color theme
-themeOptions = ["dark", "light", "hacker", "solarized", "custom"]
 
 # comment
 enableComment = true
@@ -96,7 +98,7 @@ commento = false
   google_analytics = ""
   google_tag_manager = ""
 
-[socialOptions]
+[socialOptions] # if set, social icons will show up.
   email = "mailto:your@email.com"
   facebook = "http://example.org/"
   twitter = "http://example.org/"

layouts/_default/list.html

@@ -5,9 +5,9 @@
         <header class="list__header">
             <h4 class="list__header--title h5">{{.Title}}</h1>
         </header>
-        <!-- "{{.Content}}" pulls from the markdown content of the corresponding _index.md -->
+
         <div class="list__header--desc p2">
-            {{.Content}}
+            {{ .Content }}
         </div>
 
         <div class="summary__container">

layouts/partials/body/related.html

@@ -1,4 +1,4 @@
-<div class="related">
+<aside class="related">
     {{ $related := .Site.RegularPages.Related . | first 5 }}
     {{ with $related }}
     <h1 class="related__title">
@@ -16,4 +16,4 @@
         {{ end }}
     </ul>
     {{ end }}
-</div>
+</aside>

layouts/partials/body/whoami.html

@@ -1,7 +1,7 @@
 {{ if $.Param "enableWhoami" }}
 <div class="whoami__gutter"></div>
 <hr class="hr-slash whoami-hr"/>
-<div class="whoami">  
+<aside class="whoami">  
   <div class="whoami__image-wrapper">
     {{ $src := "" }}
     {{ if site.Params.useGravatar }}    
@@ -39,6 +39,6 @@
       {{ end }}
     </div>
   </div>
-</div>
+</aside>
 <hr class="hr-slash whoami-hr" />
 {{ end }}

layouts/partials/footer/go-to-top.html

@@ -1,7 +1,7 @@
 {{ if $.Param "enableGoToTop" }}
-<div id="gtt">
+<aside id="gtt">
   <div class="gtt">
     {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 32 "height" 32) }}
   </div>
-</div>
+</aside>
 {{ end }}

layouts/partials/navbar/select-theme-mobile.html

@@ -1,7 +1,7 @@
 {{ if $.Param "enableThemeChange" }}
 <div class="theme-mobile">
   <div class="dropdown">
-    <button class="dropdown-trigger navbar__slide-down" aria-label="Select Language Button">
+    <button class="dropdown-trigger navbar__slide-down" aria-label="Invert Colors" style="{{ if .Site.Params.enableSearch }}{{ else }}position: absolute; top: 0;{{ end }}">
       {{ partial "svgs/etc/invert-colors.svg" (dict "width" 22 "height" 22) }}      
     </button>
     <div class="dropdown-content select-theme">

layouts/partials/pagination/pagination-single.html

@@ -1,5 +1,5 @@
 <div class="grow"></div>
-<div class="pagination-single">
+<nav class="pagination-single">
   {{ if .PrevPage }}
     <a href="{{ .PrevPage.Permalink }}" class="pagination-single__left">
       <div class="pagination-single__icon">
@@ -17,4 +17,4 @@
       </div>
     </a>
   {{ end }}
-</div>
+</nav>

layouts/partials/sidebar/sidebar-single.html

@@ -1,7 +1,7 @@
 {{ if $.Param "enableSidebar" }}
 {{ if $.Param "enableToc" }}
 
-<div class="sidebar">
+<section class="sidebar">
   <div class="toc__flexbox">
     <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
     {{ if $.Param "enableTocSwitch" }}
@@ -14,7 +14,7 @@
   <div class="toc">
     <ul id="toc"></ul>
   </div>
-</div>
+</section>
 
 {{ end }}
 {{ end }}

layouts/partials/sidebar/site-bio.html

@@ -1,5 +1,5 @@
 {{ if $.Param "enableBio" }}
-<div class="bio">
+<section class="bio">
   <hr class="hr-slash bio-hr"/>
   <div class="bio__photo-wrapper">    
     {{ $src := "" }}
@@ -8,13 +8,13 @@
       <img src="{{ $src }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="bio__photo"/>
     {{ else }}
       {{ if (fileExists "static/images/whoami/avatar.png") }}
-        <img data-src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="lazyload bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23eee' d='M40,8H8c-1.657,0-3,1.343-3,3v26c0,1.657,1.343,3,3,3h32c1.657,0,3-1.343,3-3V11 C43,9.343,41.657,8,40,8z'/%3E%3Cpath fill='%2329b6f6' d='M38,13H10v22h28V13z'/%3E%3Cpath fill='%234fc3f7' d='M38,35V18.13C37.68,18.04,37.35,18,37,18c-0.4,0-0.79,0.08-1.16,0.19c-0.27-0.27-0.57-0.5-0.91-0.69 C34.36,17.18,33.7,17,33,17c-0.71,0-1.37,0.18-1.94,0.51c-0.61,0.34-1.12,0.85-1.48,1.45C28.88,18.37,27.99,18,27,18 c-0.5,0-0.97,0.1-1.41,0.27C24.94,16.93,23.59,16,22,16c-1.46,0-2.73,0.79-3.42,1.96C17.88,17.37,16.99,17,16,17 c-0.69,0-1.33,0.19-1.9,0.5C13.37,16.59,12.26,16,11,16c-0.35,0-0.68,0.04-1,0.13V35H38z'/%3E%3Cpath fill='%2381d4fa' d='M38,35H10V22.35c0.45-0.23,0.96-0.35,1.5-0.35c0.43,0,0.85,0.08,1.23,0.23 c0.29,0.11,0.55,0.25,0.8,0.43c0,0,0.28,0.29,0.69,0.66c0.37-1.04,1.22-1.86,2.28-2.18c0.32-0.09,0.65-0.14,1-0.14 c1.18,0,2.22,0.59,2.85,1.5C20.83,22.18,21.39,22,22,22c0.41,0,0.79,0.08,1.14,0.23C23.87,21.47,24.87,21,26,21 c1.39,0,2.61,0.71,3.32,1.78c0.6-0.49,1.35-0.78,2.18-0.78c0.98,0,1.86,0.4,2.5,1.05c0.16-0.02,0.33-0.05,0.5-0.05 c0.47,0,0.92,0.1,1.33,0.26c0.54-0.64,1.3-1.1,2.17-1.22V35z'/%3E%3Cpath fill='%2366bb6a' d='M38,35H28l5.89-8.42c0.54-0.77,1.68-0.77,2.22,0l1.89,2.7V35z'/%3E%3Cpath fill='%234caf50' d='M34.4,35H17.6l7.29-10.42c0.54-0.77,1.68-0.77,2.22,0L34.4,35z'/%3E%3Cpath fill='%2343a047' d='M26.2,35H10v-8.86l3.89-5.56c0.54-0.77,1.68-0.77,2.22,0L26.2,35z'/%3E%3Cpath fill='%23fff176' d='M33 16A2 2 0 1 0 33 20A2 2 0 1 0 33 16Z'/%3E%3Cpath fill='%23546e7a' d='M40,9c1.103,0,2,0.897,2,2v26c0,1.103-0.897,2-2,2H8c-1.103,0-2-0.897-2-2V11c0-1.103,0.897-2,2-2H40 M40,7H8c-2.2,0-4,1.8-4,4v26c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V11C44,8.8,42.2,7,40,7L40,7z'/%3E%3C/svg%3E" class="lazyload bio__photo"/>
       {{ else if (fileExists "static/images/whoami/avatar.jpg") }}
-        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="lazyload bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23eee' d='M40,8H8c-1.657,0-3,1.343-3,3v26c0,1.657,1.343,3,3,3h32c1.657,0,3-1.343,3-3V11 C43,9.343,41.657,8,40,8z'/%3E%3Cpath fill='%2329b6f6' d='M38,13H10v22h28V13z'/%3E%3Cpath fill='%234fc3f7' d='M38,35V18.13C37.68,18.04,37.35,18,37,18c-0.4,0-0.79,0.08-1.16,0.19c-0.27-0.27-0.57-0.5-0.91-0.69 C34.36,17.18,33.7,17,33,17c-0.71,0-1.37,0.18-1.94,0.51c-0.61,0.34-1.12,0.85-1.48,1.45C28.88,18.37,27.99,18,27,18 c-0.5,0-0.97,0.1-1.41,0.27C24.94,16.93,23.59,16,22,16c-1.46,0-2.73,0.79-3.42,1.96C17.88,17.37,16.99,17,16,17 c-0.69,0-1.33,0.19-1.9,0.5C13.37,16.59,12.26,16,11,16c-0.35,0-0.68,0.04-1,0.13V35H38z'/%3E%3Cpath fill='%2381d4fa' d='M38,35H10V22.35c0.45-0.23,0.96-0.35,1.5-0.35c0.43,0,0.85,0.08,1.23,0.23 c0.29,0.11,0.55,0.25,0.8,0.43c0,0,0.28,0.29,0.69,0.66c0.37-1.04,1.22-1.86,2.28-2.18c0.32-0.09,0.65-0.14,1-0.14 c1.18,0,2.22,0.59,2.85,1.5C20.83,22.18,21.39,22,22,22c0.41,0,0.79,0.08,1.14,0.23C23.87,21.47,24.87,21,26,21 c1.39,0,2.61,0.71,3.32,1.78c0.6-0.49,1.35-0.78,2.18-0.78c0.98,0,1.86,0.4,2.5,1.05c0.16-0.02,0.33-0.05,0.5-0.05 c0.47,0,0.92,0.1,1.33,0.26c0.54-0.64,1.3-1.1,2.17-1.22V35z'/%3E%3Cpath fill='%2366bb6a' d='M38,35H28l5.89-8.42c0.54-0.77,1.68-0.77,2.22,0l1.89,2.7V35z'/%3E%3Cpath fill='%234caf50' d='M34.4,35H17.6l7.29-10.42c0.54-0.77,1.68-0.77,2.22,0L34.4,35z'/%3E%3Cpath fill='%2343a047' d='M26.2,35H10v-8.86l3.89-5.56c0.54-0.77,1.68-0.77,2.22,0L26.2,35z'/%3E%3Cpath fill='%23fff176' d='M33 16A2 2 0 1 0 33 20A2 2 0 1 0 33 16Z'/%3E%3Cpath fill='%23546e7a' d='M40,9c1.103,0,2,0.897,2,2v26c0,1.103-0.897,2-2,2H8c-1.103,0-2-0.897-2-2V11c0-1.103,0.897-2,2-2H40 M40,7H8c-2.2,0-4,1.8-4,4v26c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V11C44,8.8,42.2,7,40,7L40,7z'/%3E%3C/svg%3E" class="lazyload bio__photo"/>
       {{ else if (fileExists "static/images/whoami/avatar.svg") }}
-        <img data-src="{{ "images/whoami/avatar.svg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="lazyload bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.svg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23eee' d='M40,8H8c-1.657,0-3,1.343-3,3v26c0,1.657,1.343,3,3,3h32c1.657,0,3-1.343,3-3V11 C43,9.343,41.657,8,40,8z'/%3E%3Cpath fill='%2329b6f6' d='M38,13H10v22h28V13z'/%3E%3Cpath fill='%234fc3f7' d='M38,35V18.13C37.68,18.04,37.35,18,37,18c-0.4,0-0.79,0.08-1.16,0.19c-0.27-0.27-0.57-0.5-0.91-0.69 C34.36,17.18,33.7,17,33,17c-0.71,0-1.37,0.18-1.94,0.51c-0.61,0.34-1.12,0.85-1.48,1.45C28.88,18.37,27.99,18,27,18 c-0.5,0-0.97,0.1-1.41,0.27C24.94,16.93,23.59,16,22,16c-1.46,0-2.73,0.79-3.42,1.96C17.88,17.37,16.99,17,16,17 c-0.69,0-1.33,0.19-1.9,0.5C13.37,16.59,12.26,16,11,16c-0.35,0-0.68,0.04-1,0.13V35H38z'/%3E%3Cpath fill='%2381d4fa' d='M38,35H10V22.35c0.45-0.23,0.96-0.35,1.5-0.35c0.43,0,0.85,0.08,1.23,0.23 c0.29,0.11,0.55,0.25,0.8,0.43c0,0,0.28,0.29,0.69,0.66c0.37-1.04,1.22-1.86,2.28-2.18c0.32-0.09,0.65-0.14,1-0.14 c1.18,0,2.22,0.59,2.85,1.5C20.83,22.18,21.39,22,22,22c0.41,0,0.79,0.08,1.14,0.23C23.87,21.47,24.87,21,26,21 c1.39,0,2.61,0.71,3.32,1.78c0.6-0.49,1.35-0.78,2.18-0.78c0.98,0,1.86,0.4,2.5,1.05c0.16-0.02,0.33-0.05,0.5-0.05 c0.47,0,0.92,0.1,1.33,0.26c0.54-0.64,1.3-1.1,2.17-1.22V35z'/%3E%3Cpath fill='%2366bb6a' d='M38,35H28l5.89-8.42c0.54-0.77,1.68-0.77,2.22,0l1.89,2.7V35z'/%3E%3Cpath fill='%234caf50' d='M34.4,35H17.6l7.29-10.42c0.54-0.77,1.68-0.77,2.22,0L34.4,35z'/%3E%3Cpath fill='%2343a047' d='M26.2,35H10v-8.86l3.89-5.56c0.54-0.77,1.68-0.77,2.22,0L26.2,35z'/%3E%3Cpath fill='%23fff176' d='M33 16A2 2 0 1 0 33 20A2 2 0 1 0 33 16Z'/%3E%3Cpath fill='%23546e7a' d='M40,9c1.103,0,2,0.897,2,2v26c0,1.103-0.897,2-2,2H8c-1.103,0-2-0.897-2-2V11c0-1.103,0.897-2,2-2H40 M40,7H8c-2.2,0-4,1.8-4,4v26c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V11C44,8.8,42.2,7,40,7L40,7z'/%3E%3C/svg%3E" class="lazyload bio__photo"/>
       {{ else }}
-        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" class="lazyload bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if .Site.Params.myname }}{{ .Site.Params.myname }}{{ else }}Avatar{{ end }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23eee' d='M40,8H8c-1.657,0-3,1.343-3,3v26c0,1.657,1.343,3,3,3h32c1.657,0,3-1.343,3-3V11 C43,9.343,41.657,8,40,8z'/%3E%3Cpath fill='%2329b6f6' d='M38,13H10v22h28V13z'/%3E%3Cpath fill='%234fc3f7' d='M38,35V18.13C37.68,18.04,37.35,18,37,18c-0.4,0-0.79,0.08-1.16,0.19c-0.27-0.27-0.57-0.5-0.91-0.69 C34.36,17.18,33.7,17,33,17c-0.71,0-1.37,0.18-1.94,0.51c-0.61,0.34-1.12,0.85-1.48,1.45C28.88,18.37,27.99,18,27,18 c-0.5,0-0.97,0.1-1.41,0.27C24.94,16.93,23.59,16,22,16c-1.46,0-2.73,0.79-3.42,1.96C17.88,17.37,16.99,17,16,17 c-0.69,0-1.33,0.19-1.9,0.5C13.37,16.59,12.26,16,11,16c-0.35,0-0.68,0.04-1,0.13V35H38z'/%3E%3Cpath fill='%2381d4fa' d='M38,35H10V22.35c0.45-0.23,0.96-0.35,1.5-0.35c0.43,0,0.85,0.08,1.23,0.23 c0.29,0.11,0.55,0.25,0.8,0.43c0,0,0.28,0.29,0.69,0.66c0.37-1.04,1.22-1.86,2.28-2.18c0.32-0.09,0.65-0.14,1-0.14 c1.18,0,2.22,0.59,2.85,1.5C20.83,22.18,21.39,22,22,22c0.41,0,0.79,0.08,1.14,0.23C23.87,21.47,24.87,21,26,21 c1.39,0,2.61,0.71,3.32,1.78c0.6-0.49,1.35-0.78,2.18-0.78c0.98,0,1.86,0.4,2.5,1.05c0.16-0.02,0.33-0.05,0.5-0.05 c0.47,0,0.92,0.1,1.33,0.26c0.54-0.64,1.3-1.1,2.17-1.22V35z'/%3E%3Cpath fill='%2366bb6a' d='M38,35H28l5.89-8.42c0.54-0.77,1.68-0.77,2.22,0l1.89,2.7V35z'/%3E%3Cpath fill='%234caf50' d='M34.4,35H17.6l7.29-10.42c0.54-0.77,1.68-0.77,2.22,0L34.4,35z'/%3E%3Cpath fill='%2343a047' d='M26.2,35H10v-8.86l3.89-5.56c0.54-0.77,1.68-0.77,2.22,0L26.2,35z'/%3E%3Cpath fill='%23fff176' d='M33 16A2 2 0 1 0 33 20A2 2 0 1 0 33 16Z'/%3E%3Cpath fill='%23546e7a' d='M40,9c1.103,0,2,0.897,2,2v26c0,1.103-0.897,2-2,2H8c-1.103,0-2-0.897-2-2V11c0-1.103,0.897-2,2-2H40 M40,7H8c-2.2,0-4,1.8-4,4v26c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V11C44,8.8,42.2,7,40,7L40,7z'/%3E%3C/svg%3E" class="lazyload bio__photo"/>
       {{ end }}      
     {{ end }}
   </div>
@@ -71,6 +71,6 @@
       {{ end }}
     {{ end }}
   </div>
-</div>
+</section>
 <hr class="hr-fade sidebar-hr"/>
 {{ end }}

layouts/partials/summary/card.html

@@ -15,7 +15,7 @@
     {{ if $params.featured_image }}
     <div class="summary-card__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary-card__image"/>
+        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23eee' d='M40,8H8c-1.657,0-3,1.343-3,3v26c0,1.657,1.343,3,3,3h32c1.657,0,3-1.343,3-3V11 C43,9.343,41.657,8,40,8z'/%3E%3Cpath fill='%2329b6f6' d='M38,13H10v22h28V13z'/%3E%3Cpath fill='%234fc3f7' d='M38,35V18.13C37.68,18.04,37.35,18,37,18c-0.4,0-0.79,0.08-1.16,0.19c-0.27-0.27-0.57-0.5-0.91-0.69 C34.36,17.18,33.7,17,33,17c-0.71,0-1.37,0.18-1.94,0.51c-0.61,0.34-1.12,0.85-1.48,1.45C28.88,18.37,27.99,18,27,18 c-0.5,0-0.97,0.1-1.41,0.27C24.94,16.93,23.59,16,22,16c-1.46,0-2.73,0.79-3.42,1.96C17.88,17.37,16.99,17,16,17 c-0.69,0-1.33,0.19-1.9,0.5C13.37,16.59,12.26,16,11,16c-0.35,0-0.68,0.04-1,0.13V35H38z'/%3E%3Cpath fill='%2381d4fa' d='M38,35H10V22.35c0.45-0.23,0.96-0.35,1.5-0.35c0.43,0,0.85,0.08,1.23,0.23 c0.29,0.11,0.55,0.25,0.8,0.43c0,0,0.28,0.29,0.69,0.66c0.37-1.04,1.22-1.86,2.28-2.18c0.32-0.09,0.65-0.14,1-0.14 c1.18,0,2.22,0.59,2.85,1.5C20.83,22.18,21.39,22,22,22c0.41,0,0.79,0.08,1.14,0.23C23.87,21.47,24.87,21,26,21 c1.39,0,2.61,0.71,3.32,1.78c0.6-0.49,1.35-0.78,2.18-0.78c0.98,0,1.86,0.4,2.5,1.05c0.16-0.02,0.33-0.05,0.5-0.05 c0.47,0,0.92,0.1,1.33,0.26c0.54-0.64,1.3-1.1,2.17-1.22V35z'/%3E%3Cpath fill='%2366bb6a' d='M38,35H28l5.89-8.42c0.54-0.77,1.68-0.77,2.22,0l1.89,2.7V35z'/%3E%3Cpath fill='%234caf50' d='M34.4,35H17.6l7.29-10.42c0.54-0.77,1.68-0.77,2.22,0L34.4,35z'/%3E%3Cpath fill='%2343a047' d='M26.2,35H10v-8.86l3.89-5.56c0.54-0.77,1.68-0.77,2.22,0L26.2,35z'/%3E%3Cpath fill='%23fff176' d='M33 16A2 2 0 1 0 33 20A2 2 0 1 0 33 16Z'/%3E%3Cpath fill='%23546e7a' d='M40,9c1.103,0,2,0.897,2,2v26c0,1.103-0.897,2-2,2H8c-1.103,0-2-0.897-2-2V11c0-1.103,0.897-2,2-2H40 M40,7H8c-2.2,0-4,1.8-4,4v26c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V11C44,8.8,42.2,7,40,7L40,7z'/%3E%3C/svg%3E" class="lazyload summary-card__image"/>
       </a>
     </div>
     {{ else if $params.featured_video }}

layouts/partials/summary/classic.html

@@ -4,8 +4,7 @@
     {{ if $params.featured_image }}
     <div class="summary-classic__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}"
+        <img data-src="{{ (print "images/" $params.featured_image) | relURL }}" alt="{{ print $params.featured_image }}" src="data:image/svg+xml,%0A%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' width='48px' height='48px'%3E%3Cpath fill='%23eee' d='M40,8H8c-1.657,0-3,1.343-3,3v26c0,1.657,1.343,3,3,3h32c1.657,0,3-1.343,3-3V11 C43,9.343,41.657,8,40,8z'/%3E%3Cpath fill='%2329b6f6' d='M38,13H10v22h28V13z'/%3E%3Cpath fill='%234fc3f7' d='M38,35V18.13C37.68,18.04,37.35,18,37,18c-0.4,0-0.79,0.08-1.16,0.19c-0.27-0.27-0.57-0.5-0.91-0.69 C34.36,17.18,33.7,17,33,17c-0.71,0-1.37,0.18-1.94,0.51c-0.61,0.34-1.12,0.85-1.48,1.45C28.88,18.37,27.99,18,27,18 c-0.5,0-0.97,0.1-1.41,0.27C24.94,16.93,23.59,16,22,16c-1.46,0-2.73,0.79-3.42,1.96C17.88,17.37,16.99,17,16,17 c-0.69,0-1.33,0.19-1.9,0.5C13.37,16.59,12.26,16,11,16c-0.35,0-0.68,0.04-1,0.13V35H38z'/%3E%3Cpath fill='%2381d4fa' d='M38,35H10V22.35c0.45-0.23,0.96-0.35,1.5-0.35c0.43,0,0.85,0.08,1.23,0.23 c0.29,0.11,0.55,0.25,0.8,0.43c0,0,0.28,0.29,0.69,0.66c0.37-1.04,1.22-1.86,2.28-2.18c0.32-0.09,0.65-0.14,1-0.14 c1.18,0,2.22,0.59,2.85,1.5C20.83,22.18,21.39,22,22,22c0.41,0,0.79,0.08,1.14,0.23C23.87,21.47,24.87,21,26,21 c1.39,0,2.61,0.71,3.32,1.78c0.6-0.49,1.35-0.78,2.18-0.78c0.98,0,1.86,0.4,2.5,1.05c0.16-0.02,0.33-0.05,0.5-0.05 c0.47,0,0.92,0.1,1.33,0.26c0.54-0.64,1.3-1.1,2.17-1.22V35z'/%3E%3Cpath fill='%2366bb6a' d='M38,35H28l5.89-8.42c0.54-0.77,1.68-0.77,2.22,0l1.89,2.7V35z'/%3E%3Cpath fill='%234caf50' d='M34.4,35H17.6l7.29-10.42c0.54-0.77,1.68-0.77,2.22,0L34.4,35z'/%3E%3Cpath fill='%2343a047' d='M26.2,35H10v-8.86l3.89-5.56c0.54-0.77,1.68-0.77,2.22,0L26.2,35z'/%3E%3Cpath fill='%23fff176' d='M33 16A2 2 0 1 0 33 20A2 2 0 1 0 33 16Z'/%3E%3Cpath fill='%23546e7a' d='M40,9c1.103,0,2,0.897,2,2v26c0,1.103-0.897,2-2,2H8c-1.103,0-2-0.897-2-2V11c0-1.103,0.897-2,2-2H40 M40,7H8c-2.2,0-4,1.8-4,4v26c0,2.2,1.8,4,4,4h32c2.2,0,4-1.8,4-4V11C44,8.8,42.2,7,40,7L40,7z'/%3E%3C/svg%3E" class="lazyload summary-classic__image" />
-          class="summary-classic__image" />
       </a>
     </div>
     {{ end }}

layouts/partials/svgs/arrow/arrow-back.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="currentColor" d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M19 11H7.83l4.88-4.88c.39-.39.39-1.03 0-1.42-.39-.39-1.02-.39-1.41 0l-6.59 6.59c-.39.39-.39 1.02 0 1.41l6.59 6.59c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L7.83 13H19c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>

layouts/partials/svgs/arrow/arrow-forward.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path d="M0 0h24v24H0z" fill="none"/><path fill="currentColor" d="M12 4l-1.41 1.41L16.17 11H4v2h12.17l-5.58 5.59L12 20l8-8z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><path fill="currentColor" d="M5 13h11.17l-4.88 4.88c-.39.39-.39 1.03 0 1.42.39.39 1.02.39 1.41 0l6.59-6.59c.39-.39.39-1.02 0-1.41l-6.58-6.6c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L16.17 11H5c-.55 0-1 .45-1 1s.45 1 1 1z"/></svg>

layouts/partials/svgs/etc/palette.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="currentColor" d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>

layouts/partials/taxonomy/taxonomy-categories.html

@@ -1,6 +1,6 @@
 {{ if $.Param "enableSidebarCategories" }}
 <div class="taxo">
-    <aside>
+    <section>
         <span class="title p2">
             <a href="{{ "/categories/" | relLangURL }}" class="taxo__title">
                 {{ i18n "taxo-categories" }}
@@ -20,6 +20,6 @@
             </span>
         {{ end }}
         {{ end }}
-    </aside>
+    </section>
 </div>
 {{ end }}

layouts/partials/taxonomy/taxonomy-series.html

@@ -1,6 +1,6 @@
 {{ if $.Param "enableSidebarSeries" }}
 <div class="taxo">
-    <aside>
+    <section>
         <span class="title p2">
             <a href="{{ "/series/" | relLangURL }}" class="taxo__title">
                 {{ i18n "taxo-series" }}
@@ -20,6 +20,6 @@
             </span>
         {{ end }}
         {{ end }}
-    </aside>
+    </section>
 </div>
 {{ end }}

layouts/partials/taxonomy/taxonomy-tags.html

@@ -1,6 +1,6 @@
 {{ if $.Param "enableSidebarTags" }}
 <div class="taxo">
-    <aside>
+    <section>
         <span class="title p2">
             <a href="{{ "/tags/" | relLangURL }}" class="taxo__title">
                 {{ i18n "taxo-tags"}}
@@ -20,6 +20,6 @@
             </span>
         {{ end }}
         {{ end }}
-    </aside>
+    </section>
 </div>
 {{ end }}

layouts/shortcodes/img.html

@@ -1,4 +1,3 @@
-<!-- image -->
 <figure {{ with .Get "class" }}class="{{.}}" {{ end }}>
   {{ with .Get "link"}}<a href="{{.}}">{{ end }}
     <img src="{{ .Get "src" }}" {{ if or (.Get "alt") (.Get "caption") }}alt="{{ with .Get "alt"}}{{.}}{{else}}{{ .Get "caption" }}{{ end }}"{{ end }}/>
@@ -15,4 +14,3 @@
   </figcaption>
   {{ end }}
 </figure>
-<!-- image -->