Update styling

[create-issue-branch]

closes #1324

Changes for CCP editor projects

Heading

• Editor-ui: The blue box and squiggly line for heading are used only for projects site editor projects. So it is safe to remove.
• In the past, projects site heading was styled using a css class. Going forward, it will be pure markdown h2.
• There was a blanket removal of margin from h2 in instructions.scss which made the markdown h2 look strange.
• Editor-ui: This was replaced with different margin. This doesn't affect CEfE instructions.
• Task fencing (--- task ---) no longer needed so removed from .md file.
• Need to keep.c-project-task css class for existing projects that contain the task fencing.

Steps

• Used markdown h3 in .md file.
• With that, they get id = step-1 etc. probably by kramdown during project build
• Editor-ui: Added CCP styling for the steps ids

'Now run your code`

• Used markdown h3 in .md file
• With that, it gets id = now-run-your-code
• Editor-ui: Added styling for the id

Callouts

• No changes in the editor-ui.
• Instead of using html, used kramdown syntax to set classes in .md file -> worked!

Impact on CEfE instructions panel?

CEfE instructions panel does use the .project-instructions class with markdowns; however, the markdown headings don't get ids when used to populate the instruction panel. So there won't be any impact on CEfE.

[Copilot]

Pull request overview

Updates the editor instructions panel styling to align with the new CCP project markdown conventions (using plain markdown headings/IDs instead of task-fencing and bespoke heading classes), while preserving compatibility for existing content.

Changes:

• Adjust h2 spacing in the instructions panel to better suit markdown-rendered headings.
• Add CCP-specific styling for step headings (id="step-*"), and the “Now run your code” heading (id="now-run-your-code"), including a new play icon.
• Remove the old “task” heading/box styling while keeping .c-project-task present for legacy content.

Reviewed changes

Copilot reviewed 1 out of 2 changed files in this pull request and generated 3 comments.

File	Description
src/assets/stylesheets/Instructions.scss	Updates heading margins, adds new ID-based CCP step/run styling, and removes legacy task heading styling.
src/assets/play_filled.svg	Adds a new play icon used by the “Now run your code” styling.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

background-size: 1.5rem 1.5rem bypasses the spacing scale-factor system used elsewhere in this file ($space-*). Consider using the matching spacing token (e.g. $space-1-5) so the icon scales consistently with the rest of the UI.

Suggested change

	background-size: 1.5rem 1.5rem;
	background-size: $space-1-5 $space-1-5;

[Copilot]

The h2 rule now sets only margin-block-start, which re-enables the browser default margin-block-end (since margin: 0 was removed). If the intent is to control heading spacing precisely, set margin-block-end explicitly (or use a margin-block shorthand) so the bottom spacing is not left to UA defaults.

Suggested change

	margin-block-start: $space-0-5;
	margin-block-start: $space-0-5;
	margin-block-end: $space-0-5;

[Copilot]

New CCP step styling introduces hard-coded hex colors (#ECF8EE, #276D32). This stylesheet already uses shared colour tokens (e.g. $rpf-green-* from rpf_design_system/colours.scss), so using tokens here (or introducing new named tokens for the CCP palette) will keep colours consistent and easier to update.