add gaussian blur and fix for small screen

src/Sidebar.css

@@ -21,10 +21,11 @@
     position: fixed;
     top: 0;
     height: 100%;
-    background-color: rgba(255,255,255,.8);
+    background-color: rgba(255,255,255,.7);
     overflow-y: auto;
     padding-top: 3em;
     padding-bottom: 1em;
+    backdrop-filter: blur(10px);
 }
 
 .sidebar, .sidebar-title {
@@ -48,6 +49,8 @@
     padding-left: .5em;
     background-color: rgba(255,255,255,.6);
     pointer-events: none;
+    backdrop-filter: blur(10px);
+    box-shadow: 0 3px 5px rgba(0,0,0,.2);
 }
 .sidebar-title a {
     pointer-events: initial;

src/Title.css

@@ -8,6 +8,7 @@
     background-color: rgba(255,255,255,.8);
     box-shadow: 0 0 25px rgba(0,0,0,.4);
     margin-bottom: 1em;
+    backdrop-filter: blur(10px);
 }
 
 .control-bar {
@@ -37,6 +38,7 @@
     color: black;
     background-color: rgba(255,255,255,.5);
     margin: 0 .5em;
+    min-width: 8em;
 }
 
 .list-menu {

src/UserAction.css

@@ -42,10 +42,11 @@
 }
 .post-form-bar input[type=file] {
     border: 0;
+    padding: 0 .5em;
 }
-@media screen and (max-width: 600px) {
+@media screen and (max-width: 570px) {
     .post-form-bar input[type=file] {
-        width: 150px;
+        width: 110px;
     }
 }
 .post-form-bar button {