[new option] disable ui animation

enableUiAnimation param added

assets/sass/components/_bio.scss

@@ -17,7 +17,10 @@
     max-width: 250px;
     height: auto;
     @include box-shadow(0, 2px, 4px, 0, rgba(0, 0, 0, 0.25));
+
+    &[data-ani="true"] {
       @include animation('slide-in-down-little .2s .6s 1 ease-in both');
+    }
 
     &-wrapper {
       width: 90%;

assets/sass/components/_search.scss

@@ -345,7 +345,10 @@
     display: none;
     z-index: z('search-btn');
 
+    &[data-ani="true"] {
       @include animation('slide-in-down .5s .25s 1 ease both');
+    }
+    
     @include themify($themes) {
       color: themed('burger-menu-color');
       background-color: themed('navbar-background-color');

assets/sass/components/_summary.scss

@@ -1,6 +1,9 @@
 .summary-card {
   padding: 1rem;
+  
+  &[data-ani="true"] {
     @include animation('slide-in-down .2s .3s 1 ease-in both');
+  }
 
   .title {
     a {
@@ -37,7 +40,10 @@
   &__image {
     width: 100%;
     height: 100%;
+
+    &[data-ani="true"] {
       @include animation('slide-in-left .2s .6s 1 ease-in both');
+    }
     
     &-wrapper {
       height: 100%;
@@ -81,7 +87,10 @@
   padding: 0 1rem;
   @include flexbox();
   @include flex-direction(column);
+
+  &[data-ani="true"] {
     @include animation('slide-in-down .2s .3s 1 ease-in both');
+  }
 
   .title {
     font-size: 24px;
@@ -136,7 +145,9 @@
     height: 100%;
     object-fit: contain;
 
+    &[data-ani="true"] {
       @include animation('slide-in-left .2s .6s 1 ease-in both');
+    }
         
     &-wrapper {
       max-width: 130px;
@@ -180,7 +191,10 @@
 
 .summary-compact {
   padding: 0 1rem;
+
+  &[data-ani="true"] {
     @include animation('slide-in-down .2s .3s 1 ease-in both');
+  }
 
   .title {
     a {

assets/sass/components/_switch.scss

@@ -5,7 +5,9 @@
   margin-top: 0.7rem;
   margin-left: 1rem;
 
+  &[data-ani="true"] {
     @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
+  }
 }
 
 .switch input {

assets/sass/components/_toc.scss

@@ -7,8 +7,11 @@
   padding-left: 0.5rem;
   z-index: z('toc');
 
-  @include no-select;
+  &[data-ani="true"] {
     @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
+  }
+
+  @include no-select;
   
   #TableOfContents {
     position: relative;
@@ -38,10 +41,13 @@
     left: 1rem;
     position: absolute;
     
-    @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
     @media only screen and (max-width: 1300px) {
       display: none;
     }
+
+    &[data-ani="true"] {
+      @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
+    }
   }
 
   &__flexbox--outer[data-dir="ltr"] {
@@ -63,7 +69,10 @@
     font-size: 0.9rem;
     margin-top: 0.5rem;
 
+    &[data-ani="true"] {
       @include animation('slide-in-down-little .2s .3s 1 ease-in backwards');
+    }
+    
     @include themify($themes) {
       color: themed('toc-label-color');
     }

assets/sass/layout/_header.scss

@@ -9,7 +9,10 @@
   @include flexbox();
   @include justify-content(center);
   @include flex-direction(column);
+
+  &[data-ani="true"] {
     @include animation('fade-in .15s .1s 1 ease-in both');
+  }
 
   &__title {
     line-height: 1.1;

assets/sass/layout/_navigation.scss

@@ -52,6 +52,7 @@
       }
     }
     
+    &[data-ani="true"] {
       @media only screen and (min-width: 769px) {
         @for $i from 1 through 8 {
           &:nth-child(#{$i}) {
@@ -60,6 +61,7 @@
         }
       }
     }
+  }
   
   &__brand {
     height: $grid_navbar_height;
@@ -72,7 +74,10 @@
   &__burger {
     display: none;
 
+    &[data-ani="true"] {
       @include animation('slide-in-down .5s .0s 1 ease both');
+    }
+    
     @media only screen and (max-width: 769px) {
       cursor: pointer;
       margin-left: auto;
@@ -329,7 +334,10 @@
   @include flexbox();
   @include align-items(center);
   @include justify-content(flex-end);
+
+  &[data-ani="true"] {
     @include animation('slide-in-down .5s .0s 1 ease both');
+  }
 
   @media only screen and (max-width: 769px) {
     display: none;
@@ -425,7 +433,10 @@
   cursor: pointer;
   z-index: z('modal');
 
+  &[data-ani="true"] {
     @include animation('slide-in-down .5s .4s 1 ease both');
+  }
+  
   @include themify($themes) {
     color: themed('burger-menu-color');  
     @include on-event {

assets/sass/pages/_archive.scss

@@ -105,7 +105,10 @@
       color: themed('archive-key-color');
       background-color: themed('archive-key-background-color');
     }
+
+    &[data-ani="true"] {
       @include animation('slide-in-down .4s .2s 1 ease both');
+    }
 
     &:not(:first-child) {
       margin: 4rem 0 1rem 0;
@@ -122,8 +125,11 @@
 
     @include flexbox();
     @include align-items(center);
+
+    &[data-ani="true"] {
       @include animation('slide-in-left .2s .5s 1 ease both');
     }
+  }
 
   &__type {
     border-top-left-radius: 0.25rem;

assets/sass/pages/_showcase.scss

@@ -122,8 +122,11 @@
       @include flexbox();
       @include justify-content(flex-start);
       @include flex-wrap(wrap);
+
+      &[data-ani="true"] {
         @include animation('slide-in-left-little .2s .25s 1 ease-in both');
       }
+    }
 
     &--title {
       word-break: break-word;

assets/sass/pages/_single.scss

@@ -13,10 +13,13 @@
     margin-top: 1.5rem;
     margin-bottom: 0.5rem;
     
-    @include animation('slide-in-down .2s .3s 1 ease-in both');
     @include themify($themes) {
       color: themed("single-header-title-color");
     }
+
+    &[data-ani="true"] {
+      @include animation('slide-in-down .2s .3s 1 ease-in both');
+    }
   }
 
   &__shorttitle {
@@ -62,7 +65,9 @@
   }
 
   &__contents {
+    &[data-ani="true"] {
       @include animation('slide-in-left-little .2s .6s 1 ease-in both');
+    }
     
     &--gallery {
       overflow: hidden;

assets/sass/pages/_talk.scss

@@ -9,8 +9,11 @@
     text-align: center;
     position: relative;
 
-    @include truncate(100px);
+    &[data-ani="true"] {
       @include animation('slide-in-left .2s .5s 1 ease both');
+    }
+    
+    @include truncate(100px);
     @include themify($themes) {
       color: themed('archive-meta-color');
       background-color: themed('archive-type-background-color');

exampleSite/config/_default/params.toml

@@ -11,6 +11,8 @@ notAllowedTypesInHomeSidebar = ["about", "archive", "showcase", "publication", "
 notAllowedTypesInArchive = ["about", "talks", "showcase", "publication", "presentation", "resume"]
 notAllowedTypesInHomeFeed = ["about", "archive", "contact", "talks", "showcase", "publication", "presentation", "resume", "gallery"]
 
+enableUiAnimation = true
+
 # header
 homeHeaderType = "text" # text, img, slide
 

layouts/_default/single.html

@@ -9,12 +9,12 @@
   </noscript>
   <div class="single hide">
     <script>document.querySelector('.single').classList.remove('hide')</script>
-    <h2 class="single__title">{{ .Title }}</h2>
+    <h2 class="single__title" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ .Title }}</h2>
     <div class="single__meta">
       {{ partial "body/infos" . }}
       {{ partial "body/tags" . }}
     </div>
-    <article class="single__contents" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
+    <article class="single__contents" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
       {{ partial "body/toc" . }}
       {{ .Content }}
     </article>

layouts/about/single.html

@@ -5,7 +5,7 @@
   </h3>
 </header>
 <main class="main about">
-  <article class="single__contents single__contents--about" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
+  <article class="single__contents single__contents--about" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
     {{ .Content }}
   </article>
 </main>

layouts/archive/list.html

@@ -19,11 +19,11 @@
     {{ $paginator := .Paginate ($filteredPages.GroupByDate ($.Param "archiveGroupByDate" | default "2006")) ($.Param "archivePaginate") }}
     
     {{ range ($paginator).PageGroups }}
-    <span class="archive__key">{{ .Key }}</span>
+    <span class="archive__key" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ .Key }}</span>
     <ul class="archive__ul" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ range .Pages }}
       <li class="archive__li" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
-        <span class="archive__meta">
+        <span class="archive__meta" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
           {{ if ne ($.Param "languagedir") "rtl" }}
             <span class="archive__type">{{ .Type }}</span>
             <span class="archive__date">{{ .Date.Format (i18n "archive-dateformat") }}</span>

layouts/contact/single.html

@@ -6,7 +6,7 @@
 </header>
 <main class="main">
   <div class="contact">
-      <article class="single__contents contact__desc" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
+      <article class="single__contents contact__desc" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
         {{ .Content }}
       </article>
       {{ if eq .Params.service "formspree" }}

layouts/partials/body/main-left.html

@@ -4,16 +4,16 @@
   {{ if and (eq ($.Param "tocPosition") "outer") .IsPage }}
     {{ if and (ne .Type "about") (ne .Type "contact") (ne .Type "gallery") }}
       {{ if or ($.Param "enableToc") ($.Param "toc") }}
-        <div class="toc__flexbox--outer" data-position="fixed" data-dir="rtl">
+        <div class="toc__flexbox--outer" data-position="fixed" data-dir="rtl" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
-          <h6 class="toc__title toc__title--outer">{{ i18n "toc-label" }}</h6>
+          <h6 class="toc__title toc__title--outer" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ i18n "toc-label" }}</h6>
           {{ if $.Param "enableTocSwitch" }}
-          <label class="switch">
+          <label class="switch" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
             <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 }}" data-dir="rtl" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}">
+        <div class="toc toc__outer {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="rtl" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
           {{ .TableOfContents }}
         </div>
       {{ end }}

layouts/partials/body/main-right.html

@@ -4,16 +4,16 @@
   {{ if and (eq ($.Param "tocPosition") "outer") .IsPage }}
     {{ if and (ne .Type "about") (ne .Type "contact") (ne .Type "gallery") }}
       {{ if or ($.Param "enableToc") ($.Param "toc") }}
-        <div class="toc__flexbox--outer" data-position="fixed" data-dir="ltr">
+        <div class="toc__flexbox--outer" data-position="fixed" data-dir="ltr" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
-          <h6 class="toc__title toc__title--outer">{{ i18n "toc-label" }}</h6>
+          <h6 class="toc__title toc__title--outer" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ i18n "toc-label" }}</h6>
           {{ if $.Param "enableTocSwitch" }}
-          <label class="switch">
+          <label class="switch" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
             <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 }}" data-dir="ltr" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}">
+        <div class="toc toc__outer {{ if $.Param "hideToc" }}hide{{ end }}" data-dir="ltr" data-folding="{{ if $.Param "tocFolding" }}true{{ else }}false{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
           {{ .TableOfContents }}
         </div>
       {{ end }}

layouts/partials/header/header-img.html

@@ -1,7 +1,7 @@
 {{ if $.Params.header }}  
   {{ range $.Params.header }}
     {{ if eq .type "img" }}
-    <div class="site-header basicflex-column site-header__align-{{ .align }}" style="background-image: url('{{ .imageSrc | relURL }}'); background-size: {{ .imageSize }};
+    <div class="site-header basicflex-column site-header__align-{{ .align }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}" style="background-image: url('{{ .imageSrc | relURL }}'); background-size: {{ .imageSize }};
     background-repeat: {{ .imageRepeat }}; background-position: {{ .imagePosition }}; width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
       {{ $header := . }}
       {{ if .title }}

layouts/partials/header/header-slide.html

@@ -8,7 +8,7 @@
       {{ if eq .type "slide" }}
         {{ $height := .height }}
         {{ range .slide }}
-          <div class="site-header site-header__align-{{ .align }}" style="background-image: url('{{ .imageSrc | relURL }}'); background-size: {{ .imageSize }}; background-repeat: {{ .imageRepeat }}; background-position: {{ .imagePosition }}; height: {{ $height }}px;">
+          <div class="site-header site-header__align-{{ .align }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}" style="background-image: url('{{ .imageSrc | relURL }}'); background-size: {{ .imageSize }}; background-repeat: {{ .imageRepeat }}; background-position: {{ .imagePosition }}; height: {{ $height }}px;">
             {{ $header := . }}
             {{ if .title }}            
               {{ range .title }}

layouts/partials/header/header-text.html

@@ -1,7 +1,7 @@
 {{ if $.Params.header }}  
   {{ range $.Params.header }}
     {{ if eq .type "text" }}
-      <div class="site-header basicflex-column site-header__align-{{ .align }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
+      <div class="site-header basicflex-column site-header__align-{{ .align }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}" style="width: 100%; height: {{ .height }}px; padding: {{ .paddingY }}px {{ .paddingX }}px;">
         {{ $header := . }}
         {{ if .title }}            
           {{ range .title }}

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

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

layouts/partials/navbar/select-theme.html

@@ -1,7 +1,7 @@
 {{ if $.Param "enableThemeChange" }}
-<div class="theme">
+<div class="theme" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
   <div class="dropdown">
-    <button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button">
+    <button class="dropdown-trigger navbar__slide-down" aria-label="Select Theme Button" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
       {{ partial "svgs/etc/invert-colors.svg" (dict "width" 22 "height" 22) }}      
     </button>
     <div class="dropdown-content select-theme">

layouts/partials/navbar/site-nav.html

@@ -17,7 +17,7 @@
   {{ partial "navbar/select-theme-mobile" . }}
   {{ partial "search/site-search-mobile" . }}
   
-  <a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false">
+  <a role="button" class="navbar__burger" aria-label="menu" aria-expanded="false" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
     <span aria-hidden="true"></span>
@@ -32,7 +32,7 @@
       {{ $active = or $active (eq (lower .URL) (lower $current.Title)) }}
       {{ $active = or $active (eq (lower .URL) (lower $current.Type)) }}
       {{ if .HasChildren }}
-        <div class="navbar__dropdown navbar__slide-down">
+        <div class="navbar__dropdown navbar__slide-down" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
           <a href="{{ .URL | relLangURL }}" class="navbar__menu-item {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
             {{ safeHTML .Name }}
             <span class="navbar__menu-icon">
@@ -46,7 +46,7 @@
           </div>
         </div>
       {{ else }}
-        <a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{ safeHTML .Name }}</a>
+        <a href="{{ .URL | relLangURL }}" class="navbar__menu-item navbar__slide-down {{ if $active }}active{{ end }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ safeHTML .Name }}</a>
       {{ end }}
     {{ end }}
   </div>

layouts/partials/search/site-search-mobile.html

@@ -1,5 +1,5 @@
 {{ if $.Param "enableSearch" }}
-<div id="mobileSearchBtn" class="mobile-search__btn">
+<div id="mobileSearchBtn" class="mobile-search__btn" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
   {{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
 </div>
 

layouts/partials/showcase/show-pinned.html

@@ -7,7 +7,7 @@
 
   {{ if gt $pinnedNum 0 }}
     <div style="display: flex; justify-content: center">
-    <ol class="showcase__box--wrapper">
+    <ol class="showcase__box--wrapper" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
       {{ range .Pages }}
         {{ $category := .Params.category }}
         {{ $categoryIcon := (print "svgs/showcase/" (.Params.categoryIcon | default "code") ".svg") }}

layouts/partials/showcase/show-section.html

@@ -2,7 +2,7 @@
   {{ $sectionNum := (len .Pages) }}
 
   {{ if gt $sectionNum 0 }}
-    <div class="showcase__box--wrapper">
+    <div class="showcase__box--wrapper" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
       {{ $category := .Params.category }}
       {{ $categoryIcon := (print "svgs/showcase/" (.Params.categoryIcon | default "code") ".svg") }}
       {{ range .Pages }}

layouts/partials/sidebar/sidebar-single.html

@@ -4,15 +4,15 @@
 <section class="sidebar hide">
   <script>document.querySelector('.sidebar').classList.remove('hide')</script>
   <div class="toc__flexbox" data-position="{{ if $.Param "hideToc" }}absolute{{ else }}fixed{{ end }}">
-    <h6 class="toc__title">{{ i18n "toc-label" }}</h6>
+    <h6 class="toc__title" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ i18n "toc-label" }}</h6>
     {{ if $.Param "enableTocSwitch" }}
-      <label class="switch">
+      <label class="switch" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
         <input id="toggle-toc" aria-label="Toggle TOC" type="checkbox" {{ if $.Param "hideToc" }}{{ else }}checked{{ end }}>
         <span class="slider round"></span>
       </label>
     {{ end }}
   </div>
-  <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 }}">
+  <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 }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
     {{ .TableOfContents }}
   </div>
 </section>

layouts/partials/sidebar/site-bio.html

@@ -6,18 +6,18 @@
     {{ $src := "" }}
     {{ if site.Params.useGravatar }}
       {{ $src = printf "https://s.gravatar.com/avatar/%s?s=200" (md5 ($.Param "email")) }}
-      <img src="{{ $src }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="bio__photo"/>
+      <img src="{{ $src }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" class="bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
     {{ else }}
       {{ if $.Param "bioImageUrl" }}
-        <img data-src="{{ $.Param "bioImageUrl" }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo"/>
+        <img data-src="{{ $.Param "bioImageUrl" }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       {{ else if (fileExists "static/images/whoami/avatar.png") }}
-        <img data-src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.png" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       {{ else if (fileExists "static/images/whoami/avatar.jpg") }}
-        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       {{ else if (fileExists "static/images/whoami/avatar.svg") }}
-        <img data-src="{{ "images/whoami/avatar.svg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.svg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       {{ else }}
-        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo"/>
+        <img data-src="{{ "images/whoami/avatar.jpg" | relURL }}" alt="{{ if $.Param "myname" }}{{ $.Param "myname" }}{{ else }}Avatar{{ end }}" 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 bio__photo" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       {{ end }}     
     {{ end }}
   </div>

layouts/partials/summary/card.html

@@ -1,4 +1,4 @@
-<article class="summary-card">
+<article class="summary-card" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
   <header>
     <h5 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h5>
     <h6 class="subtitle caption"><time title="{{ i18n "tooltip-written" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">📅{{ .Date.Format (i18n "summary-dateformat") }} </time> {{ if .GitInfo }} <time title="{{ i18n "tooltip-modified" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; 📝 {{ .Lastmod.Format (i18n "summary-dateformat") }} </time> {{ end }} <span title="{{ i18n "tooltip-reading-time" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}"> &middot; ☕ {{ .ReadingTime }} {{ i18n "reading-time" }}</span>{{ with $.Param "author" }}&middot; <span title="{{ i18n "single-writtenBy" }}" dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">{{if $.Param "AuthorEmoji" }}{{ $.Param "AuthorEmoji" }}{{ else }}✍️{{ end }}&nbsp;{{ . }}</span>{{ end }}</h6>
@@ -14,13 +14,13 @@
     {{ if $.Param "featured_image" }}
     <div class="summary-card__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ (print "images/" ($.Param "featured_image")) | relURL }}" alt="{{ print ($.Param "featured_image") }}" 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 summary-card__image"/>
+        <img data-src="{{ (print "images/" ($.Param "featured_image")) | relURL }}" alt="{{ print ($.Param "featured_image") }}" 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 summary-card__image" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       </a>
     </div>
     {{ else if $.Param "image" }}
     <div class="summary-card__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ $.Param "image" | relURL }}" alt="{{ $.Param "image" }}" 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 summary-card__image" />
+        <img data-src="{{ $.Param "image" | relURL }}" alt="{{ $.Param "image" }}" 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 summary-card__image" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       </a>
     </div>
     {{ else if $.Param "featured_video" }}

layouts/partials/summary/classic.html

@@ -1,16 +1,16 @@
-<article class="summary-classic">
+<article class="summary-classic" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
   <div class="summary-classic__flex-box" {{ if eq ($.Param "sidebarPosition") "left" }}data-position="left"{{ end }}>
 
     {{ if and ($.Param "featured_image") (eq ($.Param "sidebarPosition") "right") }}
     <div class="summary-classic__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ (print "images/" ($.Param "featured_image")) | relURL }}" alt="{{ $.Param "featured_image" }}" 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 summary-classic__image" />
+        <img data-src="{{ (print "images/" ($.Param "featured_image")) | relURL }}" alt="{{ $.Param "featured_image" }}" 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 summary-classic__image" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       </a>
     </div>
     {{ else if and ($.Param "image") (eq ($.Param "sidebarPosition") "right") }}
     <div class="summary-classic__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ $.Param "image" | relURL }}" alt="{{ $.Param "image" }}" 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 summary-classic__image" />
+        <img data-src="{{ $.Param "image" | relURL }}" alt="{{ $.Param "image" }}" 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 summary-classic__image" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       </a>
     </div>
     {{ end }}
@@ -34,13 +34,13 @@
     {{ if and ($.Param "featured_image") (eq ($.Param "sidebarPosition") "left") }}
     <div class="summary-classic__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ (print "images/" ($.Param "featured_image")) | relURL }}" alt="{{ $.Param "featured_image" }}" 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 summary-classic__image" />
+        <img data-src="{{ (print "images/" ($.Param "featured_image")) | relURL }}" alt="{{ $.Param "featured_image" }}" 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 summary-classic__image" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       </a>
     </div>
     {{ else if and ($.Param "image") (eq ($.Param "sidebarPosition") "left") }}
     <div class="summary-classic__image-wrapper">
       <a href="{{ .Permalink }}">
-        <img data-src="{{ $.Param "image" | relURL }}" alt="{{ $.Param "image" }}" 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 summary-classic__image" />
+        <img data-src="{{ $.Param "image" | relURL }}" alt="{{ $.Param "image" }}" 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 summary-classic__image" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}"/>
       </a>
     </div>
     {{ end }}

layouts/partials/summary/compact.html

@@ -1,4 +1,4 @@
-<article class="summary-compact">
+<article class="summary-compact" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
   <div class="summary-compact__flex-box">
     {{ $params := .Params }}
     <div class="summary-compact__meta">

layouts/publication/single.html

@@ -5,7 +5,7 @@
     {{ partial "body/breadcrumb" . }}
   {{ end }}
   <div class="single">
-    <h2 class="single__title">{{ .Title }}</h2>
+    <h2 class="single__title" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ .Title }}</h2>
     {{ with .Params.shorttitle }}
       <h6 class="single__shorttitle">{{ . }}</h6>
     {{ end }}
@@ -19,7 +19,7 @@
     <div class="pub__links">
       {{ partial "publication/pub-links" . }}
     </div>
-    <article class="single__contents" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}">
+    <article class="single__contents" data-dir="{{ if ne ($.Param "languagedir") "rtl" }}ltr{{ else }}rtl{{ end }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
       {{ .Params.abstract }}
       {{ .Content }}
     </article>

layouts/resume/single.html

@@ -76,7 +76,7 @@
             </div>
           {{ end }}
           {{ with .contents }}
-            <div class="single__contents resume__section--contents">
+            <div class="single__contents resume__section--contents" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
               {{ . | markdownify }}
             </div>
           {{ end }}

layouts/talks/list.html

@@ -20,11 +20,11 @@
     {{ $paginator := .Paginate ($pages.GroupByPublishDate ($.Param "talksGroupByDate" | default "2006")) ($.Param "talksPaginate") }}
 
     {{ range ($paginator).PageGroups }}
-    <span class="archive__key">{{ .Key }}</span>
+    <span class="archive__key" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">{{ .Key }}</span>
     <ul class="archive__ul" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
       {{ range .Pages }}
       <li class="archive__li" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
-        <span class="talk__date" data-dir="{{ $.Param "languagedir" | default "ltr" }}">
+        <span class="talk__date" data-dir="{{ $.Param "languagedir" | default "ltr" }}" data-ani="{{ $.Site.Params.enableUiAnimation | default "true" }}">
           {{ .PublishDate.Format (i18n "talks-dateformat") }}
         </span>
         {{ if .Params.disableLink }}