Update styling of instructions panel for Code Club projects

[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!

Screenshots

Before - After (with existing .md format) - After (with new .md format)

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]

Pull request overview

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

---

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