Skip to content

Commit ea0f541

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 ea0f541

3 files changed

Lines changed: 313 additions & 4 deletions

File tree

‎_assets/styles/_about.scss‎

Lines changed: 225 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,225 @@
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+
.about-question {
110+
margin-top: clamp(2.25rem, 5vw, 3.5rem);
111+
}
112+
113+
// The measure belongs on the element carrying the type size: `ch` resolves
114+
// against an element's own font, so on the blockquote it would read against
115+
// the inherited 16px and cap the display text at a few words a line.
116+
.about-question p {
117+
max-width: 30ch;
118+
margin: 0;
119+
font-size: clamp(1.75rem, 4.6vw, 3.25rem);
120+
font-weight: 700;
121+
line-height: 1.18;
122+
letter-spacing: -0.015em;
123+
text-wrap: balance;
124+
}
125+
126+
// The four verbs recur sitewide, coloured here as home colours them in its
127+
// masthead.
128+
.about-question em {
129+
font-style: normal;
130+
color: $about-primary-tint;
131+
}
132+
133+
/* --- Shared section furniture -------------------------------------------- */
134+
135+
.about .band {
136+
padding-block: clamp(2.5rem, 6vw, 4rem);
137+
}
138+
139+
.about .section-head {
140+
display: flex;
141+
flex-wrap: wrap;
142+
gap: 0.5rem 1rem;
143+
align-items: baseline;
144+
justify-content: space-between;
145+
}
146+
147+
.about .section-title {
148+
font-size: 1.125rem;
149+
font-weight: 700;
150+
letter-spacing: -0.01em;
151+
}
152+
153+
.about .section-more {
154+
font-family: $font-family-monospace;
155+
font-size: 0.8125rem;
156+
}
157+
158+
/* --- In practice -----------------------------------------------------------
159+
The page's substance, so it sits on its own ground: the same secondary tone
160+
home gives its SDK section.
161+
*/
162+
163+
.about .band-quiet {
164+
background-color: $secondary;
165+
border-block: 1px solid $about-hairline;
166+
}
167+
168+
.about .tenet-list {
169+
display: grid;
170+
grid-template-columns: repeat(3, minmax(0, 1fr));
171+
gap: clamp(2rem, 4vw, 2.75rem);
172+
margin-top: 1.75rem;
173+
}
174+
175+
.about .tenet {
176+
padding-top: 1.25rem;
177+
border-top: 3px solid $primary;
178+
}
179+
180+
.about .tenet-name {
181+
font-size: 1.0625rem;
182+
font-weight: 700;
183+
}
184+
185+
.about .tenet-what {
186+
margin-top: 0.5rem;
187+
font-size: 0.9375rem;
188+
line-height: 1.6;
189+
color: $about-muted;
190+
}
191+
192+
/* --- Where it stands --------------------------------------------------------
193+
Quieter than the sections above: a heading at their size would promise a
194+
fourth pillar this page does not have.
195+
*/
196+
197+
.about .band-tail {
198+
padding-block: clamp(1.5rem, 3vw, 2rem);
199+
}
200+
201+
.about .tail-title {
202+
font-family: $font-family-monospace;
203+
font-size: 0.75rem;
204+
font-weight: 700;
205+
color: $about-muted;
206+
text-transform: uppercase;
207+
letter-spacing: 0.08em;
208+
}
209+
210+
.about .tail-what {
211+
max-width: 60ch;
212+
margin-top: 0.625rem;
213+
font-size: 0.9375rem;
214+
line-height: 1.65;
215+
color: $about-muted;
216+
}
217+
218+
/* --- Narrow -------------------------------------------------------------- */
219+
220+
// Straight from three to one: two columns would leave a row of one.
221+
@media (width < 860px) {
222+
.about .tenet-list {
223+
grid-template-columns: minmax(0, 1fr);
224+
}
225+
}

‎_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: 87 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,93 @@
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+
<blockquote class="about-question">
24+
<p>
25+
How can we help open source developers <em>aggregate</em>,
26+
<em>curate</em>, <em>disseminate</em>, and <em>apply</em> information
27+
more effectively?
28+
</p>
29+
</blockquote>
30+
</div>
31+
</section>
32+
33+
<!--
34+
================= how it is organised ============================
35+
Three things true of the community itself, rather than of anything it
36+
publishes. The home page covers what is being built.
37+
-->
38+
<section
39+
class="band band-quiet"
40+
id="practice"
41+
aria-labelledby="practice-title">
42+
<div class="wrap">
43+
<div class="section-head">
44+
<h2 class="section-title" id="practice-title">In practice</h2>
45+
<a class="section-more" href="/about/vision/">Vision</a>
46+
</div>
47+
48+
<dl class="tenet-list">
49+
<div class="tenet">
50+
<dt class="tenet-name">The rules are written down</dt>
51+
<dd class="tenet-what">
52+
How prose is styled, how a commit is worded, how a change gets
53+
reviewed. It lives in the <a href="/docs/#handbook">handbook</a>,
54+
not in the head of whoever reviews you.
55+
</dd>
56+
</div>
57+
<div class="tenet">
58+
<dt class="tenet-name">The community documents have one home</dt>
59+
<dd class="tenet-what">
60+
The code of conduct, security policy, and the rest are written once,
61+
in
62+
<a href="https://github.com/OpenINF/.github">OpenINF/.github</a>,
63+
then mirrored into each repository as it builds. They cannot drift
64+
apart from one another.
65+
</dd>
66+
</div>
67+
<div class="tenet">
68+
<dt class="tenet-name">The work happens in the open</dt>
69+
<dd class="tenet-what">
70+
Discussion, review, and the history behind every page here are
71+
public. This site is built from
72+
<a href="https://github.com/OpenINF/openinf.github.io"
73+
>the repository it describes</a
74+
>.
75+
</dd>
76+
</div>
77+
</dl>
78+
</div>
79+
</section>
80+
81+
<!-- ================= the honest bit ================================= -->
82+
<section class="band band-tail" aria-labelledby="standing-title">
83+
<div class="wrap">
84+
<h2 class="tail-title" id="standing-title">Where it stands</h2>
85+
<p class="tail-what">
86+
In its infancy, and it shows: gaps, half-finished pages, rules with
87+
nothing written under them yet. What we know about is marked as such.
88+
Finding something we have missed is a good reason to
89+
<a href="/docs/dev/internals/contributing/">open a pull request</a>.
90+
</p>
91+
</div>
92+
</section>
93+
</main>

0 commit comments

Comments
 (0)