Fix stork

Fixes #309
This commit is contained in:
Alexandre Vicenzi 2022-08-31 19:35:19 +02:00
parent b7350ed58c
commit b3c04ea205
7 changed files with 161 additions and 216 deletions

View file

@ -1,208 +0,0 @@
.stork-wrapper-dark {
position: relative;
font-family: inherit;
box-sizing: border-box;
font-size: 1em;
padding: unset;
--stork-blue-2: #a5d8ff;
--stork-violet-4: #9775fa;
--stork-violet-5: #845ef7;
--stork-violet-10: #52366d;
--stork-lime-3: #c0eb75;
--stork-gray-1: #f1f3f5;
--stork-gray-3: #dee2e6;
--stork-gray-7: #495057;
--stork-gray-8: #343a40;
--flex-red: #d9411e;
--stork-border-color: var(--stork-gray-7);
--stork-background-color: var(--stork-gray-8);
--stork-text-color: var(--flex-red);
}
.stork-wrapper-dark *,
.stork-wrapper-dark *:before,
.stork-wrapper-dark *:after {
box-sizing: border-box;
}
.stork-wrapper-dark .stork-input {
width: 100%;
height: 2.4em;
font-size: 1em;
padding: 0.4em 0.8em;
position: relative;
box-shadow: inset 0 0.1em 0.3em hsla(0, 0%, 0%, 0.1);
border: 1px solid var(--stork-border-color);
border-radius: 8px;
background-color: var(--stork-gray-3);
color: var(--stork-gray-8);
font-family: inherit;
}
.stork-wrapper-dark .stork-input:focus {
outline: none;
background-color: var(--stork-gray-8);
color: var(--stork-gray-3);
}
.stork-wrapper-dark .stork-progress {
position: absolute;
display: block;
content: "";
bottom: 1px;
background-color: var(--stork-violet-5);
box-shadow: 0 0 8px var(--stork-violet-4);
height: 1px;
transition: width 0.25s ease, opacity 0.4s ease 0.4s;
}
.stork-wrapper-dark .stork-output {
position: absolute;
width: 100%;
margin-top: 0.5em;
border-radius: 4px;
display: flex;
flex-direction: column;
z-index: 100;
color: var(--stork-text-color);
font-weight: 400;
font-family: inherit;
text-align: unset;
padding: unset;
}
.stork-wrapper-dark .stork-attribution a:link,
.stork-wrapper-dark .stork-attribution a:visited {
color: var(--stork-blue-2);
}
.stork-wrapper-dark .stork-output-visible {
border: 1px solid var(--stork-border-color);
box-shadow: 0px 0.4px 2.2px rgba(0, 0, 0, 0.011),
0px 1px 5.3px rgba(0, 0, 0, 0.016), 0px 1.9px 10px rgba(0, 0, 0, 0.02),
0px 3.4px 17.9px rgba(0, 0, 0, 0.024), 0px 6.2px 33.4px rgba(0, 0, 0, 0.029),
0px 15px 80px rgba(0, 0, 0, 0.04);
background: var(--stork-background-color);
}
.stork-wrapper-dark .stork-message {
width: 100%;
padding: 0.5em 1em;
color: var(--stork-text-color);
}
.stork-wrapper-dark .stork-attribution {
width: 100%;
padding: 0.5em 1em;
font-size: 0.8em;
color: var(--stork-text-color);
}
.stork-wrapper-dark .stork-results {
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
max-height: 25em;
overflow-y: scroll;
border-top: 1px solid var(--stork-border-color);
border-bottom: 1px solid var(--stork-border-color);
box-shadow: inset 0em 0.7em 0.2em -0.5em hsla(0, 0%, 0%, 0.08),
inset 0em -0.7em 0.2em -0.5em hsla(0, 0%, 0%, 0.08);
}
.stork-wrapper-dark .stork-result:not(:last-child) {
border-bottom: 1px solid var(--stork-border-color);
}
.stork-wrapper-dark .stork-result.selected {
background: var(--stork-violet-10);
}
.stork-wrapper-dark .stork-result a:link {
padding: 1em;
display: block;
color: currentcolor;
text-decoration: none;
}
.stork-wrapper-dark .stork-result p {
margin: 0;
}
.stork-wrapper-dark .stork-title {
padding: unset;
font-weight: bold;
font-size: 0.95em;
margin: 0 0 0.75em 0;
color: var(--stork-text-color);
/* Flexbox container for the title and the score, when debugging */
display: flex;
justify-content: space-between;
}
.stork-wrapper-dark .stork-excerpt {
font-size: 0.8em;
line-height: 1;
margin: 0;
color: var(--stork-gray-3);
padding: unset;
/* Flexbox container for the title and the score, when debugging */
display: flex;
justify-content: space-between;
}
.stork-wrapper-dark .stork-excerpt:not(:last-of-type) {
margin-bottom: 0.6em;
}
.stork-wrapper-dark .stork-highlight {
background-color: var(--stork-lime-3);
padding: 0 0.1em;
}
.stork-wrapper-dark .stork-error {
outline: 2px solid #c92a2a;
}
.stork-wrapper-dark .stork-close-button {
position: absolute;
/* bottom: 0; */
right: 0;
margin: 0.7em 0.6em;
height: 1.2em;
width: 1.2em;
padding: 0px;
background: linear-gradient(
to bottom,
hsl(0, 0%, 85%) 0%,
hsl(0, 0%, 83%) 100%
);
border: 1px solid hsla(0, 0%, 50%, 0.3);
font-size: 1em;
color: hsl(0, 0%, 50%);
border-radius: 15%;
line-height: 1;
}
.stork-wrapper-dark .stork-close-button svg {
width: 0.8em;
position: relative;
top: 1px;
}
.stork-wrapper-dark .stork-close-button:hover {
background: hsla(0, 0%, 78%);
cursor: pointer;
}
.stork-wrapper-dark .stork-close-button:active {
background: hsla(0, 0%, 65%);
}

149
static/stork/stork.css Normal file
View file

@ -0,0 +1,149 @@
.stork {
position: relative;
font-family: inherit;
box-sizing: border-box;
font-size: 1em;
padding: unset;
}
.stork *,
.stork *:before,
.stork *:after {
box-sizing: border-box;
}
.stork .stork-input {
width: 100%;
padding: 0.4em 0.8em;
border: none;
font-family: inherit;
}
.stork .stork-progress {
position: absolute;
display: block;
content: "";
bottom: 1px;
height: 1px;
transition: width 0.25s ease, opacity 0.4s ease 0.4s;
}
.stork .stork-output {
position: absolute;
width: 100%;
margin-top: 0.5em;
display: flex;
flex-direction: column;
z-index: 100;
font-weight: 400;
font-family: inherit;
text-align: unset;
padding: unset;
}
.stork a:link,
.stork a:visited {
color: #d9421e;
}
.stork .stork-output-visible {
background: #353434;
border: 1px solid #d9421e;
}
.stork .stork-message {
width: 100%;
padding: 0.5em 1em;
}
.stork .stork-attribution {
width: 100%;
padding: 0.5em 1em;
font-size: 0.8em;
}
.stork .stork-results {
margin: 0;
padding: 0;
width: 100%;
list-style-type: none;
max-height: 25em;
overflow-y: scroll;
}
.stork .stork-result a:link {
padding: 1em;
display: block;
text-decoration: none;
}
.stork .stork-result p {
margin: 0;
}
.stork .stork-title {
padding: unset;
font-weight: bold;
font-size: 0.95em;
margin: 0;
/* Flexbox container for the title and the score, when debugging */
display: flex;
justify-content: space-between;
}
.stork .stork-excerpt {
font-size: 0.8em;
line-height: 1;
margin: 0;
color: var(--text-invert);
padding: unset;
/* Flexbox container for the title and the score, when debugging */
display: flex;
justify-content: space-between;
}
.stork .stork-excerpt:not(:last-of-type) {
margin-bottom: 0.6em;
}
.stork .stork-highlight {
padding: 0 0.1em;
}
.stork .stork-error {
outline: 2px solid #c92a2a;
}
.stork .stork-close-button {
position: absolute;
right: 0;
margin: 0.25em 0.25em;
height: 1.2em;
width: 1.2em;
padding: 0px;
border: none;
font-size: 1em;
color: hsl(0, 0%, 50%);
line-height: 1;
}
.stork .stork-close-button svg {
width: 0.8em;
position: relative;
top: 1px;
}
.stork .stork-close-button:hover {
background: hsla(0, 0%, 78%);
cursor: pointer;
}
.stork .stork-close-button:active {
background: hsla(0, 0%, 65%);
}
.stork-excerpt-container {
padding: 0;
}

2
static/stork/stork.js Normal file

File diff suppressed because one or more lines are too long

BIN
static/stork/stork.wasm Normal file

Binary file not shown.

View file

@ -77,8 +77,10 @@
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/tipuesearch/tipuesearch.min.css" />
{% endif %}
{% if PLUGINS and 'pelican.plugins.search' in PLUGINS %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stork/stork-dark.css" />
{% if 'pelican.plugins.search' in PLUGINS %}
<link rel="stylesheet"
type="text/css"
href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stork/stork.css" />
{% endif %}
<link rel="stylesheet" type="text/css" href="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/font-awesome/css/fontawesome.css">

View file

@ -22,8 +22,8 @@
<input type="text" name="q" id="tipue_search_input" placeholder="{{ _('Search...') }}">
</form>
{% elif 'pelican.plugins.search' in PLUGINS %}
<div class="stork-wrapper-dark">
<input class="stork-input" type="text" name="q" data-stork="sitesearch" placeholder="{{ _('Search...') }}"/>
<div class="stork">
<input class="stork-input" type="text" autocomplete="off" name="q" data-stork="sitesearch" placeholder="{{ _('Search...') }}"/>
<div class="stork-output" data-stork="sitesearch-output"></div>
</div>
{% endif %}

View file

@ -1,13 +1,13 @@
{% if PLUGINS and 'pelican.plugins.search' in PLUGINS %}
{% if 'pelican.plugins.search' in PLUGINS %}
{% if STORK_VERSION %}
<script src="https://files.stork-search.net/releases/v{{ STORK_VERSION }}/stork.js"></script>
<script>
stork.register("sitesearch", "{{ SITEURL }}/search-index.st", {showProgress: false})
stork.register("sitesearch", "{{ SITEURL }}/search-index.st", {showProgress: false});
</script>
{% else %}
<script src="{{ SITEURL }}/static/stork.js"></script>
<script src="{{ SITEURL }}/{{ THEME_STATIC_DIR }}/stork/stork.js"></script>
<script>
stork.initialize("{{ SITEURL }}/static/stork.wasm")
stork.register("sitesearch", "{{ SITEURL }}/search-index.st", {showProgress: false});
</script>
{% endif %}
{% endif %}