Add content for the lesson displayed when the shell is active.

[rgommers]

Note that the styling for this needs fixing in shell.css, now nothing is visible. I tried with the shell-content-message class and got:

So the highlighting is fine, but the text justification is messed up. @joelachance could you help with that?

Closes gh-81

[joelachance]

It might be easiest to share changes here:

.shell-lesson {
    display: none;
    text-align: left;
    padding: 15px;
    height: 100%;
    width: 75%;
}

Let me know if that looks better to you, @rgommers!

[rgommers]

Thanks. That's a good start, however the padding/margin inside that box is huge so it expands the size of the whole section:

From my clumsy use of the inspector, I think it's mainly the padding and margin of the <p> elements within the shell-lesson area.

[rgommers]

And the flex elements in between <p> and <code> blocks

[rgommers]

Hmm, I don't see how to override margin/padding of child elements. Perhaps markdownify'ing the separate code blocks and putting the comments inside shell-content.html so they're easier to control makes sense?

[joelachance]

Try this rule:

.shell-lesson > pre {
    margin: 10px 0 5px 0;
}

That will definitely shrink margin between those blocks and we shouldn't need to refactor content outside of the partial you've created.

Update: If it's helpful, each of the numbers inside of the margin rule correspond to top, right, bottom, left.

[rgommers]

Thanks @joelachance, getting there. I still don't understand these precedence rules. Works for <p>:

Does not work for <div class=highlight> or <pre> inside that:

With this CSS (tried a bunch of variations:

.shell-lesson {
    display: none;
    text-align: left;
    padding: 15px;
    height: 100%;
    width: 60%;
}

.shell-lesson > p {
    margin: 2px 0 2px 0;
}

.shell-lesson > pre {
    margin: 5px 0 0 0;
}

.shell-lesson > div {
    margin-bottom: 5px;
}

[rgommers]

If I toggle margin-bottom: 1.5rem; off in the inspector, things look good.

[joelachance]

@rgommers
We need to create a more specific rule in order to 'override' what's already in there. The rules that aren't working simply aren't specific enough.

In the first example, .shell-lesson > p is more specific than uikit's rule to assign margin-top for all p tags. UIKit is assuming you want to use them for the entire site which is why they make global rules like this. Unfortunately, hugo-fresh is doing exactly the same (any styling inside a .sass file), so we're having to combat all of those rules.

The .shell-lesson > p rule is saying that all p elements that are descendants of .shell-lesson should have the assigned rules. Instead of the >, a space will also work. This is a more specific rule, thus the rules we assign it will propagate. This post explains it: https://techbrij.com/css-selector-adjacent-child-sibling

The .highlight:not(:last-child) rule is already pretty specific (I'm not able to find where this .highlight class lives inside the shell-lesson?), which is why it's not working. It's not exactly best practice, but you can use a rule like this:

.highlight:not(:last-child) {
margin-top: 1px !important;
}

You'll notice we've done it a couple of places already in our stylesheets, which I think is sometimes better than having to assign an element more id's or classes just to avoid the !important.

If you can point out where the .highlight classes are we'd like to update the margin for, I can PR those changes.

[rgommers]

Cool, thanks for the explanation! I'll try.

highlight comes from the Chroma highlighter, which is invoked by markdownify, I believe.

[rgommers]

Okay that worked! This is good to go I think: