1
0
Fork 0
mirror of https://git.sr.ht/~seirdy/seirdy.one synced 2024-11-10 00:12:09 +00:00

Add site search (poweredy by SearchMySite)

Add a search bar to the site footer to search seirdy.one.
This commit is contained in:
Rohan Kumar 2022-05-26 17:06:56 -07:00
parent 1e2a243952
commit 8158cb3cd9
No known key found for this signature in database
GPG key ID: 1E892DB2A5F84479
5 changed files with 48 additions and 19 deletions

View file

@ -3,7 +3,9 @@
* stays within the ideal APCA ranges, not lower and preferably not * stays within the ideal APCA ranges, not lower and preferably not
* higher either. */ * higher either. */
@media (prefers-color-scheme: dark) { @media (prefers-color-scheme: dark) {
html { button,
html,
input {
/* Pure white on black causes halation. /* Pure white on black causes halation.
* "background" is short for a bunch of unnecessary CSS rules * "background" is short for a bunch of unnecessary CSS rules
* background-color is all I need. * background-color is all I need.

View file

@ -80,18 +80,15 @@ html {
/* Compensate for misalignment and wasted space caused by padding /* Compensate for misalignment and wasted space caused by padding
* and margin adjustments in nav children made to meet SC 2.5.5 */ * and margin adjustments in nav children made to meet SC 2.5.5 */
dt > a,
header > nav,
footer > nav, footer > nav,
header > nav,
dt > a,
h2 + a { h2 + a {
margin-left: -.25em; margin-left: -.25em;
} }
header > nav { header > nav {
margin-bottom: -.75em; margin-bottom: -.75em;
} }
footer > nav {
margin-top: -.75em;
}
summary { summary {
/* The tappable region of a <summary> extends across the page. /* The tappable region of a <summary> extends across the page.
@ -110,12 +107,6 @@ html {
margin: .5em .25em; margin: .5em .25em;
} }
/* Google a11y: ensure tap targets have >=8px space between them */
nav li,
li details li {
padding: 1em 0;
}
/* SC 2.5.5, Google a11y: Increase tap target size a bit /* SC 2.5.5, Google a11y: Increase tap target size a bit
* - Summary is a tappable button * - Summary is a tappable button
* - standalone links in lists are usually parts of collections of * - standalone links in lists are usually parts of collections of
@ -126,7 +117,10 @@ html {
dt > a, dt > a,
summary, summary,
h2 + a, h2 + a,
li > a { li > a,
nav li,
li details li,
input {
padding: .875em .25em; padding: .875em .25em;
} }
@ -181,6 +175,27 @@ nav ul li {
margin-right: .375em; margin-right: .375em;
} }
/* Make search box and submit button wide enough */
form {
display: table;
width: 100%
}
input[type="search"] {
display: table-cell;
width: 100%;
}
form > div {
display: table-cell;
width: 1%;
}
/* Don't shrink the size of the text in forms. */
input {
font-size: inherit;
}
/* narrow screens: reduce margin for blockquotes a lot, using /* narrow screens: reduce margin for blockquotes a lot, using
* a border instead. Put it on the left and right to make it * a border instead. Put it on the left and right to make it
* LTR/RTL-neutral, for machine translators that change text * LTR/RTL-neutral, for machine translators that change text
@ -198,8 +213,9 @@ h1 {
hyphens: auto; hyphens: auto;
} }
/* Very narrow screens: full hyphenation */ /* Very narrow screens: full hyphenation.
@media (max-width: 13em) { * This is the typical width of a smart feature phone. */
@media (max-width: 15em) {
body { body {
font-size: 100%; font-size: 100%;
-webkit-hyphens: auto; -webkit-hyphens: auto;
@ -270,6 +286,7 @@ pre {
* too similar to the page background color. Also put a border around * too similar to the page background color. Also put a border around
* <pre> and <code> to distinguish them in ways besides font-family. * <pre> and <code> to distinguish them in ways besides font-family.
* This is Technique C25 of SC 1.4.8 */ * This is Technique C25 of SC 1.4.8 */
input,
img, img,
pre { pre {
border: 1px solid; border: 1px solid;
@ -326,11 +343,13 @@ section[aria-labelledby="webmentions"] {
a:focus, a:focus,
summary:focus, summary:focus,
pre[tabindex]:focus { pre[tabindex]:focus,
form :focus {
outline: 3px solid; outline: 3px solid;
} }
/* Remove :focus styling for browsers that do support :focus-visible */ /* Remove :focus styling for browsers that do support :focus-visible.
* Leave it on for form stuff. */
@supports selector(:focus-visible) { @supports selector(:focus-visible) {
a:focus:not(:focus-visible), a:focus:not(:focus-visible),
summary:focus:not(:focus-visible), summary:focus:not(:focus-visible),

View file

@ -8,7 +8,7 @@
/* Hide screen-only content */ /* Hide screen-only content */
aside, aside:not([role="note"]),
/* An un-opened summary inside an article has no use in print. /* An un-opened summary inside an article has no use in print.
* Outside an article it's used in my webring list where it has some * Outside an article it's used in my webring list where it has some
* use, see below. */ * use, see below. */
@ -17,7 +17,7 @@
* useless in printouts. */ * useless in printouts. */
h2 + a, h2 + a,
/* You can't navigate in a printout. */ /* You can't navigate in a printout. */
footer nav, footer,
nav a:not([rel="home"]) span { nav a:not([rel="home"]) span {
display: none; display: none;
} }

View file

@ -2,6 +2,7 @@
<p> <p>
Copyright<span aria-hidden="true"> ©</span> <time itemprop="copyrightYear" datetime="{{now.Year}}">{{now.Year}}</time> {{- partial "indieweb-author.html" -}} Copyright<span aria-hidden="true"> ©</span> <time itemprop="copyrightYear" datetime="{{now.Year}}">{{now.Year}}</time> {{- partial "indieweb-author.html" -}}
</p> </p>
{{ partial "search.html" }}
<nav aria-label="site info"> <nav aria-label="site info">
<ul> <ul>
<li itemprop="license" itemscope itemtype="https://schema.org/CreativeWork"> <li itemprop="license" itemscope itemtype="https://schema.org/CreativeWork">

View file

@ -0,0 +1,7 @@
<form
itemprop="potentialAction" itemscope itemtype="https://schema.org/SearchAction"
action="https://searchmysite.net/search/" method="get">
<label for="search" hidden>Search this site:</label>
<input id="search" itemprop="query" type="search" value="domain:seirdy.one " name="q">
<div><input type="submit" value="search"></div>
</form>