diff --git a/website/main.js b/website/main.js
index 7b826ba..8b5a9a1 100644
--- a/website/main.js
+++ b/website/main.js
@@ -482,8 +482,9 @@ async function processPostQueue() {
isProcessingQueue = false;
- // Hide loading indicator when all posts are processed
+ // Replace loading indicator with "view more" button when all posts are processed
hideLoadingIndicator();
+ showViewMoreButton();
}
function layoutPosts(postElements) {
@@ -528,6 +529,21 @@ function hideLoadingIndicator() {
}
}
+function showViewMoreButton() {
+ const postsContainer = document.getElementById("posts");
+ const viewMoreDiv = document.createElement("a");
+ viewMoreDiv.href = "https://bsky.app/profile/lit.mates.dev";
+ viewMoreDiv.target = "_blank";
+ viewMoreDiv.className = "view-more-posts";
+ viewMoreDiv.innerHTML = `
+
+ View more on Bluesky →
+ Follow @lit.mates.dev for more posts
+
+ `;
+ postsContainer.appendChild(viewMoreDiv);
+}
+
async function fetchPosts() {
// Show loading indicator
showLoadingIndicator();
diff --git a/website/style.css b/website/style.css
index 61dac20..902ab22 100644
--- a/website/style.css
+++ b/website/style.css
@@ -97,7 +97,6 @@ h1 {
}
.social-links a:hover {
- color: var(--accent);
transform: scale(1.1);
transition: transform 0.3s ease;
text-shadow: 0 0 3px white;
@@ -107,7 +106,7 @@ h1 {
color: var(--github);
}
-social-links a:hover .fab.fa-youtube {
+.social-links a:hover .fab.fa-youtube {
color: var(--youtube);
}
@@ -660,8 +659,8 @@ footer a:hover {
animation: slideUpFadeIn 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
-/* Loading indicator styles */
-.loading-posts {
+/* Loading indicator and view more button styles */
+.loading-posts, .view-more-posts {
text-align: center;
margin: 2rem auto;
padding: 2rem;
@@ -673,9 +672,22 @@ footer a:hover {
color: #666;
font-family: inherit;
position: relative;
+ transition: transform 0.3s ease, box-shadow 0.3s ease;
}
-.loading-posts::before {
+.view-more-posts {
+ cursor: pointer;
+ text-decoration: none;
+ display: block;
+}
+
+.view-more-posts:hover {
+ transform: rotate(-1deg) scale(1.05);
+ box-shadow: 6px 6px 0 var(--shadow-light);
+ color: var(--bluesky);
+}
+
+.loading-posts::before, .view-more-posts::before {
content: "";
position: absolute;
top: 5px;
@@ -688,7 +700,7 @@ footer a:hover {
filter: blur(3px);
}
-.loading-posts-content {
+.loading-posts-content, .view-more-posts-content {
position: relative;
z-index: 1;
}