Hide publications button on page load

_pages/publications.md

@@ -16,6 +16,9 @@ nav_order: 6
 
 
 <script>
+/*
+  Reveal more publications on button click
+*/
 document.addEventListener('DOMContentLoaded', function() {
   const publicationContainer = document.querySelector('.publications');
   const showMoreBtn = document.getElementById('show-more-btn');
@@ -39,7 +42,14 @@ document.addEventListener('DOMContentLoaded', function() {
     }
 
     showMoreBtn.addEventListener('click', showMoreItems);
+    // display first items
     showMoreItems();
+
+    // only show button after first items have been displayed
+    if (currentVisibleIndex < publicationItems.length) {
+        showMoreBtn.style.display = 'block';
+    }
+
   }
 });
 </script>

_sass/_base.scss

@@ -483,7 +483,9 @@ footer.sticky-bottom {
 
 .publications .item {
   display: none;
-  transition: opacity 2.5s ease-in-out; 
+  animation: fadeInAnimation ease 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 
 .publications .container {
@@ -573,13 +575,26 @@ footer.sticky-bottom {
   color: #ffffff;
   background-color: var(--global-theme-color);
   box-shadow: none;
+  display: none;
   transition: background-color 0.3s ease;
+  animation: fadeInAnimation ease 0.5s;
+  animation-iteration-count: 1;
+  animation-fill-mode: forwards;
 }
 
 .publications .show-more:hover {
   background-color: var(--global-hover-color);
 }
 
+@keyframes fadeInAnimation {
+  0% {
+      opacity: 0;
+  }
+  100% {
+      opacity: 1;
+  }
+}
+
 // Rouge Color Customization
 figure.highlight {
   margin: 0 0 1rem;