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 @@
{{ if .Site.Params.Stork }}

diff --git a/static/js/soudan.js b/static/js/soudan.js index a5f2f41..efd0144 100644 --- a/static/js/soudan.js +++ b/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);