diff --git a/assets/sass/_theme.sass b/assets/sass/_theme.sass
new file mode 100644
index 0000000..4236fd7
--- /dev/null
+++ b/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
+
diff --git a/assets/sass/stork.sass b/assets/sass/stork.sass
index c0dda89..1532c79 100644
--- a/assets/sass/stork.sass
+++ b/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;
diff --git a/assets/sass/style.sass b/assets/sass/style.sass
index 0dd3b62..f329f74 100644
--- a/assets/sass/style.sass
+++ b/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
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index ef18a32..49cb744 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -6,7 +6,9 @@