From ddd8e9ad5da8665ea71a814ef4575d9778445354 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Thu, 29 Nov 2018 00:01:51 +0000
Subject: [PATCH] fix(search): fix layout on Safari/Webkit

Fix #825
---
 layouts/partials/css/academic.css | 20 +++++++++++++++++---
 layouts/partials/search.html      |  2 +-
 2 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/layouts/partials/css/academic.css b/layouts/partials/css/academic.css
index 546a43f4..1604ec76 100644
--- a/layouts/partials/css/academic.css
+++ b/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);
diff --git a/layouts/partials/search.html b/layouts/partials/search.html
index d87d3323..e4a704b9 100644
--- a/layouts/partials/search.html
+++ b/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">