Moved liribird svg to a webfont, so that its color matches the nav te…

…xt color, so that we can use any md color, even the ones that require black text on it (like yellow or green). Some cleanup

_layouts/base.html

@@ -19,6 +19,7 @@
   <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/css/materialize.css"  media="screen,projection">
   <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/css/main.css"  media="screen,projection">
   <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/css/toc.css"  media="screen,projection">
+  <link type="text/css" rel="stylesheet" href="{{ site.baseurl }}/css/font-liri.css"  media="screen,projection">
 
   <!-- AngularJs -->
   <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>

_layouts/centered.html

@@ -27,34 +27,14 @@
     margin: 20px auto;
     flex-shrink: 0;
   }
-
-  .liri-bird {
-    width: 32px;
-    height: 32px;
-    opacity: 1;
-    margin: 0 24px;
-  }
-
-  @media screen and (min-width: 1024px) {
-    .mdl-layout__drawer-button {
-      /* Hide the Hamburger button but will leave an unused space */
-      display: none;
-    }
-    .mdl-layout__header-row {
-      /* so important to make sure the Hamburger button didn't leave an unused space */
-      padding-left: 24px !important;
-    }
-  }
 </style>
 
 <div class="liri-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header mdl-layout__header--scroll">
     <div class="mdl-layout__header-row">
       <!-- Title -->
-      <a href="{{ site.baseurl }}/">
-        <img src="{{ site.baseurl }}/images/liri-bird.svg" alt="" class="liri-bird">
-      </a>
-      <span class="mdl-layout-title">Liri</span>
+      <i class="icon-liri liri-bird pointer" onclick="location.href='{{ site.baseurl }}/'"></i>
+      <span class="mdl-layout-title pointer" onclick="location.href='{{ site.baseurl }}/'">Liri</span>
       <!-- Add spacer, to align navigation to the right -->
       <div class="mdl-layout-spacer"></div>
       <!-- Navigation -->

_layouts/default.html

@@ -14,34 +14,14 @@
      your background is light. */
     color: white;
   }
-
-  .liri-bird {
-    width: 32px;
-    height: 32px;
-    opacity: 1;
-    margin: 0 24px;
-  }
-
-  @media screen and (min-width: 1024px) {
-    .mdl-layout__drawer-button {
-      /* Hide the Hamburger button but will leave an unused space */
-      display: none;
-    }
-    .mdl-layout__header-row {
-      /* so important to make sure the Hamburger button didn't leave an unused space */
-      padding-left: 24px !important;
-    }
-  }
 </style>
 
 <div class="liri-layout-transparent mdl-layout mdl-js-layout">
   <header class="mdl-layout__header mdl-layout__header--transparent">
     <div class="mdl-layout__header-row">
       <!-- Title -->
-      <a href="{{ site.baseurl }}/">
-        <img src="{{ site.baseurl }}/images/liri-bird.svg" alt="" class="liri-bird">
-      </a>
-      <span class="mdl-layout-title">Liri</span>
+      <i class="icon-liri liri-bird pointer" onclick="location.href='{{ site.baseurl }}/'"></i>
+      <span class="mdl-layout-title pointer" onclick="location.href='{{ site.baseurl }}/'">Liri</span>
       <!-- Add spacer, to align navigation to the right -->
       <div class="mdl-layout-spacer"></div>
       <!-- Navigation -->

_layouts/onecolumn.html

@@ -2,38 +2,18 @@
 layout: base
 ---
 <style>
-  .liri-bird {
-    width: 32px;
-    height: 32px;
-    opacity: 1;
-    margin: 0 24px;
-  }
-
   .pt32 {
     padding-top: 32px;
   }
-
-  @media screen and (min-width: 1024px) {
-    .mdl-layout__drawer-button {
-      /* Hide the Hamburger button but will leave an unused space */
-      display: none;
-    }
-    .mdl-layout__header-row {
-      /* so important to make sure the Hamburger button didn't leave an unused space */
-      padding-left: 24px !important;
-    }
-  }
 </style>
 
 <!-- Always shows a header, even in smaller screens. -->
 <div class="liri-layout mdl-layout mdl-js-layout mdl-layout--fixed-header">
   <header class="mdl-layout__header mdl-layout__header--scroll">
     <div class="mdl-layout__header-row">
       <!-- Title -->
-      <a href="{{ site.baseurl }}/">
-        <img src="{{ site.baseurl }}/images/liri-bird.svg" alt="" class="liri-bird">
-      </a>
-      <span class="mdl-layout-title">Liri</span>
+      <i class="icon-liri liri-bird pointer" onclick="location.href='{{ site.baseurl }}/'"></i>
+      <span class="mdl-layout-title pointer" onclick="location.href='{{ site.baseurl }}/'">Liri</span>
       <!-- Add spacer, to align navigation to the right -->
       <div class="mdl-layout-spacer"></div>
       <!-- Navigation -->

blog.html

@@ -24,22 +24,6 @@
   .right {
     text-align: right;
   }
-
-  .no-padding-top {
-    padding-top: 0;
-  }
-
-  .no-padding-bottom {
-    padding-bottom: 0;
-  }
-
-  .primary-text {
-    color: rgba(0, 0, 0, 0.87);
-  }
-
-  .secondary-text {
-    color: rgba(0, 0, 0, 0.54);
-  }
 </style>
 
 {% for post in site.posts %}

css/font-liri.css

@@ -0,0 +1,30 @@
+@font-face {
+  font-family: 'liri';
+  src:  url('../fonts/liri/liri.eot?eue1d8');
+  src:  url('../fonts/liri/liri.eot?eue1d8#iefix') format('embedded-opentype'),
+    url('../fonts/liri/liri.ttf?eue1d8') format('truetype'),
+    url('../fonts/liri/liri.woff?eue1d8') format('woff'),
+    url('../fonts/liri/liri.svg?eue1d8#liri') format('svg');
+  font-weight: normal;
+  font-style: normal;
+}
+
+i.icon-liri {
+  /* use !important to prevent issues with browser extensions that change fonts */
+  font-family: 'liri' !important;
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+
+  /* Better Font Rendering =========== */
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+.icon-liri:before {
+  content: "\e900";
+}
+

css/main.scss

@@ -40,3 +40,42 @@
 .liri-content h3 {
     margin-top: 48px;
 }
+
+.liri-bird {
+    font-size: 24px;
+    opacity: 1;
+    margin: 0 24px;
+}
+
+.pointer {
+    cursor: pointer;
+}
+
+
+.no-padding-top {
+    padding-top: 0;
+}
+
+.no-padding-bottom {
+    padding-bottom: 0;
+}
+
+.primary-text {
+    color: rgba(0, 0, 0, 0.87);
+}
+
+.secondary-text {
+    color: rgba(0, 0, 0, 0.54);
+}
+
+
+@media screen and (min-width: 1024px) {
+    .mdl-layout__drawer-button {
+        /* Hide the Hamburger button but will leave an unused space */
+        display: none;
+    }
+    .mdl-layout__header-row {
+        /* so important to make sure the Hamburger button didn't leave an unused space */
+        padding-left: 24px !important;
+    }
+}

screenshots.html

@@ -2,7 +2,7 @@
 layout: centered
 title: Screenshots
 permalink: /screenshots/
-theme: indigo-light_blue
+theme: yellow-light_blue
 navitem: nav-screenshots
 ---