From: Vladimír Vondruš <mosra@centrum.cz>
Date: Mon, 1 Jan 2018 19:32:17 +0000 (+0100)
Subject: css: improve code background color.
X-Git-Url: https://www.chiark.greenend.org.uk/ucgi/~cjwatson/git?a=commitdiff_plain;h=d7bdcae2336d4c699ffd7ccbf028ce25efb576d2;p=blog.git

css: improve code background color.

In the dark theme it's still the same as header background color, but
with 50% transparency. To avoid unnecessary transparency and browser
perfomance issues coming out of that (yes I *do* care about that), a
pre-calculated value combining it with background color is used.

Also, until now, code inside colored notes was looking awful. Now it's
using the 50% transparency and looks good. In order to avoid combinatory
explosion of variables, the transparency *is* used in case of notes, but
since cases like that are much less common, I don't think this is a
problem.

The light theme is not changed at all, except for adding a matching
semi-transparent variable.

Huge thanks to @Squareys for this suggestion.
---

diff --git a/css/m-components.css b/css/m-components.css
index 1463c368..e315fb38 100644
--- a/css/m-components.css
+++ b/css/m-components.css
@@ -635,6 +635,9 @@ dl.m-diary dd {
   border-radius: var(--border-radius);
   padding: 1rem;
 }
+.m-note pre, .m-note code {
+  background-color: var(--code-note-background-color);
+}
 .m-frame {
   background-color: var(--background-color);
   border-style: solid;
diff --git a/css/m-dark.css b/css/m-dark.css
index f5294525..5210b542 100644
--- a/css/m-dark.css
+++ b/css/m-dark.css
@@ -56,7 +56,10 @@
   --mark-background-color: #c7cf2f;
   --code-color: #e6e6e6;
   --code-inverted-color: rgba(230, 230, 230, 0.33);
-  --code-background-color: #22272e;
+  /* This is simply color-picked --code-note-background-color on top of
+     --background-color */
+  --code-background-color: #282e36;
+  --code-note-background-color: rgba(34, 39, 46, 0.5);
   --console-background-color: #000000;
 
   /* Header */
diff --git a/css/m-light.css b/css/m-light.css
index 942e0a16..bcaa2ce0 100644
--- a/css/m-light.css
+++ b/css/m-light.css
@@ -57,6 +57,7 @@
   --code-color: #5b5b5b;
   --code-inverted-color: rgba(91, 91, 91, 0.33);
   --code-background-color: #fbf0ec;
+  --code-note-background-color: rgba(251, 240, 236, 0.5);
   --console-background-color: #000000;
 
   /* Header */
diff --git a/doc/css/components-test.rst b/doc/css/components-test.rst
index 4864c8df..641ef419 100644
--- a/doc/css/components-test.rst
+++ b/doc/css/components-test.rst
@@ -1034,6 +1034,62 @@ Without link or caption:
       </div>
     </div>
 
+`Code in colored notes`_
+========================
+
+.. raw:: html
+
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-default">
+          <p>Inline <code>code</code> in default note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-primary">
+          <p>Inline <code>code</code> in primary note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-success">
+          <p>Inline <code>code</code> in success note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-warning">
+          <p>Inline <code>code</code> in warning note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-danger">
+          <p>Inline <code>code</code> in danger note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-info">
+          <p>Inline <code>code</code> in info note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+    <div class="m-row">
+      <div class="m-col-m-6 m-col-s-12">
+        <div class="m-note m-dim">
+          <p>Inline <code>code</code> in dim note.</p>
+          <pre>and block code</pre>
+        </div>
+      </div>
+    </div>
+
 `Code figure`_
 ==============