Skip to content

🎨 Palette: Micro-UX Enhancements #215

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
ruhdevops wants to merge 1 commit into
base: main
Choose a base branch
from
Draft

🎨 Palette: Micro-UX Enhancements #215

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions .Jules/palette.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -50,3 +50,7 @@
## 2025-05-14 - Social Sharing Implementation
**Learning:** Placeholders for social sharing buttons significantly degrade UX when users expect to share discovered content. Standardizing these intents with popup windows (550x450) provides a "premium" feel while keeping users on the platform.
**Action:** Always verify if sharing icons in modals are functional; if not, implement standardized platform intents using centered popups.

## 2026-06-27 - Tactile Feedback and Logo-Navigation Patterns
**Learning:** Adding a subtle :active scale effect (0.97) across all interactive elements provides immediate, satisfying tactile feedback that improves the "feel" of the application. Using the brand logo as a "Back to Top" trigger is an intuitive navigation pattern for long-scrolling archives.
**Action:** Implement global :active scale transforms for all interactive components. Ensure brand logos are keyboard-accessible and serve as navigation anchors to the page top.
13 changes: 13 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -590,6 +590,19 @@ body {
transform: translateY(0);
}

.btn:active,
.action-btn:active,
.nav-link:active,
.card:active,
.chip:active,
.social-links a:active,
.scroll-to-top:active,
.menu-toggle:active,
.search-clear:active,
.navbar-brand:active {
transform: scale(0.97);
}

.btn-secondary {
background-color: rgba(255, 255, 255, 0.15);
color: white;
Expand Down
10 changes: 5 additions & 5 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@
<!-- Navigation Header -->
<header class="navbar">
<div class="navbar-container">
<div class="navbar-brand">
<div class="navbar-brand" title="Back to Top" role="button" tabindex="0">
<div class="brand-icon">
<svg viewBox="0 0 100 100" width="32" height="32" fill="currentColor">
<path d="M50 10 L90 90 L10 90 Z"/>
Expand Down Expand Up @@ -168,7 +168,7 @@ <h2 class="hero-title" id="hero-title">Exploring Islamic History</h2>
autocomplete="off"
>
<kbd class="search-kbd-hint">/</kbd>
<button id="clearSearch" class="search-clear" aria-label="Clear search" style="display: none;">
<button id="clearSearch" class="search-clear" aria-label="Clear search" title="Clear search" style="display: none;">
<i class="fas fa-times"></i>
</button>
<div id="searchDropdown" class="search-dropdown"></div>
Expand Down Expand Up @@ -606,9 +606,9 @@ <h2>Episode Notes</h2>
<h3 class="premium-gradient-text">Ruh Al Tarikh</h3>
<p>A cinematic archive exploring Islamic history, scripture, and contested ideas through a professional, high-fidelity lens.</p>
<div class="social-links mt-4">
<a href="https://www.youtube.com/@Ruh-Al-Tarikh" target="_blank" rel="noopener" aria-label="YouTube"><i class="fab fa-youtube"></i></a>
<a href="#" aria-label="Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Instagram"><i class="fab fa-instagram"></i></a>
<a href="https://www.youtube.com/@Ruh-Al-Tarikh" target="_blank" rel="noopener" aria-label="YouTube" title="Follow on YouTube"><i class="fab fa-youtube"></i></a>
<a href="#" aria-label="Twitter" title="Follow on Twitter"><i class="fab fa-twitter"></i></a>
<a href="#" aria-label="Instagram" title="Follow on Instagram"><i class="fab fa-instagram"></i></a>
</div>
</div>
<div class="footer-section">
Expand Down
14 changes: 14 additions & 0 deletions js/app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1033,6 +1033,20 @@ function bindEvents() {
});

// Hero buttons
// Brand Scroll to Top
const brand = document.querySelector('.navbar-brand');
if (brand) {
brand.addEventListener('click', () => {
window.scrollTo({ top: 0, behavior: 'smooth' });
});
brand.addEventListener('keydown', (e) => {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
window.scrollTo({ top: 0, behavior: 'smooth' });
}
});
}

// Navbar Episodes Scroll
if (DOM.episodesNavBtn && DOM.episodesSection) {
DOM.episodesNavBtn.addEventListener('click', () => {
Expand Down
Loading