gtt bug fix, sidebar subscribe component added,

assets/js/zzo.js

@@ -22,7 +22,7 @@ $(document).ready(function() {
       } else if (navbar.hasClass('navbar--show')) {
         navbar.removeClass('navbar--show');
       }
-
+      
       if (scroll > 500) {
         gtt.show(200);
       }
@@ -93,17 +93,6 @@ $(document).ready(function() {
     setup: function () { },
     deferSetup: true,
     destroy: function () { },
-  })
-  enquire.register("screen and (min-width: 1120px)", {
-    match: function () {  
-      $('#gtt').show(200);
-    },
-    unmatch: function () {      
-      $('#gtt').hide(200); 
-    },
-    setup: function () { },
-    deferSetup: true,
-    destroy: function () { },
   });
 
   // navbar

assets/sass/components/_attachment.scss

@@ -1,57 +0,0 @@
-section.attachments {
-    margin: 2rem 0;
-    position: relative;
-}
-
-section.attachments label {
-    font-weight: 400;
-    padding-left: 0.5em;
-    padding-top: 0.2em;
-    padding-bottom: 0.2em;
-    margin: 0;
-}
-
-section.attachments .attachments-files {
-    padding: 15px;
-    display: block;
-    font-size: 1rem;
-    margin-top: 0rem;
-    margin-bottom: 0rem;
-    color: #666;
-}
-
-section.attachments.orange label {
-    color: #fff;
-    background: #F0B37E;
-}
-
-section.attachments.orange .attachments-files {
-    background: #FFF2DB;
-}
-
-section.attachments.green label {
-    color: #fff;
-    background: rgba(92, 184, 92, 0.8);
-}
-
-section.attachments.green .attachments-files {
-    background: #E6F9E6;
-}
-
-section.attachments.blue label {
-    color: #fff;
-    background: #6AB0DE;
-}
-
-section.attachments.blue .attachments-files {
-    background: #E7F2FA;
-}
-
-section.attachments.grey label {
-    color: #fff;
-    background: #505d65;
-}
-
-section.attachments.grey .attachments-files {
-    background: #f4f4f4;
-}

assets/sass/components/_subs.scss

@@ -0,0 +1,36 @@
+.subs {
+  padding: 0.25rem;
+  margin: 2.5rem 0;
+  z-index: z('taxo');
+
+  &__title {
+    font-weight: 700;
+    font-family: $taxo_titie_font;
+    margin-bottom: 0.5rem;
+    @include themify($themes) {
+      color: themed('taxo-title-color');
+    }
+  }
+
+  &__form {
+    @include flexbox();
+    @include align-items(center);
+  }
+
+  &__input {
+    height: 32px;
+    width: 100%;
+    padding: 0.25rem;
+    border-radius: 0.25rem;
+    margin-right: 1rem;
+    background-color: #212121;
+    border: 1px solid #212121;
+    color: red;
+    border-left: none;
+    outline: none;
+  }
+
+  &__button {
+
+  }
+}

assets/sass/main.scss

@@ -152,11 +152,11 @@ $switch_active_color: {{ $scr.Get "switch_active_color" }};
 @import 'components/notice';
 @import 'components/expand';
 @import 'components/alert';
-@import 'components/attachment';
 @import 'components/tooltip';
 @import 'components/gtt';
 @import 'components/whoami';
 @import 'components/switch';
+@import 'components/subs';
 
 @import 'pages/body';
 @import 'pages/home';

exampleSite/layouts/_default/summary.html

@@ -1,39 +1,9 @@
-<article class="summary">
+{{ if eq (lower .Site.Params.summaryShape) "card" }}
-  <header>
+{{ partial "summary/card" . }}
-    <h4 class="title h5"><a href='{{ .Permalink }}'> {{ .Title }}</a> </h2>
+{{ else if eq (lower .Site.Params.summaryShape) "classic" }}
-      <h6 class="subtitle caption">🕓 {{ .Date.Format (i18n "summary-dateformat") }} · ☕{{ .ReadingTime }} min read</h6>
+{{ partial "summary/classic" . }}
-  </header>
+{{ else if eq (lower .Site.Params.summaryShape) "compact" }}
-  {{ $params := .Params }}
+{{ partial "summary/compact" . }}
-  <div class="summary__content">
+{{ else }}
-    <div class="summary__text p2">
+{{ printf "%#v" "Not supported shape. Please edit config params(summaryShape)." }}
-      {{ with $params.Description }}
+{{ end }}
-      {{ . }}
-      {{ else }}
-      {{ .Summary }}
-      {{ end }}
-    </div>
-    {{ if $params.featured_image }}      
-      <div class="summary__image-wrapper">
-        {{ with (print "images/" $params.featured_image) }}
-        <img data-src="{{ . | relURL }}" alt="{{ print $params.featured_image }}" class="lazyload summary__image">
-        {{ end }}
-      </div>
-    {{ else if $params.featured_video }}      
-      {{ with print ("theme/hugo-theme-zzo/videos/poster/" | relURL) $params.featured_video_poster }}
-      <div class="video">
-        <video class='video-js' controls preload='none' poster='{{ . }}' data-setup='{"fluid": true}'>
-          {{ with print ("videos/" | relURL) $params.featured_video }}
-            <source src="{{ . }}" type='video/mp4'>
-          {{ end }}
-          <p class='vjs-no-js'>
-            To view this video please enable JavaScript, and consider upgrading to a web browser that
-            <a href='https://videojs.com/html5-video-support/' target='_blank' rel="noopener">supports HTML5 video</a>
-          </p>
-        </video>
-      </div>
-      {{ end }}
-    {{ end }}    
-  </div>
-
-  <hr/>
-</article>

exampleSite/layouts/patials/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>

exampleSite/layouts/patials/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>

exampleSite/layouts/patials/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>

i18n/en.toml

@@ -32,4 +32,13 @@ other = "Jan 2, 2006"
 other = "See Also"
 
 [toc-label]
-other = "What's on this Page"
+other = "What's on this Page"
+
+[subs-label]
+other = "Subscribe"
+
+[subs-placeholder]
+other = "Your email address"
+
+[subs-button]
+other = "Join"

i18n/ko.toml

@@ -32,4 +32,13 @@ other = "2006년 01월 02일"
 other = "관련글"
 
 [toc-label]
-other = "목차"
+other = "목차"
+
+[subs-label]
+other = "구독"
+
+[subs-placeholder]
+other = "이메일 주소 입력"
+
+[subs-button]
+other = "구독하기"

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

@@ -1,12 +1,13 @@
 {{ if $.Param "enableGoToTop" }}
-<div id="gtt" class="hide">
+<div id="gtt">
   <div class="gtt">
     {{ partial "svgs/arrow/keyboard-arrow-up.svg" (dict "width" 25 "height" 25) }}
   </div>
 </div>
 
 <script>
-  $(document).ready(function() {
+  $(document).ready(function() {    
+    $('#gtt').hide();
     $('.gtt').click(function() {
       $("html, body").animate({ scrollTop: 0 }, 250);
     });

layouts/partials/sidebar/sidebar-home.html

@@ -21,5 +21,6 @@
 {{ partial "taxonomy/taxonomy-tags" . }}
 {{ partial "taxonomy/taxonomy-categories" . }}
 {{ partial "taxonomy/taxonomy-series" . }}
+{{ partial "sidebar/site-subs" . }}
 
 {{ end }}

layouts/partials/sidebar/site-subs.html

@@ -0,0 +1,17 @@
+{{ if $.Param "enableSideSubscribe" }}
+<div class="subs">
+  <aside>
+    <div class="title p2 subs__title">
+      {{ i18n "subs-label" }}
+    </div>
+    <div class="subs__form">
+      <input type="text" class="subs__input" placeholder="{{ T "subs-placeholder" }}"/>      
+    </div>
+    <button class="subs__button">{{ T "subs-button" }}</button>
+  </aside>
+</div>
+
+<script>
+
+</script>
+{{ end }}

layouts/partials/svgs/etc/subscription.svg

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24" version="1.1">
+<path style=" stroke:none;fill-rule:nonzero;fill:rgb(100,100,100);fill-opacity:1;" d="M 3 3 C 1.90625 3 1 3.90625 1 5 L 1 18 L 3 18 L 3 5 L 19 5 L 19 3 Z M 7 7 C 5.90625 7 5 7.90625 5 9 L 5 19 C 5 20.09375 5.90625 21 7 21 L 14 21 L 14 19 L 7 19 L 7 11.628906 L 14 16 L 21 11.628906 L 21 14 L 23 14 L 23 9 C 23 7.90625 22.09375 7 21 7 Z M 7 9 L 21 9 L 21 9.625 L 14 14 L 7 9.625 Z M 19 16 L 19 19 L 16 19 L 16 21 L 19 21 L 19 24 L 21 24 L 21 21 L 24 21 L 24 19 L 21 19 L 21 16 Z M 19 16 "/>
+</svg>