|
4 | 4 | <meta charset="UTF-8"> |
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
6 | 6 | <title>Teen Health Under Pressure</title> |
7 | | - <link rel="stylesheet" href="style.css?v=20260528l"> |
| 7 | + <link rel="stylesheet" href="style.css?v=20260528p"> |
8 | 8 | <script src="d3.v7.min.js?v=20260417c" defer></script> |
9 | 9 | <script src="https://cdn.jsdelivr.net/npm/topojson@3" defer></script> |
10 | 10 | <script src="https://cdn.jsdelivr.net/npm/d3-sankey@0" defer></script> |
11 | | - <script src="main.js?v=20260528l" defer></script> |
| 11 | + <script src="main.js?v=20260528p" defer></script> |
12 | 12 | </head> |
13 | 13 | <body> |
14 | 14 |
|
| 15 | +<!-- Reading progress bar --> |
| 16 | +<div class="reading-progress" id="reading-progress" aria-hidden="true"></div> |
| 17 | + |
| 18 | +<!-- Chapter navigation dots --> |
| 19 | +<nav class="chapter-nav" id="chapter-nav" aria-label="Story chapters"></nav> |
| 20 | + |
15 | 21 | <!-- Reusable SVG filter: traces the source alpha with a black outline --> |
16 | 22 | <svg width="0" height="0" aria-hidden="true" focusable="false" style="position:absolute"> |
17 | 23 | <defs> |
|
27 | 33 | </defs> |
28 | 34 | </svg> |
29 | 35 |
|
30 | | -<header> |
31 | | - <p class="eyebrow">2023 CDC Youth Risk Behavior Survey · Students' Social Media Addiction Dataset</p> |
32 | | - <h1>Teen Health Under Pressure</h1> |
33 | | - <p class="subtitle">A data story in two chapters: what the CDC's 2023 national survey reveals about the pressures converging on teen mental health, and what a global social-media survey adds about the digital layer on top.</p> |
| 36 | +<header class="hero"> |
| 37 | + <canvas id="hero-bg" class="hero-bg" aria-hidden="true"></canvas> |
| 38 | + <div class="hero-grain" aria-hidden="true"></div> |
| 39 | + |
| 40 | + <div class="hero-content"> |
| 41 | + <p class="eyebrow hero-eyebrow">2023 CDC Youth Risk Behavior Survey · Students' Social Media Addiction Dataset</p> |
| 42 | + |
| 43 | + <h1 class="hero-headline" aria-label="Teen Health Under Pressure"> |
| 44 | + <span class="hero-word" style="--i:0">Teen</span> |
| 45 | + <span class="hero-word" style="--i:1">Health</span> |
| 46 | + <span class="hero-word hero-word-accent" style="--i:2">Under</span> |
| 47 | + <span class="hero-word hero-word-accent" style="--i:3">Pressure</span> |
| 48 | + </h1> |
| 49 | + |
| 50 | + <p class="subtitle hero-subtitle">A data story in two chapters: what the CDC's 2023 national survey reveals about the pressures converging on teen mental health, and what a global social-media survey adds about the digital layer on top.</p> |
| 51 | + |
| 52 | + <div class="hero-stats" aria-hidden="true"> |
| 53 | + <div class="hero-stat"> |
| 54 | + <span class="hero-stat-value" data-target="20808" data-suffix="">0</span> |
| 55 | + <span class="hero-stat-label">students surveyed</span> |
| 56 | + </div> |
| 57 | + <div class="hero-stat hero-stat-divider"> |
| 58 | + <span class="hero-stat-value" data-target="110" data-suffix="">0</span> |
| 59 | + <span class="hero-stat-label">countries represented</span> |
| 60 | + </div> |
| 61 | + <div class="hero-stat hero-stat-divider"> |
| 62 | + <span class="hero-stat-value" data-target="42" data-suffix="%">0%</span> |
| 63 | + <span class="hero-stat-label">report poor mental health</span> |
| 64 | + </div> |
| 65 | + </div> |
| 66 | + |
| 67 | + <a href="#section-demographics" class="hero-scroll" aria-label="Scroll to start"> |
| 68 | + <span class="hero-scroll-text">Scroll to begin</span> |
| 69 | + <span class="hero-scroll-arrow" aria-hidden="true"> |
| 70 | + <svg width="14" height="22" viewBox="0 0 14 22"><path d="M7 1 v18 M1 14 l6 6 l6 -6" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> |
| 71 | + </span> |
| 72 | + </a> |
| 73 | + </div> |
34 | 74 | </header> |
35 | 75 |
|
36 | 76 | <!-- SECTION 1: ORIENTATION --> |
|
0 commit comments