Revamp stork

assets/sass/_theme.sass

@@ -0,0 +1,10 @@
+@import "_everforest.sass"
+
+$shadow: $ef-bg_dim
+$bg0: $ef-bg0
+$bg1: $ef-bg1
+$bg2: $ef-bg2
+$dim: $ef-bg5
+$fg: $ef-fg
+$primary: $ef-green
+

assets/sass/stork.sass

@@ -1,9 +1,29 @@
+@import "_theme.sass"
+
+@function str-replace($string, $search, $replace: '')
+  $index: str-index($string, $search)
+  @if $index
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace)
+  @return $string
+
+$padding: 0.5em
+
 .stork-attribution
   display: none
 .stork-results
+  display: flex
+  flex-direction: column
   list-style-type: none
   padding-left: 0
   margin-bottom: 0
+  margin: 0;
+.stork-result
+  margin: 0 (-$padding)
+  padding: 0 $padding
+  &:hover
+    background: $bg2
+    a
+      text-decoration: none
 .stork-excerpt p, .stork-title p
   margin: 0
 .stork-excerpt
@@ -15,19 +35,40 @@
   width: 100%
   height: 2em
   display: flex
+  label
+    display: flex;
+    position: relative
+    width: 100%
+    &:focus-within
+      outline: 1px solid $primary
+    &::before
+      content: ""
+      position: absolute;
+      left: 0.5em;
+      top: 0;
+      bottom: 0;
+      width: 1em
+      background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='1.5' stroke='%23#{str-slice("#{$fg}", 2)}' class='w-6 h-6'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M21 21l-5.197-5.197m0 0A7.5 7.5 0 105.196 5.196a7.5 7.5 0 0010.607 10.607z' /%3E%3C/svg%3E") center / contain no-repeat;
+    input
+      padding-left: 1.75em;
+      box-sizing: border-box
+      width: 100%
+      background: $bg2 !important
+      &:nth-last-child(3)
   & > *
     height: 100%
-  input[data-stork]
-    width: 100%
-  input[data-stork]:nth-last-child(3)
-    border-top-right-radius: 0
-    border-bottom-right-radius: 0
-.stork-close-button, .stork-output-visible
-  border-radius: 4px
-  border-top-left-radius: 0
-  border-bottom-left-radius: 0
 .stork-progress
   display: none
 .stork-output-visible
-  background: #f7f7f7
-  padding: 0 0.5em
+  background: $bg1
+  padding: 0 $padding
+.stork-excerpt
+  color: $fg
+.stork-highlight
+  color: inherit
+  padding: 0 0.25ch
+  background: $dim
+.stork-close-button
+  width: 3em;
+  box-shadow: none;
+  transform: none !important;

assets/sass/style.sass

@@ -1,18 +1,11 @@
 @import "syntax.scss"
 @import "stork.sass"
 @import "soudan.sass"
-@import "_everforest.sass"
+@import "_theme.sass"
 @import "_topography.sass"
 
 @import url('https://fonts.googleapis.com/css2?family=Fira+Code&family=Roboto+Slab&family=Roboto:ital,wght@0,300;0,400;0,700;1,400;1,700&display=swap');
 
-$shadow: $ef-bg_dim
-$bg0: $ef-bg0
-$bg1: $ef-bg1
-$bg2: $ef-bg2
-$dim: $ef-bg5
-$fg: $ef-fg
-$primary: $ef-green
 $padding: 1rem
 $shadow-size: 4px
 

layouts/_default/baseof.html

@@ -6,7 +6,9 @@
 	<div class="content">
 	{{ if .Site.Params.Stork }}
 	<div class="stork-search">
-		<input data-stork="home" placeholder="🔎 Search {{ .Site.Title }}...">
+		<label>
+			<input type="text" data-stork="home" placeholder=" Search {{ .Site.Title }}...">
+		</label>
 	</div>
 	<div data-stork="home-output"></div>
 	<br>

static/js/soudan.js

@@ -77,7 +77,7 @@ function renderComments(jump, comments, debug) {
 	}
 	commentContainer.innerHTML = html;
 	soudan.style.display = "";
-	if (jump && window.location.hash) {
+	if (jump && window.location.hash.substr(1) == parseInt(window.location.hash.substr(1))) {
 		const target = document.getElementById(window.location.hash.substring(1));
 		if (target) {
 			window.scrollTo(0, target.offsetTop);