Change Logo Image

Author: hwkr

src/assets/stylesheets/modules/drawer/_animation.scss

@@ -69,7 +69,8 @@
  * Project logo image
  */
 .project .logo img {
-  transition: box-shadow .4s;
+  transition: box-shadow .4s,
+              filter     .4s;
 }
 
 /*

src/assets/stylesheets/modules/drawer/_appearance.scss

@@ -77,8 +77,6 @@
   /* [tablet landscape-]: Add drop shadow */
   @include break-to-device(tablet landscape) {
     @include drop-shadow(1);
-
-    background: $primary;
     color: $white;
   }
 
@@ -89,20 +87,12 @@
     background: $black-lightest;
   }
 
-  /*
-   * Project logo
-   */
-  .logo img {
-    background: $white;
-    border-radius: 100%;
-  }
-
   /*
    * Scale logo on hover
    */
-  &:hover .logo img,
-  &:focus .logo img {
-    @include drop-shadow(2);
+  &:hover .logo svg,
+  &:focus .logo svg {
+    filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
   }
 }
 

src/assets/stylesheets/modules/drawer/_layout.scss

@@ -201,7 +201,7 @@
     /*
      * Project logo image
      */
-    img {
+    svg {
       display: block;
       width: 64px;
       height: 64px;

src/assets/stylesheets/palettes.scss

@@ -123,6 +123,28 @@
       /* [tablet landscape-]: Set background color */
       @include break-to-device(tablet landscape) {
         background: $color;
+        /*
+        * Project logo
+        */
+        .logo svg {
+          .primary {
+            fill: $white;
+          }
+          .mark {
+            fill: $color;
+          }
+        }
+      }
+      /*
+      * Project logo
+      */
+      .logo svg {
+        .primary {
+          fill: $color;
+        }
+        .mark {
+          fill: $white;
+        }
       }
     }
 
@@ -211,6 +233,22 @@
       }
     }
 
+
+    /*
+     * Project information
+     */
+    .project {
+      /*
+      * Project logo
+      */
+      .logo svg {
+        .accent {
+          fill: $color;
+        }
+      }
+    }
+
+
     /*
      * Repository buttons
      */

src/drawer.html

@@ -9,11 +9,13 @@
     <div class="banner">
 
       <!-- Version -->
-      {% if config.extra.logo %}
         <div class="logo">
-          <img src="{{ base_url }}/{{ config.extra.logo }}" />
-        </div>
-      {% endif %}
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024">
+          <path class="mark" d="M197.701 78.089h489.115c37.098 0 72.08 14.553 98.506 40.978 26.425 26.425 40.978 61.409 40.978 98.507l-.001 530.219a139.582 139.582 0 0 1-1.397 19.613l-.05.352v55.159c0 76.852-62.525 139.424-139.379 139.483l-487.771.003V78.089z"/>
+          <path class="primary" d="M686.816 73.089H210.847l-18.146.001v894.313l492.775-.003c79.42-.062 144.375-65.055 144.375-144.483v-54.804a144.065 144.065 0 0 0 1.447-20.32V217.574h.001c.001-79.467-65.018-144.485-144.483-144.485zM370.814 271.966c25.968 0 68.307 8.765 70.992 89.508 15.487 21.569 39.002 41.532 66.851 55.718 48.882 8.257 104.158 9.791 161.664 4.5-6.136 16.767-64.204 57.611-63.155 58.35 26.518 18.916 91.86 32.309 91.86 32.309s-44.922 19.526-86.471 20.806c.103.102.26.15.26.254-141.945 2.3-199.456-49.174-204.453-80.509-2.852-16.821 7.938-29.318 28.564-32.615 14.671-2.401 9.826-23.771-3.654-21.469-32.399 5.699-51.121 28.779-46.324 57.509 7.642 47.438 79.028 105.408 241.789 98.352 36.947 12.015 62.303 11.35 85.572 9.612-28.562 33.276-52.728 46.67-74.542 53.723 4.055 33.277 5.444 71.979 4.055 86.061-29.955-43.937-98.27-112.384-128.313-128.205-1.404 42.146 12.383 98.351 28.756 117.622-39.542-8.843-57.47-21.087-73.792-42.199-10.681 12.731-41.187 42.994-73.687 33.356 20.462-36.78 32.794-77.24 31.349-128.152-34.044-6.979-91.36-38.648-90.072-156.271.702-47.465-33.839-61.164-51.515-80.538 27.257-15.724 58.501-47.722 84.266-47.722zm283.492 654.258H233.881v-33.946h452.936c32.42 0 62.438-10.826 86.613-29.039-26.104 37.962-69.83 62.985-119.124 62.985z"/>
+          <path class="accent" d="M380.369 909.128v108.341c0 3.299-2.053 6.306-5.277 7.553-1.024.438-2.125.586-3.225.586a8.918 8.918 0 0 1-6.084-2.346l-32.326-31.082-32.322 31.082c-1.688 1.537-3.813 2.418-6.084 2.418a8.213 8.213 0 0 1-3.228-.658c-3.222-1.246-5.276-4.252-5.276-7.551V909.128h93.822z"/>
+        </svg>
+      </div>
 
       <!-- Project name and verison -->
       <div class="name">