Update style.css

Author: jonathanmonney

css/style.css

@@ -4,7 +4,7 @@
   --line-clr: #42434a;
   --hover-clr: #222533;
   --text-clr: #e6e6ef;
-  --accent-clr: #5e63ff;
+  --accent-clr: #00b7ff;
   --secondary-text-clr: #b0b3c1;
 }
 *{
@@ -23,10 +23,11 @@ body{
   display: grid;
   grid-template-columns: auto 1fr;
 }
+
 #sidebar{
   box-sizing: border-box;
   height: 100vh;
-  width: 250px;
+  width: auto;
   padding: 5px 1em;
   background-color: var(--base-clr);
   border-right: 1px solid var(--line-clr);
@@ -37,6 +38,7 @@ body{
   transition: 300ms ease-in-out;
   overflow: hidden;
   text-wrap: nowrap;
+  text-transform: capitalize;
 }
 #sidebar.close{
   padding: 5px;
@@ -50,18 +52,18 @@ body{
   justify-content: flex-end;
   margin-bottom: 16px;
   .logo{
-    font-weight: 600;
+    font-weight: 700;
   }
 }
-#sidebar ul li.active a{
+#sidebar ul li.active a, #sidebar ul li.active button{
   color: var(--accent-clr);
 
   svg{
     fill: var(--accent-clr);
   }
 }
 
-#sidebar a, #sidebar .dropdown-btn, #sidebar .logo{
+#sidebar a, #sidebar .dropdown-btn, #sidebar .logo, #sidebar .menu-btn{
   border-radius: .5em;
   padding: .85em;
   text-decoration: none;
@@ -78,21 +80,32 @@ body{
   font: inherit;
   cursor: pointer;
 }
+.menu-btn{
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  font: inherit;
+  cursor: pointer;
+}
 #sidebar svg{
   flex-shrink: 0;
   fill: var(--text-clr);
 }
-#sidebar a span, #sidebar .dropdown-btn span{
+#sidebar a span, #sidebar .dropdown-btn span, #sidebar .menu-btn{
   flex-grow: 1;
 }
-#sidebar a:hover, #sidebar .dropdown-btn:hover{
+#sidebar a:hover, #sidebar .dropdown-btn:hover, #sidebar .menu-btn:hover{
   background-color: var(--hover-clr);
 }
 #sidebar .sub-menu{
   display: grid;
   grid-template-rows: 0fr;
   transition: 300ms ease-in-out;
 
+  > ul{
+    overflow: hidden;
+  }
   > div{
     overflow: hidden;
   }
@@ -106,7 +119,7 @@ body{
 .rotate svg:last-child{
   rotate: 180deg;
 }
-#sidebar .sub-menu a{
+#sidebar .sub-menu a,#sidebar .sub-menu button{
   padding-left: 2em;
 }
 #toggle-btn{
@@ -118,9 +131,10 @@ body{
   cursor: pointer;
 
   svg{
-    transition: rotate 150ms ease;
+    transition: rotate 300ms ease;
   }
 }
+
 #toggle-btn:hover{
   background-color: var(--hover-clr);
 }
@@ -141,6 +155,9 @@ main p{
 
   h2, p { margin-top: 1em }
 }
+main a{
+  color: var(--accent-clr);
+}
 
 @media(max-width: 800px){
   body{
@@ -174,7 +191,7 @@ main p{
     ul li{
       height: 100%;
     }
-    ul a, ul .dropdown-btn{
+    ul a, ul .dropdown-btn, ul .menu-btn{
       width: 60px;
       height: 60px;
       padding: 0;
@@ -212,4 +229,4 @@ main p{
       }
     }
   }
-}
+}