Skip to content

Serve the compiled CSS instead of the committed main_pretty.css - #791

Merged
amjjbonvin merged 3 commits into
masterfrom
fix/serve-compiled-css
Sep 30, 2026
Merged

amjjbonvin merged 3 commits into
masterfrom
fix/serve-compiled-css

Conversation

@amjjbonvin

@amjjbonvin amjjbonvin commented Sep 30, 2026 •

Copy link
Copy Markdown
Member

Addresses backlog item 1, and fixes a live styling bug found along the way.

Problem

_includes/_head.html loaded assets/css/main_pretty.css — a committed,
hand-optimised artifact. Nothing in the repo regenerated it (the Gruntfile had
no CSS task, and that file is now gone), so it had drifted from the Sass sources.
Editing anything under _sass/ had no effect on the published site.

Selectors
Compiled main.css (from _sass/) 1120
Shipped main_pretty.css 1115

In the sources but never shipped:

Selector Status
.btn-assistant-professor, :hover live bug — see below
#main article.fullpage, … img dead — layout emits <body class="fullpage"> and <article class="people">, so it never matched
.clearfix IE7 *zoom hack; .clearfix:after was shipped

Shipped but absent from the sources: .article-wrap p>a.prompt, li>a.prompt

The live bug

_layouts/people.html builds badge classes dynamically as btn-{{ stat }}, and
the people page emits btn-assistant-professor. The rule exists in
_sass/elements.scss but had never reached main_pretty.css:

$ curl -s https://www.bonvinlab.org/people/ | grep -o 'btn btn-assistant-professor[^>]*>[^<]*'
btn btn-assistant-professor">Assistant professor

$ curl -s https://www.bonvinlab.org/assets/css/main_pretty.css | grep -c btn-assistant-professor
0

That badge renders on the live site today with no role colour. This PR fixes it by
making the compiled stylesheet the one that ships.

Changes

  • Port .article-wrap p>a.prompt / li>a.prompt into _sass/elements.scss — the
    only rule that existed solely in the generated file
  • Point _includes/_head.html at assets/css/main.css
  • Delete assets/css/main_pretty.css
  • Set sourcemap: never, so the 153 KB main.css.map is no longer deployed now
    that main.css is public
  • Document the styling workflow in README.md

Verification

  • Nothing is lost. The old shipped stylesheet is a strict subset of the
    compiled one: 0 selectors lost, 5 gained, and of those five only
    .btn-assistant-professor matches any markup.
  • Across the whole site, the only HTML difference against the live pages is
    the stylesheet href.
  • Served CSS: 56,479 → 60,454 bytes uncompressed. That is the cost of dropping the
    extra selector-merging pass that the untracked optimiser used to apply; it
    compresses away substantially over the wire.

Role badge styling

_layouts/people.html builds badge classes dynamically as btn-{{ stat }}. Three
of the values it emits had no role colour on the live site. All three are now fixed:

Badge Problem Fix
.btn-assistant-professor rule existed in _sass/, never reached main_pretty.css fixed by serving the compiled CSS
.btn-visiting-phd no rule anywhere, in either stylesheet grouped with .btn-phd ($warning)
.btn-visiting-postdoc no rule anywhere, in either stylesheet grouped with .btn-postdoc ($info)

The two visiting roles are grouped with their base role rather than duplicated or
@extend-ed, so they stay in step and each compiles to a single rule.

Verified: every badge class the people page emits now has a matching rule.

amjjbonvin and others added 3 commits September 30, 2026 07:08
_includes/_head.html loaded assets/css/main_pretty.css, a committed and
hand-optimised artifact. Nothing in the repo regenerated it -- the Gruntfile
had no CSS task, and that file is now gone -- so it had drifted from the Sass
sources in _sass/ and editing them had no effect on the published site.

Drift at the point of this change, by selector set:

  compiled main.css   1120 selectors
  shipped main_pretty 1115 selectors

  In the sources but never shipped:
    .btn-assistant-professor, :hover   -- a live bug, see below
    #main article.fullpage, ... img    -- dead; the layout emits
                                         <body class="fullpage"> and
                                         <article class="people">, so this
                                         never matched
    .clearfix                          -- an IE7 *zoom hack; .clearfix:after
                                         was shipped

  Shipped but absent from the sources:
    .article-wrap p>a.prompt, li>a.prompt

Fixes a live styling bug. _layouts/people.html builds badge classes as
btn-{{ stat }}, and the people page emits btn-assistant-professor. The rule
exists in _sass/elements.scss but had never reached main_pretty.css, so that
badge renders on the live site with no role colour.

Changes:
- port .article-wrap p>a.prompt / li>a.prompt into _sass/elements.scss, the
  only rule that existed solely in the generated file
- point _includes/_head.html at assets/css/main.css
- delete assets/css/main_pretty.css
- set `sourcemap: never`, so the 153 KB main.css.map is no longer deployed now
  that main.css is public
- document the styling workflow in README.md

Verified: switching loses nothing -- the old shipped stylesheet is a strict
subset of the compiled one (0 selectors lost, 5 gained, of which only
.btn-assistant-professor matches any markup). Across the whole site the sole
HTML difference against the live pages is the stylesheet href. Served CSS goes
from 56,479 to 60,454 bytes uncompressed, the cost of dropping the extra
selector-merging pass.

Still unstyled, and not caused by this drift: .btn-visiting-phd and
.btn-visiting-postdoc are emitted by the people page but have never had rules
in either stylesheet.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
The people page emits btn-visiting-phd but no rule existed for it in either
stylesheet, so the badge rendered with only the base .btn styling. Group it
with .btn-phd so visiting PhD candidates get the same $warning colour.

Grouped rather than duplicated or @extend-ed, so the two stay in step and the
compiled output is one rule.

.btn-visiting-postdoc is still unstyled; it needs its own colour decision.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Same fix as .btn-visiting-phd: the people page emits btn-visiting-postdoc but
no rule existed for it, so the badge rendered with only the base .btn styling.
Group it with .btn-postdoc to share the $info colour.

Every badge class the people page emits now has a matching rule.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@amjjbonvin

Copy link
Copy Markdown
Member Author

Force-pushed to drop b3482cd (the _sass/forms.scss cleanup), which has been split out into #792 on review feedback. It was unrelated to the CSS pipeline fix here and undocumented in this description — a fair catch. It cherry-picked onto master cleanly, confirming independence.

This PR now contains three commits, all within its stated scope:

  1. ddada5d — serve the compiled main.css instead of the committed main_pretty.css (the drift fix, which also fixes the unstyled .btn-assistant-professor badge)
  2. 08b7653 — style .btn-visiting-phd
  3. aada3df — style .btn-visiting-postdoc

The two badge commits are described in the "Role badge styling" section above. They belong here rather than in a separate PR because they are only observable once this PR lands — on master the served stylesheet is the committed artifact, so a new rule in _sass/ has no effect until the pipeline change is in.

@amjjbonvin

Copy link
Copy Markdown
Member Author

Copilot review:
This is still a good PR overall, and the main fix is the right one: the site should ship the generated CSS from _sass/ instead of a stale committed artifact.

@amjjbonvin
amjjbonvin merged commit fc863f9 into master Sep 30, 2026
4 checks passed
@amjjbonvin
amjjbonvin deleted the fix/serve-compiled-css branch September 30, 2026 06:23
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant