added some style for small-devices

static/css/style.css

@@ -24,7 +24,7 @@ header {
   background-color: #5763ab;
   z-index: 0; 
   display: none; 
-  transition: all 0.25s ease;
+  transition: transform 0.5s ease-out;
 }
 
 
@@ -57,7 +57,7 @@ header {
 }
 
 .menu_bar-top {
-  width: 30px;
+  width: 25px;
 }
 
 .menu_bar-mid {
@@ -65,7 +65,7 @@ header {
 }
 
 .menu_bar-bot {
-  width: 30px;
+  width: 25px;
 }
 
 .side-toggle {
@@ -137,6 +137,10 @@ footer {
   .side-menu {
       display: block;
   }
+  .saburly-footer{
+    margin-left: 10%;
+    margin-right: 10%;
+  }
   .empty-menu{
     display: none;
   }
@@ -145,26 +149,26 @@ footer {
   }
   .side-panel {
     width: 100%;
-    padding-left: 0;
-    padding-right: 0;
   }
   .content {
-    width: 100%;
-    margin-left: 0;
-    margin-right: 0;
+    width: 95%;
+    margin-left: 2.5%;
+    margin-right: 2.5%;
     padding-left: 0;
     padding-right: 0;
   }
+  .saburly-menu {
+    z-index: 9999;
+    margin-left: 5%;
+    margin-right: 5%;
+  }
+  .saburly-logo{
+    margin-right: 112px;
+    padding-top: 5px;
+    padding-bottom: 5px;
+  }
 }
 
-.side-menu {
-  display: none;
-}
-
-.side-menu.active {
-  display: block; 
-  transform: translateX(0); 
-}
 
 .header-hidden { 
   transform: translateY(-100%); 
@@ -176,26 +180,34 @@ footer {
   transition: transform 0.3s ease; 
 } 
 
+.side-menu {
+  display: none;
+}
 
 .side-menu.active {
-  display: block; 
+  display: block;
 }
 
-.menu-opened .menu_bar-top {
-  transform: rotate(45deg);
-  transform-origin: 15% 15%;
+.content:before {
+  content: '';
+  background-color: rgba(0, 0, 0, 0);
+}
+.content-open:before {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  z-index: 99;
+}
+.content-open{
+  margin-left: -256px;
+  transition: margin-left 0.1s;
+  background-color: rgba(0, 0, 0, 0.5);
 }
 
-.menu-opened .menu_bar-mid {
-  opacity: 0;
+.header-move{
+  margin-left: -256px;
+  transition: margin-left 0.1s;
+  background-color: rgba(55, 65, 105, 1.0);
 }
-
-.menu-opened .menu_bar-bot {
-  transform: rotate(-45deg);
-  transform-origin: 15% 95%;
-}
-
-.menu-opened .side-panel {
-  position:absolute;
-  left: -256px;
-}