Optimized CSS for code blocks

4 files changed, 16 insertions, 25 deletions

diff --git a/assets/css/_basics.scss b/assets/css/_basics.scss
index cbdfb9a..14c0391 100644
--- a/assets/css/_basics.scss
+++ b/assets/css/_basics.scss
@@ -46,10 +46,10 @@ code {
 pre {
     margin: ($line-height * 1em) 0 0;
     overflow-x: auto;
-    color: var(--code-block--fg);
-    font-size: $code-block--font-size;
-    line-height: $code-block--line-height;
-    text-overflow: '';
+
+    code {
+        color: currentColor;
+    }
 
     strong {
         font-weight: normal;
@@ -180,8 +180,8 @@ hr {
     background-color: var(--obj);
 }
 
-blockquote {
-    position: relative;
+blockquote,
+pre {
     margin: ($line-height * 1em) 0 0 1px;
     padding-left: calc(#{$subcontent--indent} - 3px);
     border-left: 2px solid var(--obj);
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 87d5413..a55bcb4 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -29,12 +29,6 @@
         }
     }
 
-    &__code {
-        margin-left: 1px;
-        padding-left: calc(#{$subcontent--indent} - 3px);
-        border-left: 2px solid var(--obj);
-    }
-
     &__prefixed {
         position: relative;
         margin-left: -1 * $page--item-prefix--width;
@@ -82,6 +76,10 @@
             margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
             padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
             border-left: 0;
+            color: var(--code-block--fg);
+            font-size: $code-block--font-size;
+            line-height: $code-block--line-height;
+            text-overflow: '';
     
             &::before {
                 content: str-repeat('``\A', 40);
diff --git a/assets/css/scopes/_code.scss b/assets/css/scopes/_code.scss
index f024dbd..4a40d0f 100644
--- a/assets/css/scopes/_code.scss
+++ b/assets/css/scopes/_code.scss
@@ -1,22 +1,15 @@
 .s-code {
-    pre,
-    code {
-        color: var(--fg-lo);
+    &--highlight {
+        pre {
+            color: var(--fg-lo);
+        }
     }
 
     pre {
-        overflow-x: auto;
         font-size: 1em;
         line-height: $line-height;
     }
 
-    &--plain {
-        pre,
-        code {
-            color: var(--fg);
-        }
-    }
-
     /* stylelint-disable selector-class-pattern */
 
     .c {
diff --git a/filters/common_actions.lua b/filters/common_actions.lua
index abb15a1..9ebcf17 100644
--- a/filters/common_actions.lua
+++ b/filters/common_actions.lua
@@ -2,11 +2,11 @@ function CodeBlock(el)
     if next(el.classes) == nil then
         el.classes = el.classes .. {'c-page__prefixed', 'c-page__prefixed--pre'}
     elseif el.classes[1] == "plain" then
-        el = pandoc.Div({el}, {class = 'c-page__code s-code s-code--plain'})
+        el = pandoc.Div({el}, {class = 's-code'})
     else
         local formatted = pandoc.pipe('pygmentize', {
             '-l', el.classes[1], '-f', 'html', '-O',
-            'cssclass=c-page__code s-code'
+            'cssclass=s-code s-code--highlight'
         }, el.text)
         el = pandoc.RawBlock('html', formatted)
     end