Atlas48/cracker
1
1
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Show full header h1 for smaller displays

Browse Source 
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.
This commit is contained in:
Tatu Wikman 2020-01-27 12:32:34 +02:00
parent 7baf14d73e
commit d0d25c55a0
No known key found for this signature in database
GPG Key ID: BF214F789950B74E
1 changed files with 12 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
_sass/jekyll-theme-hacker.scss
View File

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