Serve the compiled CSS instead of the committed main_pretty.css - #791
Conversation
_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>
b3482cd to
aada3df
Compare
|
Force-pushed to drop This PR now contains three commits, all within its stated scope:
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 |
|
Copilot review: |
Addresses backlog item 1, and fixes a live styling bug found along the way.
Problem
_includes/_head.htmlloadedassets/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.main.css(from_sass/)main_pretty.cssIn the sources but never shipped:
.btn-assistant-professor,:hover#main article.fullpage,… img<body class="fullpage">and<article class="people">, so it never matched.clearfix*zoomhack;.clearfix:afterwas shippedShipped but absent from the sources:
.article-wrap p>a.prompt,li>a.promptThe live bug
_layouts/people.htmlbuilds badge classes dynamically asbtn-{{ stat }}, andthe people page emits
btn-assistant-professor. The rule exists in_sass/elements.scssbut had never reachedmain_pretty.css: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
.article-wrap p>a.prompt/li>a.promptinto_sass/elements.scss— theonly rule that existed solely in the generated file
_includes/_head.htmlatassets/css/main.cssassets/css/main_pretty.csssourcemap: never, so the 153 KBmain.css.mapis no longer deployed nowthat
main.cssis publicREADME.mdVerification
compiled one: 0 selectors lost, 5 gained, and of those five only
.btn-assistant-professormatches any markup.the stylesheet
href.extra selector-merging pass that the untracked optimiser used to apply; it
compresses away substantially over the wire.
Role badge styling
_layouts/people.htmlbuilds badge classes dynamically asbtn-{{ stat }}. Threeof the values it emits had no role colour on the live site. All three are now fixed:
.btn-assistant-professor_sass/, never reachedmain_pretty.css.btn-visiting-phd.btn-phd($warning).btn-visiting-postdoc.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.