added fade out

static/skin/index.js

@@ -57,10 +57,13 @@
 
     function toggleFooter(show=false) {
         const footer = document.getElementById('kiwixfooter');
+        const fadeOutDiv = document.getElementsByClassName('fadeOut')[0];
         if (footer.style.display === 'none' && show) {
             footer.style.display = 'block';
+            fadeOutDiv.style.display = 'none';
         } else if (footer.style.display !== 'none' && !show) {
             footer.style.display = 'none';
+            fadeOutDiv.style.display = 'block';
         }
     }
 

static/templates/index.html

@@ -137,8 +137,8 @@
         border: 2px solid #f3f3f3;
         border-radius: 50%;
         border-top: 2px solid #3498db;
-        width: 30px;
+        width: 50px;
-        height: 30px;
+        height: 50px;
         margin: auto;
         -webkit-animation: spin 0.5s linear infinite; /* Safari */
         animation: spin 2s linear infinite;
@@ -167,6 +167,15 @@
         height: 100%;
         z-index: 100;
       }
+      .fadeOut {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 1;
+        background: linear-gradient(180deg, #e8e8e8 50%, rgb(138, 137, 137) 100%);
+        height: 30px;
+        width: 100%;
+      }
     </style>
     <script src="{{root}}/skin/isotope.pkgd.min.js" defer></script>
     <script src="{{root}}/skin/categoryList.js"></script>
@@ -190,7 +199,8 @@
     <div class="kiwixHomeBody">
       <div class="book__list"></div>
     </div>
-    <div class=loader><div class="loader-spinner"></div></div>
+    <div class="loader"><div class="loader-spinner"></div></div>
     <div id="kiwixfooter">Powered by <a href="https://kiwix.org">Kiwix</a></div>
+    <div class="fadeOut"></div>
   </body>
 </html>