Contenu

Baldir

Marc Bouvier

Développeur logiciel en quête du sens dans un monde aux ressources limitées.

Amélioration du style

Making-of

Avant: utilisation de styles par défaut. Police : Times New Roman. Le texte occupe toute la largeur disponible

Après : Police : sans empattement. Le texte occupe une largeur moindre grâce à des marges plus importantes à droite et à gauche. Les extraits de code sont délimités par des gros pointillés gris clair.

Index: _includes/layout.html

     <meta name="description" content="Développeur logiciel en quête du sens dans un monde aux ressources limitées.">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Baldir - Amélioration du style</title>
     <link rel="alternate" href="/feed.xml" title="Baldir - Flux RSS des articles de blog" type="application/rss+xml">
     <style>
         body {
-            max-width: 1200px;
+            padding: 0.5rem;
+            max-width: 640px;
             margin: 0 auto;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji";
+        }
+
+        blockquote {
+            margin-inline: 0px;
+            margin-block: 0;
+            padding-block: 0.125em;
+            font-size: 1.125rem;
+            font-style: italic;
+            border-left: 0.25rem solid lightgray;
+            padding-inline: 1em;
         }
 
         img {
@@ -46,6 +58,15 @@
             overflow: hidden;
         }
 
+        .bold {
+            font-weight: bold;
+        }
+
+        pre {
+            border-style: dashed;
+            border-width: medium;
+            border-color: lightgray;
+        }
     </style>
     <link href="/public/css/a11y-light.min.css" rel="stylesheet"/>
 </head>