118 lines
5.1 KiB
Plaintext
118 lines
5.1 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 — Direction B (journal)</title>
|
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@picocss/pico@2.1.1/css/pico.min.css" />
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tabler-icons/3.31.0/iconfont/tabler-icons.min.css" />
|
|
<style>
|
|
.book { max-width: 560px; margin-inline: auto; }
|
|
.book hgroup { margin-bottom: .4rem; }
|
|
.book hgroup h3 { margin-bottom: .1rem; }
|
|
.book hgroup p { color: var(--pico-muted-color); margin: 0; }
|
|
.cover { width: 44px; height: 60px; border-radius: var(--pico-border-radius);
|
|
background: var(--pico-primary-background); color: var(--pico-primary-inverse);
|
|
display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
|
|
.pill { padding: .1rem .5rem; border-radius: var(--pico-border-radius); font-size: .75rem; font-weight: 500; }
|
|
.pill.want { background: #e6f1fb; color: #0c447c; }
|
|
.pill.reading { background: #faeeda; color: #854f0b; }
|
|
.pill.read { background: #e1f5ee; color: #085041; }
|
|
.formats { margin-bottom: 1.1rem; }
|
|
.formats button { --pico-font-size: .85rem; }
|
|
.seclabel { font-size: .72rem; letter-spacing: .03em; color: var(--pico-muted-color);
|
|
text-transform: none; margin-bottom: .6rem; }
|
|
.thread { border-left: 2px solid var(--pico-muted-border-color); padding-left: .9rem; margin-bottom: .9rem; }
|
|
.entry { margin-bottom: .8rem; }
|
|
.entry:last-child { margin-bottom: 0; }
|
|
.edate { font-size: .75rem; color: var(--pico-muted-color); margin-bottom: .15rem; }
|
|
.etext { font-size: .9rem; line-height: 1.5; }
|
|
.avatar { width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
|
|
background: var(--pico-primary-background); color: var(--pico-primary-inverse);
|
|
display: flex; align-items: center; justify-content: center; font-size: .75rem; }
|
|
.compose, .recform { margin-bottom: 0; }
|
|
@media (prefers-color-scheme: dark) {
|
|
.pill.want { background: #14304a; color: #b5d4f4; }
|
|
.pill.reading { background: #3a2c12; color: #fac775; }
|
|
.pill.read { background: #103a30; color: #9fe1cb; }
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
{{!
|
|
View model for this template:
|
|
{
|
|
cover_icon: string, Tabler class for the cover placeholder, e.g. "ti-book"
|
|
title: string,
|
|
author: string,
|
|
status_class: string, "want" | "reading" | "read"
|
|
status_label: string,
|
|
meta: string, e.g. "started 20 Feb · 62%"
|
|
progress_label: string, e.g. "62%" (used in the note composer placeholder)
|
|
formats: [ { icon: string, label: string, active: boolean } ], the format selector segments
|
|
notes: [ { date: string, text: string } ], reading log
|
|
recommendation: { optional
|
|
initials: string,
|
|
by: string,
|
|
date: string,
|
|
note: string
|
|
}?
|
|
}
|
|
}}
|
|
<main class="container">
|
|
<article class="book">
|
|
|
|
<div style="display: flex; gap: 14px; align-items: flex-start; margin-bottom: 1rem;">
|
|
<div class="cover"><i class="ti {{cover_icon}}" style="font-size: 22px;" aria-hidden="true"></i></div>
|
|
<div style="flex: 1; min-width: 0;">
|
|
<hgroup>
|
|
<h3>{{title}}</h3>
|
|
<p>{{author}}</p>
|
|
</hgroup>
|
|
<span class="pill {{status_class}}">{{status_label}}</span>
|
|
<span class="muted" style="color: var(--pico-muted-color); font-size: .85rem; margin-left: .5rem;">{{meta}}</span>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="formats" role="group">
|
|
{{#formats}}
|
|
<button class="{{^active}}secondary outline{{/active}}"><i class="ti {{icon}}" style="font-size: 15px; vertical-align: -2px; margin-right: 5px;" aria-hidden="true"></i>{{label}}</button>
|
|
{{/formats}}
|
|
</div>
|
|
|
|
<p class="seclabel">Reading log</p>
|
|
<div class="thread">
|
|
{{#notes}}
|
|
<div class="entry">
|
|
<div class="edate">{{date}}</div>
|
|
<div class="etext">{{text}}</div>
|
|
</div>
|
|
{{/notes}}
|
|
</div>
|
|
|
|
<div class="compose" role="group">
|
|
<input type="text" placeholder="Add a note at {{progress_label}}…" />
|
|
<button><i class="ti ti-plus" style="font-size: 15px; vertical-align: -2px; margin-right: 4px;" aria-hidden="true"></i>Log note</button>
|
|
</div>
|
|
|
|
<hr />
|
|
|
|
<p class="seclabel">On your radar</p>
|
|
{{#recommendation}}
|
|
<div style="display: flex; align-items: flex-start; gap: 10px; margin-bottom: 1rem;">
|
|
<div class="avatar">{{initials}}</div>
|
|
<div style="font-size: .9rem; line-height: 1.5;"><strong>{{by}}</strong> <span class="muted" style="color: var(--pico-muted-color);">· {{date}}</span><br>"{{note}}"</div>
|
|
</div>
|
|
{{/recommendation}}
|
|
<div class="recform" role="group">
|
|
<input type="text" placeholder="Recommended by…" style="flex: 0 0 34%;" />
|
|
<input type="text" placeholder="Why it's on your radar…" />
|
|
<button aria-label="Save recommendation"><i class="ti ti-check" style="font-size: 16px;" aria-hidden="true"></i></button>
|
|
</div>
|
|
|
|
</article>
|
|
</main>
|
|
</body>
|
|
</html>
|