From 09dbd77cc0ba24fbe07a1589686d51afce09a78b Mon Sep 17 00:00:00 2001 From: fynks <75840152+fynks@users.noreply.github.com> Date: Mon, 9 Mar 2026 11:15:18 +0500 Subject: [PATCH] fix(styles): correct animation duration syntax and enhance header blur effect --- dist/css/styles.css | 93 +++++---------------------------------------- dist/index.html | 46 ++-------------------- 2 files changed, 13 insertions(+), 126 deletions(-) diff --git a/dist/css/styles.css b/dist/css/styles.css index e214a70..12eef41 100644 --- a/dist/css/styles.css +++ b/dist/css/styles.css @@ -3,9 +3,9 @@ *, *::before, *::after { - animation-duration: .01ms !important; + animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; - transition-duration: .01ms !important; + transition-duration: 0.01ms !important; scroll-behavior: auto !important } } @@ -150,9 +150,9 @@ *, *::before, *::after { - animation-duration: .01ms !important; + animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; - transition-duration: .01ms !important; + transition-duration: 0.01ms !important; scroll-behavior: auto !important } } @@ -333,10 +333,10 @@ button:focus-visible { .header-blur-bg { position: absolute; inset: 0; - background: rgba(255, 255, 255, 0); - backdrop-filter: blur(0) saturate(100%); - -webkit-backdrop-filter: blur(0) saturate(100%); - border-bottom: 1px solid transparent; + background: rgba(255, 255, 255, .9); + backdrop-filter: blur(12px) saturate(140%); + -webkit-backdrop-filter: blur(12px) saturate(140%); + border-bottom: 1px solid var(--border-primary); transition: all var(--transition-normal); z-index: -1; will-change: backdrop-filter, background, border-bottom; @@ -365,7 +365,7 @@ button:focus-visible { } [data-theme="dark"] .header-blur-bg { - background: rgba(15, 23, 42, 0); + background: rgba(15, 23, 42, .9); } [data-theme="dark"] .site-header.is-scrolled .header-blur-bg { @@ -4265,51 +4265,6 @@ table tbody tr[tabindex="0"] { } } -/* ===== ENHANCED LOADING STATES ===== */ -.btn:disabled { - opacity: 0.6; - cursor: not-allowed; - pointer-events: none; - filter: grayscale(0.3); -} - -.btn:disabled:hover { - transform: none; -} - -/* Loading spinner animation */ -.loading-spinner { - display: inline-block; - width: 20px; - height: 20px; - border: 3px solid var(--border-primary); - border-top-color: var(--primary); - border-radius: 50%; - animation: spin 0.8s linear infinite; -} - -@keyframes spin { - to { - transform: rotate(360deg); - } -} - -/* Search results animation */ -.search-results { - animation: slideDown 0.2s ease-out; -} - -@keyframes slideDown { - from { - opacity: 0; - transform: translateY(-10px); - } - to { - opacity: 1; - transform: translateY(0); - } -} - /* ===== IMPROVED TOUCH TARGETS ===== */ @media (pointer: coarse) { button, @@ -4408,36 +4363,6 @@ table tbody tr[tabindex="0"] { margin-top: var(--space-lg); } -/* ===== LOAD ALL BUTTON ENHANCEMENTS ===== */ -.load-all-container { - animation: fadeIn 0.3s ease-out; -} - -@keyframes fadeIn { - from { - opacity: 0; - } - to { - opacity: 1; - } -} - -.load-all-btn { - display: inline-flex; - align-items: center; - justify-content: center; - gap: var(--space-sm); - transition: all 0.2s ease; -} - -.load-all-btn svg { - transition: transform 0.2s ease; -} - -.load-all-btn:hover:not(:disabled) svg { - transform: translateY(3px); -} - /* ===== COMPARISON TABLE MOBILE IMPROVEMENTS ===== */ @media (max-width: 767px) { .comparison-table { diff --git a/dist/index.html b/dist/index.html index 0db7946..975eca6 100644 --- a/dist/index.html +++ b/dist/index.html @@ -29,8 +29,8 @@ - - + + - - - - - - + @@ -2163,38 +2152,11 @@ } })(); - // Scrollspy & Smooth Scroll - Separate Module + // Smooth Scroll - Separate Module (function() { 'use strict'; const init = () => { - const nav = document.getElementById('primary-navigation'); - if (!nav) return; - - // Scrollspy for active nav link - const sectionIds = Array.from(nav.querySelectorAll('a[href^="#"]') || []) - .map(a => a.getAttribute('href')) - .filter(Boolean); - const sections = sectionIds.map(id => document.querySelector(id)).filter(Boolean); - - if ('IntersectionObserver' in window && sections.length) { - const observer = new IntersectionObserver(entries => { - entries.forEach(entry => { - const id = '#' + entry.target.id; - const link = nav.querySelector(`a[href="${id}"]`); - if (link && entry.isIntersecting) { - nav.querySelectorAll('.nav-link.active').forEach(l => { - l.classList.remove('active'); - l.removeAttribute('aria-current'); - }); - link.classList.add('active'); - link.setAttribute('aria-current', 'page'); - } - }); - }, { rootMargin: '-40% 0px -50% 0px', threshold: [0, 0.25, 0.5, 1] }); - sections.forEach(sec => observer.observe(sec)); - } - // Smooth scroll for anchor links const prefersReduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches; document.querySelectorAll('a[href^="#"]').forEach(anchor => {