Use consistent templates and styles across post types

[hlashbrooke]

We currently have different markup and CSS for all the post types on the site, so we need to make this consistent.

Examples:

• Workshop: https://learn.wordpress.org/workshop/best-practices-for-capturing-images/
• Lesson Plan: https://learn.wordpress.org/lesson-plan/how-to-create-a-post-or-page-with-the-wordpress-block-editor/
• Course: https://learn.wordpress.org/course/getting-started-with-wordpress-get-setup/
• Lesson: https://learn.wordpress.org/lesson/1-getting-started-with-wordpress-is-wordpress-right-for-you/
• Quiz: https://learn.wordpress.org/quiz/best-practices-for-capturing-images/

The workshop post type template was developed most recently and it's the styling that matches the rest of WordPress.org the closest (and I think it generally looks great), so we need to emulate this styling across all of the other post types.

The styles that differ here are the markup structure, font sizes, titles, breadcrumbs, spacing, etc.

[hlashbrooke]

I put together some CSS in the Customiser for the Course, Lesson and Quiz single post types to make them look a little better - not all the way there, but a lot of it is looking more uniform now. It's a bit hacky since the markup isn't the same, but it mostly works: https://learn.wordpress.org/course/getting-started-with-wordpress-get-setup/

This is the CSS that I added:

.sensei.course:not(.post-type-archive-course) article.course:first-child,
.sensei.lesson #main-content{
	padding: 4rem 0;
}

.sensei.course article.course header,
.sensei.lesson #main-content header {
	border-bottom: 1px solid #eee;
	margin-bottom: 1rem;
}
.sensei.lesson .bbp-breadcrumb {
	display: none;
}
.sensei.lesson #main-content header {
	padding-bottom: 1rem;
}

.sensei.course article.course p,
.sensei.course article.course li {
	font-size: 16px;
}

.sensei.course article.course 
.wp-block-image,
.sensei.lesson #main-content .wp-block-image,
.sensei.course article.course 
.wp-block-media-text,
.sensei.lesson #main-content .wp-block-media-text {
	margin: 2rem 0;
}

.sensei.course article.course hr,
.sensei.lesson #main-content hr {
	margin: 2rem 0;
}

h2.wp-block-sensei-lms-course-outline-module__title {
	color: #fff !important;
}

.wp-block-sensei-lms-lesson-properties {
	padding: 1rem;
	border: 1px solid #e7e7e7;
	display: inline-block;
	display: flex;
	justify-content: center;
	margin-bottom: 1rem;
}

.sensei.lesson #main-content nav.post-entries {
	width: 100%;
}
.sensei.lesson #main-content nav.post-entries div,
.sensei.quiz #main-content nav.post-entries div {
	display: block;
	width: 45% !important;
	padding: 1rem;
	margin: 1rem 0;
	font-style: italic;
}
.sensei.lesson #main-content nav.post-entries div.fl,
.sensei.quiz #main-content nav.post-entries div.fl {
	padding-left: 0;
}
.sensei.lesson #main-content nav.post-entries div.fr,
.sensei.quiz #main-content nav.post-entries div.fr {
	padding-right: 0;
	text-align: right;
}
.sensei.lesson #main-content .sensei-breadcrumb, .sensei.quiz #main-content .sensei-breadcrumb {
	padding: 1rem;
}

ol#sensei-quiz-list {
	padding-left: 2rem;
}

[bsanevans]

Some of this CSS no longer exists. It seems the styles have been cleaned up, so I'll close this issue. If you find further inconsistencies, please open a new issue.