go-to-top btn mobile fixed, mobile search icon position changed, rss feed changed, whoami mobile ui changed,

assets/js/zzo.js

@@ -5,6 +5,15 @@ $(document).ready(function() {
       $('#root').attr('class', `theme__${localTheme}`);
   }
 
+  // go-to-top  
+  if ($(window).scrollTop() === 0) {
+    $('.gtt').hide();
+  } else if ($(this).scrollTop() > $(document).height() - $(window).height() - 250) { // near the bottom
+    $('.gtt').show();
+  } else {
+    $('.gtt').hide();
+  }
+
   // scroll
   var position = $(window).scrollTop();
   $(window).scroll(function () {
@@ -12,6 +21,12 @@ $(document).ready(function() {
 
     var scroll = $(window).scrollTop();
     if (scroll > position) { // scroll down 
+      if (scroll < 250) {
+        $('.gtt').hide();
+      } else {
+        $('.gtt').show();
+      } 
+
       if (scroll < 45) {        
         return null;
       }      
@@ -40,6 +55,10 @@ $(document).ready(function() {
         }
       });
     } else { // scroll up
+      if (scroll < 250) {
+        $('.gtt').hide();
+      }
+
       if (navbar.hasClass('navbar--hide')) {
         navbar.removeClass('navbar--hide');
       } else if (!navbar.hasClass('navbar--show')) {

assets/sass/abstracts/_mixins.scss

@@ -232,6 +232,15 @@
   animation: #{$str};      
 }
 
+@mixin no-select {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
 @mixin clippy() {
   background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24pt" height="24pt" 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 4 2 C 2.894531 2 2 2.894531 2 4 L 2 17 C 2 17.550781 2.449219 18 3 18 C 3.550781 18 4 17.550781 4 17 L 4 4 L 17 4 C 17.550781 4 18 3.550781 18 3 C 18 2.449219 17.550781 2 17 2 Z M 8 6 C 6.894531 6 6 6.894531 6 8 L 6 20 C 6 21.105469 6.894531 22 8 22 L 20 22 C 21.105469 22 22 21.105469 22 20 L 22 8 C 22 6.894531 21.105469 6 20 6 Z M 8 8 L 20 8 L 20 20 L 8 20 Z M 8 8 "/></svg>');

assets/sass/components/_gtt.scss

@@ -19,4 +19,7 @@
       background-color: themed('gtt-hover-background-color');
     }
   }
+  @include respond-to(sm) {
+    position: fixed;
+  }
 }

assets/sass/components/_search.scss

@@ -184,9 +184,10 @@
   &__btn {
     position: absolute;
     top: 0;
-    right: 0;
+    right: $grid_navbar_height;
-    width: 50px;
+    width: $grid_navbar_height;
     height: $grid_navbar_height;
+    padding: 0.25rem;
     cursor: pointer;
     display: none;
     z-index: z('search-btn');
@@ -194,7 +195,7 @@
     @include respond-to(sm) {
       @include flexbox();
       @include align-items(center);
-      @include justify-content(center);
+      @include justify-content(flex-end);
     }
     
     @include themify($themes) {

assets/sass/components/_whoami.scss

@@ -5,6 +5,18 @@
   width: 100%;
 
   @include flexbox();
+  @include respond-to(sm) {
+    @include align-items(center);
+    @include flex-direction(column);
+  }
+
+  &__contents {
+    @include flexbox();
+    @include flex-direction(column);
+    @include justify-content(center);
+    @include align-items(center);
+    margin-top: 0.5rem;
+  }
 
   &__image {    
     width: 100%;
@@ -38,6 +50,10 @@
   &__desc {
     font-size: 1rem;
     padding-left: 0.25rem;
+
+    @include respond-to(sm) {
+      width: 75%;
+    }
   }
 
   &__gutter {

assets/sass/layout/_navigation.scss

@@ -161,12 +161,18 @@
       @include flexbox();
       @include align-items(center);
       @include justify-content(center);
+      @include no-select;
       @include themify($themes) {
         color: themed('navbar-title-color');        
         @include on-event {
           color: themed('navbar-title-hover-color');
           background-color: themed('navbar-menu-hover-background-color');
           text-decoration: none;
+          border-bottom: 1px solid themed('navbar-border-bottom-color');
+          @include respond-to(sm) {
+            border-bottom: none;
+          }
+
         }
         &.active {
           color: themed('navbar-title-active-color') !important;

exampleSite/config/_default/params.toml

@@ -4,7 +4,7 @@ custom_css = []
 custom_js = []
 
 # header
-homeHeaderType = "slide" # text, img, slide
+homeHeaderType = "text" # text, img, slide
 
 # body
 enableBreadcrumb = true
@@ -21,7 +21,7 @@ paginateWindow = 1
 # whoami
 myname = "zzossig"
 email = "zzossig@gmail.com"
-whoami = "Web DeveloperWeb"
+whoami = "Web Developer"
 useGravatar = false
 location = "Seoul, Korea"
 organization = "Hugo"

exampleSite/content/_index.md

@@ -4,13 +4,11 @@ header:
     height: 235
     paddingX: 50
     paddingY: 0
-    align: left
+    align: center
     title:
-      - header title1
+      - HUGO
-      - header title2
     subtitle:
-      - header subtitle1
+      - The world’s fastest framework for building websites
-      - header subtitle2
     titleFontSize: 44
     subtitleFontSize: 16
     spaceBetweenTitleSubtitle: 20

exampleSite/content/notes/hugo/hugo-1.md

@@ -11,6 +11,3 @@ categories:
 ---
 
 Dolore in consectetur irure qui laborum. Adipisicing cillum ad laboris dolor. Quis consectetur ullamco esse ad mollit anim sint nostrud esse. Irure voluptate ex fugiat voluptate ea fugiat laboris.
-
-{{% img src="/images/feature1/wave.png" title="Image4" caption="Image description" alt="image alt" %}}
-![image](/images/feature1/markdown.png)

exampleSite/content/posts/emoji-support.md

@@ -5,6 +5,10 @@ date = "2019-03-05"
 description = "Guide to emoji usage in Hugo"
 tags = [
     "emoji",
+		"gamoji",
+		"namoji",
+		"bamoji",
+		"amoji"
 ]
 +++
 

exampleSite/content/posts/test-mermaid.md

@@ -3,7 +3,7 @@ title: "Mermaid support"
 date: 2019-11-17T12:00:06+09:00
 description: "Generate diagrams, charts, graphs or flows from markdown-like text via javascript."
 tags:
--
+- diagram
 series:
 -
 categories:

layouts/_default/sitemapindex.xml

@@ -1,11 +0,0 @@
-{{ printf "<?xml version=\"1.0\" encoding=\"utf-8\" standalone=\"yes\" ?>" | safeHTML }}
-<sitemapindex xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-	{{ range . }}
-	<sitemap>
-	   	<loc>{{ .SitemapAbsURL }}</loc>
-		{{ if not .LastChange.IsZero }}
-	   	<lastmod>{{ .LastChange.Format "2006-01-02T15:04:05-07:00" | safeHTML }}</lastmod>
-		{{ end }}
-	</sitemap>
-	{{ end }}
-</sitemapindex>

layouts/partials/body/whoami.html

@@ -17,7 +17,7 @@
       {{ end }}      
     {{ end }}
   </div>
-  <div>
+  <div class="whoami__contents">
     <div class="whoami__written-by">
       {{ T "single-writtenBy" }}
     </div>

layouts/partials/footer/links-feed.html

@@ -1,15 +1,11 @@
-<label class="label p2">{{ i18n "footer-subscribe" }}</label>
+{{ if $.Param "showFeedLinks" }}
-<div class="feed">
+  {{ if .Site.LanguagePrefix -}}
-  {{ $list := .AlternativeOutputFormats }}
+  <a href="{{ .Site.LanguagePrefix | absURL }}/index.xml" type="application/rss+xml" title="rss">
-  {{ $length := (len $list) }}
+    {{ partial "svgs/etc/rss.svg" (dict "width" 32 "height" 32) }}
-  {{ if $list }}
+  </a>
-    {{ range $index, $element := $list }}
+  {{ else }}
-    {{ if ne .Name "webappmanifest" }}
+  <a href="{{ .Site.RSSLink }}" type="application/rss+xml" title="rss">
-      {{ if eq $index 1 }} &middot; {{ end }}
+    {{ partial "svgs/etc/rss.svg" (dict "width" 32 "height" 32) }}
-      <a rel="{{ .Rel }}" type="{{ .MediaType.Type }}" href="{{ .Permalink | safeURL }}" class="caption">
-        {{ .Name }}
   </a>
   {{ end }}
 {{ end }}
-  {{ end }}
-</div>

layouts/partials/footer/links-social.html

@@ -1,3 +1,5 @@
+{{ if $.Param "showSocialLinks" }}
+<div class="footer__social">
   <label class="label p2">{{ i18n "footer-social" }}</label>
   <div class="social">
     {{ range $name, $path := $.Param "socialOptions" }}
@@ -7,4 +9,7 @@
       </a>
       {{ end }}      
     {{ end }}
+    {{ partial "footer/links-feed.html" . }}
   </div>
+</div>
+{{ end }}

layouts/partials/footer/select-lang.html

@@ -1,3 +1,5 @@
+{{ if $.Param "enableLangChange" }}
+<div class="footer__lang">
   <label class="label p2">{{ i18n "footer-language" }}</label>
   <div class="dropdown">
     <button class="dropdown-trigger">
@@ -22,3 +24,5 @@
       {{ end }}
     </div>
   </div>
+</div>
+{{ end }}

layouts/partials/footer/select-theme.html

@@ -1,3 +1,5 @@
+{{ if $.Param "enableThemeChange" }}
+<div class="footer__theme">
   <label class="label p2">{{ i18n "footer-theme" }}</label>
   <div class="dropdown">
     <button class="dropdown-trigger">
@@ -18,6 +20,8 @@
       {{ end }}
     </div>
   </div>
+</div>            
+{{ end }}
 <script>
   // theme change
   var localTheme = localStorage.getItem('theme');

layouts/partials/footer/site-footer.html

@@ -1,26 +1,9 @@
 <footer class="footer">
     <div class="footer__wrapper">        
-        {{ if $.Param "enableThemeChange" }}
-        <div class="footer__theme">
         {{ partial "footer/select-theme" . }}
-        </div>            
-        {{ end }}
-        {{ if $.Param "enableLangChange" }}
-        <div class="footer__lang">
         {{ partial "footer/select-lang" . }}
-        </div>
-        {{ end }}
-        {{ if $.Param "showFeedLinks" }}
-        <div class="footer__feed">
-            {{ partial "footer/links-feed.html" . }}
-        </div>
-        {{ end }}
-        {{ if $.Param "showSocialLinks" }}
-        <div class="footer__social">
         {{ partial "footer/links-social.html" . }}        
     </div>
-        {{ end }}
-    </div>
     <hr />
 
     {{ if $.Param "showPoweredBy" }}

layouts/partials/navbar/site-nav.html

@@ -16,9 +16,6 @@
     <span aria-hidden="true"></span>
   </a>
   <div class="navbar__menu">    
-    <div id="mobileSearchBtn" class="mobile-search__btn">
-      {{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
-    </div>
     {{ range .Site.Menus.main -}}
     {{ if .HasChildren }}
     <div class="navbar__dropdown navbar__slide-down">

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

@@ -1,4 +1,8 @@
 {{ if $.Param "enableSearch" }}
+<div id="mobileSearchBtn" class="mobile-search__btn">
+  {{ partial "svgs/etc/search.svg" (dict "width" 22 "height" 22) }}
+</div>
+
 <div id="search-mobile-container" class="mobile-search hide">
   <div class="mobile-search__top">
     <input id="search-mobile" type="text" placeholder="{{T "search-placeholder"}}" class="mobile-search__top--input"/>

layouts/partials/svgs/etc/rss.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="{{ .width }}" height="{{ .height }}" viewBox="0 0 24 24"><path fill="none" d="M0 0h24v24H0V0z"/><circle fill="currentColor" cx="6.18" cy="17.82" r="2.18"/><path fill="currentColor" d="M5.59 10.23c-.84-.14-1.59.55-1.59 1.4 0 .71.53 1.28 1.23 1.4 2.92.51 5.22 2.82 5.74 5.74.12.7.69 1.23 1.4 1.23.85 0 1.54-.75 1.41-1.59-.68-4.2-3.99-7.51-8.19-8.18zm-.03-5.71C4.73 4.43 4 5.1 4 5.93c0 .73.55 1.33 1.27 1.4 6.01.6 10.79 5.38 11.39 11.39.07.73.67 1.28 1.4 1.28.84 0 1.5-.73 1.42-1.56-.73-7.34-6.57-13.19-13.92-13.92z"/></svg>

layouts/partials/svgs/etc/translate.svg

@@ -0,0 +1 @@
+<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="M12.65 15.67c.14-.36.05-.77-.23-1.05l-2.09-2.06.03-.03c1.74-1.94 2.98-4.17 3.71-6.53h1.94c.54 0 .99-.45.99-.99v-.02c0-.54-.45-.99-.99-.99H10V3c0-.55-.45-1-1-1s-1 .45-1 1v1H1.99c-.54 0-.99.45-.99.99 0 .55.45.99.99.99h10.18C11.5 7.92 10.44 9.75 9 11.35c-.81-.89-1.49-1.86-2.06-2.88-.16-.29-.45-.47-.78-.47-.69 0-1.13.75-.79 1.35.63 1.13 1.4 2.21 2.3 3.21L3.3 16.87c-.4.39-.4 1.03 0 1.42.39.39 1.02.39 1.42 0L9 14l2.02 2.02c.51.51 1.38.32 1.63-.35zM17.5 10c-.6 0-1.14.37-1.35.94l-3.67 9.8c-.24.61.22 1.26.87 1.26.39 0 .74-.24.88-.61l.89-2.39h4.75l.9 2.39c.14.36.49.61.88.61.65 0 1.11-.65.88-1.26l-3.67-9.8c-.22-.57-.76-.94-1.36-.94zm-1.62 7l1.62-4.33L19.12 17h-3.24z"/></svg>