public/code-crispies
2
1
Fork 0
Code Issues Pull Requests Actions Activity

style: improve hamburger menu icon with cleaner CSS

Browse Source
This commit is contained in:
Michael Czechowski
2025-12-31 00:28:18 +01:00
parent 6c073b3517
commit d5f9f1a843
2 changed files with 33 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/index.html
View File

@@ -13,9 +13,7 @@
<div class="app-container"> <div class="app-container">
<header class="header"> <header class="header">
<button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" aria-label="Open menu"> <button id="menu-btn" class="menu-toggle" data-i18n-aria-label="menuOpen" aria-label="Open menu">
<span class="hamburger-line"></span> <span class="hamburger-icon"></span>
<span class="hamburger-line"></span>
<span class="hamburger-line"></span>
</button> </button>
<div class="logo"> <div class="logo">
<img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" /> <img src="./bowl.png" width="40" alt="CODE CRISPIES Logo" />

40
src/main.css
View File

@@ -124,22 +124,46 @@ code, kbd {
.menu-toggle { .menu-toggle {
display: flex; display: flex;
flex-direction: column; align-items: center;
justify-content: space-around; justify-content: center;
width: 28px; width: 32px;
height: 20px; height: 32px;
background: none; background: none;
border: none; border: none;
cursor: pointer; cursor: pointer;
padding: 0; padding: 4px;
border-radius: var(--border-radius-sm);
} }
.hamburger-line { .menu-toggle:hover {
background: var(--primary-bg-light);
}
.hamburger-icon {
position: relative;
width: 18px;
height: 2px;
background-color: var(--text-color);
border-radius: 1px;
}
.hamburger-icon::before,
.hamburger-icon::after {
content: "";
position: absolute;
left: 0;
width: 100%; width: 100%;
height: 2px; height: 2px;
background-color: var(--text-color); background-color: var(--text-color);
border-radius: 2px; border-radius: 1px;
transition: all 0.3s ease; }
.hamburger-icon::before {
top: -6px;
}
.hamburger-icon::after {
top: 6px;
} }
.logo { .logo {