From 10d9ebd6b3482f422cacb283231755fe03956bef Mon Sep 17 00:00:00 2001
From: curben <2809763-curben@users.noreply.gitlab.com>
Date: Sat, 4 Jan 2020 02:42:15 +0000
Subject: [PATCH] fix(css): remove background colour for codeblock

- inspired by https://sscaffold-css.com/
- fix copy button's hover colours
---
 themes/chameleon/source/css/chameleon.css | 26 ++++++++++++-----------
 1 file changed, 14 insertions(+), 12 deletions(-)

diff --git a/themes/chameleon/source/css/chameleon.css b/themes/chameleon/source/css/chameleon.css
index 162bda0..391d812 100644
--- a/themes/chameleon/source/css/chameleon.css
+++ b/themes/chameleon/source/css/chameleon.css
@@ -6,9 +6,10 @@
 :root {
   --main-bg-color: black;
   --main-font-color: #e6e6e6;
-  --a-hover: white;
+  --link-hover: white;
   --alt-bg-color: #333;
   --font-size: 1.2em;
+  --link-underline: #1abc9c;
 }
 
 html {
@@ -74,7 +75,7 @@ a {
 a:active,
 a:hover {
   outline-width: 0;
-  color: var(--a-hover);
+  color: var(--link-hover);
 }
 
 a,
@@ -194,12 +195,13 @@ code,
 kbd,
 pre,
 samp {
-  background: var(--alt-bg-color);
   font-size: 0.9em;
 }
 
 /* set codeblock width to minimum */
 pre {
+  border-left: 0.1em solid var(--link-underline);
+  padding-left: 1em;
   max-width: max-content;
 }
 
@@ -227,7 +229,7 @@ strong {
 
 blockquote {
   background: var(--alt-bg-color);
-  border-left: 2px solid #666;
+  border-left: 0.1em solid #666;
   padding-left: 1em;
   margin: 1em 3em 1em 0em;
   max-width: max-content;
@@ -380,7 +382,7 @@ span.index-list-count:after {
 }
 
 .article .article-entry a {
-  border-bottom: 1px solid #1abc9c;
+  border-bottom: 1px solid var(--link-underline);
 }
 
 .article .article-entry a:hover {
@@ -670,7 +672,7 @@ input {
 
 /* highlight the text box when focused */
 .searchBox:focus {
-  border: 1px solid #1abc9c;
+  border: 1px solid var(--link-underline);
 }
 
 /* align the button to center */
@@ -693,7 +695,7 @@ svg {
 
 /* fill the link icon with link's color */
 svg#link {
-  fill: #1abc9c;
+  fill: var(--link-underline);
 }
 
 /* don't underline link icon */
@@ -703,7 +705,7 @@ svg#link {
 
 /* underline link icon when hover */
 .article .article-entry a.headerlink:hover {
-  border-bottom: 1px solid #1abc9c;
+  border-bottom: 1px solid var(--link-underline);
 }
 
 @media (max-width: 768px) {
@@ -781,15 +783,15 @@ svg#link {
 }
 
 .copy-button:hover {
-  background: var(--alt-font-color);
-  color: var(--alt-bg-color);
+  background: var(--main-font-color);
+  color: var(--main-bg-color);
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
     --main-bg-color: black;
     --main-font-color: #e6e6e6;
-    --a-hover: white;
+    --link-hover: white;
     --alt-bg-color: #333;
   }
 }
@@ -798,7 +800,7 @@ svg#link {
   :root {
     --main-bg-color: #f1f1f1;
     --main-font-color: #333;
-    --a-hover: black;
+    --link-hover: black;
     --alt-bg-color: #d8d8d8;
   }
 }