Show full header h1 for smaller displays

The prefix "./" would be lost in mobile displays and when the browser viewport
is smaller than the container width.

This removes the left margin from the header for smaller displays. Also adds a scss variable
so that its easy to change the point where the "mobil" margin is applied.

_sass/jekyll-theme-hacker.scss

@@ -6,6 +6,13 @@ $body-foreground: $gallery !default;
 $header: $conifer !default;
 $blockquote-color: $silver-chalice !default;
 $blockquote-border: $dove-grey !default;
+$container-max-width: 1000px;
+
+@mixin media-max-width($max-width) {
+  @media (max-width: $max-width) {
+      @content;
+  }
+}
 
 body {
   margin: 0;
@@ -21,7 +28,7 @@ body {
 
 .container {
   width: 90%;
-  max-width: 1000px;
+  max-width: $container-max-width;
   margin: 0 auto;
 }
 
@@ -64,8 +71,12 @@ header h1 {
                0 0 10px rgba(181, 232, 83, 0.1);
   letter-spacing: -1px;
   -webkit-font-smoothing: antialiased;
+  @include media-max-width($container-max-width) {
+    margin-left: 0;
+  }
 }
 
+
 header h1:before {
   content: "./ ";
   font-size: 24px;