[css] Successfully performed an injection, but I don't like it at thi…

…s point. Ref #9
alecive · Oct 18, 2017 · 295aff4 · 295aff4
1 parent 6f8800f
commit 295aff4
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 6 deletions.
diff --git a/_includes/css/main.css b/_includes/css/main.css
@@ -370,25 +370,43 @@ header .intro-text .owner-small {
 
 .navbar-brand {
     padding: 0px;
-    height: auto;
     margin: 0px;
+    height: 90px;
 }
 
-.navbar-brand img {
+.navbar-brand svg {
     margin-left: 10px;
     margin-right: 25px;
     width: 90px;
     height: 90px;
+}
+
+.navbar-brand,
+.navbar-brand svg,
+.navbar-brand svg * {
     -webkit-transition: all ease .3s;
     -moz-transition: all ease .3s;
     transition: all ease .3s;
 }
 
+.navbar-brand:hover {
+    background: none;
+}
+
+.navbar-brand:hover svg g .logo-svg-c {
+    opacity: 1;
+    fill: #{{ site.color.accent }};
+}
+
 @media(max-width:767px) {
-    .navbar-brand img {
+
+    .navbar-brand {
+        height: 70px;
+    }
+
+    .navbar-brand svg {
         width: 70px;
         height: 70px;
-        margin-right: 10px;
     }
 
     .navbar-nav .nav-link {
@@ -404,7 +422,11 @@ header .intro-text .owner-small {
     }
 }
 
-.navbar-shrink .navbar-brand img {
+.navbar-shrink .navbar-brand {
+    height: 61px;
+}
+
+.navbar-shrink .navbar-brand svg {
     width: 61px;
     height: 61px;
     margin-right: 15px;

diff --git a/_includes/header.html b/_includes/header.html
@@ -2,7 +2,7 @@
     <nav id="navbar-scrollspy" class="navbar fixed-top navbar-expand-md {% if page.type == "cv" or page.type == "fourofour" %}no-print{% endif %}">
         <div class="container">
         <a class="navbar-brand" href="{% if page.type == "research" %}#page-top{% else %}/{% endif %}">
-            <img class="img-fluid" src="{{ site.logo }}">
+            <img class="img-fluid svg-inject" src="{{ site.logo }}">
         </a>
         <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
             <span> </span>

diff --git a/_includes/js.html b/_includes/js.html
@@ -13,6 +13,7 @@
     <!-- Plugin JavaScript -->
     <script src="{{ "/js/jquery.easing.min.js" | prepend: site.baseurl }}"></script>
     <script src="{{ "/js/classie.js" | prepend: site.baseurl }}"></script>
+    <script src="{{ "/js/svg-injector.min.js" | prepend: site.baseurl }}"></script>
 
     <script>
       // cbpAnimatedHeader.js v1.0.0
@@ -84,5 +85,9 @@
           $('.navbar-toggler:visible').click();
       });
 
+      // Injects css animations and styling into svg icons and logos
+      var SVGToInject = document.querySelectorAll('.svg-inject');
+      SVGInjector(SVGToInject);
+
       window.addEventListener("hashchange", function() { scrollBy(0, -110) });
     </script>