Add breakpoints to the layout

assets/css/components/_container.scss

@@ -1,11 +1,20 @@
-%explorer-container-height { min-height: calc(100vh - #{$explorer-header-small} - #{explorer-size(-1) * 2}); }
+%explorer-container-height {
+  margin-top: $explorer-header-small;
+  min-height: calc(100vh - #{$explorer-header-small} - #{explorer-size(-1) * 2});
+}
 
 @media (orientation: landscape) and (max-height: $explorer-breakpoint-landscape) {
-  %explorer-container-height { min-height: calc(100vh - #{$explorer-header-medium} - #{explorer-size(-1) * 2}); }
+  %explorer-container-height {
+    margin-top: $explorer-header-medium;
+    min-height: calc(100vh - #{$explorer-header-medium} - #{explorer-size(-1) * 2});
+  }
 }
 
 @media (min-width: $explorer-breakpoint-landscape) {
-  %explorer-container-height { min-height: calc(100vh - #{$explorer-header-large} - #{explorer-size(-1) * 2}); }
+  %explorer-container-height {
+    margin-top: $explorer-header-large;
+    min-height: calc(100vh - #{$explorer-header-large} - #{explorer-size(-1) * 2});
+  }
 }
 
 .container {
@@ -17,5 +26,18 @@
   &__section {
     display: block;
     padding: 0 explorer-size(-2);
+    margin: 0 auto;
   }
 }
+
+@media (min-width: $explorer-breakpoint-sm) {
+  .container__section { width: $explorer-breakpoint-sm; }
+}
+
+@media (min-width: $explorer-breakpoint-md) {
+  .container__section { width: $explorer-breakpoint-md; }
+}
+
+@media (min-width: $explorer-breakpoint-lg) {
+  .container__section { width: $explorer-breakpoint-lg; }
+}

assets/css/components/_header.scss

@@ -1,24 +1,32 @@
 .header {
   @extend %explorer-header-min-height;
-  background: explorer-color("gray", 900);
-
-  &__container {
-    width: 100%;
-  }
+  background: explorer-color("gray", "900");
+  box-shadow: 0 2px 2px 0 rgba(explorer-color("slate", "100"), 0.16),
+              0 0px 2px 0 rgba(explorer-color("slate", "100"), 0.12);
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
 
+  &__container { width: 100%; }
   &__row { vertical-align: middle; }
   &__cell {
     @extend %explorer-header-height;
     &--logo { @extend %explorer-header-square-width; }
   }
+
   &__logo-link {
     @extend %explorer-header-height;
     @extend %explorer-header-square-width;
-    display: block;
+    display: flex;
+    background: explorer-color("blue", "500");
+    align-items: center;
+    justify-content: center;
   }
+
   &__logo {
-    @extend %explorer-header-height;
-    @extend %explorer-header-square-width;
+    width: 32px;
+    height: 36px;
     display: block;
   }
 }

assets/static/images/logo.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="36">
+    <defs>
+        <linearGradient id="a" x1="0%" y1="0%" y2="0%">
+            <stop offset="0%" stop-color="#FFF" stop-opacity=".8"/>
+            <stop offset="100%" stop-color="#FFF" stop-opacity=".349"/>
+        </linearGradient>
+    </defs>
+    <path fill="none" d="M30.428 26.99l-13.856 8a3 3 0 1 1-3-5.196l13.856-8a3 3 0 0 1 3 5.196zm-6-10.392l-13.856 8a3 3 0 0 1-3-5.196l13.856-8a3 3 0 1 1 3 5.196zm-6-10.392l-13.856 8a3 3 0 0 1-3-5.196l13.856-8a3 3 0 1 1 3 5.196z"/>
+    <path fill="url(#a)" d="M30.428 26.99l-13.856 8a3 3 0 1 1-3-5.196l13.856-8a3 3 0 0 1 3 5.196zm-6-10.392l-13.856 8a3 3 0 0 1-3-5.196l13.856-8a3 3 0 1 1 3 5.196zm-6-10.392l-13.856 8a3 3 0 0 1-3-5.196l13.856-8a3 3 0 1 1 3 5.196z"/>
+    <path fill="#FFF" fill-rule="evenodd" d="M1.572 9.01a3 3 0 0 1 4.098 1.098l12 20.784a3 3 0 0 1-5.196 3l-12-20.784A3 3 0 0 1 1.572 9.01z" opacity=".6"/>
+</svg>

lib/explorer_web/templates/layout/_header.html.eex

@@ -1,7 +1,11 @@
 <header class="header">
   <table class="header__container" cellspacing="0" cellpadding="0" border="0">
     <tr class="header__row">
-      <td class="header__cell header__cell--logo"><%= logo_image(@conn, alt: gettext "POA Network Explorer") %></td>
+      <td class="header__cell header__cell--logo">
+        <a href="<%= ExplorerWeb.Endpoint.url() %>" class="header__logo-link">
+          <%= logo_image(@conn, alt: gettext("POA Network Explorer"), class: "header__logo") %>
+        </a>
+      </td>
       <td class="header__cell" align="right"></td>
     </tr>
   </table>

lib/explorer_web/views/layout_view.ex

@@ -1,11 +1,9 @@
 defmodule ExplorerWeb.LayoutView do
   use ExplorerWeb, :view
-  alias ExplorerWeb.Endpoint
 
-  def logo_image(conn, alt: alt) do
+  def logo_image(conn, alt: alt, class: class) do
     conn
-    |> static_path("/images/logo.png")
-    |> img_tag(class: "header__logo", alt: alt)
-    |> link(to: Endpoint.url(), class: "header__logo-link")
+    |> static_path("/images/logo.svg")
+    |> img_tag(class: class, alt: alt)
   end
 end