69 lines
3.6 KiB
HTML
69 lines
3.6 KiB
HTML
<style>
|
|
.notes-intro { max-width: 42em; }
|
|
.notes-bar { position: sticky; top: 0; z-index: 5; background: #fff; border-bottom: 1px solid #e5e5e5; padding: .6em 0; margin: 1.2em 0; }
|
|
.notes-filter { display: none; align-items: center; gap: .8em; margin-bottom: .5em; }
|
|
.notes-filter.is-on { display: flex; }
|
|
.notes-filter input { flex: 1; max-width: 22em; padding: .4em .6em; border: 1px solid #ccc; border-radius: 4px; font: inherit; }
|
|
.notes-filter input:focus { outline: 2px solid hsl(232, 61%, 64%); outline-offset: 1px; }
|
|
.notes-count { color: #777; font-size: .85em; }
|
|
.notes-block { margin-top: 2em; }
|
|
.notes-block > h2 { font-size: 1.4em; margin: 0 0 .6em; padding-bottom: .3em; border-bottom: 1px solid #e5e5e5; }
|
|
.notes-block > h2 span { font-size: .6em; font-weight: normal; color: #888; }
|
|
.notes-block-bib { margin-top: 3.5em; scroll-margin-top: 4em; }
|
|
.notes-cols { display: flex; gap: 1.2em; align-items: flex-start; }
|
|
.notes-col { flex: 1 1 0; min-width: 0; }
|
|
@media (max-width: 699px) { .notes-cols { flex-direction: column; align-items: stretch; } }
|
|
.notes-single { max-width: 50em; }
|
|
.note-references { margin-top: 2em; }
|
|
.notes-card { break-inside: avoid; display: inline-block; width: 100%; box-sizing: border-box; margin: 0 0 1.2em; border: 1px solid #e5e5e5; border-radius: 6px; padding: .9em 1.1em 1em; min-width: 0; }
|
|
.notes-card h3 { margin: 0 0 .5em; font-size: 1.1em; display: flex; justify-content: space-between; align-items: baseline; gap: .5em; }
|
|
.notes-card h3 span { font-size: .75em; font-weight: normal; color: #888; }
|
|
.notes-card ul { list-style: none; margin: 0; padding: 0; }
|
|
.notes-card li { margin: .3em 0; line-height: 1.35; }
|
|
.notes-card .keywords { color: #888; font-size: .8em; margin-left: .3em; }
|
|
.notes-card .description { color: #666; font-size: .85em; }
|
|
.notes-sub { margin-top: .9em; }
|
|
.notes-sub h4 { margin: 0 0 .2em; font-size: .95em; }
|
|
.notes-sub h4 span { font-weight: normal; color: #888; font-size: .85em; }
|
|
.notes-sub ul { padding-left: 1em; border-left: 2px solid #eee; }
|
|
.notes-card li > a { color: #2a6ebb; }
|
|
.notes-block-bib .notes-card .description a { color: #c05b4d; }
|
|
.notes-card [hidden], .notes-sub[hidden], .notes-block[hidden], .notes-empty[hidden] { display: none; }
|
|
.notes-card-flow { break-inside: auto; display: block; }
|
|
.notes-card-flow h3 { break-after: avoid; }
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', function () {
|
|
var input = document.getElementById('notes-filter');
|
|
if (!input) return;
|
|
input.parentNode.classList.add('is-on');
|
|
var items = [].slice.call(document.querySelectorAll('.notes-card li[data-text]'));
|
|
var cards = [].slice.call(document.querySelectorAll('.notes-card'));
|
|
var count = document.getElementById('notes-count');
|
|
var empty = document.getElementById('notes-empty');
|
|
var total = items.length;
|
|
function run() {
|
|
var q = input.value.trim().toLowerCase(), shown = 0;
|
|
items.forEach(function (li) {
|
|
var ok = !q || li.getAttribute('data-text').indexOf(q) !== -1;
|
|
li.hidden = !ok;
|
|
if (ok) shown++;
|
|
});
|
|
[].forEach.call(document.querySelectorAll('.notes-sub'), function (d) {
|
|
d.hidden = !d.querySelector('li:not([hidden])');
|
|
});
|
|
cards.forEach(function (c) {
|
|
var hide = !c.querySelector('li:not([hidden])');
|
|
c.hidden = hide;
|
|
});
|
|
[].forEach.call(document.querySelectorAll('.notes-block'), function (b) {
|
|
b.hidden = !b.querySelector('li:not([hidden])');
|
|
});
|
|
count.textContent = q ? shown + ' of ' + total + ' entries' : total + ' entries';
|
|
empty.hidden = shown !== 0;
|
|
}
|
|
input.addEventListener('input', run);
|
|
run();
|
|
});
|
|
</script>
|