Add cns-editorial Marp theme (cns.me design system)#662
Open
chrisns wants to merge 7 commits into
Open
Conversation
Introduce themes/cns-editorial.scss, a slide theme built from the cns.me web design system (blog.cns.me / talks.cns.me / govbuy.run.cns.me): Fraunces display serif, Hanken Grotesk body, JetBrains Mono, warm cream paper, near-black ink and flamingo pink. Covers all the deck's existing constructs (title-page, invert, fade, white, listline, side-by-side code, tables, the glitch end slide) so no markdown changes are needed beyond the theme reference. Register the theme in .marprc.yml's themeSet and point PolicyAsVersionedCode.md at it (frontmatter theme line only).
The cns-editorial showcase was temporary; restore the original theme. The new theme (themes/cns-editorial.scss) and its themeSet registration stay in place so it remains available to use.
Theme refinements (work in progress, design still under review): - Hanken/Fraunces balance kept editorial (serif display headings) while calming the code blocks (subtle deep-pink edge, soft shadow, no glow). - Inline backtick code now carries a chip background everywhere, including inside headings (light paper chip / dark night chip), scaling cleanly. - Listline tool ticker uses neutral middot separators instead of the pink diagonal slashes. PolicyAsVersionedCode.md temporarily points at themes/cns-editorial for visual review; revert the one frontmatter line to restore themes/cns.
Replace the middot separators (which read like bullets) with a very faint thin vertical pipe between inline tool names.
The pipe pseudo-element collided with the mono glyphs; switch to a faint box-model left border on inline-block items with padding so the divider can never overlap the text.
inline-block + padding had spread the list out so lower items overflowed off the slide. Back to display:inline with tight padding and a tightened line-height so all entries fit, keeping the non-overlapping hairline divider.
Reduce line-height and zero list margins so all entries pack densely and the last row no longer crops off the bottom of the slide.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What
A new, beautiful Marp slide theme —
themes/cns-editorial.scss— built directly from the cns.me web design system (blog.cns.me · talks.cns.me · govbuy.run.cns.me).The Policy as [versioned] Code talk is switched to it as a live demo. Per the request, the only markdown change is the
theme:line in its frontmatter — no other content was touched.The design system, ported to slides
Tokens lifted straight from the sites' CSS:
#F4EFE7warm cream ·#FBF8F2bone#14110Fnear-black · night code surfaces#E5197F/#FF2D8A/#B30E61Highlights
🦩 talks.cns.mewordmark, flamingo-pink parallax waves.prelayout fits cleanly.fadesemver slides — the changing digit pops in pink while the rest whispers.title-page,invert,fade/fade.invert,white,listline(animated), tables, blockquotes, and the glitchyendQ&A slide.Notes
.marprc.yml'sthemeSet(config only) sonpm run buildpicks it up; the compiledthemes/*.cssstays gitignored as before.themes/cns.https://claude.ai/code/session_01Lrs5cWsqGvFgNsHe1mi5xi
Generated by Claude Code