OpenAI/labyricorn-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add optional narration players
Deploy production / deploy (push) Successful in 5s
Details

Browse Source
This commit is contained in:
Labyricorn
2026-08-12 11:45:40 -07:00
parent ef0b82a9ea
commit 797be4d878
5 changed files with 208 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/static/style.css
+51 -1
View File
@@ -179,8 +179,12 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
.article-entry-header .dek { margin-bottom: 0; }
.blog-entry-body,
.article-entry-body { grid-area: body; width: 100%; }
.post-info {
.post-meta {
grid-area: info;
display: grid;
gap: 16px;
}
.post-info {
border: 1px solid var(--rule);
background: var(--panel);
padding: 24px;
@@ -216,6 +220,50 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
.publication-links a:hover,
.publication-links a:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.narration-player {
border: 1px solid var(--rule);
padding: 18px 20px;
}
.narration-title {
margin: 0 0 14px;
color: var(--muted);
font: 500 10px var(--mono);
letter-spacing: .14em;
text-transform: uppercase;
}
.narration-audio { display: block; width: 100%; height: 36px; color-scheme: dark; accent-color: var(--teal); }
.narration-player.is-enhanced .narration-audio { display: none; }
.narration-controls { grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 12px; }
.narration-controls:not([hidden]) { display: grid; }
.narration-toggle {
width: 34px;
height: 34px;
border: 1px solid var(--rule);
background: transparent;
padding: 0;
color: var(--ink);
cursor: pointer;
font-size: 12px;
}
.narration-toggle:hover,
.narration-toggle:focus-visible { border-color: var(--teal); color: var(--teal); outline-color: var(--teal); }
.narration-timeline { display: grid; gap: 4px; min-width: 0; }
.narration-timeline input { width: 100%; margin: 0; accent-color: var(--teal); cursor: pointer; }
.narration-time { color: var(--muted); font: 500 9px var(--mono); letter-spacing: .04em; }
.narration-details { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 14px; }
.narration-details p { margin: 0; color: var(--dim); font-size: 11px; }
.narration-details label { display: flex; align-items: center; gap: 7px; color: var(--dim); font: 500 9px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.narration-speed {
border: 1px solid var(--rule);
border-radius: 0;
background: var(--panel);
padding: 5px 7px;
color: var(--ink);
font: 500 10px var(--mono);
}
.narration-speed:hover,
.narration-speed:focus-visible { border-color: var(--teal); outline-color: var(--teal); }
.project-hero { border-bottom: 1px solid var(--rule); padding: 62px 0 48px; }
.project-hero-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 44px; align-items: end; }
.project-identity { display: flex; gap: 26px; align-items: flex-start; }
@@ -373,6 +421,8 @@ h1 { max-width: 880px; margin: 0; font-size: clamp(30px, 4vw, 45px); font-style:
padding-block: 44px 65px;
}
.post-info { padding: 20px; }
.narration-player { padding: 18px; }
.narration-details { align-items: flex-start; flex-direction: column-reverse; }
.footer-inner { align-items: flex-start; flex-direction: column; padding-block: 28px; }
.site-footer nav { flex-wrap: wrap; }
}