Update CSS to also work with lessons#751
Conversation
With the addition of a few HTML classes at the top level, the lessons template should now work with this CSS, so long as it includes swc.css, swc-workshop-and-lesson.css and lesson.css. The important thing is that there aren't any conflicts between classes in site and lessons anymore, so how the CSS files are grouped and delivered is easy to change. Perhaps everything should be shrunk into just swc.css for use everywhere? This has a small effect on site: h1.title in site is used to add an underline, but only actually used in the badges pages. The CSS seems broken on these pages anyway, so I've removed this class in the CSS since it conflicts with h1.title in lessons. Another point to note is that I've changed the global selectors for h1:first-child and h2:first-child to only affect .objective, .callout and .challenge blocks, since the global selector used for lessons conflicted with site. However, the selector now only picks up h2:first-child, not h1 since this seemed to be all that was used for headers in these blocks. It's easy to also include h1 if needed though. Finally, there is a .keypoints selector in the current lesson CSS, but I see no mention of that in the blockquote2div.py filter in the lesson template. There is a .prereq class however in blockquote2div.py which currently has no CSS. Perhaps .keypoints -> .prereq? Or at least we can remove .keypoints? I've only checked this thoroughly with shell-novice so far, so there may be issues with the other lessons that I haven't audited.
|
The corresponding changes needed in the lesson template are at swcarpentry/DEPRECATED-lesson-template#140 |
There was a problem hiding this comment.
The CSS for print was design targeting only the lessons. It need to be improved in another pull request.
There was a problem hiding this comment.
It looks like most of the elements affected are only in lessons anyway. The exceptions are h1,h2,h3,h4,h5,h6,p,ul,ol,li,pre,code, which may also affect other things globally in site and workshop.
Presumably the print styles for these elements in lesson and workshop should be the same anyway? Is their a maintained print style for site? It seems less important than the print style for lessons and workshops.
Do you want me to remove or fix this in some way before merging the PR?
to have the same look of others pages.
@jpallen Thanks for the awesome work. Could you merge jpallen#1?
Thanks.
Our template says to only use
We should preserve |
Fix layout of badges
Done
It looks like the linked lessons are namespaced under /v5 on the site, and link to CSS that is also namespaced under /v5. Does this CSS come from the 'bc' repo as well? In which case these changes shouldn't affect it anyway? |
|
I apologize for the complexity - it's grown over a couple of years, and |
|
@r-gaia-cs have you checked this? |
|
@jpallen Sorry for the delay. I was trying to find something equivalent to Jinja's powerful template inheritance for Jekyll to avoid the duplicate code at Merging now. |
Update CSS to also work with lessons
|
@r-gaia-cs No problem, I'm struggling to keep track of all of these CSS PRs, and I wrote some of them! Hopefully things will be easier once it's all consolidated :) Thanks for merging! I guess this now needs to make it into swcarpentry/styles as well? |
I will try to address it. |
|
May I suggest:
So there's only one canonical set of CSS (in 'styles', or in PRs against |
3 participants
With the addition of a few HTML classes at the top level, the lessons template
should now work with this CSS, so long as it includes swc.css,
swc-workshop-and-lesson.css and lesson.css. The important thing is that there
aren't any conflicts between classes in site and lessons anymore, so how the
CSS files are grouped and delivered is easy to change. Perhaps everything
should be shrunk into just swc.css for use everywhere?
This has a small effect on site: h1.title in site is used to add an underline,
but only actually used in the badges pages. The CSS seems broken on these pages
anyway, so I've removed this class in the CSS since it conflicts with h1.title
in lessons.
Another point to note is that I've changed the global selectors for
h1:first-child and h2:first-child to only affect .objective, .callout and
.challenge blocks, since the global selector used for lessons conflicted with
site. However, the selector now only picks up h2:first-child, not h1 since this
seemed to be all that was used for headers in these blocks. It's easy to also
include h1 if needed though.
Finally, there is a .keypoints selector in the current lesson CSS, but I see no
mention of that in the blockquote2div.py filter in the lesson template. There
is a .prereq class however in blockquote2div.py which currently has no CSS.
Perhaps .keypoints -> .prereq? Or at least we can remove .keypoints?
I've only checked this thoroughly with shell-novice so far, so there may be
issues with the other lessons that I haven't audited.