From ef1973fa12207725e8345d7c2f926e2ad01bc3dc Mon Sep 17 00:00:00 2001 From: Jarvis Prime Date: Tue, 24 Mar 2026 04:34:12 +0000 Subject: [PATCH] Add hamburger menu for mobile, fix overflow --- src/layouts/Base.astro | 33 ++++++++++++++++++++------------- 1 file changed, 20 insertions(+), 13 deletions(-) diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro index 7337f9c..d09cce5 100644 --- a/src/layouts/Base.astro +++ b/src/layouts/Base.astro @@ -388,9 +388,17 @@ const isHome = currentPath === '/'; /* === RESPONSIVE HELPERS === */ @media (max-width: 960px) { .d-placing { width: 95%; padding: 0 10px; } - .d-menu { flex-wrap: wrap; justify-content: center; gap: 2px; display: flex; list-style: none; } - .d-menu li { margin: 0; float: none; padding-right: 8px; } - .d-menu .menu-item { font-size: 12px; padding: 4px 6px; } + /* Hamburger menu */ + .hamburger { display: block; cursor: pointer; padding: 8px; position: absolute; right: 10px; top: 8px; z-index: 101; } + .hamburger span { display: block; width: 22px; height: 2px; background: #bb983b; margin: 5px 0; transition: 0.3s; } + .d-header { position: relative; } + .d-menu { display: none; flex-direction: column; position: absolute; top: 100%; left: 0; right: 0; background: #3a2c18; z-index: 100; padding: 10px 0; box-shadow: 0 4px 8px rgba(0,0,0,0.3); } + .d-menu.open { display: flex; } + .d-menu li { float: none; padding: 0; margin: 0; } + .d-menu .menu-item { display: block; padding: 10px 20px; font-size: 14px; border-bottom: 1px solid #4a3c28; } + .d-menu .menu-item:hover { background: #4a3c28; } + .d-menu .with-dropdown .dropdown { display: none; } + .d-logo { display: none; } .d-footer .left, .d-footer .right { float: none; width: 100%; } .product-content .right { width: 100%; float: none; } .product-content .left { width: 100%; float: none; } @@ -403,27 +411,20 @@ const isHome = currentPath === '/'; .buttons-hp-vertical { float: none; margin: 15px auto; } .home-static .list-l, .home-static .list-r { float: none; width: 100%; } .owl-flag { display: none; } - /* Responsive images */ img { max-width: 100%; height: auto; } - /* Tables */ table { max-width: 100%; overflow-x: auto; display: block; } - /* Pricing tables */ .pricing-table { width: 100%; } .pricing-table td, .pricing-table th { padding: 6px 8px; font-size: 13px; } - /* Comics grid */ .comics-grid { grid-template-columns: 1fr; } - /* Footer */ .d-footer .latest-posts { height: auto; } .d-footer .news .news-item { width: 100%; } - /* General text */ .d-content-wrap { word-wrap: break-word; overflow-wrap: break-word; } - /* Sidebar links */ .product-content .right ul { padding-left: 15px; } + /* Prevent horizontal overflow */ + .d-page { overflow-x: hidden; } + .d-content-wrap { overflow-x: hidden; } } @media (max-width: 480px) { - .d-header { padding: 10px 5px; } - .d-menu .menu-item { font-size: 11px; padding: 3px 4px; } - .d-menu li { padding-right: 4px; } h1 { font-size: 1.4em; } h2 { font-size: 1.2em; } h3 { font-size: 1.1em; } @@ -431,6 +432,9 @@ const isHome = currentPath === '/'; .d-footer .social a { font-size: 12px; } .buttons-hp a, .buttons-hp-vertical a { display: block; margin: 5px 0; text-align: center; } } + @media (min-width: 961px) { + .hamburger { display: none; } + } @@ -438,6 +442,9 @@ const isHome = currentPath === '/';
+
+ +