add fade-in animation

static/style.css

@@ -1,3 +1,8 @@
+@keyframes fade-in {
+  0% { opacity: 0; }
+  100% { opacity: 1; }
+}
+
 body {
   font-family: sans-serif;
   margin: 0;
@@ -27,9 +32,14 @@ body {
   font-weight: bold;
 }
 
+#menu {
+  animation: fade-in ease-in-out .5s;
+}
+
 #content {
   margin: 50px 0px;
   text-align: center;
+  animation: fade-in ease-in-out .5s;
 }
 
 .file {

templates/base.html

@@ -8,9 +8,11 @@
     <div>
       <span id="cloud-name">{{ cloud_name }}</span><span id="directory-name">{{ config["directory"] }}</span>
     </div>
-    {% block nav_content %}{% endblock %}
+    <div id="menu">
+      {% block menu %}{% endblock %}
     </div>
-  <div id="content">
+  </div>
+  <div id="content" class="a-fade-in">
     {% block content %}{% endblock %}
   </div>
 </div>

templates/directory.html

@@ -1,6 +1,5 @@
 {% extends "base.html" %}
-{% block nav_content %}
+{% block menu %}
-  <div>
   {% if config["upload"] %}
     <form action="/{{ config["directory"] }}" enctype="multipart/form-data" method="post">
       <label class="button upload">
@@ -15,7 +14,6 @@
       <input type="submit" class="button logout" value="Logout">
     </form>
   {% endif %}
-  </div>  
 {% endblock %}
 {% block content %}
   {% for f in files %}