Feeling Responsive Updates (#5)

* Bump kramdown from 2.1.0 to 2.3.0 (Phlow#211)

Bumps [kramdown](https://github.com/gettalong/kramdown) from 2.1.0 to 2.3.0.
- [Release notes](https://github.com/gettalong/kramdown/releases)
- [Changelog](https://github.com/gettalong/kramdown/blob/master/doc/news.page)
- [Commits](https://github.com/gettalong/kramdown/commits)

Signed-off-by: dependabot[bot] <support@github.com>

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

* Update _06_typography.scss (Phlow#221)

Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
Co-authored-by: Mark C. Miller <miller86@llnl.gov>

Gemfile.lock

@@ -43,7 +43,8 @@ GEM
       sassc (> 2.0.1, < 3.0)
     jekyll-watch (2.2.1)
       listen (~> 3.0)
-    kramdown (2.1.0)
+    kramdown (2.3.0)
+      rexml
     kramdown-parser-gfm (1.1.0)
       kramdown (~> 2.0)
     liquid (4.0.3)
@@ -60,6 +61,7 @@ GEM
     rb-fsevent (0.10.3)
     rb-inotify (0.10.0)
       ffi (~> 1.0)
+    rexml (3.2.4)
     rouge (3.12.0)
     safe_yaml (1.0.5)
     sassc (2.2.1)

_sass/_06_typography.scss

@@ -83,6 +83,9 @@ p.button a {
 
 
 /* Headlines
+   The hK::before logic is to accomodate a vert. offset for persistent
+   top of page menu. The logic is copied from
+   https://css-tricks.com/hash-tag-links-padding/
 ------------------------------------------------------------------- */
 
 h1, h2, h3, h4, h5, h6 {
@@ -95,25 +98,65 @@ h1 {
     font-size: $font-size-h1;
     margin-top: 0;
 }
+h1::before { 
+  display: block; 
+  content: " "; 
+  margin-top: -60px; 
+  height: 60px; 
+  visibility: hidden; 
+  pointer-events: none;
+}
 h2 {
     font-size: $font-size-h2;
     margin: 1.563em 0 0 0;
 }
     .blog-index h2 {
         margin-top: 0;
     }
+h2::before { 
+  display: block; 
+  content: " "; 
+  margin-top: -60px; 
+  height: 60px; 
+  visibility: hidden; 
+  pointer-events: none;
+}
 h3 {
     font-size: $font-size-h3;
     margin: 1.152em 0 0 0;
 }
+h3::before { 
+  display: block; 
+  content: " "; 
+  margin-top: -50px; 
+  height: 50px; 
+  visibility: hidden; 
+  pointer-events: none;
+}
 h4 {
     font-size: $font-size-h4;
     margin: 1.152em 0 0 0;
 }
+h4::before { 
+  display: block; 
+  content: " "; 
+  margin-top: -50px; 
+  height: 50px; 
+  visibility: hidden; 
+  pointer-events: none;
+}
 h5 {
     font-size: $font-size-h5;
     margin: 1em 0 0 0;
 }
+h5::before { 
+  display: block; 
+  content: " "; 
+  margin-top: -50px; 
+  height: 50px; 
+  visibility: hidden; 
+  pointer-events: none;
+}