From 6fc159051ae79d129342213ab81cabad22f194f3 Mon Sep 17 00:00:00 2001 From: Local Server Date: Wed, 14 Jan 2026 21:26:57 -0600 Subject: [PATCH] Phase 2: CSS consolidation and security improvements - Merge navbar-mobile-fix.css into navbar.css (single source) - Remove navbar-mobile-fix.css references from all HTML pages - Update navbar.css version for cache busting (v1768447584) - Add security meta headers to all main pages: * X-Content-Type-Options: nosniff * X-Frame-Options: SAMEORIGIN * X-XSS-Protection: 1; mode=block * Referrer-Policy: strict-origin-when-cross-origin - Archive navbar-mobile-fix.css (merged into navbar.css) --- website/public/about.html | 7 +- .../css/{ => archive}/navbar-mobile-fix.css | 0 website/public/assets/css/navbar.css | 280 ++++++++++++++++++ website/public/blog.html | 8 +- website/public/contact.html | 7 +- website/public/faq.html | 3 +- website/public/home.html | 8 +- website/public/portfolio.html | 8 +- website/public/privacy.html | 3 +- website/public/product.html | 7 +- website/public/returns.html | 3 +- website/public/shipping-info.html | 3 +- website/public/shop.html | 7 +- 13 files changed, 326 insertions(+), 18 deletions(-) rename website/public/assets/css/{ => archive}/navbar-mobile-fix.css (100%) diff --git a/website/public/about.html b/website/public/about.html index 67fbce2..f916d3b 100644 --- a/website/public/about.html +++ b/website/public/about.html @@ -3,6 +3,11 @@ + + + + + About - Sky Art Shop - + diff --git a/website/public/assets/css/navbar-mobile-fix.css b/website/public/assets/css/archive/navbar-mobile-fix.css similarity index 100% rename from website/public/assets/css/navbar-mobile-fix.css rename to website/public/assets/css/archive/navbar-mobile-fix.css diff --git a/website/public/assets/css/navbar.css b/website/public/assets/css/navbar.css index c24f0db..5981d68 100644 --- a/website/public/assets/css/navbar.css +++ b/website/public/assets/css/navbar.css @@ -456,3 +456,283 @@ right: -16px; } } +/** + * Mobile Navbar Fixes + * Ensures hamburger menu, cart, and wishlist are visible on mobile devices + */ + +/* Mobile hamburger menu - always visible on small screens */ +@media (max-width: 768px) { + .mobile-toggle { + display: flex !important; + flex-direction: column; + gap: 4px; + background: none; + border: none; + cursor: pointer; + padding: 8px; + z-index: 10; + } + + .toggle-line { + width: 24px; + height: 3px; + background-color: #202023; + border-radius: 2px; + transition: all 0.3s ease; + } + + /* Hide desktop menu on mobile */ + .navbar-menu { + display: none !important; + } + + /* Ensure cart and wishlist icons are visible */ + .navbar-actions { + display: flex !important; + gap: 12px; + align-items: center; + } + + .action-item { + display: block !important; + } + + .action-btn { + display: flex !important; + align-items: center; + justify-content: center; + position: relative; + background: none; + border: none; + cursor: pointer; + padding: 8px; + color: #202023; + font-size: 20px; + } + + .action-btn i { + display: block !important; + } + + .action-badge { + display: flex !important; + position: absolute; + top: 2px; + right: 2px; + background: #fcb1d8; + color: #202023; + font-size: 11px; + font-weight: 600; + min-width: 18px; + height: 18px; + border-radius: 50%; + align-items: center; + justify-content: center; + padding: 0 4px; + } + + .action-badge.show { + opacity: 1 !important; + visibility: visible !important; + } + + /* Mobile menu overlay */ + .mobile-menu-overlay { + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + background: rgba(0, 0, 0, 0.5); + opacity: 0; + visibility: hidden; + transition: all 0.3s ease; + z-index: 999; + } + + .mobile-menu-overlay.active { + opacity: 1; + visibility: visible; + } + + /* Mobile menu sidebar */ + .mobile-menu { + position: fixed; + top: 0; + right: -100%; + width: 80%; + max-width: 300px; + height: 100vh; + background: white; + box-shadow: -4px 0 12px rgba(0, 0, 0, 0.1); + transition: right 0.3s ease; + z-index: 1000; + overflow-y: auto; + padding: 20px; + } + + .mobile-menu.active { + right: 0; + } + + .mobile-menu-header { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 24px; + padding-bottom: 16px; + border-bottom: 1px solid #f0f0f0; + } + + .mobile-brand { + font-family: "Roboto", sans-serif; + font-size: 18px; + font-weight: 600; + color: #202023; + } + + .mobile-close { + background: none; + border: none; + font-size: 24px; + color: #202023; + cursor: pointer; + padding: 4px; + display: flex; + align-items: center; + justify-content: center; + } + + .mobile-menu-list { + list-style: none; + padding: 0; + margin: 0; + } + + .mobile-menu-list li { + margin-bottom: 4px; + } + + .mobile-link { + display: block; + padding: 12px 16px; + color: #202023; + text-decoration: none; + font-size: 16px; + font-weight: 500; + border-radius: 8px; + transition: all 0.2s ease; + } + + .mobile-link:hover, + .mobile-link:focus { + background: #ffebeb; + color: #fcb1d8; + } + + /* Dropdown menus on mobile */ + .action-dropdown { + position: fixed !important; + right: 0; + left: 0; + top: auto; + bottom: 0; + width: 100% !important; + max-width: 100% !important; + max-height: 70vh; + border-radius: 16px 16px 0 0 !important; + transform: translateY(100%) !important; + } + + .action-dropdown.show { + transform: translateY(0) !important; + } + + /* Compact dropdown on mobile */ + .dropdown-head { + padding: 16px; + border-bottom: 1px solid #f0f0f0; + } + + .dropdown-head h3 { + font-size: 18px; + } + + .dropdown-body { + max-height: calc(70vh - 140px); + overflow-y: auto; + padding: 12px; + } + + .dropdown-foot { + padding: 12px 16px; + border-top: 1px solid #f0f0f0; + } + + /* Prevent body scroll when menu is open */ + body.menu-open { + overflow: hidden; + } +} + +/* Tablet adjustments */ +@media (min-width: 769px) and (max-width: 1024px) { + .navbar-actions { + gap: 16px; + } + + .action-btn { + font-size: 22px; + } + + .action-dropdown { + max-width: 360px !important; + } +} + +/* Desktop - hide mobile elements */ +@media (min-width: 769px) { + .mobile-toggle { + display: none !important; + } + + .mobile-menu, + .mobile-menu-overlay { + display: none !important; + } +} + +/* Accessibility improvements */ +.action-btn:focus, +.mobile-toggle:focus, +.mobile-close:focus { + outline: 2px solid #fcb1d8; + outline-offset: 2px; +} + +.mobile-link:focus { + outline: 2px solid #fcb1d8; + outline-offset: -2px; +} + +/* Smooth transitions */ +* { + -webkit-tap-highlight-color: transparent; +} + +button { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} + +/* Fix for iOS Safari button styling */ +button:focus { + outline: none; +} + +button:focus-visible { + outline: 2px solid #fcb1d8; + outline-offset: 2px; +} diff --git a/website/public/blog.html b/website/public/blog.html index 2aa93e3..fcd1582 100644 --- a/website/public/blog.html +++ b/website/public/blog.html @@ -3,6 +3,11 @@ + + + + + About - Sky Art Shop - + - diff --git a/website/public/contact.html b/website/public/contact.html index c4f3847..67a58fe 100644 --- a/website/public/contact.html +++ b/website/public/contact.html @@ -3,6 +3,11 @@ + + + + + Contact Us - Sky Art Shop - + diff --git a/website/public/faq.html b/website/public/faq.html index 5fdd73a..755dcec 100644 --- a/website/public/faq.html +++ b/website/public/faq.html @@ -14,12 +14,11 @@ /> - + - diff --git a/website/public/home.html b/website/public/home.html index e8b1aed..b91606d 100644 --- a/website/public/home.html +++ b/website/public/home.html @@ -3,6 +3,11 @@ + + + + + - + - diff --git a/website/public/portfolio.html b/website/public/portfolio.html index d54816d..3a3808b 100644 --- a/website/public/portfolio.html +++ b/website/public/portfolio.html @@ -3,6 +3,11 @@ + + + + + About - Sky Art Shop - + - diff --git a/website/public/privacy.html b/website/public/privacy.html index 4d6e946..6e8665e 100644 --- a/website/public/privacy.html +++ b/website/public/privacy.html @@ -14,12 +14,11 @@ /> - + - diff --git a/website/public/product.html b/website/public/product.html index d54eca1..ef903fe 100644 --- a/website/public/product.html +++ b/website/public/product.html @@ -3,6 +3,11 @@ + + + + + Product Details - Sky Art Shop @@ -15,7 +20,7 @@ href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" /> - + diff --git a/website/public/returns.html b/website/public/returns.html index 614d8b3..61860ee 100644 --- a/website/public/returns.html +++ b/website/public/returns.html @@ -14,12 +14,11 @@ /> - + - diff --git a/website/public/shipping-info.html b/website/public/shipping-info.html index 86b7163..0bcad27 100644 --- a/website/public/shipping-info.html +++ b/website/public/shipping-info.html @@ -14,12 +14,11 @@ /> - + - diff --git a/website/public/shop.html b/website/public/shop.html index 6e038bd..3dacd06 100644 --- a/website/public/shop.html +++ b/website/public/shop.html @@ -3,6 +3,11 @@ + + + + + Shop - Sky Art Shop @@ -17,7 +22,7 @@ /> - +