https://books-mf2.fly.dev/

1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5  <meta charset="utf-8">
6  <meta name="viewport" content="width=device-width, initial-scale=1">
7  <title>Find a book</title>
8  <link rel="stylesheet" href="https://classless.de/classless.css">
9  <style>
10    .search input[type="search"] { width: 100%; }
11    .results { list-style: none; padding: 0; }
12    .results li { display: flex; gap: 1rem; margin: 0 0 1.5rem; }
13    .results img,
14    .results .no-cover { width: 60px; height: 90px; flex: none; object-fit: contain; }
15    .results .no-cover { background: var(--cbg, #eee); }
16    .button { display: inline-block; padding: 0.5em 1em; border: 1px solid currentColor; border-radius: 4px; text-decoration: none; }
17    .book { display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: flex-start; }
18    .book .cover { width: 180px; max-width: 40vw; flex: none; }
19    .book .no-cover { height: 270px; background: var(--cbg, #eee); }
20    .book-details { flex: 1 1 16rem; }
21    .book-details h1 { margin-top: 0; }
22    .byline { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
23    .byline .h-card { display: inline-flex; gap: 0.4rem; align-items: center; }
24    .byline .h-card + .h-card::before { content: "·"; opacity: 0.5; }
25    .byline .avatar { width: 1.6em; height: 1.6em; border-radius: 50%; object-fit: cover; }
26    .actions { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; }
27    .results h2 { font-size: 1rem; margin: 0; }
28    .results p { margin: 0.25rem 0 0; font-size: 0.9rem; opacity: 0.8; }
29  </style>
30</head>
31
32<body>
33  <header>
34    <a href="/">books-mf2</a>
35  </header>
36
37  <main>
38    
39<h1>Find a book</h1>
40
41<form class="search" action="/search" method="get" role="search">
42  <label for="q">Search by title, author or ISBN</label>
43  <input type="search" id="q" name="q" value="" autofocus required>
44  <button type="submit">Search</button>
45</form>
46
47
48
49  </main>
50</body>
51
52</html>