Skip to content

Commit 01d044f

Browse files
anssikoanssiko
committed
Restructure community page groups and deliverables layout
1 parent 20b835d commit 01d044f

3 files changed

Lines changed: 157 additions & 112 deletions

File tree

‎_layouts/community.html‎

Lines changed: 67 additions & 112 deletions
Original file line numberDiff line numberDiff line change
@@ -20,78 +20,87 @@ <h2 class="title">Community</h2>
2020

2121
<div class="wrapper">
2222

23-
<div class="cap">
24-
<p class="title">Specifications</p>
23+
<div class="cap mb1">
24+
<p class="title">Deliverables</p>
2525
</div>
2626

27-
<div class="community gr">
28-
<div>
29-
<div class="bgr box">
30-
<div>
31-
<h3>Web Neural Network API</h3>
32-
<p>A dedicated low-level API for neural network inference hardware acceleration.</p>
33-
</div>
27+
<div class="community gr deliverables-grid">
28+
<div class="bgr box spec-box">
29+
<div class="spec-title-row">
30+
<span class="group-pill">Working Group</span>
31+
<h3>Web Neural Network API</h3>
3432
</div>
35-
<ul>
36-
<li><svg role="img" viewBox="0 0 512 512">
37-
<path fill="currentColor"
38-
d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z">
39-
</path>
40-
</svg>W3C Working Group specification</li>
41-
<li><svg role="img" viewBox="0 0 512 512">
42-
<path fill="currentColor"
43-
d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z">
44-
</path>
45-
</svg>Stabilizing implementations</li>
46-
</ul>
47-
<a class="learn" href="https://www.w3.org/TR/webnn/"> Read the specification
48-
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
49-
class="w-4 h-4" viewBox="0 0 24 24">
50-
<path d="M5 12h14M12 5l7 7-7 7"></path>
51-
</svg>
33+
<p>A dedicated low-level API for neural network inference hardware acceleration.</p>
34+
<a class="spec-github-link" href="https://github.com/webmachinelearning/webnn/"
35+
aria-label="View Web Neural Network API on GitHub">
36+
<img src="{{ '/assets/images/github-mark.svg' | relative_url }}" alt="" aria-hidden="true">
5237
</a>
53-
<a class="learn" href="{{ 'webnn-status' | relative_url }}"> Implementation status
54-
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
55-
class="w-4 h-4" viewBox="0 0 24 24">
56-
<path d="M5 12h14M12 5l7 7-7 7"></path>
57-
</svg>
38+
</div>
39+
<div class="bgr box spec-box">
40+
<div class="spec-title-row">
41+
<span class="group-pill">Community Group</span>
42+
<h3>WebMCP</h3>
43+
</div>
44+
<p>Enabling web apps to provide JavaScript-based tools to AI agents and assistive technologies.</p>
45+
<a class="spec-github-link" href="https://github.com/webmachinelearning/webmcp"
46+
aria-label="View WebMCP on GitHub">
47+
<img src="{{ '/assets/images/github-mark.svg' | relative_url }}" alt="" aria-hidden="true">
5848
</a>
5949
</div>
60-
<div>
61-
<div class="bgr box">
62-
<h3>Task-specific APIs, Prompt API, WebMCP API</h3>
63-
<p>Reuse built-in models, expose tools to AI agents.</p>
50+
<div class="bgr box spec-box">
51+
<div class="spec-title-row">
52+
<span class="group-pill">Community Group</span>
53+
<h3>Prompt API</h3>
6454
</div>
65-
<ul>
66-
<li><svg role="img" viewBox="0 0 512 512">
67-
<path fill="currentColor"
68-
d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z">
69-
</path>
70-
</svg><span>W3C Community Group incubations</span></li>
71-
<li><svg role="img" viewBox="0 0 512 512">
72-
<path fill="currentColor"
73-
d="M256 8C119.033 8 8 119.033 8 256s111.033 248 248 248 248-111.033 248-248S392.967 8 256 8zm0 48c110.532 0 200 89.451 200 200 0 110.532-89.451 200-200 200-110.532 0-200-89.451-200-200 0-110.532 89.451-200 200-200m140.204 130.267l-22.536-22.718c-4.667-4.705-12.265-4.736-16.97-.068L215.346 303.697l-59.792-60.277c-4.667-4.705-12.265-4.736-16.97-.069l-22.719 22.536c-4.705 4.667-4.736 12.265-.068 16.971l90.781 91.516c4.667 4.705 12.265 4.736 16.97.068l172.589-171.204c4.704-4.668 4.734-12.266.067-16.971z">
74-
</path>
75-
</svg><span>Experimental implementations</span></li>
76-
</ul>
77-
78-
<a class="learn" href="{{ 'incubations' | relative_url }}"> Explore incubations
79-
<svg fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
80-
class="w-4 h-4" viewBox="0 0 24 24">
81-
<path d="M5 12h14M12 5l7 7-7 7"></path>
82-
</svg>
55+
<p>An API for prompting browser-provided language models.</p>
56+
<a class="spec-github-link" href="https://github.com/webmachinelearning/prompt-api"
57+
aria-label="View Prompt API on GitHub">
58+
<img src="{{ '/assets/images/github-mark.svg' | relative_url }}" alt="" aria-hidden="true">
59+
</a>
60+
</div>
61+
<div class="bgr box spec-box">
62+
<div class="spec-title-row">
63+
<span class="group-pill">Community Group</span>
64+
<h3>Translator and Language Detector APIs</h3>
65+
</div>
66+
<p>A set of APIs for translating text and detecting its language.</p>
67+
<a class="spec-github-link" href="https://github.com/webmachinelearning/translation-api/"
68+
aria-label="View Translator and Language Detector APIs on GitHub">
69+
<img src="{{ '/assets/images/github-mark.svg' | relative_url }}" alt="" aria-hidden="true">
70+
</a>
71+
</div>
72+
<div class="bgr box spec-box">
73+
<div class="spec-title-row">
74+
<span class="group-pill">Community Group</span>
75+
<h3>Writing Assistance APIs</h3>
76+
</div>
77+
<p>A set of APIs to help web users with writing text.</p>
78+
<a class="spec-github-link" href="https://github.com/webmachinelearning/writing-assistance-apis/"
79+
aria-label="View Writing Assistance APIs on GitHub">
80+
<img src="{{ '/assets/images/github-mark.svg' | relative_url }}" alt="" aria-hidden="true">
81+
</a>
82+
</div>
83+
<div class="bgr box spec-box">
84+
<div class="spec-title-row">
85+
<span class="group-pill">Community Group</span>
86+
<h3>Proofreader API</h3>
87+
</div>
88+
<p>An API to help web users perform real-time proofreading of freeform text.</p>
89+
<a class="spec-github-link" href="https://github.com/webmachinelearning/proofreader-api"
90+
aria-label="View Proofreader API on GitHub">
91+
<img src="{{ '/assets/images/github-mark.svg' | relative_url }}" alt="" aria-hidden="true">
8392
</a>
8493
</div>
8594
</div>
8695

8796
<div class="cap mb1">
88-
<p class="title">W3C Groups</p>
97+
<p class="title">Developed by</p>
8998
</div>
9099

91100
<div class="community gr">
92101
<div class="moreitem">
93102

94-
<h3><a href="https://www.w3.org/groups/wg/webmachinelearning">Working Group</a></h3>
103+
<h3><a href="https://www.w3.org/groups/wg/webmachinelearning">Web Machine Learning Working Group</a></h3>
95104
<div>Standardizes Web APIs for on-device
96105
machine learning inference working together with the W3C ecosystem using
97106
well-received Community
@@ -121,7 +130,7 @@ <h3><a href="https://www.w3.org/groups/wg/webmachinelearning">Working Group</a><
121130
</ul>
122131
</div>
123132
<div class="moreitem">
124-
<h3><a href="https://www.w3.org/groups/cg/webmachinelearning">Community Group</a></h3>
133+
<h3><a href="https://www.w3.org/groups/cg/webmachinelearning">Web Machine Learning Community Group</a></h3>
125134
<div>Incubates new proposals for on-device
126135
machine learning inference and agentic web. A group where new ideas are discussed and explored
127136
before formal standardization.</div>
@@ -152,8 +161,8 @@ <h3><a href="https://www.w3.org/groups/cg/webmachinelearning">Community Group</a
152161
</div>
153162

154163
<div class="cap">
155-
<p class="title" id="join">Join the Community</p>
156-
<p class="subtitle">interested in helping advance these web specifications?</p>
164+
<p class="title" id="join">Join us</p>
165+
<p class="subtitle">Join a global community of contributors building open standards for machine learning and AI on the web.</p>
157166
</div>
158167

159168
<div class="join">
@@ -194,60 +203,6 @@ <h3><a href="https://www.w3.org/groups/cg/webmachinelearning">Community Group</a
194203

195204
</div>
196205

197-
<div class="cap">
198-
<p class="title">How to Contribute</p>
199-
<p class="subtitle">specifications and related projects in <a
200-
href="https://github.com/webmachinelearning/">GitHub</a> welcome your contributions!</p>
201-
</div>
202-
203-
<ul class="c4">
204-
<li><svg viewBox="0 0 320 512">
205-
<path fill="currentColor"
206-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
207-
</path>
208-
</svg> <a href="https://github.com/webmachinelearning/webnn/">webnn</a>
209-
</li>
210-
<li><svg viewBox="0 0 320 512">
211-
<path fill="currentColor"
212-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
213-
</path>
214-
</svg> <a href="https://github.com/webmachinelearning/model-loader/">model-loader</a>
215-
</li>
216-
<li><svg viewBox="0 0 320 512">
217-
<path fill="currentColor"
218-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
219-
</path>
220-
</svg> <a href="https://github.com/webmachinelearning/meetings/">meetings</a>
221-
</li>
222-
<li><svg viewBox="0 0 320 512">
223-
<path fill="currentColor"
224-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
225-
</path>
226-
</svg> <a href="https://github.com/webmachinelearning/webnn-polyfill">webnn-polyfill</a>
227-
</li>
228-
<li><svg viewBox="0 0 320 512">
229-
<path fill="currentColor"
230-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
231-
</path>
232-
</svg> <a href="https://github.com/webmachinelearning/webnn-samples">webnn-samples</a></li>
233-
<li><svg viewBox="0 0 320 512">
234-
<path fill="currentColor"
235-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
236-
</path>
237-
</svg> <a href="https://github.com/webmachinelearning/webnn-native">webnn-native</a></li>
238-
<li><svg viewBox="0 0 320 512">
239-
<path fill="currentColor"
240-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
241-
</path>
242-
</svg> <a href="https://github.com/webmachinelearning/proposals">proposals</a></li>
243-
<li><svg viewBox="0 0 320 512">
244-
<path fill="currentColor"
245-
d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z">
246-
</path>
247-
</svg> <a href="https://github.com/webmachinelearning/webmachinelearning.github.io">including this website
248-
😊</a></li>
249-
</ul>
250-
251206
{{ content }}
252207

253208
</div>

‎_sass/main.scss‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,85 @@
135135
border: 1px solid #efefef;
136136
}
137137

138+
.community .spec-box {
139+
position: relative;
140+
padding-right: 4rem;
141+
}
142+
143+
.community.deliverables-grid {
144+
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
145+
grid-template-rows: auto;
146+
grid-template-areas: none;
147+
gap: 1rem;
148+
align-items: stretch;
149+
margin-bottom: 2rem;
150+
}
151+
152+
.community.deliverables-grid .spec-box {
153+
display: flex;
154+
flex-direction: column;
155+
}
156+
157+
.community .spec-github-link {
158+
position: absolute;
159+
top: 0.75rem;
160+
right: 0.75rem;
161+
display: inline-flex;
162+
align-items: center;
163+
justify-content: center;
164+
width: 2.25rem;
165+
height: 2.25rem;
166+
opacity: 0.9;
167+
transition: opacity 0.15s ease, transform 0.15s ease;
168+
}
169+
170+
.community .spec-github-link:hover,
171+
.community .spec-github-link:focus {
172+
opacity: 1;
173+
transform: translateY(-1px);
174+
}
175+
176+
.community .spec-github-link:focus {
177+
outline: 2px solid rgba(255, 255, 255, 0.8);
178+
outline-offset: 2px;
179+
border-radius: 999px;
180+
}
181+
182+
.community .spec-github-link img {
183+
display: block;
184+
width: 1.35rem;
185+
height: 1.35rem;
186+
margin: 0;
187+
transform: none;
188+
}
189+
190+
.community .spec-title-row {
191+
display: flex;
192+
flex-direction: column;
193+
align-items: flex-start;
194+
gap: 0.45rem;
195+
margin-bottom: 0.35rem;
196+
}
197+
198+
.community .spec-title-row h3 {
199+
margin-bottom: 0;
200+
line-height: 1.25;
201+
}
202+
203+
.community .group-pill {
204+
padding: 0.2rem 0.55rem;
205+
border: 1px solid rgba(255, 255, 255, 0.38);
206+
border-radius: 999px;
207+
background: rgba(255, 255, 255, 0.14);
208+
color: #fff;
209+
font-size: 0.68rem;
210+
font-weight: 600;
211+
line-height: 1.2;
212+
letter-spacing: 0.04em;
213+
text-transform: uppercase;
214+
white-space: nowrap;
215+
}
216+
138217

139218
.community h3 {
140219
margin-bottom: 2px;
@@ -890,6 +969,14 @@ ul.c4 li {
890969
display: block !important;
891970
}
892971

972+
.community.deliverables-grid {
973+
display: grid !important;
974+
grid-template-columns: 1fr;
975+
grid-template-rows: none;
976+
grid-template-areas: none;
977+
align-items: stretch;
978+
}
979+
893980
.typing {
894981
width: 344px;
895982
text-align: center;

‎assets/images/github-mark.svg‎

Lines changed: 3 additions & 0 deletions
Loading

0 commit comments

Comments
 (0)