111 lines
4.9 KiB
Plaintext
111 lines
4.9 KiB
Plaintext
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
<meta name="color-scheme" content="light dark" />
|
|
<title>Spine — agenda</title>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.31.0/iconfont/tabler-icons.min.css" />
|
|
<style>
|
|
:root {
|
|
--bg-page: #efeee9; --bg-primary: #ffffff; --bg-secondary: #f5f4ef;
|
|
--text-primary: #1d1d1b; --text-secondary: #5f5e5a; --text-tertiary: #8a8980;
|
|
--bg-info: #e6f1fb; --text-info: #0c447c; --border-info: #378add;
|
|
--bg-warning: #faeeda; --text-warning: #854f0b;
|
|
--bg-success: #e1f5ee; --text-success: #085041;
|
|
--border-tertiary: rgba(0,0,0,0.12); --border-secondary: rgba(0,0,0,0.22);
|
|
--radius-md: 8px; --radius-lg: 12px;
|
|
--mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
--sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--bg-page: #161615; --bg-primary: #232321; --bg-secondary: #1c1c1a;
|
|
--text-primary: #ededeb; --text-secondary: #a8a79f; --text-tertiary: #76756d;
|
|
--bg-info: #14304a; --text-info: #b5d4f4; --border-info: #378add;
|
|
--bg-warning: #3a2c12; --text-warning: #fac775;
|
|
--bg-success: #103a30; --text-success: #9fe1cb;
|
|
--border-tertiary: rgba(255,255,255,0.14); --border-secondary: rgba(255,255,255,0.24);
|
|
}
|
|
}
|
|
* { box-sizing: border-box; }
|
|
body { margin: 0; background: var(--bg-page); color: var(--text-primary);
|
|
font-family: var(--sans); padding: 28px 16px; }
|
|
.wrap { max-width: 720px; margin: 0 auto; }
|
|
.frame { font-family: var(--mono); border: 0.5px solid var(--border-secondary);
|
|
border-radius: var(--radius-lg); overflow: hidden; background: var(--bg-primary); }
|
|
.titlebar { display:flex; align-items:center; justify-content:space-between;
|
|
padding:10px 14px; border-bottom:0.5px solid var(--border-tertiary);
|
|
background: var(--bg-secondary); font-size:13px; }
|
|
.group { padding:10px 14px 4px; font-size:11px; letter-spacing:0.04em; color: var(--text-tertiary); }
|
|
.row { display:flex; align-items:center; gap:10px; padding:5px 14px; font-size:13px; }
|
|
.glyph { font-size:15px; color:var(--text-tertiary); width:16px; }
|
|
.title { flex:1; min-width:0; }
|
|
.muted { color:var(--text-tertiary); }
|
|
.tags { color:var(--text-info); font-size:12px; }
|
|
.trail { color:var(--text-secondary); font-size:12px; }
|
|
.selected { background:var(--bg-secondary); border-left:2px solid var(--border-info); }
|
|
.detail { padding:8px 14px 12px 32px; background:var(--bg-secondary);
|
|
border-left:2px solid var(--border-info); font-size:12.5px; }
|
|
.logline { display:flex; gap:8px; margin-bottom:5px; }
|
|
.logdate { color:var(--text-tertiary); white-space:nowrap; }
|
|
.minibuffer { border-top:0.5px solid var(--border-tertiary); padding:9px 14px;
|
|
background:var(--bg-secondary); font-size:13px; display:flex; gap:8px; align-items:center; }
|
|
.caret { opacity:0.5; }
|
|
.filter-bar { padding:8px 14px; font-size:11px; border-bottom:0.5px solid var(--border-tertiary); }
|
|
.filter-bar a { color:var(--text-info); text-decoration:none; }
|
|
.filter-bar a:hover { text-decoration:underline; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="wrap">
|
|
<div class="frame">
|
|
<div class="titlebar">
|
|
<span style="font-weight:500;">spine</span>
|
|
<span class="muted">{{total_books}} books · {{shelf_count}} shelves</span>
|
|
</div>
|
|
|
|
<div class="filter-bar">
|
|
<a href="/index"{{^current_shelf}} style="font-weight:600"{{/current_shelf}}>All</a>
|
|
{{#shelf_nav}}
|
|
·
|
|
<a href="{{href}}"{{#current}} style="font-weight:600"{{/current}}>{{name}}</a>
|
|
{{/shelf_nav}}
|
|
</div>
|
|
|
|
{{#groups}}
|
|
<div class="group">{{label}} · {{count}}</div>
|
|
{{#books}}
|
|
<div class="row{{#selected}} selected{{/selected}}">
|
|
<i class="ti {{format_icon}} glyph" aria-hidden="true"></i>
|
|
<span class="title">{{title}} <span class="muted">· {{author}}</span></span>
|
|
{{#tags_inline}}<span class="tags">{{tags_inline}}</span>{{/tags_inline}}
|
|
{{#rec_via}}<span class="trail">via {{rec_via}}</span>{{/rec_via}}
|
|
{{#rating_display}}<span class="trail">{{rating_display}}</span>{{/rating_display}}
|
|
</div>
|
|
{{#detail}}
|
|
<div class="detail">
|
|
<div class="muted" style="margin-bottom:8px;">{{meta}}</div>
|
|
{{#notes}}
|
|
<div class="logline"><span class="logdate">{{date}}</span><span>{{text}}</span></div>
|
|
{{/notes}}
|
|
</div>
|
|
{{/detail}}
|
|
{{/books}}
|
|
{{/groups}}
|
|
|
|
{{#minibuffer}}
|
|
<div class="minibuffer">
|
|
<span class="muted">M-x</span>
|
|
<span style="display:flex;gap:8px;flex-wrap:wrap">
|
|
{{#actions}}
|
|
<a href="{{href}}" class="pill" style="text-decoration:none;cursor:pointer">{{label}}</a>
|
|
{{/actions}}
|
|
</span>
|
|
</div>
|
|
{{/minibuffer}}
|
|
</div>
|
|
</div>
|
|
</body>
|
|
</html>
|