doc/style.css: add pill background to inline-code

doc/style.css

@@ -114,7 +114,7 @@ html {
 body {
   font-size: 1rem;
   font-family: "Roboto", sans-serif;
-  font-weight: 300;
+  font-weight: 400;
   color: var(--main-text-color);
   background-color: var(--background);
   min-height: 100vh;
@@ -264,13 +264,9 @@ code {
 }
 
 code {
-  color: #ff8657;
-  background: #f4f4f4;
-  display: inline-block;
-  padding: 0 0.5rem;
-  border: 1px solid #d8d8d8;
-  border-radius: 0.5rem;
-  line-height: 1.57777778;
+  padding: 0.2em 0.4em;
+  background: var(--inline-code-background);
+  border-radius: 0.375rem;
 }
 
 div.book .programlisting,
@@ -378,11 +374,6 @@ div.appendix dt {
 
 div.book code,
 div.appendix code {
-  padding: 0;
-  border: 0;
-  background-color: inherit;
-  color: inherit;
-  font-size: 100%;
   -webkit-hyphens: none;
   -moz-hyphens: none;
   hyphens: none;
@@ -441,6 +432,7 @@ div.appendix .variablelist .term {
   --caution-background: #ffebe8;
   --codeblock-background: #f2f8fd;
   --codeblock-text-color: #000;
+  --inline-code-background: #818b981f;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -466,6 +458,7 @@ div.appendix .variablelist .term {
     --caution-background: #422522;
     --codeblock-background: #393939;
     --codeblock-text-color: #fff;
+    --inline-code-background: #656c7633;
   }
 
   :is(.note, .tip, .warning, .caution, .important) {
@@ -476,7 +469,12 @@ div.appendix .variablelist .term {
 
 @font-face {
   font-family: Roboto;
-  src: url(Roboto.ttf);
+  src:
+    url(Roboto.ttf) format("truetype") tech(variations),
+    url(Roboto.ttf) format("truetype-variations");
+  font-weight: 100 900;
+  font-style: normal;
+  font-display: swap;
 }
 
 .chapter {