Optimize code snippet background color

mikesnotebook · Dec 18, 2020 · b759787 · b759787
1 parent f93b8ca
commit b759787
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 12 deletions.
diff --git a/assets/css/_addon/syntax.scss b/assets/css/_addon/syntax.scss
@@ -36,11 +36,11 @@ html[mode=dark] {
 }
 
 %code-snippet-radius {
-  border-radius: 5px;
+  border-radius: 6px;
 }
 
 %code-snippet-padding {
-  padding: 0.8rem 1rem;
+  padding: 1.5rem;
 }
 
 $code-font-size: 0.85rem;
@@ -69,8 +69,8 @@ div > pre {
 
   overflow: auto;
   .lineno {
-    margin: 0.8rem 0;
-    padding: 0 0.5rem;
+    margin-left: .2rem;
+    padding-right: .5rem;
     min-width: 2.2rem;
     text-align: right;
     color: var(--highlight-lineno-color);
@@ -131,8 +131,7 @@ code {
 }
 
 td.rouge-code {
-  padding-left: 1rem;
-  padding-right: 1rem;
+  padding: 1.5rem 1.5rem 1.5rem 1rem;
 }
 
 /* Hide line numbers for default, console, and terminal code snippets */

diff --git a/assets/css/_colors/dark-syntax.scss b/assets/css/_colors/dark-syntax.scss
@@ -8,22 +8,22 @@
 
 @mixin dark-syntax {
   /* -----  My styles ------ */
-  --highlight-bg-color: #272822;
+  --highlight-bg-color: #252525;
   --highlighter-rouge-color: #de6b18;
   --highlight-lineno-color: #6c6c6d;
-  --highlight-lineno-border-color: #3c4042;
-  --inline-code-bg: var(--highlight-bg-color);
+  --highlight-lineno-border-color: #303435;
+  --inline-code-bg: #272822;
 
   .highlight {
     .gp { color: #818c96; }
   }
 
-  pre { color: #818c96; } /* override Bootstrap */
+  pre { color: #bfbfbf; } /* override Bootstrap */
   kbd { background-color: black; }
 
   /* syntax highlight colors from https://raw.githubusercontent.com/jwarby/pygments-css/master/monokai.css */
-  .highlight pre { background-color: #272822; }
-  .highlight .hll { background-color: #272822; }
+  .highlight pre { background-color: var(--highlight-bg-color); }
+  .highlight .hll { background-color: var(--highlight-bg-color); }
   .highlight .c { color: #75715e; } /* Comment */
   .highlight .err { color: #960050; background-color: #1e0010; } /* Error */
   .highlight .k { color: #66d9ef; } /* Keyword */