Rich text & course design dark mode revisions

[kchar601]

Rich Text

Previous Design:

New Changes:

• Added dark mode alternative for pre element
• Added styling to ensure pre doesn't overflow containers - but continues to maintain the pre-spaced styling
• Added styling to ensure mark spacing styling wasn't being cut off awkwardly between line breaks
• Added dark mode alternative coloring for mark - maintains highlighted feel but less drastic for darker screens [up for debate]
• Made abbr default coloring match with default info. More inline with info coloring & distinguishes from being used in place of mark
• Added demo text of other html rich texts elements (sup, sub, del, ins, s)

Course Design Elements

Previous Design:

New Changes:

• Added dark mode alternative for learning component & block-quote
• For learning component, changed border to match title background for stronger association between title and content
• Added DDD integration to activity box (primary & accent create new gradient but only if both are present) [not sure if component is depricated]
• changed link positioning in learning component to ensure link is always in the bottom left hand corner of content box

[vercel]

@kchar601 is attempting to deploy a commit to the HAXTheWeb Team on Vercel.

A member of the Team first needs to authorize it.

[kchar601]

fixes #2595

[btopro]

have 3 questions, they dont seem to be required in the way they are done. confirm / remove / etc and then I think this is probably good to go

[btopro]

haxtheweb/issues#2595

but there are solutions in here to dark mode support in other elements as well. Please open issues and associate for these even if it's just like activity-box needs dark mode support and then it effectively gets closed with this PR. This still documents a reasonable change log of enhancements and credits you with more work :)

[kchar601]

have 3 questions, they dont seem to be required in the way they are done. confirm / remove / etc and then I think this is probably good to go

the super and 18n changes we're me duplicating the setup of other components when I couldn't get --ddd-theme-primary to be accessible in the styling for activity-box, if they're unrequired, they can be removed.

The change for adding the data-font-size was a half baked attempt to remove hardcoded variables in favor of having the size of the entire component be somewhat variable, but can be removed as that was not implemented.

[kchar601]

closes #2615

[kchar601]

haxtheweb/issues#2595

but there are solutions in here to dark mode support in other elements as well. Please open issues and associate for these even if it's just like activity-box needs dark mode support and then it effectively gets closed with this PR. This still documents a reasonable change log of enhancements and credits you with more work :)

Also confusing with the screenshot I took - activity box is the component with the gradient background - learning-component is the one at the top with the orange title banner for the heading.

[kchar601]

closes #2611

[btopro]

haxtheweb/issues#2615

[btopro]

haxtheweb/issues#2611 needs a dedicated area for examples of the different styles of line not just color being there. Like a whole container that just illustrates the ways to decorate headings and hr's

[btopro]

[btopro]

let me know when this PR is ready for review fully. I think there are still some outstanding things associated with it