Designer Frontend Senior pour la personnalisation de thèmes de blog

/* ===== A-Tier: Scroll Progress Bar ===== */ body.tt-body-page #scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); z-index: 9999; width: 0%; transition: width 0.1s ease-out; } /* ===== A-Tier: Back-to-Top Button ===== */ #back-to-top { position: fixed; bottom: 30px; right: 30px; width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); border: none; cursor: pointer; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; z-index: 9998; box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4); } #back-to-top.visible { opacity: 1; visibility: visible; } #back-to-top:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(102, 126, 234, 0.6); } #back-to-top .chevron-up { width: 12px; height: 12px; border-left: 3px solid #fff; border-top: 3px solid #fff; transform: rotate(45deg); display: block; margin: 18px auto 0; } /* ===== A-Tier: Sidebar Profile Section ===== */ .sidebar-profile { text-align: center; padding: 30px 20px; margin-bottom: 20px; background: rgba(255, 255, 255, 0.05); border-radius: 12px; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.1); } .sidebar-profile .profile-avatar { width: 80px; height: 80px; border-radius: 50%; margin: 0 auto 15px; padding: 3px; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); } .sidebar-profile .profile-avatar img { width: 100%; height: 100%; border-radius: 50%; border: 3px solid #1a1a2e; object-fit: cover; } .sidebar-profile .profile-name { color: #fff; font-size: 18px; font-weight: 600; margin-bottom: 8px; } .sidebar-profile .profile-desc { color: rgba(255, 255, 255, 0.7); font-size: 13px; line-height: 1.5; } /* ===== A-Tier: Category Count Badges ===== */ .category-item { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border-radius: 6px; transition: background 0.2s ease; } .category-item:hover { background: rgba(255, 255, 255, 0.1); } .category-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-size: 11px; font-weight: 500; background: linear-gradient(135deg, var(--accent-primary), var(--accent-secondary)); color: #fff; opacity: 0.9; } .category-item.sub-category .category-badge { opacity: 0.6; font-size: 10px; } /* ===== B-Tier: Hero Wave Separator ===== */ .hero-section { position: relative; } .hero-section::after { content: ''; position: absolute; bottom: -1px; left: 0; width: 100%; height: 60px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23ffffff'/%3E%3C/svg%3E") no-repeat bottom center; background-size: cover; z-index: 1; } /* ===== B-Tier: Floating TOC ===== */ body.tt-body-page #floating-toc { position: fixed; right: 20px; top: 50%; transform: translateY(-50%); width: 220px; max-height: 70vh; overflow-y: auto; background: rgba(255, 255, 255, 0.95); border-radius: 8px; padding: 15px; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1); z-index: 9997; display: none; } @media (min-width: 1200px) { body.tt-body-page #floating-toc { display: block; } } #floating-toc .toc-title { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 10px; padding-bottom: 8px; border-bottom: 2px solid var(--accent-primary); } #floating-toc .toc-list { list-style: none; padding: 0; margin: 0; } #floating-toc .toc-list li { margin-bottom: 4px; } #floating-toc .toc-list a { display: block; padding: 6px 10px; color: #666; font-size: 13px; text-decoration: none; border-left: 3px solid transparent; transition: all 0.2s ease; line-height: 1.4; } #floating-toc .toc-list a:hover { color: var(--accent-primary); background: rgba(102, 126, 234, 0.1); } #floating-toc .toc-list a.active { color: var(--accent-primary); border-left-color: var(--accent-primary); background: rgba(102, 126, 234, 0.1); font-weight: 500; } #floating-toc .toc-list a.toc-h3 { padding-left: 20px; font-size: 12px; } /* Mobile drawer adjustments */ @media (max-width: 767px) { .sidebar-profile { padding: 20px 15px; } .sidebar-profile .profile-avatar { width: 60px; height: 60px; } } ``` ```html tag) ===== --> ) ===== --> [##_blog_name_##] [##_blog_description_##] on post pages) ===== --> Table of Contents ``` ```javascript // ===== A-Tier: Scroll Progress Bar ===== (function() { const progressBar = document.getElementById('scroll-progress'); if (!progressBar) return; const updateProgress = () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; const docHeight = document.documentElement.scrollHeight - window.innerHeight; const progress = docHeight > 0 ? (scrollTop / docHeight) * 100 : 0; progressBar.style.width = progress + '%'; }; window.addEventListener('scroll', updateProgress, { passive: true }); window.addEventListener('resize', updateProgress); updateProgress(); })(); // ===== A-Tier: Back-to-Top Button ===== (function() { const backToTop = document.getElementById('back-to-top'); if (!backToTop) return; const toggleVisibility = () => { const scrollTop = window.pageYOffset || document.documentElement.scrollTop; backToTop.classList.toggle('visible', scrollTop > 300); }; backToTop.addEventListener('click', () => { window.scrollTo({ top: 0, behavior: 'smooth' }); }); window.addEventListener('scroll', toggleVisibility, { passive: true }); toggleVisibility(); })(); // ===== B-Tier: Floating TOC ===== (function() { const tocContainer = document.getElementById('floating-toc'); if (!tocContainer) return; const articleView = document.getElementById('article-view'); if (!articleView) return; const headings = articleView.querySelectorAll('h2, h3'); if (headings.length { if (!heading.id) { heading.id = 'toc-heading-' + index; } const li = document.createElement('li'); const a = document.createElement('a'); a.href = '#' + heading.id; a.textContent = heading.textContent; a.classList.add(heading.tagName === 'H3' ? 'toc-h3' : 'toc-h2'); a.dataset.target = heading.id; li.appendChild(a); tocList.appendChild(li); headingElements.push({ id: heading.id, element: heading, link: a }); }); // IntersectionObserver for active state const observerOptions = { rootMargin: '-80px 0px -70% 0px', threshold: 0 }; const observer = new IntersectionObserver((entries) => { entries.forEach(entry => { if (entry.isIntersecting) { headingElements.forEach(item => { item.link.classList.toggle('active', item.id === entry.target.id); }); } }); }, observerOptions); headingElements.forEach(item => observer.observe(item.element)); // Smooth scroll for TOC links tocList.addEventListener('click', (e) => { if (e.target.tagName === 'A') { e.preventDefault(); const targetId = e.target.dataset.target; const targetElement = document.getElementById(targetId); if (targetElement) { targetElement.scrollIntoView({ behavior: 'smooth', block: 'start' }); } } }); })();

Designer Frontend Senior pour la personnalisation de thèmes de blog

Contenu du PromptEnregistrer

Connectez-vous pour voir le prompt complet

Utilisation

Références

Discussion