improved login screen.

resources/public/index.html

@@ -38,6 +38,14 @@
     }
     }
 
+    @keyframes slideInFromBelow {
+    from {
+    -webkit-transform: translateY(25%);
+    transform: translateY(25%);
+    opacity: 0;
+    }
+    }
+
     @keyframes moveToTop {
     from { }
     to { -webkit-transform: translateY(-100%); transform:
@@ -87,6 +95,9 @@
   color: #2EB398;
   border: 3px solid #2EB398;
 }
+    .slideInFromBelow {
+        animation: slideInFromBelow 1.5s ease both;
+    }
 
     .modal {
         animation: appear .7s ease both;

src/cljs/auto_ap/views/pages/login.cljs

@@ -10,7 +10,16 @@
             [bidi.bidi :as bidi]))
 
 (defn login-page []
-  [:div
+  [:div.container
+   [:section.is-fullheight.hero
+    [:div.hero-body
+     [:div.container
+      [:div.column.is-4.is-offset-4.has-text-centered
        [:h1.title "Login"]
-   [:h2.subtitle "To get started, "
+       [:div.box.slideInFromBelow
-    [:a {:href login-url} "Login with Google"]]])
+        
+        [:img {:src "http://www.integreatconsult.com/wp-content/uploads/2016/11/logo.png"}]
+        [:div
+         [:a.button.is-large.is-primary {:href login-url} "Login with Google"]]]
+       [:p.has-text-gray
+        "Copyright Integreat 2018"]]]]]])