Merge pull request #49 from tswfi/show_full_header_for_small_displays

Show full header h1 for smaller displays
ThakaSartu · Jan 27, 2020 · b5d117c · b5d117c
2 parents 7baf14d + d0d25c5
commit b5d117c
Showing 1 changed file with 12 additions and 1 deletion.
diff --git 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;