From 377629618f6eec24756a931c4e281877b3a2d694 Mon Sep 17 00:00:00 2001 From: mptouzel Date: Tue, 22 Sep 2026 16:52:04 -0400 Subject: [PATCH 1/3] STAMINA: add a diagram of the three research areas Adds _includes/stamina-diagram.html under the About intro: three pillar cards (social interaction technologies, social simulations & modelling, AI agents & safety), a crises -> applications flow, and the disciplines members come from. Plain HTML + inline SVG rather than a raster image, so the text stays selectable, scalable and screen-reader accessible, and the layout stacks on narrow screens. Styles live in stamina/css/plain-style.css. Co-Authored-By: Claude Opus 5 --- _includes/stamina-diagram.html | 96 +++++++++++++++++++++++ stamina/css/plain-style.css | 137 +++++++++++++++++++++++++++++++++ stamina/index.html | 2 + 3 files changed, 235 insertions(+) create mode 100644 _includes/stamina-diagram.html diff --git a/_includes/stamina-diagram.html b/_includes/stamina-diagram.html new file mode 100644 index 000000000..ae6ec6934 --- /dev/null +++ b/_includes/stamina-diagram.html @@ -0,0 +1,96 @@ +{% comment %} + "What STAMINA works on" diagram for the STAMINA page (styles: stamina/css/plain-style.css). + Plain HTML + inline SVG: real text, scales cleanly, stacks on narrow screens. +{% endcomment %} +
+
The three research areas STAMINA brings together, and the disciplines its members come from.
+ +
    +
  • + +

    Social interaction technologies

    +

    Designing platforms and interfaces that foster constructive connection.

    +
    • + +
  • + +

    Social simulations & modelling

    +

    Modelling complex human–agent behaviour to understand societal crises.

    +
    • + +
  • + +

    AI agents & safety

    +

    Keeping AI that extends platform affordances responsible and pro-truth.

    +
    • +
+ +
+
+ + Epistemic & social crises +
+ + + +
+ + Pro-social, pro-truth applications +
+
+ +

+ Members come from + Computer science + Social sciences + Psychology + Policy + Industry & start-ups +

+
diff --git a/stamina/css/plain-style.css b/stamina/css/plain-style.css index a6fd09581..7a2a6df64 100644 --- a/stamina/css/plain-style.css +++ b/stamina/css/plain-style.css @@ -99,3 +99,140 @@ font-size: 18pt; display: none; } } + +/* ============================================================ + "What STAMINA works on" diagram (see _includes/stamina-diagram.html) + ============================================================ */ + +.stam-diagram { + --stam-ink: #2f3e4e; + --stam-muted: #5c6b7a; + --stam-line: #dbe2e8; + --stam-tech: #3d7ea6; + --stam-sim: #2a9d8f; + --stam-ai: #b07d3f; + margin: 30px 0 10px; + color: var(--stam-ink); +} + +.stam-pillars { + display: grid; + grid-template-columns: repeat(3, 1fr); + gap: 14px; + margin: 0; + padding: 0; + list-style: none; +} + +.stam-pillar { + padding: 18px 16px; + background: #fbfcfd; + border: 1px solid var(--stam-line); + border-top: 3px solid var(--stam-accent, var(--stam-line)); + border-radius: 10px; + text-align: center; +} + +.stam-pillar--tech { --stam-accent: var(--stam-tech); } +.stam-pillar--sim { --stam-accent: var(--stam-sim); } +.stam-pillar--ai { --stam-accent: var(--stam-ai); } + +.stam-icon { + width: 44px; + height: 44px; + color: var(--stam-accent); +} + +.stam-pillar h4 { + margin: 8px 0 6px; + font-size: 15px; + font-weight: 700; + line-height: 1.3; + color: var(--stam-ink); +} + +.stam-pillar p { + margin: 0; + font-size: 13.5px; + line-height: 1.5; + color: var(--stam-muted); +} + +/* crises -> applications */ +.stam-flow { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 6px 18px; + margin-top: 22px; + padding-top: 18px; + border-top: 1px solid var(--stam-line); +} + +.stam-flow-end { + flex: 0 1 190px; + text-align: center; + color: var(--stam-muted); +} + +.stam-flow-end--good { color: var(--stam-sim); } + +.stam-net { + display: block; + width: 100%; + max-width: 128px; + height: auto; + margin: 0 auto 4px; +} + +.stam-flow-end span { + display: block; + font-size: 14px; + font-weight: 600; + line-height: 1.35; +} + +.stam-arrow { + width: 54px; + height: 22px; + flex: 0 0 auto; + color: var(--stam-line); +} + +/* disciplines */ +.stam-fields { + margin: 18px 0 0; + text-align: center; + line-height: 2; +} + +.stam-fields-label { + display: block; + margin-bottom: 4px; + font-size: 12px; + text-transform: uppercase; + letter-spacing: 0.06em; + color: var(--stam-muted); +} + +.stam-chip { + display: inline-block; + margin: 0 2px; + padding: 2px 9px; + font-size: 12.5px; + background: #f1f4f7; + border: 1px solid var(--stam-line); + border-radius: 999px; + color: var(--stam-ink); + white-space: nowrap; +} + +@media (max-width: 700px) { + .stam-pillars { grid-template-columns: 1fr; } +} + +@media (max-width: 600px) { + .stam-arrow { transform: rotate(90deg); } + .stam-flow-end { flex-basis: 100%; } +} diff --git a/stamina/index.html b/stamina/index.html index 559c8523f..8b06dbb24 100644 --- a/stamina/index.html +++ b/stamina/index.html @@ -122,6 +122,8 @@

About STAMINA

Digital platforms and AI agents are increasingly shaping society. While these technologies contribute to epistemic and social crises, they may also help address them. Our goal is to build a research community focused on positive-outcome applications.

+ {% include stamina-diagram.html %} +

From d56175f944e8c1380a8c9759e5614bccace05cc7 Mon Sep 17 00:00:00 2001 From: mptouzel Date: Tue, 22 Sep 2026 23:36:17 -0400 Subject: [PATCH 2/3] STAMINA: replace the pillar cards with a single Venn diagram The three research areas are now shown as overlapping circles with the three-way intersection highlighted, which states the interdisciplinary point directly. Circles are large enough to hold the full area names, and the cards and their icons are dropped. Also reword the AI area. Co-Authored-By: Claude Opus 5 --- _includes/stamina-diagram.html | 69 ++++++++++++---------------- stamina/css/plain-style.css | 83 +++++++++++++++------------------- 2 files changed, 64 insertions(+), 88 deletions(-) diff --git a/_includes/stamina-diagram.html b/_includes/stamina-diagram.html index ae6ec6934..46d622d56 100644 --- a/_includes/stamina-diagram.html +++ b/_includes/stamina-diagram.html @@ -5,48 +5,35 @@

The three research areas STAMINA brings together, and the disciplines its members come from.
-
    -
  • - -

    Social interaction technologies

    -

    Designing platforms and interfaces that foster constructive connection.

    -
    • - -
  • - -

    Social simulations & modelling

    -

    Modelling complex human–agent behaviour to understand societal crises.

    -
    • + + + + + + + + + + + + + + + + + Social interaction + technologies + + + Social simulations + & modelling + + + AI agents & safety + + -
  • - -

    AI agents & safety

    -

    Keeping AI that extends platform affordances responsible and pro-truth.

    -
    • -
diff --git a/stamina/css/plain-style.css b/stamina/css/plain-style.css index 7a2a6df64..62c8b95da 100644 --- a/stamina/css/plain-style.css +++ b/stamina/css/plain-style.css @@ -115,49 +115,6 @@ font-size: 18pt; color: var(--stam-ink); } -.stam-pillars { - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 14px; - margin: 0; - padding: 0; - list-style: none; -} - -.stam-pillar { - padding: 18px 16px; - background: #fbfcfd; - border: 1px solid var(--stam-line); - border-top: 3px solid var(--stam-accent, var(--stam-line)); - border-radius: 10px; - text-align: center; -} - -.stam-pillar--tech { --stam-accent: var(--stam-tech); } -.stam-pillar--sim { --stam-accent: var(--stam-sim); } -.stam-pillar--ai { --stam-accent: var(--stam-ai); } - -.stam-icon { - width: 44px; - height: 44px; - color: var(--stam-accent); -} - -.stam-pillar h4 { - margin: 8px 0 6px; - font-size: 15px; - font-weight: 700; - line-height: 1.3; - color: var(--stam-ink); -} - -.stam-pillar p { - margin: 0; - font-size: 13.5px; - line-height: 1.5; - color: var(--stam-muted); -} - /* crises -> applications */ .stam-flow { display: flex; @@ -228,11 +185,43 @@ font-size: 18pt; white-space: nowrap; } -@media (max-width: 700px) { - .stam-pillars { grid-template-columns: 1fr; } -} - @media (max-width: 600px) { .stam-arrow { transform: rotate(90deg); } .stam-flow-end { flex-basis: 100%; } } + +/* Venn: the three areas and their overlap */ +.stam-venn { + display: block; + width: 100%; + max-width: 420px; + height: auto; + margin: 0 auto 22px; +} + +.stam-venn-lobes circle { + mix-blend-mode: multiply; + fill-opacity: 0.26; + stroke-width: 1.5; +} + +.stam-venn-tech { fill: var(--stam-tech); stroke: var(--stam-tech); } +.stam-venn-sim { fill: var(--stam-sim); stroke: var(--stam-sim); } +.stam-venn-ai { fill: var(--stam-ai); stroke: var(--stam-ai); } + +.stam-venn-label { + font-size: 13px; + font-weight: 600; + text-anchor: middle; +} + +.stam-venn-label--tech { fill: var(--stam-tech); } +.stam-venn-label--sim { fill: var(--stam-sim); } +.stam-venn-label--ai { fill: var(--stam-ai); } + +.stam-venn-core-shape { + fill: #ffffff; + fill-opacity: 0.55; + stroke: none; +} + From d712d66894ccfc253bc1e11c31004ddb7b62c536 Mon Sep 17 00:00:00 2001 From: mptouzel Date: Wed, 23 Sep 2026 00:01:55 -0400 Subject: [PATCH 3/3] STAMINA: enlarge the Venn labels and place them clear of the edges Label positions were chosen by searching each single-area region for the point that maximizes the smallest distance to any circle edge. Spreading the circles (centres 200 apart, r=155) and widening the figure to 480px makes room for 18px labels, ~15.7px on screen, with 7-10px clearance. Co-Authored-By: Claude Opus 5 --- _includes/stamina-diagram.html | 30 +++++++++++++++--------------- stamina/css/plain-style.css | 6 +++--- 2 files changed, 18 insertions(+), 18 deletions(-) diff --git a/_includes/stamina-diagram.html b/_includes/stamina-diagram.html index 46d622d56..6c6fdbe57 100644 --- a/_includes/stamina-diagram.html +++ b/_includes/stamina-diagram.html @@ -5,32 +5,32 @@
The three research areas STAMINA brings together, and the disciplines its members come from.
- - - + + - - - + + + - + - - Social interaction - technologies + + Social interaction + technologies - - Social simulations - & modelling + + Social simulations + & modelling - - AI agents & safety + + AI agents & safety diff --git a/stamina/css/plain-style.css b/stamina/css/plain-style.css index 62c8b95da..9a863c9d5 100644 --- a/stamina/css/plain-style.css +++ b/stamina/css/plain-style.css @@ -194,7 +194,7 @@ font-size: 18pt; .stam-venn { display: block; width: 100%; - max-width: 420px; + max-width: 480px; height: auto; margin: 0 auto 22px; } @@ -202,7 +202,7 @@ font-size: 18pt; .stam-venn-lobes circle { mix-blend-mode: multiply; fill-opacity: 0.26; - stroke-width: 1.5; + stroke-width: 1.8; } .stam-venn-tech { fill: var(--stam-tech); stroke: var(--stam-tech); } @@ -210,7 +210,7 @@ font-size: 18pt; .stam-venn-ai { fill: var(--stam-ai); stroke: var(--stam-ai); } .stam-venn-label { - font-size: 13px; + font-size: 18px; font-weight: 600; text-anchor: middle; }