fix(search): fix layout on Safari/Webkit

Fix #825

layouts/partials/css/academic.css

@@ -241,6 +241,7 @@ small,
 
 .search-results {
   transform: scale(0);
+  -webkit-transform: scale(0);
   background-color: {{ .Get "background" }};
   bottom: 0;
   left: 0;
@@ -262,6 +263,7 @@ small,
 
 .searching .search-results {
   transform: scale(1);
+  -webkit-transform: scale(1);
   visibility: visible;
   z-index: 11; /* Second highest index, after navbar. */
 }
@@ -271,15 +273,27 @@ small,
 }
 
 .search-results > .container {
-  padding-top: calc(70px + 2rem); /* Max responsive navbar height plus padding. */
+  padding-top: 70px;  /* Navbar height. */
+}
+@media screen and (max-width: 1200px) {
+  .search-results > .container {
+    padding-top: 50px;  /* Navbar height. */
+  }
 }
 
 .search-header {
-  background-color: {{ .Get "background" }};
+  position: -webkit-sticky;
   position: sticky;
-  top: calc(70px + 2rem); /* Max responsive navbar height plus padding. */
+  top: 70px;  /* Navbar height. */
+  background-color: {{ .Get "background" }};
+  padding-top: 2rem;
   padding-bottom: 1rem;
 }
+@media screen and (max-width: 1200px) {
+  .search-header {
+    top: 50px;  /* Navbar height. */
+  }
+}
 
 .dark .search-header {
   background-color: rgb(40, 42, 54);

layouts/partials/search.html

@@ -1,6 +1,6 @@
 <aside class="search-results" id="search">
   <div class="container">
-    <section class="search-header fixed-top">
+    <section class="search-header">
 
       <div class="row no-gutters justify-content-between mb-3">
         <div class="col-6">