react-cheminfo 0.7.0 → 0.9.0

package/styles/slides.css

@@ -0,0 +1,667 @@
+/*
+ * The slideshow player, the deck it draws and the list of talks around it.
+ *
+ * A slide is authored on a fixed 1920x1080 canvas — every size below is a
+ * design pixel — and the canvas is transform-scaled to fit the stage, so a
+ * deck renders identically on a laptop, a beamer or a 4K screen.
+ *
+ * Every colour comes from the family tokens, so a deck played on any site
+ * takes that site's two colours. The fallbacks are the family neutrals, for a
+ * page that imports this file without `chrome.css`.
+ */
+
+.slideshow,
+.talk-list,
+.back-to-slides {
+  --slide-bg: var(--surface-sunken, #f5f7fa);
+  --slide-surface: var(--surface, #ffffff);
+  --slide-ink: var(--text, #16202c);
+  --slide-ink-soft: color-mix(in oklab, var(--text, #16202c) 82%, white);
+  --slide-muted: var(--text-muted, #5b6875);
+  --slide-line: var(--border, #dfe3e8);
+  --slide-accent: var(--accent, var(--brand, #4338ca));
+  --slide-accent-soft: color-mix(in oklab, var(--slide-accent) 10%, white);
+  --slide-answer: var(--brand-alt-text, var(--brand-alt, #be123c));
+  --slide-radius: var(--radius, 10px);
+}
+
+/* ── The player ──────────────────────────────────────────────────────────── */
+
+.slideshow {
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  border: 1px solid var(--slide-line);
+  border-radius: var(--slide-radius);
+  background: var(--slide-bg);
+  color-scheme: light;
+}
+
+/* Presenting covers the whole screen, so the deck loses the card it sits in. */
+.slideshow:fullscreen {
+  min-height: 0;
+  border: none;
+  border-radius: 0;
+}
+
+/* Off fullscreen the stage keeps the slide's 16:9 ratio, so the canvas fills
+   it edge to edge instead of floating letterboxed in a viewport-tall card. The
+   cap keeps the control bar on screen on a short window. */
+.slideshow-stage {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  min-height: 0;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  aspect-ratio: 16 / 9;
+  max-height: calc(100dvh - 180px);
+  width: 100%;
+}
+
+.slideshow:fullscreen .slideshow-stage {
+  flex: 1 1 auto;
+  aspect-ratio: auto;
+  max-height: none;
+}
+
+.slide-canvas {
+  display: flex;
+  width: 1920px;
+  height: 1080px;
+  flex: none;
+  padding: 72px 96px;
+  transform-origin: center center;
+}
+
+/* Blank screen (b, w), to take the room's attention off the slide. Clicking it,
+   or any navigation, brings the slide back. */
+.slideshow-blank {
+  position: absolute;
+  z-index: 30;
+  inset: 0;
+  cursor: pointer;
+}
+
+.slideshow-blank--black {
+  background: #000000;
+}
+
+.slideshow-blank--white {
+  background: #ffffff;
+}
+
+/* ── The control bar ─────────────────────────────────────────────────────── */
+
+.slideshow-bar {
+  display: flex;
+  align-items: center;
+  padding: 8px 12px;
+  border-top: 1px solid var(--slide-line);
+  background: var(--slide-surface);
+  gap: 12px;
+}
+
+.slideshow-title {
+  overflow: hidden;
+  min-width: 0;
+  flex: 1 1 auto;
+  color: var(--slide-muted);
+  font-size: 0.9rem;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.slideshow-controls {
+  display: flex;
+  flex: 0 0 auto;
+  align-items: center;
+  gap: 4px;
+}
+
+.slideshow-counter {
+  min-width: 3.5em;
+  color: var(--slide-ink-soft);
+  font-size: 0.9rem;
+  font-variant-numeric: tabular-nums;
+  text-align: center;
+}
+
+.slideshow-progress {
+  width: var(--progress, 0%);
+  height: 3px;
+  background: var(--slide-accent);
+  transition: width 0.2s ease;
+}
+
+/* The presenter's own notes, under the stage, on a key nobody presses by
+   accident. */
+.slideshow-notes {
+  max-height: 30vh;
+  padding: 12px 16px;
+  border-top: 1px solid var(--slide-line);
+  background: var(--slide-surface);
+  color: var(--slide-ink-soft);
+  font-size: 0.95rem;
+  line-height: 1.5;
+  overflow-y: auto;
+  white-space: pre-wrap;
+}
+
+/* ── One slide ───────────────────────────────────────────────────────────── */
+
+.slide {
+  width: 100%;
+  margin: auto;
+  color: var(--slide-ink);
+}
+
+.slide-content {
+  font-size: 45px;
+  line-height: 1.5;
+}
+
+.slide-content h1 {
+  margin: 0 0 0.3em;
+  font-size: 108px;
+  letter-spacing: -0.02em;
+  line-height: 1.05;
+}
+
+.slide-content h2 {
+  margin: 0 0 0.6em;
+  font-size: 72px;
+  letter-spacing: -0.01em;
+  line-height: 1.1;
+}
+
+.slide-content h3 {
+  margin: 0.8em 0 0.4em;
+  font-size: 54px;
+  letter-spacing: -0.01em;
+  line-height: 1.2;
+}
+
+.slide-content p {
+  margin: 0.5em 0;
+}
+
+.slide-content ul,
+.slide-content ol {
+  display: flex;
+  flex-direction: column;
+  padding-left: 1.1em;
+  margin: 0.4em 0;
+  gap: 0.5em;
+}
+
+.slide-content li::marker {
+  color: var(--slide-accent);
+}
+
+.slide-content code {
+  padding: 0.1em 0.35em;
+  border-radius: 6px;
+  background: var(--slide-accent-soft);
+  color: var(--slide-answer);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  /* A formula moves to the next line whole, never split at a hyphen. */
+  white-space: nowrap;
+}
+
+.slide-content pre {
+  overflow-x: auto;
+  padding: 0.9em 1.1em;
+  border-radius: var(--slide-radius);
+  margin: 0.5em 0;
+  background: var(--slide-accent-soft);
+  color: var(--slide-ink);
+  font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, monospace);
+  font-size: 0.34em;
+  line-height: 1.45;
+}
+
+.slide-content pre code {
+  padding: 0;
+  border-radius: 0;
+  background: none;
+  color: inherit;
+  white-space: pre;
+}
+
+.slide-content a {
+  color: var(--slide-accent);
+}
+
+.slide-content blockquote {
+  padding: 0.1em 0 0.1em 0.8em;
+  border-left: 6px solid var(--slide-accent);
+  margin: 0.6em 0;
+  color: var(--slide-ink-soft);
+  font-size: 0.62em;
+  line-height: 1.45;
+}
+
+.slide-content img {
+  display: block;
+  max-width: 100%;
+  max-height: 368px;
+  margin: 0.5em auto 0;
+}
+
+/* ── Content and thanks: title pinned to the top, demos sunk to the bottom ── */
+
+.slide--content,
+.slide--thanks {
+  display: flex;
+  align-self: stretch;
+  flex-direction: column;
+  margin: 0 auto;
+}
+
+.slide--content .slide-content,
+.slide--thanks .slide-content {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+}
+
+/* The heading carries a left accent rail and sits in the same place on every
+   slide of the deck. */
+.slide--content .slide-content > h2:first-child,
+.slide--thanks .slide-content > h1:first-child {
+  padding: 0.02em 0 0.06em 0.55em;
+  border-left: 8px solid var(--slide-accent);
+  margin-bottom: 0.85em;
+}
+
+/* The body centres in the room left between the pinned heading and the demo
+   line: these auto margins share the leftover space, so a short slide leaves no
+   dead bottom half. On a full slide they collapse to zero. */
+.slide--content .slide-content > h2:first-child + * {
+  margin-top: auto;
+}
+
+.slide--content .slide-content > :last-child:not(.slide-demos) {
+  margin-bottom: auto;
+}
+
+/* ── Title ───────────────────────────────────────────────────────────────── */
+
+.slide--title {
+  display: flex;
+  min-height: 100%;
+  align-items: center;
+  text-align: center;
+}
+
+.slide--title .slide-content {
+  width: 100%;
+}
+
+.slide--title h2 {
+  color: var(--slide-muted);
+}
+
+/* The author list: bold marks the speaker, underlined by convention. */
+.slide--title p strong {
+  font-weight: inherit;
+  text-decoration: underline;
+  text-underline-offset: 0.15em;
+}
+
+/* Affiliation lines. */
+.slide--title p em {
+  color: var(--slide-muted);
+  font-size: 0.72em;
+}
+
+.slide-logos {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-top: 40px;
+  gap: 68px;
+}
+
+/* Out-specifies the screenshot sizing of `.slide-content img`. */
+.slide-content img.slide-logo {
+  width: auto;
+  height: 84px;
+  max-height: none;
+  margin: 0;
+}
+
+/* ── Section divider: the ghost numeral, then the title beside it ────────── */
+
+.slide--section {
+  display: flex;
+  align-self: stretch;
+  align-items: center;
+}
+
+.section-slide {
+  display: flex;
+  width: 100%;
+  align-items: center;
+  gap: 96px;
+}
+
+.section-number {
+  flex: none;
+  color: color-mix(in oklab, var(--slide-accent) 18%, transparent);
+  font-size: 368px;
+  font-weight: 800;
+  letter-spacing: -0.04em;
+  line-height: 0.72;
+}
+
+.section-body {
+  display: flex;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.section-title {
+  margin: 0;
+  font-size: 100px;
+  letter-spacing: -0.02em;
+  line-height: 1.03;
+  text-wrap: balance;
+}
+
+.section-rule {
+  width: 210px;
+  height: 5px;
+  border: 0;
+  margin: 39px 0;
+  background: var(--slide-accent);
+}
+
+.section-sub {
+  color: var(--slide-muted);
+  font-size: 44px;
+  line-height: 1.3;
+}
+
+.section-sub h2 {
+  margin: 0;
+  color: var(--slide-ink-soft);
+  font-size: inherit;
+  font-weight: 600;
+  letter-spacing: -0.01em;
+}
+
+.section-sub p {
+  margin: 0.5em 0 0;
+  font-size: 0.82em;
+}
+
+/* ── Quote ───────────────────────────────────────────────────────────────── */
+
+.slide--quote {
+  display: flex;
+  min-height: 100%;
+  align-items: center;
+}
+
+.slide--quote .slide-content {
+  width: 100%;
+}
+
+/* The quote is the slide, so it drops the rail its inline form carries and is
+   set at the size a room reads from the back. */
+.slide--quote .slide-content blockquote {
+  padding: 0;
+  border: 0;
+  margin: 0;
+  color: var(--slide-ink);
+  font-size: 1.15em;
+  line-height: 1.25;
+  text-wrap: balance;
+}
+
+/* The attribution under the quote. */
+.slide--quote .slide-content blockquote + p,
+.slide--quote .slide-content blockquote > p:last-child em {
+  color: var(--slide-muted);
+  font-size: 0.62em;
+  font-style: normal;
+}
+
+/* ── Thanks ──────────────────────────────────────────────────────────────── */
+
+/* The credits read as cards: the group is a small accent label, the people are
+   large. */
+.slide--thanks .slide-content ul {
+  display: grid;
+  padding: 0;
+  margin: 0;
+  gap: 30px 36px;
+  grid-template-columns: 1fr 1fr;
+  list-style: none;
+}
+
+.slide--thanks .slide-content li {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 27px 39px;
+  border: 1px solid var(--slide-line);
+  border-left: 6px solid var(--slide-accent);
+  border-radius: 18px;
+  background: var(--slide-surface);
+  font-size: 39px;
+  font-weight: 600;
+  line-height: 1.35;
+}
+
+.slide--thanks .slide-content li:last-child {
+  grid-column: 1 / -1;
+}
+
+.slide--thanks .slide-content li > strong {
+  display: block;
+  margin-bottom: 0.25em;
+  color: var(--slide-accent);
+  font-size: 24px;
+  letter-spacing: 0.07em;
+  text-transform: uppercase;
+}
+
+.slide--thanks .slide-content li em {
+  display: block;
+  margin-top: 0.2em;
+  color: var(--slide-muted);
+  font-size: 26px;
+  font-style: normal;
+  font-weight: 400;
+}
+
+/* The closing line sits quietly at the bottom. */
+.slide--thanks .slide-content > p:last-child {
+  padding-top: 0.7em;
+  border-top: 1px solid var(--slide-line);
+  margin: auto 0 0;
+  color: var(--slide-ink-soft);
+  font-size: 0.73em;
+}
+
+/* ── Demo links ──────────────────────────────────────────────────────────── */
+
+/* One quiet caption line pinned to the bottom of the slide. */
+.slide-demos {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: baseline;
+  margin-top: auto;
+  color: var(--slide-muted);
+  font-size: 0.46em;
+  font-weight: 600;
+  gap: 0.5em;
+}
+
+.slide-demos-separator {
+  color: var(--slide-line);
+}
+
+.slide-demo.slide-demo {
+  display: inline;
+  padding: 0;
+  border: 0;
+  margin: 0;
+  background: none;
+  color: var(--slide-accent);
+  cursor: pointer;
+  font: inherit;
+  text-decoration: none;
+}
+
+/* The caption already reads "Live demos:", so a per-link arrow is redundant
+   there; a link inside the body keeps its arrow. */
+.slide-demos .slide-demo .slide-demo-arrow {
+  display: none;
+}
+
+.slide-demo.slide-demo:hover .slide-demo-label {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+
+/* ── The list of talks ───────────────────────────────────────────────────── */
+
+.talk-list {
+  display: flex;
+  flex-direction: column;
+  gap: 32px;
+}
+
+.talk-list-site {
+  margin: 0 0 12px;
+  color: var(--slide-muted);
+  font-size: 0.85rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+}
+
+.talk-grid {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
+}
+
+.talk-card {
+  display: block;
+  padding: 18px 20px;
+  border: 1px solid var(--slide-line);
+  border-radius: var(--radius-lg, 16px);
+  background: var(--slide-surface);
+  color: inherit;
+  text-decoration: none;
+  transition:
+    border-color 0.15s ease,
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
+}
+
+.talk-card:hover {
+  border-color: var(--slide-accent);
+  box-shadow: var(--shadow-md, 0 4px 14px rgb(16 32 48 / 10%));
+  color: inherit;
+  text-decoration: none;
+  transform: translateY(-2px);
+}
+
+.talk-card-title {
+  margin-bottom: 6px;
+  font-size: 1.15rem;
+  font-weight: 600;
+}
+
+.talk-card-subtitle {
+  margin-bottom: 6px;
+  color: var(--slide-ink-soft);
+  font-size: 0.95rem;
+}
+
+.talk-card-meta {
+  color: var(--slide-muted);
+  font-size: 0.9rem;
+}
+
+.talk-card-count {
+  margin-top: 12px;
+  color: var(--slide-accent);
+  font-size: 0.8rem;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+/* ── Back to slides ──────────────────────────────────────────────────────── */
+
+/* The way back to the exact slide, floating over whichever tool the demo link
+   opened, so a talk stays one click from where it left off. */
+.back-to-slides.back-to-slides {
+  position: fixed;
+  z-index: 30;
+  bottom: 20px;
+  left: 20px;
+  display: inline-flex;
+  align-items: center;
+  padding: 0.5rem 0.9rem;
+  border: 0;
+  border-radius: 999px;
+  background: var(--slide-accent);
+  box-shadow: var(--shadow-md, 0 4px 14px rgb(16 32 48 / 10%));
+  color: #ffffff;
+  cursor: pointer;
+  font-size: 0.875rem;
+  font-weight: 600;
+  gap: 0.4rem;
+  text-decoration: none;
+}
+
+.back-to-slides.back-to-slides:hover {
+  color: #ffffff;
+  filter: brightness(1.08);
+  text-decoration: none;
+}
+
+/* ── A slide that is the tool itself ─────────────────────── */
+/* The frame takes the whole slide under the heading: an embedded tool that is
+   200 px tall on a beamer teaches nobody anything. */
+.slide--embed {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+}
+
+.slide--embed .slide-content {
+  display: flex;
+  height: 100%;
+  flex-direction: column;
+  gap: 24px;
+}
+
+.slide-embed-frame {
+  width: 100%;
+  flex: 1 1 auto;
+  border: 1px solid var(--slide-line);
+  border-radius: var(--slide-radius);
+  background: var(--slide-surface);
+}
+
+.slide-embed-missing {
+  color: var(--slide-muted);
+  font-style: italic;
+}
+
+.talk-list-empty {
+  margin: 0;
+  color: var(--slide-muted);
+}