From d0d25c55a02b44bf0894ea13806f53b68044b4d6 Mon Sep 17 00:00:00 2001
From: Tatu Wikman <tatu.wikman@gmail.com>
Date: Mon, 27 Jan 2020 12:32:34 +0200
Subject: [PATCH] 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 | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/_sass/jekyll-theme-hacker.scss b/_sass/jekyll-theme-hacker.scss
index adf4137..b3123a1 100644
--- a/_sass/jekyll-theme-hacker.scss
+++ b/_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;