pytorch · JoelMarcey · Oct 26, 2018 · Nov 12, 2018 · Nov 14, 2018
diff --git a/.ruby-version b/.ruby-version
@@ -1 +1 @@
-2.5.1
+2.5.3
diff --git a/Gemfile b/Gemfile
@@ -1,5 +1,5 @@
 source "https://rubygems.org"
-ruby "2.5.1"
+ruby "2.5.3"
 
 group :jekyll_plugins do
   gem "github-pages"

diff --git a/Gemfile.lock b/Gemfile.lock
@@ -253,7 +253,7 @@ DEPENDENCIES
   jekyll-paginate-v2
 
 RUBY VERSION
-   ruby 2.5.1p57
+   ruby 2.5.3p105
 
 BUNDLED WITH
-   1.16.3
+   1.17.1
diff --git a/_includes/head.html b/_includes/head.html
@@ -20,4 +20,5 @@
     {% include analytics.html %}
     {% include pixel.html %}
   {% endif %}
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css" />
 </head>
diff --git a/_includes/main_menu.html b/_includes/main_menu.html
@@ -31,5 +31,14 @@
     <li>
       <a href="{{ site.external_urls.github }}">GitHub</a>
     </li>
+
+    <li className="navSearchWrapper reactNavSearchWrapper" key="search">
+      <input
+        id="search_input_react"
+        type="text"
+        placeholder="Search"
+        title="Search"
+      />
+    </li>
   </ul>
 </div>
diff --git a/_includes/nav.html b/_includes/nav.html
@@ -7,3 +7,12 @@
 
   <a class="main-menu-open-button" href="#" data-behavior="open-mobile-menu"></a>
 </div>
+
+<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
+<script type="text/javascript"> docsearch({
+apiKey: 'e3b73ac141dff0b0fd27bdae9055bc73',
+indexName: 'pytorch',
+inputSelector: '#search_input_react',
+debug: false // Set debug to true if you want to inspect the dropdown
+});
+</script>
diff --git a/_sass/_variables.scss b/_sass/_variables.scss
@@ -17,6 +17,7 @@ $command_block_black: #6c6c6d;
 $smoky_grey: #CCCDD1;
 $medium_smoky_grey: #CCCDD1;
 $code_link_color: #4974D1;
+$search_background_color: #000000;
 
 $desktop_header_height: 90px;
 $mobile_header_height: 68px;

diff --git a/_sass/search.scss b/_sass/search.scss
@@ -0,0 +1,210 @@
+/* Search */
+input[type='search'] {
+  -moz-appearance: none;
+  -webkit-appearance: none;
+}
+
+.navSearchWrapper {
+  align-items: center;
+  align-self: center;
+  display: flex;
+  justify-content: center;
+  padding-left: 10px;
+  position: absolute;
+  right: 10px;
+  top: 15px;
+}
+
+.navSearchWrapper:before {
+  border: 3px solid #e5e5e5;
+  border-radius: 50%;
+  content: ' ';
+  display: block;
+  height: 6px;
+  left: 15px;
+  position: absolute;
+  top: 50%;
+  transform: translateY(-58%);
+  width: 6px;
+  z-index: 1;
+}
+
+.navSearchWrapper:after {
+  background: #e5e5e5;
+  content: ' ';
+  height: 7px;
+  left: 24px;
+  position: absolute;
+  top: 55%;
+  transform: rotate(-45deg);
+  width: 3px;
+  z-index: 1;
+}
+
+.navSearchWrapper .aa-dropdown-menu {
+  background: #f9f9f9;
+  border: 3px solid rgba(57, 57, 57, 0.25);
+  color: #393939;
+  font-size: 14px;
+  left: auto !important;
+  line-height: 1.2em;
+  right: 0 !important;
+}
+
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--category-header {
+  background: $search_background_color;
+  color: white;
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--category-header
+  .algolia-docsearch-suggestion--highlight {
+  background-color: $search_background_color;
+  color: #fff;
+}
+
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--title
+  .algolia-docsearch-suggestion--highlight,
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--subcategory-column
+  .algolia-docsearch-suggestion--highlight {
+  color: $search_background_color;
+}
+
+.navSearchWrapper .aa-dropdown-menu .algolia-docsearch-suggestion__secondary,
+.navSearchWrapper
+  .aa-dropdown-menu
+  .algolia-docsearch-suggestion--subcategory-column {
+  border-color: rgba(57, 57, 57, 0.3);
+}
+
+input#search_input_react {
+  background-color: rgba(0, 0, 0, 0.2);
+  border: none;
+  border-radius: 20px;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 300;
+  line-height: 20px;
+  outline: none;
+  padding-left: 25px;
+  position: relative;
+  -webkit-transition: 0.5s width ease;
+  -moz-transition: 0.5s width ease;
+  -o-transition: 0.5s width ease;
+  transition: 0.5s width ease;
+  width: 170px;
+}
+
+input#search_input_react:focus,
+input#search_input_react:active {
+  color: #fff;
+  width: 220px;
+}
+.navigationSlider .slidingNav .navSearchWrapper .algolia-docsearch-footer a {
+  height: auto;
+}
+@media only screen and (max-width: 735px) {
+  .navSearchWrapper {
+    width: 40%;
+  }
+}
+
+input::-webkit-input-placeholder {
+  color: #e5e5e5;
+}
+
+input::-moz-placeholder {
+  color: #e5e5e5;
+}
+
+input::placeholder {
+  color: #e5e5e5;
+}
+
+.hljs {
+  padding: 1.25rem 1.5rem;
+}
+
+@media only screen and (max-width: 1024px) {
+  .reactNavSearchWrapper input#search_input_react {
+    background-color: rgba(242, 196, 178, 0.25);
+    border: none;
+    border-radius: 20px;
+    box-sizing: border-box;
+    color: #393939;
+    font-size: 14px;
+    line-height: 20px;
+    outline: none;
+    padding-left: 25px;
+    position: relative;
+    transition: background-color 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55),
+      width 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55), color 0.2s ease;
+    width: 100%;
+  }
+
+  .reactNavSearchWrapper input#search_input_react:focus,
+  .reactNavSearchWrapper input#search_input_react:active {
+    background-color: $search_background_color;
+    color: #fff;
+  }
+
+  .reactNavSearchWrapper .algolia-docsearch-suggestion--subcategory-inline {
+    display: none;
+  }
+
+  .reactNavSearchWrapper > span {
+    width: 100%;
+  }
+
+  .reactNavSearchWrapper .aa-dropdown-menu {
+    font-size: 12px;
+    line-height: 2em;
+    padding: 0;
+    border-width: 1px;
+    min-width: 500px;
+  }
+  .reactNavSearchWrapper .algolia-docsearch-suggestion__secondary {
+    border-top: none;
+  }
+  .aa-suggestions {
+    min-height: 140px;
+    max-height: 60vh;
+    -webkit-overflow-scrolling: touch;
+    overflow-y: scroll;
+  }
+}
+
+@media only screen and (min-width: 1024px) {
+  .navSearchWrapper {
+    padding-left: 10px;
+    position: relative;
+    right: auto;
+    top: auto;
+  }
+
+  .navSearchWrapper .algolia-autocomplete {
+    display: block;
+  }
+}
+
+@media only screen and (max-width: 735px) {
+  .reactNavSearchWrapper .aa-dropdown-menu {
+    min-width: 400px;
+  }
+}
+@media only screen and (max-width: 475px) {
+  .reactNavSearchWrapper .aa-dropdown-menu {
+    min-width: 300px;
+  }
+}
+
+/* End of Search */
diff --git a/assets/main.scss b/assets/main.scss
@@ -25,3 +25,4 @@ $baseurl:"{{ site.baseurl }}";
 @import "quick-start-module";
 @import "blog";
 @import "similar-posts-module";
+@import "search";