From 44fbdb51b3fcc59e3770377b1d92eb60b564f1ac Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Xavier=20Juli=C3=A1n?= <xavier.julian@kaleidos.net>
Date: Tue, 23 Sep 2014 17:18:46 +0200
Subject: [PATCH] Simple login page styles refactor

---
 app/images/logo-optimized.svg |  48 +++++++++++
 app/images/logo.svg           | 147 ++++++++++++++++++++++++++++++++++
 app/partials/login.jade       |   5 +-
 app/styles/layout/login.scss  |  16 ++--
 4 files changed, 209 insertions(+), 7 deletions(-)
 create mode 100644 app/images/logo-optimized.svg
 create mode 100644 app/images/logo.svg

diff --git a/app/images/logo-optimized.svg b/app/images/logo-optimized.svg
new file mode 100644
index 00000000..563da6aa
--- /dev/null
+++ b/app/images/logo-optimized.svg
@@ -0,0 +1,48 @@
+<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" id="svg4647" version="1.1" viewBox=".." preserveAspectRatio="xMidYMid meet">
+  <defs id="defs4649"/>
+  <metadata id="metadata4652"/>
+  <style>
+      .top {
+          transform-origin: 193px 164px;
+          -webkit-animation: rotate 4s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+          -webkit-transform-origin: 50% 50%;
+          animation: rotate 6s cubic-bezier(.49,.05,.32,1.04) infinite alternate;
+      }
+      .top rect {
+          fill-opacity: 1;
+          fill: #fff;
+          opacity: .6
+      }
+      @-webkit-keyframes rotate {
+          50% {
+              -webkit-transform: rotate(360deg);
+          }
+      }
+      @keyframes rotate {
+          50% {
+              transform: rotate(360deg);
+          }
+      }
+  </style>
+  <g id="layer1" transform="translate(-307.87667,-465.22863)">
+    <g transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)" id="layer1-1" display="inline">
+      <g transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)" id="g6368" display="inline">
+        <g id="g6358" transform="translate(-905.09668,1190.7678)">
+          <g class="bottom">
+              <rect transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)" y="453.99191" x="19.390564" height="263.03665" width="263.03665" id="rect6306" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
+              <rect transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)" y="-980.32068" x="-545.35144" height="263.03665" width="263.03665" id="rect6298" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
+              <rect transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)" y="239.36371" x="-1091.8109" height="263.03665" width="263.03665" id="rect6290" style="fill-opacity:1;fill:#fff;opacity:0.7"/>
+              <rect transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)" y="-765.04388" x="565.75031" height="263.03665" width="263.03665" id="rect6302" style="fill-opacity:1;fill:#fff;opacity:0.5"/>
+          </g>
+          <g class="top">
+              <rect id="rect6300" width="263.03665" height="263.03665" x="123.24944" y="-1124.9786" transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
+              <rect id="rect6304" width="263.03665" height="263.03665" x="522.39832" y="-110.13736" transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
+              <rect id="rect6288" width="263.03665" height="263.03665" x="-649.58295" y="599.28192" transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
+              <rect id="rect6296" width="263.03665" height="263.03665" x="-1048.9221" y="-415.20911" transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
+          </g>
+        </g>
+        <rect id="rect6286" width="141.42136" height="141.42136" x="-130.17999" y="2210.6592" transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" style="fill-opacity:1;fill:#fff"/>
+      </g>
+    </g>
+  </g>
+</svg>
diff --git a/app/images/logo.svg b/app/images/logo.svg
new file mode 100644
index 00000000..cc0be845
--- /dev/null
+++ b/app/images/logo.svg
@@ -0,0 +1,147 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+     xmlns:dc="http://purl.org/dc/elements/1.1/"
+     xmlns:cc="http://creativecommons.org/ns#"
+     xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
+     xmlns:svg="http://www.w3.org/2000/svg"
+     xmlns="http://www.w3.org/2000/svg"
+     xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+     xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+     width="134.24667"
+     height="134.26709"
+     id="svg4647"
+     version="1.1"
+     inkscape:version="0.48.5 r10040"
+     sodipodi:docname="New document 13">
+    <defs
+         id="defs4649" />
+    <sodipodi:namedview
+         id="base"
+         pagecolor="#ffffff"
+         bordercolor="#666666"
+         borderopacity="1.0"
+         inkscape:pageopacity="0.0"
+         inkscape:pageshadow="2"
+         inkscape:zoom="0.35"
+         inkscape:cx="67.123334"
+         inkscape:cy="67.133542"
+         inkscape:document-units="px"
+         inkscape:current-layer="layer1"
+         showgrid="false"
+         fit-margin-top="0"
+         fit-margin-left="0"
+         fit-margin-right="0"
+         fit-margin-bottom="0"
+         inkscape:window-width="501"
+         inkscape:window-height="456"
+         inkscape:window-x="1920"
+         inkscape:window-y="590"
+         inkscape:window-maximized="0" />
+    <metadata
+         id="metadata4652">
+        <rdf:RDF>
+            <cc:Work
+                 rdf:about="">
+                <dc:format>image/svg+xml</dc:format>
+                <dc:type
+                     rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
+                <dc:title></dc:title>
+            </cc:Work>
+        </rdf:RDF>
+    </metadata>
+    <g
+         inkscape:label="Layer 1"
+         inkscape:groupmode="layer"
+         id="layer1"
+         transform="translate(-307.87667,-465.22863)">
+        <g
+             style="display:inline"
+             transform="matrix(0.135464,0,0,0.135464,307.268,457.53699)"
+             id="layer1-1"
+             inkscape:label="Capa 1">
+            <g
+                 transform="matrix(1.1783562,0,0,1.1783562,2450.4425,-1298.9778)"
+                 id="g6368"
+                 style="display:inline">
+                <g
+                     id="g6358"
+                     transform="translate(-905.09668,1190.7678)">
+                    <rect
+                         transform="matrix(-0.1406648,0.99005728,-0.99005728,0.14066481,0,0)"
+                         y="453.99191"
+                         x="19.390564"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6306"
+                         style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         transform="matrix(0.1406648,-0.99005728,0.99005728,-0.14066481,0,0)"
+                         y="-980.32068"
+                         x="-545.35144"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6298"
+                         style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         transform="matrix(0.99005728,0.1406648,0.14066481,0.99005728,0,0)"
+                         y="239.36371"
+                         x="-1091.8109"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6290"
+                         style="opacity:0.7;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         transform="matrix(-0.99005728,-0.1406648,-0.14066481,-0.99005728,0,0)"
+                         y="-765.04388"
+                         x="565.75031"
+                         height="263.03665"
+                         width="263.03665"
+                         id="rect6302"
+                         style="opacity:0.5;fill:#ffffff;fill-opacity:1;stroke:none" />
+                    <rect
+                         style="opacity:0.4;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6300"
+                         width="263.03665"
+                         height="263.03665"
+                         x="123.24944"
+                         y="-1124.9786"
+                         transform="matrix(-0.60061118,-0.79954125,0.60061117,-0.79954125,0,0)" />
+                    <rect
+                         style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6304"
+                         width="263.03665"
+                         height="263.03665"
+                         x="522.39832"
+                         y="-110.13736"
+                         transform="matrix(-0.79954125,0.60061118,-0.79954125,-0.60061117,0,0)" />
+                    <rect
+                         style="opacity:0.8;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6288"
+                         width="263.03665"
+                         height="263.03665"
+                         x="-649.58295"
+                         y="599.28192"
+                         transform="matrix(0.60061118,0.79954125,-0.60061118,0.79954125,0,0)" />
+                    <rect
+                         style="opacity:0.6;fill:#ffffff;fill-opacity:1;stroke:none"
+                         id="rect6296"
+                         width="263.03665"
+                         height="263.03665"
+                         x="-1048.9221"
+                         y="-415.20911"
+                         transform="matrix(0.79954125,-0.60061118,0.79954125,0.60061117,0,0)" />
+                </g>
+                <rect
+                     style="fill:#ffffff;fill-opacity:1;stroke:none"
+                     id="rect6286"
+                     width="141.42136"
+                     height="141.42136"
+                     x="-130.17999"
+                     y="2210.6592"
+                     transform="matrix(0.70710678,0.70710678,-0.70710678,0.70710678,0,0)" />
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/app/partials/login.jade b/app/partials/login.jade
index 925415cf..1630393b 100644
--- a/app/partials/login.jade
+++ b/app/partials/login.jade
@@ -7,8 +7,9 @@ block content
     div.wrapper
         div.login-main
             div.login-container
-                h1.logo
+                object.logo-svg(type="image/svg+xml", data="/images/logo-optimized.svg")
                     img(src="/images/logo.png", alt="TAIGA")
-                p.tagline Your agile, free, and open source project management tool
+                h1.logo Taiga
+                h2.tagline ENJOY YOUR PROJECT,FINALLY
 
                 include views/modules/login-form
diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss
index 29475f83..b7101131 100644
--- a/app/styles/layout/login.scss
+++ b/app/styles/layout/login.scss
@@ -14,17 +14,23 @@
     top: 0;
     z-index: 999;
     fieldset {
-        margin-bottom: 1rem;
+        margin-bottom: .5rem;
     }
     .login-container {
         @include flex-basis(400px);
     }
+    .logo-svg {
+        padding: 0 30%;
+        text-align: center;
+        width: 100%;
+    }
     .logo {
+        @extend %xxlarge;
+        @extend %title;
+        color: $white;
         margin-bottom: 1rem;
         text-align: center;
-        img {
-            padding: 0 30%;
-        }
+
     }
     .tagline {
         @extend %xlarge;
@@ -36,7 +42,7 @@
         text-transform: uppercase;
     }
     form {
-        margin-bottom: 2rem;
+        margin-bottom: 1rem;
     }
     input {
         background: $white;