checkpoint

static/main.css

@@ -221,10 +221,11 @@ iframe {
     top: 0;
     height: 100vh;
     background-color: var(--main-bg-color);
-    border-right: 1px solid rgb(60, 60, 60);
+    /* border-right: 1px solid rgb(60, 60, 60); */
     /* transition: width 0.3s; */
     overflow: hidden;
-    width: 150px;
+    width: 130px;
+    margin-right: 5px;
 }
 
 .nav-container.collapsed {
@@ -259,10 +260,13 @@ iframe {
 }
 
 .burger-menu {
+    text-align: center;
+    width: 46px;
+    border-radius: 10px;
+    left: 8px;
     display: none;
     position: fixed;
-    left: 16px;
-    top: 16px;
+    top: 0px;
     font-size: 24px;
     cursor: pointer;
     z-index: 1000;
@@ -281,17 +285,22 @@ iframe {
 
 @media (max-width: 700px) {
     .nav-container {
-        transform: translateX(-100%);
-        z-index: 1000;
+        display: none;
+        /* transform: translateX(-100%); */
+        /* z-index: 1000; */
     }
 
     .nav-container.active {
-        transform: translateX(0);
+        position: fixed;
+        left: 0px;
+        display: block;
+        /* transform: translateX(0); */
         width: 200px;
     }
 
     .burger-menu {
         display: block;
+        background-color: var(--main-bg-color);
     }
 
     .nav-overlay.active {
@@ -329,21 +338,21 @@ iframe {
 }
 
 .compose-button {
-    font-size: 48px;
+    font-size: 42px;
     position: fixed;
     bottom: 24px;
     right: 24px;
-    width: 72px;
-    height: 72px;
+    width: 64px;
+    height: 64px;
     border-radius: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
     cursor: pointer;
     box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
-    background: rgba(87, 87, 255, 0.8);
+    background: rgba(87, 87, 255, 0.5);
 }
 
 .compose-button:hover {
     background-color: rgb(87, 87, 255);
-}
+}