More fixes

2025-06-08 13:05:38 +00:00
parent d0b0346016
commit e698b88624
7 changed files with 600 additions and 242 deletions
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -2868,7 +2868,8 @@ a:focus-visible {
    margin-top: 60px;
 }

-.related-articles h2 {
+.related-articles h2,
+.related-articles h3 {
    font-size: 2rem;
    font-weight: 600;
    margin-bottom: 40px;
@@ -2876,6 +2877,14 @@ a:focus-visible {
    text-align: center;
 }

+/* Handle both aside and section elements */
+aside.related-articles {
+    padding: 40px 0;
+    background: #f8f9fa;
+    border-top: 1px solid #e1e5e9;
+    margin-top: 40px;
+}
+
 .related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
@@ -2898,23 +2907,42 @@ a:focus-visible {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
 }

-.related-card h3 {
+.related-card h3,
+.related-card h4 {
    font-size: 1.3rem;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.3;
 }

-.related-card h3 a {
+.related-card h3 a,
+.related-card h4 a {
    color: #1a1a1a;
    text-decoration: none;
    transition: color 0.3s ease;
 }

-.related-card h3 a:hover {
+.related-card h3 a:hover,
+.related-card h4 a:hover {
    color: #179e83;
 }

+.related-card .category {
+    background: #179e83;
+    color: white;
+    padding: 4px 12px;
+    border-radius: 20px;
+    font-size: 0.8rem;
+    font-weight: 500;
+    display: inline-block;
+    margin-bottom: 12px;
+}
+
+.related-card span.category {
+    display: inline-block;
+    margin-bottom: 12px;
+}
+
 .related-card p {
    color: #666;
    line-height: 1.6;
@@ -3230,4 +3258,247 @@ a:focus-visible {
        font-size: 11px;
        padding: 4px 8px;
    }
+}
+
+/* Technology Showcase Section */
+.technology-showcase {
+    padding: 80px 0;
+    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
+    position: relative;
+}
+
+.technology-showcase::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="%23e2e8f0" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
+    opacity: 0.3;
+    pointer-events: none;
+}
+
+.technology-showcase .container {
+    position: relative;
+    z-index: 1;
+}
+
+.technology-showcase h2 {
+    text-align: center;
+    margin-bottom: 50px;
+    color: #1a202c;
+    font-size: 2.5rem;
+    font-weight: 700;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+}
+
+.tech-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 30px;
+    max-width: 1000px;
+    margin: 0 auto;
+}
+
+.tech-card {
+    background: white;
+    padding: 40px 30px;
+    border-radius: 16px;
+    text-align: center;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    transition: all 0.3s ease;
+    border: 1px solid #e2e8f0;
+    position: relative;
+    overflow: hidden;
+}
+
+.tech-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    height: 4px;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    transform: scaleX(0);
+    transition: transform 0.3s ease;
+}
+
+.tech-card:hover::before {
+    transform: scaleX(1);
+}
+
+.tech-card:hover {
+    transform: translateY(-8px);
+    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
+    border-color: #cbd5e0;
+}
+
+.tech-icon {
+    font-size: 3rem;
+    margin-bottom: 20px;
+    display: block;
+    line-height: 1;
+    filter: grayscale(0.2);
+    transition: all 0.3s ease;
+}
+
+.tech-card:hover .tech-icon {
+    transform: scale(1.1);
+    filter: grayscale(0);
+}
+
+.tech-card h3 {
+    color: #1a202c;
+    font-size: 1.5rem;
+    font-weight: 600;
+    margin: 0 0 15px 0;
+    transition: color 0.3s ease;
+}
+
+.tech-card:hover h3 {
+    color: #144784;
+}
+
+.tech-card p {
+    color: #64748b;
+    font-size: 1rem;
+    line-height: 1.6;
+    margin: 0;
+    font-weight: 500;
+}
+
+/* Responsive Design for Technology Showcase */
+@media (max-width: 768px) {
+    .technology-showcase {
+        padding: 60px 0;
+    }
+    
+    .technology-showcase h2 {
+        font-size: 2rem;
+        margin-bottom: 40px;
+    }
+    
+    .tech-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+    }
+    
+    .tech-card {
+        padding: 30px 20px;
+    }
+    
+    .tech-icon {
+        font-size: 2.5rem;
+        margin-bottom: 15px;
+    }
+    
+    .tech-card h3 {
+        font-size: 1.3rem;
+    }
+}
+
+/* Capabilities Grid (used in project-types.php) */
+.capabilities-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    gap: 40px;
+    margin: 40px 0;
+}
+
+.capability-card {
+    background: white;
+    padding: 30px;
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
+    border-left: 4px solid #179e83;
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
+}
+
+.capability-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
+    border-left-color: #144784;
+}
+
+.capability-card h3 {
+    color: #1a202c;
+    font-size: 1.3rem;
+    font-weight: 600;
+    margin: 0 0 15px 0;
+    transition: color 0.3s ease;
+}
+
+.capability-card:hover h3 {
+    color: #144784;
+}
+
+.capability-card p {
+    color: #64748b;
+    line-height: 1.6;
+    margin: 0 0 20px 0;
+}
+
+.capability-card ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+}
+
+.capability-card li {
+    color: #4a5568;
+    margin: 8px 0;
+    padding-left: 20px;
+    position: relative;
+    font-size: 0.95rem;
+}
+
+.capability-card li::before {
+    content: '✓';
+    position: absolute;
+    left: 0;
+    color: #179e83;
+    font-weight: bold;
+    font-size: 1rem;
+}
+
+/* Technology badges/tags styling */
+.tech-tag {
+    display: inline-block;
+    background: linear-gradient(135deg, #144784 0%, #179e83 100%);
+    color: white;
+    padding: 6px 12px;
+    border-radius: 20px;
+    font-size: 0.9rem;
+    margin: 4px 8px 4px 0;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.tech-tag:hover {
+    transform: scale(1.05);
+    box-shadow: 0 2px 8px rgba(20, 71, 132, 0.3);
+}
+
+/* Responsive design for capabilities grid */
+@media (max-width: 768px) {
+    .capabilities-grid {
+        grid-template-columns: 1fr;
+        gap: 20px;
+        margin: 30px 0;
+    }
+    
+    .capability-card {
+        padding: 25px 20px;
+    }
+    
+    .capability-card h3 {
+        font-size: 1.2rem;
+    }
 }
--- a/assets/js/main.js
+++ b/assets/js/main.js
@@ -614,4 +614,126 @@ document.addEventListener('DOMContentLoaded', function() {
    
    console.log('UK Data Services website initialized successfully');
    console.log('Performance optimizations: Lazy loading, WebP support, and preloading enabled');
+    
+    // Universal Blog Pagination System
+    initializeBlogPagination();
+    
+    function initializeBlogPagination() {
+        const paginationContainer = document.querySelector('.blog-pagination');
+        const articlesGrid = document.querySelector('.articles-grid');
+        
+        if (!paginationContainer || !articlesGrid) {
+            return; // No pagination on this page
+        }
+        
+        const prevButton = paginationContainer.querySelector('button:first-child');
+        const nextButton = paginationContainer.querySelector('button:last-child');
+        const paginationInfo = paginationContainer.querySelector('.pagination-info');
+        
+        if (!prevButton || !nextButton || !paginationInfo) {
+            return; // Invalid pagination structure
+        }
+        
+        // Get current page from URL or default to 1
+        const urlParams = new URLSearchParams(window.location.search);
+        let currentPage = parseInt(urlParams.get('page')) || 1;
+        
+        // Get all articles on the page
+        const allArticles = Array.from(articlesGrid.querySelectorAll('.article-card'));
+        const articlesPerPage = 6;
+        const totalPages = Math.ceil(allArticles.length / articlesPerPage);
+        
+        // If we have actual multiple pages of content, use the original pagination logic
+        // Otherwise, implement client-side pagination
+        if (totalPages <= 1) {
+            // Hide pagination if not needed
+            paginationContainer.style.display = 'none';
+            return;
+        }
+        
+        function renderPage(page) {
+            // Hide all articles
+            allArticles.forEach(article => {
+                article.style.display = 'none';
+            });
+            
+            // Show articles for current page
+            const startIndex = (page - 1) * articlesPerPage;
+            const endIndex = startIndex + articlesPerPage;
+            
+            for (let i = startIndex; i < endIndex && i < allArticles.length; i++) {
+                allArticles[i].style.display = 'block';
+                allArticles[i].style.animation = 'fadeInUp 0.6s ease forwards';
+            }
+            
+            // Update pagination info
+            paginationInfo.textContent = `Page ${page} of ${totalPages}`;
+            
+            // Update button states
+            prevButton.disabled = (page <= 1);
+            nextButton.disabled = (page >= totalPages);
+            
+            // Update URL without page reload
+            const newUrl = new URL(window.location);
+            if (page > 1) {
+                newUrl.searchParams.set('page', page);
+            } else {
+                newUrl.searchParams.delete('page');
+            }
+            window.history.replaceState({}, '', newUrl);
+            
+            // Scroll to articles section
+            articlesGrid.scrollIntoView({
+                behavior: 'smooth',
+                block: 'start'
+            });
+        }
+        
+        // Event listeners
+        prevButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (currentPage > 1) {
+                currentPage--;
+                renderPage(currentPage);
+            }
+        });
+        
+        nextButton.addEventListener('click', function(e) {
+            e.preventDefault();
+            if (currentPage < totalPages) {
+                currentPage++;
+                renderPage(currentPage);
+            }
+        });
+        
+        // Initialize first page
+        renderPage(currentPage);
+        
+        // Add CSS animation for article transitions
+        const style = document.createElement('style');
+        style.textContent = `
+            @keyframes fadeInUp {
+                from {
+                    opacity: 0;
+                    transform: translateY(20px);
+                }
+                to {
+                    opacity: 1;
+                    transform: translateY(0);
+                }
+            }
+            
+            .article-card {
+                transition: opacity 0.3s ease, transform 0.3s ease;
+            }
+            
+            .article-card[style*="display: none"] {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+        `;
+        document.head.appendChild(style);
+        
+        console.log(`Blog pagination initialized: ${totalPages} pages, ${allArticles.length} articles`);
+    }
 });