A new CSS and 5 tips to know

For the coming new year, I have refreshed the visual style of my own blog. Besides the "tout nouveau, tout beau" point, it allowed me to find 2 or 3 things from CSS and Jekyll that I didn't know.

I started by changing the font. Until recently, I used to like the "Century Gothic" font a lot, but lately I've preferred to stick to system fonts.

• Before: font-family: "Century Gothic", "Trebuchet MS", Verdana, Helvetica, Sans-Serif;
• After: font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;

I also increased the default font size and came back to a "true" black to improve readability.

• Before: color: #444; font-size: 14px;
• After: color: #000; font-size: 16px;

During my last style update, I decided to no longer display the content in the center of the screen, but rather on the left side. Finally (or at least for now), I find that centering the content is clearer and that it gives some "page" aspect that makes reading easier.

• After: .container { margin: 0 auto; padding: 1rem; }

And to improve the readability and clean side of the page, I have increased the horizontal "margin" on PC screens:

@media screen and (min-width: 48rem) {
    .container {
        padding: 1rem 3rem;
    }
}

I like to separate internal and external links. Over time, I have tried different solutions: adding an icon next to external links, underlining external links only (or vice versa), using a different color for each type of link... For this time, I choose to present external links with a light bold.

• After: a[href*='//'] { font-weight: 600; }

Tip #1: I said "light" bold because before (the last time I tried), using font-weight: 600; or font-weight: 900; didn't make any difference. Now I can see the difference very clearly, at least on my PC....

For my titles, I more or less kept what I had in the previous version, especially in terms of colors.

• h1: blue => blog name and main navigation
• h2: chocolate => post title
• h3: green => post subtitles
• h4: grey => level 2 subtitles

I was therefore satisfied with the following modifications:

1. The blog title (h1) is 16px by default and changes to 1.5rem on PC screens
2. I increased the size of the other titles and their vertical margins to improve readability
3. The post title (h2) is now centered, which makes it much more visible on small screens
4. Added line-height: 1; to avoid too big line spacing when titles expand on several lines with small screens

For the source code parts, I tried to do a bit like dev.to and highlight them compared to the rest of the content. To do this, I used:

• a "very light" gray background color: background-color: #f8f8f8f8;
• slightly darker vertical borders: border-color: #eee;

But above all, I "stick" this block to the edges of the page, so that it looks better compared to the rest of the content (especially on PC screens).

.container { padding: 1rem; }
pre { margin: 1rem -1rem; }

@media screen and (min-width: 48rem) {
    .container { padding: 1rem 3rem; }
    pre { margin: 1rem -3rem; }
}

And finally, I shared this style with the one for other types of "blocks", such as quotes and div.insert:

blockquote, pre, .encart {
    background-color: #fff;
    border-bottom: 1px solid #fff;
    border-top: 1px solid #fff;
    clear: both;
    -webkit-print-color-adjust: exact;
    color-adjust: exact;
    margin: 1rem -1rem;
    padding: .5rem 1rem;
    text-align: left;
}

blockquote {
    background-color: #fbfaea; /* ocre */
    border-color: #e3d0aa;
}

pre {
    background-color: #f8f8f8; /* gris */
    border-color: #eee;
    font-size: small;
}

.encart {
    background-color: #eaf7ff; /* bleu */
    border-color: #6b90da;
}

Tip #2: color-adjust: exact allows these blocks to also have a background color when printed.

Also, for source code, I used again a snippet of CSS which automatically word-wrap line inside source code. This avoids having to scroll horizontally to see the entire code or worse to lose end of lines when printing.

/* https://stackoverflow.com/questions/248011/how-do-i-wrap-text-in-a-pre-tag */
pre {
    white-space: pre-wrap;
    white-space: -moz-pre-wrap !important;
    white-space: -pre-wrap;
    white-space: -o-pre-wrap;
    word-wrap: break-word;
}

After a few tries, I decided to reserve this for PC screens and printing.

Speaking of printing, I also made sure that the full width of the page is used:

@media print {
    .container {
        max-width: 100rem;
        padding: 0 !important;
    }
}

But despite everything, you must leave some margin otherwise everything is stuck on the edges of the page. A simple margin orpadding is not enough:

• this has an effect on the horizontal margins => ok
• the margin-top only works on the 1st printed page => ko
• the margin-bottom only works on the last printed page => ko

That's where my tip #3 comes in:

@page {
    margin: 1.5cm 1cm; /* centimeters for IE */
}

And of course, for the impressions to be perfect, I hide unnecessary content:

@media print {
    div > header, nav, .pub { display: none; }
}

Not bad at all. I still had to make 2 more changes. First, I have a problem with the archive page that generates list with <li><p>Post title</p></li>. This makes a big interline between the different posts of the same month. Rather than bother to understand the problem, I go with a CSS tweak:

li p {
    margin: 0 auto; /* archives page generate <li><p>...</p></li> */
}

And lately, I have sometimes used an "encart" div to display a table of contents. For example:

<div class="encart">

1. [Comment j'ai (bientôt) remplacé jQuery]({% post_url 2019-04-30-dquery-remplacer-jquery %})
2. [Une version compatible IE9 / ES5]({% post_url 2019-05-07-dquery-compatibilite-ie9-es5 %})
3. [Ma librairie pour manipuler le DOM]({% post_url 2019-05-14-dquery-librairie-js-manipulation-dom %})
4. [La délégation des évènements en JS]({% post_url 2019-05-21-dquery-delegation-evenement-javascript %})
5. [Délégation d'évènements et « event.target »]({% post_url 2019-05-28-dquery-delegation-evenement-event-target %})
6. [Délégation d'évènements et iOS]({% post_url 2019-06-04-dquery-delegation-evenement-ios %})

</div>

Well, that doesn't work... The Markdown code inside the div tag is not transformed into html :( For the simplest cases with only one link, I used to replace the div.insert tag by its Markdown equivalent, using the {:.insert} syntax:

{:.encart}
Version en français : [Gérer le menu hamburger de Bootstrap 4 en Vanilla JS]({% post_url 2019-12-09-menu-hamburger-bootstrap-vanilla-js %}).

For more complicated cases, I had given up and written everything in HTML. But during the revision of my CSS style, I look a little further and fortunately there is a solution: Embedding Markdown in Jekyll HTML.

Tip #4: Just add a markdown="1" attribute to make the Markdown code inside an HTML tag also correctly transformed.

<div class="encart" markdown="1">

...

</div>

I know I insist, but here's a 5th tip: always create a print CSS to ensure a good result when printing.

This post was originally published on my blog.
Cover image : Christmas tree - Rodion Kutsaev.