mptyl/ThothII
1
0
Fork 0
Code Issues 25 Pull Requests Actions Packages Projects Releases 1 Wiki Activity

deck: text-analysis block 05-09 impeccable pass — quote hero (side-stripe removed), editorial stat band, code panel hug, vertical centering, ontology tier counts

Browse Source
This commit is contained in:
Codex
2026-09-07 16:30:25 +02:00
parent 8856ec7274
commit 9bef40bcf3
2 changed files with 35 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
presentation/deck/deck.css
+27 -21
View File
@@ -48,6 +48,7 @@
.arit .foot span:first-child { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; } .arit .foot span:first-child { overflow: hidden; text-overflow: ellipsis; flex-shrink: 1; }
.arit .sbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 30px 48px 22px; text-align: left; } .arit .sbody { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 30px 48px 22px; text-align: left; }
.arit.title-slide .sbody { justify-content: center; } .arit.title-slide .sbody { justify-content: center; }
.arit.center-v .sbody { justify-content: center; }
/* ---------- typography ---------- */ /* ---------- typography ---------- */
.arit .kicker { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 14px; } .arit .kicker { font: 700 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--bordeaux); margin-bottom: 14px; }
@@ -72,27 +73,29 @@
/* quote */ /* quote */
.arit .quote { .arit .quote {
margin: 14px 0 20px; padding: 16px 22px; border-left: 3px solid var(--bordeaux); position: relative; margin: 14px 0 20px; padding: 20px 26px 18px 68px; border: 1px solid var(--line);
background: var(--surface-alt); border-radius: 0 8px 8px 0; background: var(--surface-alt); border-radius: 8px;
font: italic 400 16px/1.5 var(--display); color: var(--ink); font: italic 400 19px/1.55 var(--display); color: var(--ink);
} }
.arit .quote::before { content: '\201C'; position: absolute; left: 22px; top: 10px;
font: 700 52px/1 var(--display); color: var(--bordeaux); }
.arit .quote small { display: block; margin-top: 6px; font: 600 11px/1.4 var(--sans); font-style: normal; .arit .quote small { display: block; margin-top: 6px; font: 600 11px/1.4 var(--sans); font-style: normal;
letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); } letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
/* mini pipeline (problem / thoth slides) */ /* mini pipeline (problem / thoth slides) */
.arit .pipeline { display: flex; align-items: stretch; gap: 10px; } .arit .pipeline { display: flex; align-items: stretch; gap: 12px; }
.arit .stage { flex: 1; padding: 12px 10px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); } .arit .stage { flex: 1; padding: 15px 12px; text-align: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); }
.arit .stage b { display: block; font: 700 13.5px/1.2 var(--sans); margin-bottom: 4px; } .arit .stage b { display: block; font: 700 14px/1.2 var(--sans); margin-bottom: 4px; }
.arit .stage span { display: block; font: 400 11px/1.35 var(--sans); color: var(--ink-muted); } .arit .stage span { display: block; font: 400 11.5px/1.35 var(--sans); color: var(--ink-muted); }
.arit .stage .tag { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 9999px; .arit .stage .tag { display: inline-block; margin-top: 6px; padding: 3px 10px; border-radius: 9999px;
background: var(--bordeaux); color: #fdfcfc; font: 700 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; } background: var(--bordeaux); color: #fdfcfc; font: 700 9.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.arit .stage.ai { background: var(--bordeaux-tint); border-color: var(--bordeaux); } .arit .stage.ai { background: var(--bordeaux-tint); border-color: var(--bordeaux); }
.arit .arrow { align-self: center; color: var(--line-strong); font: 700 18px/1 var(--sans); } .arit .arrow { align-self: center; color: var(--line-strong); font: 700 20px/1 var(--sans); }
.arit .thoth-wrap { display: flex; justify-content: flex-end; margin-top: 14px; } .arit .thoth-wrap { display: flex; justify-content: flex-end; margin-top: 18px; }
.arit .thoth-col { width: 470px; text-align: center; } .arit .thoth-col { width: 540px; text-align: center; }
.arit .thoth-arrow { color: var(--line-strong); font: 700 16px/1 var(--sans); margin: 2px 0; } .arit .thoth-arrow { color: var(--line-strong); font: 700 18px/1 var(--sans); margin: 2px 0; }
.arit .thoth-box { border: 1px solid var(--bordeaux); border-radius: 8px; padding: 10px 14px; .arit .thoth-box { border: 1px solid var(--bordeaux); border-radius: 8px; padding: 12px 16px;
background: var(--surface-alt); font: 600 12.5px/1.4 var(--sans); } background: var(--surface-alt); font: 600 13px/1.4 var(--sans); }
.arit .thoth-box .tag { margin-right: 8px; } .arit .thoth-box .tag { margin-right: 8px; }
/* points */ /* points */
@@ -109,6 +112,8 @@
.arit .split { display: flex; gap: 40px; flex: 1; min-height: 0; } .arit .split { display: flex; gap: 40px; flex: 1; min-height: 0; }
.arit .split .left { flex: 0 0 430px; display: flex; flex-direction: column; } .arit .split .left { flex: 0 0 430px; display: flex; flex-direction: column; }
.arit .split .right { flex: 1; min-width: 0; display: flex; } .arit .split .right { flex: 1; min-width: 0; display: flex; }
.arit.nlp .split .right { align-items: center; }
.arit.nlp .code { flex: 0 0 auto; }
.arit .code { width: 100%; display: flex; flex-direction: column; overflow: hidden; .arit .code { width: 100%; display: flex; flex-direction: column; overflow: hidden;
border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sunken); } border: 1px solid var(--line-strong); border-radius: 8px; background: var(--surface-sunken); }
.arit .code-head { flex: 0 0 38px; display: flex; align-items: center; justify-content: space-between; .arit .code-head { flex: 0 0 38px; display: flex; align-items: center; justify-content: space-between;
@@ -118,14 +123,15 @@
.arit .code b { font-weight: 700; color: var(--bordeaux-deep); } .arit .code b { font-weight: 700; color: var(--bordeaux-deep); }
.arit .code i { font-style: normal; color: #2f6f4f; } .arit .code i { font-style: normal; color: #2f6f4f; }
/* stats */ /* stats — editorial numeral band */
.arit .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; flex: 1; align-content: center; } .arit .stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.arit .stat { border: 1px solid var(--line); border-radius: 8px; background: var(--surface-alt); .arit .stat { padding: 8px 24px; display: flex; flex-direction: column; gap: 10px; }
padding: 26px 22px; display: flex; flex-direction: column; gap: 10px; } .arit .stat:first-child { padding-left: 0; }
.arit .stat .num { font: 700 46px/1 var(--sans); color: var(--bordeaux); letter-spacing: -.02em; } .arit .stat + .stat { border-left: 1px solid var(--line); }
.arit .stat .lbl { font: 600 13.5px/1.35 var(--sans); color: var(--ink); } .arit .stat .num { font: 700 62px/1 var(--sans); color: var(--bordeaux); letter-spacing: -.02em; }
.arit .stat .sub { font: 400 11.5px/1.4 var(--sans); color: var(--ink-muted); } .arit .stat .lbl { font: 600 14.5px/1.35 var(--sans); color: var(--ink); }
.arit .stat-note { margin-top: 20px; font: 400 12.5px/1.5 var(--sans); color: var(--ink-muted); } .arit .stat .sub { font: 400 12px/1.45 var(--sans); color: var(--ink-muted); }
.arit .stat-note { margin-top: 26px; font: 400 13px/1.5 var(--sans); color: var(--ink-muted); }
/* divider */ /* divider */
.arit.divider .sbody { justify-content: center; } .arit.divider .sbody { justify-content: center; }
presentation/deck/index.html
+8 -8
View File
@@ -5,7 +5,7 @@
<title>AritmoLab — Role of AI in the Analysis of Unstructured Clinical Databases</title> <title>AritmoLab — Role of AI in the Analysis of Unstructured Clinical Databases</title>
<link rel="stylesheet" href="vendor/reveal/dist/reveal.css"> <link rel="stylesheet" href="vendor/reveal/dist/reveal.css">
<link rel="stylesheet" href="fonts.css?v=8"> <link rel="stylesheet" href="fonts.css?v=8">
<link rel="stylesheet" href="deck.css?v=24"> <link rel="stylesheet" href="deck.css?v=26">
</head> </head>
<body> <body>
<div class="reveal"><div class="slides"> <div class="reveal"><div class="slides">
@@ -199,7 +199,7 @@
</section> </section>
<section class="arit"> <section class="arit center-v">
<header class="head"> <header class="head">
<img src="logo.png" alt=""> <img src="logo.png" alt="">
<span class="head-org">AritmoLab · Policlinico San Donato</span> <span class="head-org">AritmoLab · Policlinico San Donato</span>
@@ -241,7 +241,7 @@
</section> </section>
<section class="arit"> <section class="arit center-v">
<header class="head"> <header class="head">
<img src="logo.png" alt=""> <img src="logo.png" alt="">
<span class="head-org">AritmoLab · Policlinico San Donato</span> <span class="head-org">AritmoLab · Policlinico San Donato</span>
@@ -268,7 +268,7 @@
</section> </section>
<section class="arit"> <section class="arit nlp">
<header class="head"> <header class="head">
<img src="logo.png" alt=""> <img src="logo.png" alt="">
<span class="head-org">AritmoLab · Policlinico San Donato</span> <span class="head-org">AritmoLab · Policlinico San Donato</span>
@@ -314,7 +314,7 @@
</section> </section>
<section class="arit"> <section class="arit center-v">
<header class="head"> <header class="head">
<img src="logo.png" alt=""> <img src="logo.png" alt="">
<span class="head-org">AritmoLab · Policlinico San Donato</span> <span class="head-org">AritmoLab · Policlinico San Donato</span>
@@ -326,13 +326,13 @@
<div class="kicker">The clinical ontology</div> <div class="kicker">The clinical ontology</div>
<h2>Two tiers, one clinical order</h2> <h2>Two tiers, one clinical order</h2>
<div class="tier"> <div class="tier">
<span class="tier-label">TIER 1 · arrhythmic</span> <span class="tier-label">TIER 1 · arrhythmic — 11 categories</span>
<div class="chips"> <div class="chips">
<span class="chipc">FA</span><span class="chipc">Brugada</span><span class="chipc">Flutter</span><span class="chipc">TA</span><span class="chipc">TRN</span><span class="chipc">WPW / TPSV</span><span class="chipc">TV</span><span class="chipc">FV</span><span class="chipc">Extrasistolia V.</span><span class="chipc">Sincope</span><span class="chipc">QT lungo</span> <span class="chipc">FA</span><span class="chipc">Brugada</span><span class="chipc">Flutter</span><span class="chipc">TA</span><span class="chipc">TRN</span><span class="chipc">WPW / TPSV</span><span class="chipc">TV</span><span class="chipc">FV</span><span class="chipc">Extrasistolia V.</span><span class="chipc">Sincope</span><span class="chipc">QT lungo</span>
</div> </div>
</div> </div>
<div class="tier"> <div class="tier">
<span class="tier-label">TIER 2 · structural</span> <span class="tier-label">TIER 2 · structural — 5 categories</span>
<div class="chips"> <div class="chips">
<span class="chipc t2">Blocco AV</span><span class="chipc t2">Blocco di branca</span><span class="chipc t2">Cardiomiopatia</span><span class="chipc t2">Scompenso</span><span class="chipc t2">Valvulopatia</span> <span class="chipc t2">Blocco AV</span><span class="chipc t2">Blocco di branca</span><span class="chipc t2">Cardiomiopatia</span><span class="chipc t2">Scompenso</span><span class="chipc t2">Valvulopatia</span>
</div> </div>
@@ -352,7 +352,7 @@
</section> </section>
<section class="arit"> <section class="arit center-v">
<header class="head"> <header class="head">
<img src="logo.png" alt=""> <img src="logo.png" alt="">
<span class="head-org">AritmoLab · Policlinico San Donato</span> <span class="head-org">AritmoLab · Policlinico San Donato</span>