Adjust css for handling post title to be on the top when referred by …

…an anchor

The post title can sometimes be referred by an anchor using the "id" of that element.
In that case the title will be automatically be the first element within the viewport.
Since we have a header fixed at the top of the view port, the title becomes hidden or
not visible. That's why some css adjustments are needed so that if any user ends up
with a link to a page that is referring to the post title (i.e. auto generated anchor
link by algolia DocSearch).

The css code uses pseudo element `:before` to make the adjustments. Details on this
can be found in the following article:

https://css-tricks.com/hash-tag-links-padding/

packages/docusaurus-1.x/lib/static/css/main.css

@@ -653,6 +653,15 @@ blockquote {
   padding: 0;
 }
 
+.mainContainer .wrapper .post .postHeader:before, .mainContainer .wrapper .post .postHeaderTitle:before {
+  content: "";
+  display: block;
+  height: 90px; /* fixed header height and empty space below it */
+  margin-top: -90px;  /* negative fixed header height and empty space below it  */
+  visibility: hidden;
+  pointer-events: none;
+}
+
 .mainContainer .wrapper .post .postSocialPlugins {
   padding-top: 1em;
 }
@@ -714,6 +723,17 @@ blockquote {
     width: 100%;
   }
 }
+
+@media only screen and (max-width: 1023px) {
+  .mainContainer .wrapper .post .postHeader:before, .mainContainer .wrapper .post .postHeaderTitle:before {
+    content: "";
+    display: block;
+    height: 200px; /* fixed header height and empty space below it */
+    margin-top: -200px;  /* negative fixed header height and empty space below it  */
+    visibility: hidden;
+    pointer-events: none;
+  }
+}
 /* End of Main Container */
 
 /* Navbar */