Skip to content

Commit 351fb1c

Browse files
DerekNonGenericDerekNonGeneric
committed
📖✨：give the about page something to say
It was one sentence pointing at the vision statement, which is itself one paragraph. A quarter of the navigation was a doorway to a doorway. The page now opens on the question the work started from, the one the news post records, because the four verbs in it already carry the site: the description, the vision, and the home page's own heading all say them. Under it are four positions the repository can be checked against, which is the part an about page can do that a mission statement cannot. Dependencies as a cost. A licence chosen to fit what it covers, three ways, for source and samples and prose. Rules written down rather than held by whoever reviews you. Community documents kept in one place and mirrored out. It closes by saying the portal is in its infancy, which the docs index now demonstrates rather than claims: six of the nine handbook rules have no page under them, and the page says so. Signed-off-by: Derek Lewis <DerekNonGeneric@inf.is> Assisted-by: Claude-Code:claude-opus-5 Assisted-by: Claude-Code:claude-fable-5
1 parent 71c9909 commit 351fb1c

3 files changed

Lines changed: 332 additions & 4 deletions

File tree

‎_assets/styles/_about.scss‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
1+
// The about page: the question the project started from, how the community
2+
// is organised, and where things stand.
3+
4+
// It reads at the same 1200px width as docs and home, and sets its own
5+
// offset under the fixed navbar. Colours come from _sublime-theme.scss;
6+
// $about-muted matches the tone _home.scss and _docs.scss give secondary
7+
// copy, so all three pages read alike.
8+
9+
$about-wrap: 1200px;
10+
$about-gutter: clamp(1rem, 4vw, 3rem);
11+
$about-link: shade-color($primary, 25%);
12+
$about-primary-tint: tint-color($primary, 30%);
13+
$about-muted: #4b433c;
14+
$about-hairline: rgb(167 151 139 / 55%);
15+
16+
// Scoped to `main` to keep the resets off the navbar and footer, which are
17+
// its siblings under the same body class. The padding replaces what
18+
// `main > .container` gives the footer elsewhere.
19+
.about main {
20+
padding-bottom: 104px;
21+
}
22+
23+
.about main h1,
24+
.about main h2,
25+
.about main p,
26+
.about main ul,
27+
.about main dl,
28+
.about main dd {
29+
margin: 0;
30+
}
31+
32+
.about main ul {
33+
padding: 0;
34+
list-style: none;
35+
}
36+
37+
.about main a {
38+
color: $about-link;
39+
}
40+
41+
.about main :focus-visible {
42+
outline: 2px solid $body-color;
43+
outline-offset: 2px;
44+
}
45+
46+
.about .wrap {
47+
max-width: $about-wrap;
48+
padding-inline: $about-gutter;
49+
margin-inline: auto;
50+
}
51+
52+
/* --- Head: the question -------------------------------------------------- */
53+
54+
// Ink, so it carries on from the navbar rather than leaving a pale band
55+
// between the two.
56+
.about-head {
57+
position: relative;
58+
padding-top: calc(#{$navbar-height} + clamp(2rem, 5vw, 3.5rem));
59+
padding-bottom: clamp(2.25rem, 5vw, 3.5rem);
60+
overflow: hidden;
61+
color: $body-bg;
62+
background-color: $body-color;
63+
}
64+
65+
// The flower of life, run off the corner so an arc of it lands on the page.
66+
// Offset by transform, which resolves against the pattern; `inset` would
67+
// resolve against the section and move as the section grows.
68+
.about-pattern {
69+
position: absolute;
70+
inset-block-start: 0;
71+
inset-inline-end: 0;
72+
z-index: 0;
73+
width: min(88vw, 760px);
74+
aspect-ratio: 1;
75+
background-image: url('/assets/img/sublime-theme/flower-of-life.svg');
76+
background-repeat: no-repeat;
77+
background-size: contain;
78+
opacity: 0.1;
79+
transform: translate(24%, -20%);
80+
}
81+
82+
.about-head-inner {
83+
position: relative;
84+
z-index: 1;
85+
}
86+
87+
// _custom.scss draws a rule after every h1, sized for its 1.5rem default;
88+
// wrong at this scale.
89+
.about-title {
90+
display: block;
91+
font-size: clamp(1.875rem, 4.5vw, 2.75rem);
92+
font-weight: 700;
93+
line-height: 1.08;
94+
letter-spacing: -0.02em;
95+
}
96+
97+
.about-title::after {
98+
content: none;
99+
}
100+
101+
.about-lede {
102+
max-width: 54ch;
103+
margin-top: 1rem !important;
104+
font-size: clamp(1rem, 1.6vw, 1.0625rem);
105+
line-height: 1.6;
106+
color: rgb(231 231 214 / 76%);
107+
}
108+
109+
// The measure sits on the same element as the type size, so the `ch` it reads
110+
// is the one the question is actually set in.
111+
.about-question {
112+
max-width: 30ch;
113+
margin-top: clamp(2.25rem, 5vw, 3.5rem) !important;
114+
font-size: clamp(1.75rem, 4.6vw, 3.25rem);
115+
font-weight: 700;
116+
line-height: 1.18;
117+
letter-spacing: -0.015em;
118+
text-wrap: balance;
119+
}
120+
121+
// The four verbs recur sitewide, coloured here as home colours them in its
122+
// masthead.
123+
.about-question em {
124+
font-style: normal;
125+
color: $about-primary-tint;
126+
}
127+
128+
/* --- Shared section furniture -------------------------------------------- */
129+
130+
.about .band {
131+
padding-block: clamp(2.5rem, 6vw, 4rem);
132+
}
133+
134+
.about .section-head {
135+
display: flex;
136+
flex-wrap: wrap;
137+
gap: 0.5rem 1rem;
138+
align-items: baseline;
139+
justify-content: space-between;
140+
}
141+
142+
.about .section-title {
143+
font-size: 1.125rem;
144+
font-weight: 700;
145+
letter-spacing: -0.01em;
146+
}
147+
148+
.about .section-more {
149+
font-family: $font-family-monospace;
150+
font-size: 0.8125rem;
151+
}
152+
153+
/* --- In practice -----------------------------------------------------------
154+
The page's substance, so it sits on its own ground: the same secondary tone
155+
home gives its SDK section.
156+
*/
157+
158+
.about .band-quiet {
159+
background-color: $secondary;
160+
border-block: 1px solid $about-hairline;
161+
}
162+
163+
.about .tenet-list {
164+
display: grid;
165+
grid-template-columns: repeat(3, minmax(0, 1fr));
166+
row-gap: clamp(1.5rem, 4vw, 2rem);
167+
margin-top: 1.75rem;
168+
}
169+
170+
// A rule between the columns rather than above each: the three are parallel
171+
// and carry equal weight. Spacing comes from padding rather than a column
172+
// gap, so the rule sits centred between two columns and the outer edges stay
173+
// flush with the heading above.
174+
.about .tenet {
175+
padding-inline: clamp(1rem, 2.2vw, 2rem);
176+
border-inline-start: 1px solid $about-hairline;
177+
}
178+
179+
.about .tenet:first-child {
180+
padding-inline-start: 0;
181+
border-inline-start: 0;
182+
}
183+
184+
.about .tenet:last-child {
185+
padding-inline-end: 0;
186+
}
187+
188+
.about .tenet-name {
189+
font-size: 1.0625rem;
190+
font-weight: 700;
191+
}
192+
193+
.about .tenet-what {
194+
margin-top: 0.5rem;
195+
font-size: 0.9375rem;
196+
line-height: 1.6;
197+
color: $about-muted;
198+
}
199+
200+
/* --- Where it stands --------------------------------------------------------
201+
Quieter than the sections above: a heading at their size would promise a
202+
fourth pillar this page does not have.
203+
*/
204+
205+
.about .band-tail {
206+
padding-block: clamp(1.5rem, 3vw, 2rem);
207+
}
208+
209+
.about .tail-title {
210+
font-family: $font-family-monospace;
211+
font-size: 0.75rem;
212+
font-weight: 700;
213+
color: $about-muted;
214+
text-transform: uppercase;
215+
letter-spacing: 0.08em;
216+
}
217+
218+
.about .tail-what {
219+
max-width: 60ch;
220+
margin-top: 0.625rem;
221+
font-size: 0.9375rem;
222+
line-height: 1.65;
223+
color: $about-muted;
224+
}
225+
226+
/* --- Narrow -------------------------------------------------------------- */
227+
228+
// Straight from three to one: two columns would leave a row of one. Stacked,
229+
// the rule between them turns to sit above, which is how the rest of the site
230+
// divides a list.
231+
@media (width < 860px) {
232+
.about .tenet-list {
233+
grid-template-columns: minmax(0, 1fr);
234+
}
235+
236+
.about .tenet {
237+
padding-block-start: clamp(1.5rem, 4vw, 2rem);
238+
padding-inline: 0;
239+
border-block-start: 1px solid $about-hairline;
240+
border-inline-start: 0;
241+
}
242+
243+
.about .tenet:first-child {
244+
padding-block-start: 0;
245+
border-block-start: 0;
246+
}
247+
}

‎_assets/styles/main.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@
1616
@import '../../node_modules/bootstrap/scss/nav';
1717
@import '../../node_modules/bootstrap/scss/navbar';
1818
@import '../../node_modules/bootstrap/scss/pagination';
19+
@import 'about';
1920
@import 'docs';
2021
@import 'error';
2122
@import 'home';

‎collections/_pages/about.html‎

Lines changed: 84 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,90 @@
11
---
22
title: About
3+
layout: default
34
permalink: /about/
5+
description:
6+
The question OpenINF formed around, how the work is organised, and where
7+
things currently stand.
48
body_classes:
59
- about
610
---
7-
<p class="lead">
8-
Check out the <a href="/about/vision">OpenINF Vision</a> to see what we are
9-
about.
10-
</p>
11+
<main class="flex-shrink-0">
12+
<!-- ================= the question =================================== -->
13+
<section class="about-head">
14+
<div class="about-pattern" aria-hidden="true"></div>
15+
16+
<div class="wrap about-head-inner">
17+
<h1 class="about-title">About</h1>
18+
<p class="about-lede">
19+
OpenINF formed around a question. The tools to answer it did not exist,
20+
so building them became the work.
21+
</p>
22+
23+
<p class="about-question">
24+
How can we help open source developers <em>aggregate</em>,
25+
<em>curate</em>, <em>disseminate</em>, and <em>apply</em> information
26+
more effectively?
27+
</p>
28+
</div>
29+
</section>
30+
31+
<!--
32+
================= how it is organised ============================
33+
Three things true of the community itself, rather than of anything it
34+
publishes. The home page covers what is being built.
35+
-->
36+
<section
37+
class="band band-quiet"
38+
id="practice"
39+
aria-labelledby="practice-title">
40+
<div class="wrap">
41+
<div class="section-head">
42+
<h2 class="section-title" id="practice-title">In practice</h2>
43+
<a class="section-more" href="/about/vision/">Vision</a>
44+
</div>
45+
46+
<dl class="tenet-list">
47+
<div class="tenet">
48+
<dt class="tenet-name">The rules are written down</dt>
49+
<dd class="tenet-what">
50+
How prose is styled, how a commit is worded, how a change gets
51+
reviewed. It lives in the <a href="/docs/#handbook">handbook</a>,
52+
not in the head of whoever reviews you.
53+
</dd>
54+
</div>
55+
<div class="tenet">
56+
<dt class="tenet-name">The community documents have one home</dt>
57+
<dd class="tenet-what">
58+
The code of conduct, security policy, and the rest are written once,
59+
in
60+
<a href="https://github.com/OpenINF/.github">OpenINF/.github</a>,
61+
then mirrored into each repository as it builds. They cannot drift
62+
apart from one another.
63+
</dd>
64+
</div>
65+
<div class="tenet">
66+
<dt class="tenet-name">The portal is built in the open</dt>
67+
<dd class="tenet-what">
68+
Its
69+
<a href="https://github.com/OpenINF/openinf.github.io">source</a>,
70+
its issues, and the review behind every change are public. That
71+
includes how this page came to be.
72+
</dd>
73+
</div>
74+
</dl>
75+
</div>
76+
</section>
77+
78+
<!-- ================= the honest bit ================================= -->
79+
<section class="band band-tail" aria-labelledby="standing-title">
80+
<div class="wrap">
81+
<h2 class="tail-title" id="standing-title">Where it stands</h2>
82+
<p class="tail-what">
83+
In its infancy, and it shows: gaps, half-finished pages, rules with
84+
nothing written under them yet. What we know about is marked as such.
85+
Finding something we have missed is a good reason to
86+
<a href="/docs/dev/internals/contributing/">open a pull request</a>.
87+
</p>
88+
</div>
89+
</section>
90+
</main>

0 commit comments

Comments
 (0)