Update index.html

bithalo · Jun 29, 2024 · 3e79454 · 3e79454
1 parent 0f064bd
commit 3e79454
Showing 1 changed file with 60 additions and 7 deletions.
diff --git a/index.html b/index.html
@@ -97,13 +97,22 @@
   height: calc(100vh - 140px);
 }
 .sidebar {
-  background-image: url("sidebar-bg.png");
-  background-size: 100% 100%;
-  padding: 30px 25px;
-  width: 115px;
-  height: calc(100vh - 140px);
-  overflow: hidden;
-  overflow-y: auto;
+    width: 104px;
+    background: transparent;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding-top: 10px;
+    padding-bottom: 30px;
+}
+.sidebar-background {
+  position: absolute;
+  width: 104px;
+  height: 100%;
+  padding-top: 10px;
+  padding-bottom: 30px;
+  background-image: url('./purple-gradient.png');
+  z-index: -1;
 }
 .sidebar button {
   background-color: transparent;
@@ -1814,7 +1823,12 @@
   h2 {
     font-size: 22px;
   }
+  .sidebar-background {
+    background-image: url("");
+  }
   .sidebar {
+    background-image: url("sidebar-bg.png");
+    background-size: 100% 100%;
     padding: 15px;
     position: fixed;
     height: calc(100% - 125px);
@@ -1924,6 +1938,19 @@
   }
 }
 @media screen and (max-width: 575px) {
+  .sidebar-background {
+    background-image: url("");
+  }
+  .sidebar {
+    background-image: url("sidebar-bg.png");
+    background-size: 100% 100%;
+    padding: 15px;
+    position: fixed;
+    height: calc(100% - 125px);
+    z-index: 1;
+    transition: transform 0.3s ease;
+    transform: translateX(-100%);
+  }
   .popup {
     max-width: 90%;
   }
@@ -2069,6 +2096,19 @@
 }
 
 @media screen and (max-width: 480px) {
+    .sidebar-background {
+      background-image: url("");
+    }
+    .sidebar {
+      background-image: url("sidebar-bg.png");
+      background-size: 100% 100%;
+      padding: 15px;
+      position: fixed;
+      height: calc(100% - 125px);
+      z-index: 1;
+      transition: transform 0.3s ease;
+      transform: translateX(-100%);
+    }
     .container.site-container {
       height: calc(100vh - 180px);
     }
@@ -2113,6 +2153,19 @@
 }
 
 @media screen and (max-width: 400px) {
+  .sidebar-background {
+    background-image: url("");
+  }
+  .sidebar {
+    background-image: url("sidebar-bg.png");
+    background-size: 100% 100%;
+    padding: 15px;
+    position: fixed;
+    height: calc(100% - 125px);
+    z-index: 1;
+    transition: transform 0.3s ease;
+    transform: translateX(-100%);
+  }
   .header {
     height: 130px;
     padding: 12px 18px;