Add collapsible distinct org headers and top-of-file Inbox
This commit is contained in:
160
static/style.css
160
static/style.css
@ -443,8 +443,80 @@ main h2 {
|
||||
}
|
||||
|
||||
.org-content h1 {
|
||||
margin-top: 0;
|
||||
font-size: 1.4rem;
|
||||
margin: 0 0 0.9rem;
|
||||
padding: 0.45rem 0.75rem;
|
||||
border-radius: 0.45rem;
|
||||
border-left: 3px solid var(--accent);
|
||||
background: color-mix(in srgb, var(--accent-soft) 25%, var(--panel));
|
||||
color: var(--ink);
|
||||
font-size: 1.35rem;
|
||||
}
|
||||
|
||||
.org-heading {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.45rem;
|
||||
margin: 1.25rem 0 0.35rem;
|
||||
padding: 0.4rem 0.7rem;
|
||||
border-radius: 0.45rem;
|
||||
border-left: 3px solid var(--accent);
|
||||
background: color-mix(in srgb, var(--accent-soft) 30%, var(--panel));
|
||||
color: var(--ink);
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.org-content h2.org-heading { font-size: 1.15rem; }
|
||||
.org-content h3.org-heading { font-size: 0.95rem; }
|
||||
.org-content h4.org-heading { font-size: 0.9rem; }
|
||||
.org-content h5.org-heading,
|
||||
.org-content h6.org-heading { font-size: 0.85rem; }
|
||||
|
||||
.org-heading:hover {
|
||||
background: color-mix(in srgb, var(--accent-soft) 55%, var(--panel));
|
||||
}
|
||||
|
||||
.org-heading-text {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.org-collapse-toggle {
|
||||
flex: 0 0 auto;
|
||||
border: none;
|
||||
background: transparent;
|
||||
color: var(--ink-soft);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1;
|
||||
padding: 0.15rem 0.2rem;
|
||||
cursor: pointer;
|
||||
border-radius: 0.25rem;
|
||||
}
|
||||
|
||||
.org-collapse-toggle:hover {
|
||||
color: var(--accent);
|
||||
}
|
||||
|
||||
.org-section {
|
||||
margin: 0.2rem 0;
|
||||
}
|
||||
|
||||
.org-section-body {
|
||||
margin-top: 0.15rem;
|
||||
}
|
||||
|
||||
.org-section-body .org-section {
|
||||
margin-left: 0.75rem;
|
||||
}
|
||||
|
||||
.org-section.collapsed > .org-section-body {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.org-section.collapsed > .org-heading {
|
||||
border-left-style: dashed;
|
||||
background: color-mix(in srgb, var(--accent-soft) 12%, var(--panel));
|
||||
color: var(--ink-soft);
|
||||
}
|
||||
|
||||
.org-content p {
|
||||
@ -643,6 +715,90 @@ body[data-theme="dark"] .webhook-send-btn.webhook-sent {
|
||||
border-color: #c84a52;
|
||||
}
|
||||
|
||||
.org-code {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.88em;
|
||||
background: color-mix(in srgb, var(--accent-soft) 45%, var(--panel));
|
||||
color: var(--ink);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.3rem;
|
||||
padding: 0.1em 0.35em;
|
||||
}
|
||||
|
||||
.org-src-block,
|
||||
.org-example {
|
||||
background: var(--nav-bg);
|
||||
border: 1px solid var(--line);
|
||||
border-radius: 0.5rem;
|
||||
padding: 0.75rem 1rem;
|
||||
overflow-x: auto;
|
||||
margin: 0.75rem 0;
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
|
||||
font-size: 0.88rem;
|
||||
line-height: 1.45;
|
||||
color: var(--ink);
|
||||
}
|
||||
|
||||
.org-src-block code,
|
||||
.org-example code {
|
||||
font-family: inherit;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.org-quote {
|
||||
margin: 0.75rem 0;
|
||||
padding: 0.5rem 1rem;
|
||||
border-left: 4px solid var(--accent);
|
||||
background: color-mix(in srgb, var(--accent-soft) 20%, var(--panel));
|
||||
color: var(--ink-soft);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.org-quote p {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.org-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin: 0.85rem 0;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.org-table th,
|
||||
.org-table td {
|
||||
border: 1px solid var(--line);
|
||||
padding: 0.45rem 0.65rem;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.org-table th {
|
||||
background: var(--nav-bg);
|
||||
color: var(--accent);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.org-table tr:nth-child(even) {
|
||||
background: color-mix(in srgb, var(--nav-bg) 30%, var(--panel));
|
||||
}
|
||||
|
||||
.org-list {
|
||||
margin: 0.5rem 0 0.5rem 1.5rem;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.org-list li {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
.org-hr {
|
||||
border: none;
|
||||
border-top: 1px solid var(--line);
|
||||
margin: 1.25rem 0;
|
||||
}
|
||||
|
||||
.spacer {
|
||||
height: 0.5rem;
|
||||
}
|
||||
|
||||
15
static/sw.js
15
static/sw.js
@ -1,4 +1,4 @@
|
||||
const CACHE = "orgweb-v1";
|
||||
const CACHE = "orgweb-v2";
|
||||
const PRECACHE = [
|
||||
"/",
|
||||
"/static/style.css",
|
||||
@ -39,6 +39,19 @@ self.addEventListener("fetch", (event) => {
|
||||
return;
|
||||
}
|
||||
|
||||
if (url.pathname === "/static/style.css") {
|
||||
event.respondWith(
|
||||
fetch(event.request)
|
||||
.then((resp) => {
|
||||
const copy = resp.clone();
|
||||
caches.open(CACHE).then((cache) => cache.put(event.request, copy));
|
||||
return resp;
|
||||
})
|
||||
.catch(() => caches.match(event.request))
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
event.respondWith(
|
||||
caches.match(event.request).then(
|
||||
(cached) =>
|
||||
|
||||
Reference in New Issue
Block a user