Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Remove the github-markdown class from lesson content #304

Open
wants to merge 1 commit into
base: trunk
Choose a base branch
from

Conversation

aurooba
Copy link
Member

@aurooba aurooba commented Jan 14, 2022

Removing the github-markdown class brings back 16px font sizing on lesson content, which is far more accessible than 14px. Right now Lessons are harder to read than necessary because the body is using 14px. It also feels visually different from other parts of public-facing WordPress documentation.

Right now, removing that class also removes the borders underneath subheadings. If this is a style we should be keeping, please let me know so I can update this PR with an additional commit. :)

Before:
Screen Shot 2022-01-14 at 11 27 30 AM

After:

Screen Shot 2022-01-14 at 11 27 47 AM

Removing the `github-markdown` class brings back 16px font sizing on lesson content, which is far more accessible than 14px.
@aurooba
Copy link
Member Author

aurooba commented Jan 14, 2022

(Alternatively, we can modify the .github-markdown class itself to use font-size: 16px)

@hlashbrooke
Copy link
Collaborator

The paragraph font size looks good after this change, but the headings look bigger and much less neat. Could you update this PR t ensure the headings remain the same? Changing the font size for the github-markdown paragraphs would probably be easiest I think.

@aurooba
Copy link
Member Author

aurooba commented Feb 15, 2022

Can do tomorrow, @hlashbrooke!

@jonathanbossenger jonathanbossenger added Needs update [Dev] Needs Refresh Pull request needing a refresh. [Type] Enhancement New feature request for the Learn website. [Type] Good First Issue Good website development issue for new contributors. labels Mar 14, 2023
@jonathanbossenger
Copy link
Collaborator

@aurooba hey 👋

Are you still available to refresh this PR based on @hlashbrooke's suggestions?

@jonathanbossenger
Copy link
Collaborator

Personally, I don't see the problem with just removing the class

Before

learn wordpress org_lesson-plan_how-to-create-a-lesson-plan_(Desktop)

After

learn wordpress org_lesson-plan_how-to-create-a-lesson-plan_(Desktop)

I'm in favour of merging this as is, and we can always add the header border and change the fonts if it's a problem later.

@jonathanbossenger jonathanbossenger removed the [Dev] Needs Refresh Pull request needing a refresh. label Feb 1, 2024
@digitalchild
Copy link
Contributor

I agree that removing this is better, as it makes it consistent with the rest of the site styles.

https://learn.wordpress.org/tutorial/create-block-theme-improvements/

You can see this on other pages on learn, the headings are slightly bigger and without the underline.

@costdev
Copy link

costdev commented Feb 1, 2024

When removing the .github-markdown class, the following elements will be affected:

  • Paragraph <p>
  • Heading Level 1-6 <h1-h6>
  • Blockquote <blockquote>
  • Pre-formatted <pre>
  • Horizontal Rule <hr>
  • Table <table>
  • Links <a>, Code <code> and Teletype <tt> inside Heading Level 1-6 <h1-h6>
  • Ordered Lists <ol>, Unordered Lists <ul> and List Items <li>
  • Description Lists <dl>, Description Terms <dt> and Description Details <dd>

When testing the PR, view several pages with differing content to get more insight into how removing this class will affect the appearance of existing content. Everyone may love the result, it's just best to know what the whole result is before committing to the change. 🙂

@jonathanbossenger
Copy link
Collaborator

I did a search for the use of the .github-markdown class across the rest of our content and pages, and could only find one other place it's in use, on the Course landing page.

Here is a screenshot with the class removed.

Introduction-to-Block-Development-Build-your-first-custom-block-Learn-WordPress

As you can see, there is a small visual bug in the module lesson list, which can be fixed by applying a font-size of 14px to the .wp-block-sensei-lms-course-outline .wp-block-sensei-lms-course-outline-module class selector, which is what the original github-markdown class does.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Type] Enhancement New feature request for the Learn website. [Type] Good First Issue Good website development issue for new contributors.
Projects
Status: In Review (PRs only)
Development

Successfully merging this pull request may close these issues.

6 participants