scroll indicator and glowing logo

7 files changed, 115 insertions, 47 deletions

diff --git a/README.md b/README.md
index f5dfc8a..5c0a8ba 100644
--- a/README.md
+++ b/README.md
@@ -3,6 +3,7 @@
 
 
 
+
 # Hugo W3 SIMPLE
 
 ## _Keep it simple, but not simpler_
@@ -29,6 +30,8 @@
  - Google translate.
  - Social icon.
  - Multilingual.
+ - Glowing style logo
+ - Scroll indicator
 
  ## Screenshot
 ### Grid style 
@@ -89,6 +92,8 @@ hasCJKLanguage = true # has chinese/japanese/korean ?
     licenseinfo = "<p class=\"w3-small\">John Doe, a good man living in the earth, loving building website with Hugo.<br>This article is licensed under a <a rel=\"license\" href=\"https://creativecommons.org/licenses/by/4.0/\" class=\"w3-text-white\">Creative Commons Attribution 4.0 International License</a>.</p>" 
     relatedPosts = true
     backtotop = true
+    glowlogo = true # if want logo to have glowing style, set true.
+    scrollindicator = true # if need scroll indicator on the top, set true
     gridstyle = true  # list post with grid style. If false then simple list
     readingtime = true  #display reading time and word count
     firstpic = true  # display first picture as thumbnail if no thumbnail set. For gridstyle only
diff --git a/exampleSite/config.toml b/exampleSite/config.toml
index 10a6e9d..b0a2014 100644
--- a/exampleSite/config.toml
+++ b/exampleSite/config.toml
@@ -35,6 +35,8 @@ hasCJKLanguage = true # has chinese/japanese/korean ?
    
     relatedPosts = true
     backtotop = true
+    glowlogo = true # if want logo to have glowing style, set true.
+    scrollindicator = true # if need scroll indicator on the top, set true
     gridstyle = true  # list post with grid style. If false then simple list
     readingtime = true  #display reading time
     firstpic = true  # display first picture as thumbnail if no thumbnail set. For gridstyle only
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index 9b14356..6a8a68d 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -40,6 +40,75 @@
 
     
   </div>
+
+  <!-- Back to top -->
+    {{ if .Site.Params.backtotop }}
+      <div id="backtotop" class="w3-hide-small w3-hide-medium">
+  
+        <button onclick="topFunction()" class="w3-btn w3-red w3-large" style="width:160px">{{ T "backtotop"}}
+        &rarr;</button>
+        
+      </div>
+
+      <script>
+        function topFunction() {
+          document.body.scrollTop = 0;
+          document.documentElement.scrollTop = 0;
+      }
+      </script>
+
+
+    {{ end }}
+
+    <!-- scroll indicator -->
+    {{ if .Site.Params.scrollindicator }}
+      <div class="progress-container" id="scrollbar">
+        <div class="progress-bar" id="progress-bar"></div>
+      </div>  
+
+
+    {{ end }}
+<script>
+// When the user scrolls down 50px from the top of the document, show the button
+window.onscroll = function() {scrollFunction()};
+
+function scrollFunction() {
+  <!-- TOC -->
+    {{ if and (ge (len .TableOfContents) 100) (ne .Params.toc "false")  }}
+    
+    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+        document.getElementById("toc").style.display = "block";
+    } else {
+        document.getElementById("toc").style.display = "none";
+    }
+    {{ end }}
+<!-- Back to top -->
+    {{ if .Site.Params.backtotop }}
+    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
+        document.getElementById("backtotop").style.display = "block";
+    } else {
+        document.getElementById("backtotop").style.display = "none";
+    }
+    {{ end }}
+    <!-- scroll indicator -->
+    {{ if .Site.Params.scrollindicator }}
+      var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
+      var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
+      var scrolled = (winScroll / height) * 100;
+      document.getElementById("progress-bar").style.width = scrolled + "%";
+      if (document.body.scrollTop > 20 || document.documentElement.scrollTop > 20) {
+            document.getElementById("scrollbar").style.display = "block";
+        } else {
+            document.getElementById("scrollbar").style.display = "none";
+        }
+    
+
+    {{ end }}
+}
+
+
+</script>
+
   {{ with .Params.customfooter }}
 {{ . | safeHTML }}
 {{ end }}
diff --git a/layouts/partials/header.html b/layouts/partials/header.html
index b712e89..e5e34e7 100644
--- a/layouts/partials/header.html
+++ b/layouts/partials/header.html
@@ -37,7 +37,7 @@
   <div class="w3-content">
   
   <div class="w3-container w3-center w3-padding-32 w3-hide-small"> 
-      <h1 class="w3-xxxlarge w3-text-blue w3-wide w3-allerta" style="text-shadow:1px 1px 0 #444" ><u>
+      <h1 class="w3-xxxlarge w3-text-blue w3-wide w3-allerta {{ if .Site.Params.glowlogo }} glow {{ end }} " style="text-shadow:1px 1px 0 #444" ><u>
       {{ with .Site.Params.logotext }}
          {{ . }}
       {{ else }}
diff --git a/layouts/post/single.html b/layouts/post/single.html
index 53c1808..fd29ef9 100644
--- a/layouts/post/single.html
+++ b/layouts/post/single.html
@@ -15,51 +15,7 @@
       </div>
     {{ end }}
 
- <!-- Back to top -->
-    {{ if .Site.Params.backtotop }}
-      <div id="backtotop" class="w3-hide-small w3-hide-medium">
-  
-        <button onclick="topFunction()" class="w3-btn w3-red w3-large" style="width:160px">{{ T "backtotop"}}
-        &rarr;</button>
-        
-      </div>
-
-      <script>
-        function topFunction() {
-          document.body.scrollTop = 0;
-          document.documentElement.scrollTop = 0;
-      }
-      </script>
-
-
-    {{ end }}
-<script>
-// When the user scrolls down 50px from the top of the document, show the button
-window.onscroll = function() {scrollFunction()};
-
-function scrollFunction() {
-  <!-- TOC -->
-    {{ if and (ge (len .TableOfContents) 100) (ne .Params.toc "false")  }}
-    
-    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
-        document.getElementById("toc").style.display = "block";
-    } else {
-        document.getElementById("toc").style.display = "none";
-    }
-    {{ end }}
-<!-- Back to top -->
-    {{ if .Site.Params.backtotop }}
-    if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
-        document.getElementById("backtotop").style.display = "block";
-    } else {
-        document.getElementById("backtotop").style.display = "none";
-    }
-    {{ end }}
-}
-
-
-</script>
-
+ 
      
 
 
diff --git a/static/css/style.css b/static/css/style.css
index 8ea75d6..dad60a5 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -269,4 +269,40 @@ em {
     transition: all 0.2s ease,transform 0.6s ease,-webkit-transform 0.6s ease;
  
    
+}
+
+/* glowing logo */
+.glow {
+  
+  
+  -webkit-animation: glow 3s ease-in-out infinite alternate;
+  -moz-animation: glow 3s ease-in-out infinite alternate;
+  animation: glow 3s ease-in-out infinite alternate;
+}
+
+@-webkit-keyframes glow {
+  from {
+     text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 30px #DD4132, 0 0 40px #DD4132, 0 0 50px #DD4132, 0 0 60px #DD4132, 0 0 70px #DD4132;
+  }
+  to {
+    text-shadow: 0 0 20px #fff, 0 0 30px #fff, 0 0 40px #9E1030, 0 0 50px #9E1030, 0 0 60px #9E1030, 0 0 70px #9E1030, 0 0 80px #9E1030;
+  }
+}
+/* scroll indicator */
+.progress-container {
+display:none;
+position: fixed;
+  top: 0;
+  z-index: 1;
+  width: 100%;
+  background-color: #f1f1f1;
+  width: 100%;
+  height: 4px;
+  background: #ccc;
+}
+
+.progress-bar {
+  height: 4px;
+  background: #f44336;
+  width: 0%;
 }
\ No newline at end of file
diff --git a/theme.toml b/theme.toml
index 8cc99aa..23490e7 100644
--- a/theme.toml
+++ b/theme.toml
@@ -6,7 +6,7 @@ license = "MIT"
 licenselink = "https://github.com/jesselau76/hugo-w3-simple/blob/master/LICENSE"
 description = "A simple theme for Hugo, powered by W3.css"
 homepage = "https://github.com/jesselau76/hugo-w3-simple"
-tags = ["minimal", "blog", "search", "clean", "simple", "starter", "minimalist","Responsive", "Disqus", "font-awesome","syntax highlighting"]
+tags = ["minimal", "blog", "search", "clean", "simple", "starter", "minimalist","Responsive", "Disqus", "font-awesome","syntax highlighting","Multilingual"]
 features = ["blog", "syntax highlighting"]
 min_version = "0.41"