Superbe, simple, ergonomique...

Bon article sur la façon d'afficher les citations en HTML.

Je retiens une façon de mettre l'apostrophe en retrait

/* Fallback */
blockquote {
  text-indent: -0.45em;
}
/ If there's support, erase the indent and use the property instead /
@supports ( hanging-punctuation: first) {
blockquote {
text-indent: 0;
hanging-punctuation: first;
}
}

Quelques idées d'effets de focus simples...

Une réflexion intéressante que je garderai en mémoire: ne réserver les classes css que pour styler, pas pour cibler en js.
Donc en résumé, au lieu de

<article class="article"><br />
</article><br />
<br />
et <br />
<br />
$(".article") <br />
```<br />
<br />
Préférer:<br />
<br />
```<br />
<article class="article" data-hoverable><br />
</article><br />
<br />
et <br />
<br />
$("[data-hoverable]")<br />
```<br />
<br />
On sépare ainsi les classes (styling) des attributs data-* (scripting js)<br />
<br />
<br/><br/><div class="img_source"><a href="https://www.inetsolutions.org/wp-content/uploads/2016/03/JavaScript-And-CSS-Includes-Do-Overload-Googles-Fetch-And-Mobile-Testing-Tools-1030x644.jpg">Source image</a></div>

C'est juste... beau.

<div class="wrapper">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
</div>
.wrapper {
    display: grid;
    grid-template-columns: 100px 100px 100px;
    grid-template-rows: 50px 50px;
}