Add colourful logo

assets/sass/components/_logo.scss

@@ -0,0 +1,22 @@
+.logo__wrapper {
+  width: 140px;
+  line-height: 0;
+  margin-bottom: 1em;
+}
+
+.logo__color_1 {
+  fill: #ff6800;
+}
+
+.logo__color_2 {
+  fill: #e8ff00;
+}
+
+.logo__color_3 {
+  fill: #00a9ff;
+}
+
+.logo__color_4 {
+  fill: #b346e2;
+}
+

assets/sass/components/_site-header.scss

@@ -7,6 +7,10 @@
   }
 }
 
+.site-header__container {
+  @include container;
+}
+
 .site-header__home-link {
   color: inherit;
 }

assets/sass/main.scss

@@ -38,6 +38,7 @@
 @import "components/posts";
 @import "components/post";
 @import "components/photos";
+@import "components/logo";
 
 // 7. Utilities – utilities and helper classes with ability to override
 //    anything which goes before in the triangle, eg. hide helper class

layouts/partials/header.html

@@ -1,5 +1,7 @@
 <header class="site-header" role="banner">
-  <div class="container">
-    <h1><a class="site-header__home-link" href="/">{{.Site.Title}}</a></h1>
+  <div class="site-header__container">
+    <h1 class="logo__wrapper">
+      <a class="site-header__home-link" href="/">{{ partial "logo.svg" . }}</a>
+    </h1>
   </div>
 </header>

layouts/section/photos.html

@@ -1,5 +1,5 @@
 {{ define "main" }}
-  <section class="photos outer">
+  <section class="photos">
     <div class="photos__container">
       {{ range (.Paginator 24).Pages }}
         <article class="photos__thumb-container">