|
5 | 5 | <meta name="viewport" content="width=device-width, initial-scale=1" /> |
6 | 6 | <title>Model Meters - AI summary</title> |
7 | 7 | <link rel="icon" type="image/png" href="../img/favicon.png"> |
8 | | - <style> |
9 | | - /* Light theme (default) */ |
10 | | - :root { |
11 | | - --bg:#f5f7fa; --bg-alt:#e9eef2; --panel:#ffffff; --panel-2:#f0f3f7; --text:#1b242b; --muted:#5d6b76; --accent:#2563eb; --border:#d0d7de; --ring:#3b82f680; --shadow:0 6px 18px rgba(0,0,0,.08); |
12 | | - --topbar-offset: 0px; /* header not sticky on monthly page */ |
13 | | - } |
14 | | - /* Dark theme */ |
15 | | - :root[data-theme="dark"] { |
16 | | - --bg:#0b0c10; --bg-alt:#0e1116; --panel:#14161a; --panel-2:#1b1f24; --text:#e8eef3; --muted:#a8b3bd; --accent:#3da9fc; --border:#2a2f36; --ring:#7cc4ff80; --shadow:0 10px 24px rgba(0,0,0,.35); |
17 | | - } |
18 | | - html, body { min-height: 100%; } |
19 | | - html { scroll-padding-top: calc(var(--topbar-offset) + 16px); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } |
20 | | - body { margin:0; font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial; background: linear-gradient(180deg,var(--bg) 0%, var(--bg-alt) 100%); color: var(--text); } |
21 | | - .container { min-height:100dvh; padding:12px 12px 16px; box-sizing:border-box; } |
22 | | - .card { background: var(--panel); border:1px solid var(--border); border-radius:16px; box-shadow: var(--shadow); overflow:hidden; position:relative; clip-path: inset(0 round 16px); } |
23 | | - .card-hd { position:relative; background:var(--panel); display:flex; gap:12px; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border); flex-wrap:wrap; } |
24 | | - .title { font-size:18px; font-weight:650; letter-spacing:.2px; } |
25 | | - .toolbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; } |
26 | | - button { background:var(--panel-2); color:var(--text); border:1px solid var(--border); border-radius:10px; padding:8px 10px; font-size:14px; line-height:1; outline:none; cursor:pointer; } |
27 | | - button:hover { border-color:#374151; } |
28 | | - button:focus { box-shadow:0 0 0 4px var(--ring); border-color:var(--accent); } |
29 | | - |
30 | | - .content { display:grid; grid-template-columns: 1fr; gap:16px; padding:16px; } |
31 | | - .articles { min-width:0; } |
32 | | - .article { background: var(--panel); border:1px solid var(--border); border-radius:12px; padding:0; margin-bottom:12px; box-shadow: var(--shadow); scroll-margin-top: calc(var(--topbar-offset) + 16px); } |
33 | | - .article:target::before { content: ""; display:block; height: calc(var(--topbar-offset) + 16px); margin-top: calc(-1 * (var(--topbar-offset) + 16px)); } |
34 | | - .month-title { cursor:pointer; display:flex; align-items:center; gap:8px; padding:14px 16px; border-bottom:1px solid var(--border); user-select:none; } |
35 | | - .month-title h2 { margin:0; font-size:22px; line-height:1.2; font-weight:700; } |
36 | | - .month-title .chev { transition: transform .2s; } |
37 | | - /* When collapsed, rotate the right-pointing chevron to point down */ |
38 | | - .article.collapsed .month-title .chev { transform: rotate(90deg); } |
39 | | - .month-details { padding:16px; } |
40 | | - |
41 | | - /* Minimal markdown styles */ |
42 | | - .markdown-body h1, .markdown-body h2, .markdown-body h3 { border-bottom:1px solid var(--border); padding-bottom:4px; } |
43 | | - .markdown-body pre { background: var(--panel-2); border:1px solid var(--border); padding:12px; border-radius:10px; overflow:auto; } |
44 | | - .markdown-body code { background: var(--panel-2); border:1px solid var(--border); padding:2px 6px; border-radius:8px; } |
45 | | - .markdown-body table { border-collapse: collapse; width: 100%; } |
46 | | - .markdown-body th, .markdown-body td { border: 1px solid var(--border); padding: 6px 8px; } |
47 | | - .article.collapsed .month-details { display:none; } |
48 | | - |
49 | | - .footer { color: var(--muted); text-align:center; padding: 12px 16px; border-top:1px solid var(--border); } |
50 | | - @media (max-width: 900px) { .content { grid-template-columns: 1fr; } } |
51 | | - </style> |
| 8 | + <link rel="stylesheet" href="../site.css"> |
52 | 9 | <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script> |
53 | 10 | <base target="_self"> |
54 | 11 | <meta name="color-scheme" content="light dark"> |
55 | | - <meta name="theme-color" content="#2563eb"> |
56 | | - <link rel="icon" href="data:,"> |
| 12 | + <meta name="theme-color" content="#087f6b"> |
| 13 | + |
57 | 14 | </head> |
58 | | -<body> |
| 15 | +<body class="summary-page ai-summary-page"> |
59 | 16 | <div class="container"> |
60 | 17 | <div class="card"> |
61 | | - <div class="card-hd"> |
62 | | - <div class="title">Model Meters - AI summary agent ✨</div> |
63 | | - <div style="display:flex; align-items:center; gap:12px; margin-left:auto;"> |
64 | | - <span class="title" style="font-size:16px; font-weight:500; white-space:nowrap;">Powered by <a href="https://ai.azure.com/" target="_blank" rel="noopener noreferrer" style="color:var(--accent);text-decoration:none;">Azure AI</a> + <a href="https://github.com/microsoftdocs/mcp" target="_blank" rel="noopener noreferrer" style="color:var(--accent);text-decoration:none;">Microsoft Learn MCP Server</a></span> |
65 | | - <button id="btn-rss" title="RSS Feed">🌐 RSS</button> |
66 | | - <button id="btn-theme" title="Toggle light/dark mode">🌗 Theme</button> |
67 | | - <button id="btn-back" title="Back to Model Meters">↩️Model Meters</button> |
68 | | - </div> |
| 18 | + <div class="card-hd"> |
| 19 | + <div class="title"><a href="../index.html" class="brand">Model Meters</a></div> |
| 20 | + <nav class="workspace-nav" aria-label="Main navigation"> |
| 21 | + <a href="../index.html">Microsoft Foundry</a> |
| 22 | + <a href="../github/index.html">GitHub Meters</a> |
| 23 | + <a href="./" aria-current="page"><span class="ui-icon icon-sparkles" aria-hidden="true"></span>AI Summaries</a> |
| 24 | + </nav> |
| 25 | + <div class="toolbar"> |
| 26 | + <button id="btn-rss" title="RSS Feed"><span class="ui-icon icon-rss" aria-hidden="true"></span>RSS feed</button> |
| 27 | + <button id="btn-back" title="Back to Model Meters"><span class="ui-icon icon-back" aria-hidden="true"></span>Model Meters</button> |
| 28 | + <button id="btn-theme" class="icon-button" title="Toggle light/dark mode" aria-label="Toggle light/dark mode"><span class="ui-icon icon-moon" aria-hidden="true"></span></button> |
| 29 | + </div> |
69 | 30 | </div> |
70 | 31 | <div class="content"> |
71 | 32 | <section class="articles" id="articles"> |
72 | 33 | <div id="status" class="footer" style="border:none;">Loading monthly summaries…</div> |
73 | 34 | </section> |
74 | 35 | </div> |
75 | | - <div class="footer">Built from Markdown files in <code>monthly/aisummary/</code> at runtime.</div> |
| 36 | + <div class="footer">Powered by <a href="https://ai.azure.com/" target="_blank" rel="noopener noreferrer">Azure AI</a> + <a href="https://github.com/microsoftdocs/mcp" target="_blank" rel="noopener noreferrer">Microsoft Learn MCP Server</a></div> |
76 | 37 | </div> |
77 | 38 | </div> |
78 | 39 |
|
|
106 | 67 | function updateBtn(){ |
107 | 68 | const m = currentMode(); |
108 | 69 | // Show target mode on the button (same UX as main page) |
109 | | - const nextLabel = m === 'dark' ? '☀️ Light' : '🌙 Dark'; |
110 | | - btn.textContent = nextLabel; |
| 70 | + btn.innerHTML = `<span class="ui-icon icon-${m === 'dark' ? 'sun' : 'moon'}" aria-hidden="true"></span>`; |
111 | 71 | btn.setAttribute('aria-label', 'Switch to ' + (m === 'dark' ? 'light' : 'dark') + ' theme'); |
| 72 | + btn.title = btn.getAttribute('aria-label'); |
| 73 | + btn.setAttribute('aria-pressed', m === 'dark'); |
112 | 74 | } |
113 | 75 |
|
114 | 76 | applyMode(mode); |
|
192 | 154 |
|
193 | 155 | const header = document.createElement('div'); |
194 | 156 | header.className = 'month-title'; |
195 | | - header.innerHTML = `<span class="chev">▶</span><h2 class="month-heading">${title}</h2>`; |
| 157 | + header.setAttribute('role', 'button'); |
| 158 | + header.setAttribute('tabindex', '0'); |
| 159 | + header.setAttribute('aria-expanded', String(!collapsed)); |
| 160 | + header.innerHTML = `<span class="chev ui-icon icon-next" aria-hidden="true"></span><h2 class="month-heading">${title}</h2>`; |
196 | 161 | header.addEventListener('click', () => { |
197 | 162 | article.classList.toggle('collapsed'); |
| 163 | + header.setAttribute('aria-expanded', String(!article.classList.contains('collapsed'))); |
198 | 164 | history.replaceState(null, '', '#' + id); // keep URL in sync |
199 | 165 | }); |
| 166 | + header.addEventListener('keydown', event => { |
| 167 | + if (event.key === 'Enter' || event.key === ' ') { event.preventDefault(); header.click(); } |
| 168 | + }); |
200 | 169 |
|
201 | 170 | const details = document.createElement('div'); |
202 | 171 | details.className = 'month-details'; |
|
263 | 232 | // If there's a hash, expand and scroll |
264 | 233 | if (location.hash) { |
265 | 234 | const el = document.getElementById(location.hash.slice(1)); |
266 | | - if (el) el.classList.remove('collapsed'); |
| 235 | + if (el) { |
| 236 | + el.classList.remove('collapsed'); |
| 237 | + el.querySelector('.month-title').setAttribute('aria-expanded', 'true'); |
| 238 | + } |
267 | 239 | } |
268 | 240 | } catch (err) { |
269 | 241 | console.error(err); |
|
0 commit comments