Work Text:
Example:
Dean winchester pulled up his phone to google something: (p.s. click on the search bar!)
SEARCHING FOR: Do angels...
Do angels have free will
Do angels sing in the bible
Do angels have a lot of eyes
Do angels have real swords
PREVIOUSLY SEARCHED: Do angels count towards being gay
Dang. When had he had time to search this before?
HTML and Guide:
The websearch workskin has two versions, one where you click to open up search results, and one that's just static. I prefer the clickable one, but when I was making it I realized it might be awkward to make sure your reader is aware that they'll be missing info if its not clicked on, so I made the static one for that case.
Static version of above example:
Do angels have free will
Do angels sing in the bible
Do angels have a lot of eyes
Do angels have real swords
PREVIOUSLY SEARCHED: Do angels count towards being gay
Now take a look at it without the workskin enabled. It's important to keep these things readable for anyone with a screenreader, who doesn't like having workskin enabled, or people who are downloading your fic.
Clickable, without workskin:
SEARCHING FOR: Do angels...
Do angels have free will
Do angels sing in the bible
Do angels have a lot of eyes
Do angels have real swords
PREVIOUSLY SEARCHED: Do angels count towards being gay
Static, without workskin:
SEARCHING FOR: Do angels...
Do angels have free will
Do angels sing in the bible
Do angels have a lot of eyes
Do angels have real swords
PREVIOUSLY SEARCHED: Do angels count towards being gay
There shouldn't be any loss of information if you don't use a workskin. I
used a
<samp> tag to add any text that replaces the function
of the workskin visuals, making it clear that this is a search bar, and
what has been previously searched.
Previous searches
Let's take a look at the code for previous searches. The full code is below, this is just if you want to understand what's going on.
<p class="history"><i><samp
class="for-no-ws">PREVIOUSLY SEARCHED: </samp> search text
example 5</i></p>
there's a ::before pseudo-element for the 'history' class,
which puts a clock emoji before the paragraph element. for 'for-no-ws'
class will hide the </samp> tag when the workskin is
on, and will stop being hidden when the workskin is off, so that readers
without a workskin aren't losing any information because of it, along with
reader's using a screenreader.
The text is in italics and I've removed the bold suggestion tag, just so it's visually clear that the search suggestion is different than the others, because having just the clock emoji didn't really stand out.
HTML to copy:
here's the HTML to copy, divided into clickable and static.
Clickable:
SEARCHING FOR: search text...
search text example 1
search text example 2
search text example 3
search text example 4
PREVIOUSLY SEARCHED:search text example 5
HTML for clickable:
<details class="web-search">
<summary class="search-bar">
<span><samp class="for-no-ws">SEARCHING FOR:
</samp>search text...</span>
</summary>
<hr hidden class="hidden" />
<blockquote>
<p>search text <b>example 1</b></p>
<p>search text <b>example 2</b></p>
<p>search text <b>example 3</b></p>
<p>search text <b>example 4</b></p>
<p class="history">
<i><samp class="for-no-ws">PREVIOUSLY SEARCHED: </samp>search text example 5</i>
</p>
</blockquote>
</details>
Static:
search text example 1
search text example 2
search text example 3
search text example 4
PREVIOUSLY SEARCHED: search text example 5
HTML for static:
<div class="web-search">
<summary class="search-bar">
<span><samp class="for-no-ws">SEARCHING FOR:
</samp>search text...</span>
</summary>
<hr hidden class="hidden" />
<blockquote>
<p>search text <b>example 1</b></p>
<p>search text <b>example 2</b></p>
<p>search text <b>example 3</b></p>
<p>search text <b>example 4</b></p>
<p class="history">
<i><samp class="for-no-ws">PREVIOUSLY SEARCHED: </samp>search text example 5</i>
</p>
</blockquote>
</div>
CSS to copy:
here's the CSS to put in the workskin:
.for-no-ws{
display: none;
}
.web-search {
border: 1px #808080b5 solid;
font-family: Arial,sans-serif;
margin: auto;
max-width: 45em;
border-radius: 1rem;
user-select: none;
}
.web-search *{
padding: 0;
margin: 0;
}
.web-search .search-bar{
list-style: none;
}
.web-search .search-bar::before{
content: '🔍';
margin: .3rem;
}
.web-search .search-bar span{
display: inline-block;
padding-left: 0;
padding: .4rem 0;
}
.web-search hr{
display: block;
width: 100%;
border-bottom: none;
border-top: 1px solid #808080b5;
}
.web-search blockquote{
position: relative;
border: none;
}
.web-search p{
margin: .3rem;
margin-left: 2rem;
}
/* For search history */
.web-search p.history::before{
content: '🕖';
position:
absolute;
left: .4rem;
}