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;