schtobia/flex
1
0
Fork 0
Code Issues Pull requests Activity

Fix stork

Browse source 
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
Show stats Download patch file Download diff file Expand all files Collapse all files

208
static/stork/stork-dark.css
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
View file

File diff suppressed because one or more lines are too long

BIN
static/stork/stork.wasm Normal file
View file

Binary file not shown.

6
templates/base.html
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">

4
templates/partial/sidebar.html
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 %}

8
templates/partial/stork.html
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 %}