diff --git a/assets/css/style.css b/assets/css/style.css index 095027b..bebbe03 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -5,15 +5,10 @@ body { padding: 0; } -.container { - display: flex; - min-height: 100vh; -} - /* Sidebar Styling */ .sidebar { width: 250px; - background: #2c3e50; /* Dark blue */ + background: #2c3e50; color: white; padding: 20px; position: fixed; @@ -21,28 +16,28 @@ body { left: 0; top: 0; overflow-y: auto; - transition: transform 0.3s ease-in-out; /* Smooth hide effect */ + transition: transform 0.3s ease-in-out; /* Sidebar hides smoothly */ display: flex; flex-direction: column; justify-content: space-between; } /* Sidebar Hidden */ -.sidebar.closed { - transform: translateX(-100%); /* Completely hides the sidebar */ +.sidebar.hidden { + transform: translateX(-100%); /* Moves sidebar off-screen */ } /* Sidebar Toggle Button */ #toggle-sidebar { position: fixed; - top: 15px; + top: 10px; left: 15px; background: #2c3e50; color: white; border: none; padding: 10px 15px; cursor: pointer; - z-index: 1100; /* Ensure button is always visible */ + z-index: 1001; /* Ensures it's above everything */ border-radius: 5px; font-size: 18px; } @@ -105,21 +100,20 @@ body { /* Main Content Styling */ .content { padding: 40px; - flex-grow: 1; max-width: 900px; line-height: 1.6; - margin-left: 270px; /* Adds spacing between sidebar and text */ + margin-left: 270px; /* Adds spacing */ transition: margin-left 0.3s ease-in-out; } /* Adjust content when sidebar is hidden */ -.sidebar.closed + .content { - margin-left: 40px; /* Adds extra padding when sidebar is collapsed */ +.sidebar.hidden + .content { + margin-left: 40px; /* Keeps text readable when sidebar is collapsed */ } /* Responsive Styles */ @media (max-width: 768px) { .content { - margin-left: 40px; /* Adjust margin when sidebar is collapsed */ + margin-left: 40px; } }