logo animation

diff --git a/www/static/css/new_style.css b/www/static/css/new_style.css
index bcce3babf351e720a092093b7a763c3f1bb63277..58600cca26da7b94ed96fc058515064e56c89791 100644 (file)
--- a/www/static/css/new_style.css
+++ b/www/static/css/new_style.css
@@ -231,3 +231,10 @@ main pre {
 main li {
     margin-top: 8px;
 }
+
+#logo:hover #path67 { transform: matrix(0.147954, 0, 0, 0.147954, 35, 9); }
+#logo:hover #path31 { transform: translate(21.5px, -2.5px) rotate(60deg); }
+#logo:hover #path1180 { transform: translate(34.25px, 7px) rotate(120deg); }
+#logo:hover #path537 { transform: translate(51.5px, 11.01px) rotate(150deg); }
+#logo:hover #path1062 { transform: translate(36px, 2px) rotate(90deg); }
+#logo :not(#layer2) path { transition: all 1s ease-in-out; }

diff --git a/www/templates/partials/navbar.html b/www/templates/partials/navbar.html
index c370ebb9152aebafff23db17409949574bcc6989..2887c9b9edb0e759d162de1de7228c4546afe14a 100644 (file)
--- a/www/templates/partials/navbar.html
+++ b/www/templates/partials/navbar.html
@@ -2,7 +2,38 @@
 <div class="navbar-container">
     <navbar>
         <a href="/">
-            <img src="/static/images/logo.svg" width="40" height="40" alt="Logo" />
+            <svg width="200" height="50" viewBox="0 0 64 16" version="1.1" id="logo">
+              <g id="layer2">
+                <path
+                   style="stroke-width:0.109606"
+                   id="path274"
+                   d="m -36.54513,-42.509588 0,19.809291 a 1.9061498,1.9061498 120 0 1 -0.953075,1.650774 l -17.155348,9.904645 a 1.9061498,1.9061498 180 0 1 -1.90615,0 l -17.155349,-9.904645 a 1.9061498,1.9061498 60 0 1 -0.953075,-1.650774 l 0,-19.80929 a 1.9061498,1.9061498 120 0 1 0.953075,-1.650775 l 17.155349,-9.904645 a 1.9061498,1.9061498 180 0 1 1.906149,0 l 17.155349,9.904645 a 1.9061498,1.9061498 60 0 1 0.953075,1.650774 z"
+                   transform="matrix(0.30740531,0,0,0.30372816,23.782897,16.545361)" />
+              </g>
+              <g id="layer1">
+                <path
+                   id="path31"
+                   style="fill:#4d4d4d;fill-rule:evenodd;stroke-width:0.0293746"
+                   d="M 11.763289,3.914572 1.3881028,9.8522703 a 0.10746311,0.10746311 90.000426 0 0 -1.4e-6,0.1865377 l 4.9883072,2.854897 A 0.32624697,0.32624697 164.99998 0 0 6.8203814,12.774742 L 11.900221,4.0525466 A 0.10062399,0.10062399 45.217132 0 0 11.763289,3.914572 Z" />
+                <path
+                   id="path537"
+                   style="fill:#333333;fill-rule:evenodd;stroke-width:0.029419"
+                   d="M 12.162827,4.0018649 6.9729475,12.886067 a 0.0504192,0.0504192 45.290639 0 0 0.068524,0.06922 l 5.1227994,-2.923284 a 0.32119605,0.32119605 120.14455 0 0 0.162004,-0.2789709 l 0,-5.7069276 a 0.08771164,0.08771164 15.146085 0 0 -0.163448,-0.044243 z" />
+                <path
+                   id="path1180"
+                   style="fill:#999999;fill-rule:evenodd;stroke-width:0.0295315"
+                   d="m 1.0890783,3.6985577 v 5.6525366 a 0.22068576,0.22068576 30.240095 0 0 0.329423,0.1920375 L 11.783187,3.6743435 a 0.08679074,0.08679074 75.240095 0 0 -0.04276,-0.1623148 l -10.4648157,0 a 0.18652896,0.18652896 135 0 0 -0.186529,0.186529 z" />
+                <path
+                   id="path1062"
+                   style="fill:#4d4d4d;fill-rule:evenodd;stroke-width:0.029571"
+                   d="M 6.4864206,0.28046515 1.4340775,3.1336232 a 0.08682156,0.08682156 75.272862 0 0 0.042693,0.1624213 H 11.967016 a 0.04985456,0.04985456 104.72714 0 0 0.02452,-0.093265 L 6.8167272,0.28046515 a 0.33586257,0.33586257 6.6844583e-7 0 0 -0.3303066,0 z" />
+                <path
+                   style="fill:#ffffff;stroke-width:0.109606"
+                   id="path67"
+                   d="m 46.304138,13.61792 -1.100363,0.615114 -1.082886,-0.645386 0.01748,-1.2605 1.100363,-0.615113 1.082886,0.645385 z"
+                   transform="matrix(0.14795386,0,0,0.14795386,5.4827192,1.6710591)" />
+              </g>
+            </svg>
         </a>
 
         <div>