From 9a0bd17626adbe97d97662b2877958b2837afb73 Mon Sep 17 00:00:00 2001
From: OvrK12 <krauso@tcd.ie>
Date: Tue, 30 Apr 2024 12:03:23 +0200
Subject: [PATCH] Hide publications button on page load

---
 _pages/publications.md | 10 ++++++++++
 _sass/_base.scss       | 17 ++++++++++++++++-
 2 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/_pages/publications.md b/_pages/publications.md
index 2b53fcd..c0251ac 100644
--- a/_pages/publications.md
+++ b/_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>
\ No newline at end of file
diff --git a/_sass/_base.scss b/_sass/_base.scss
index 185f59f..6423bb5 100644
--- a/_sass/_base.scss
+++ b/_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;