Use Pygments for syntax highlighting, design adjustments, preload fonts

2 files changed, 11 insertions, 1 deletions

diff --git a/assets/css/components/_page-header.scss b/assets/css/components/_page-header.scss
index 7cf2aa1..e97aaf7 100644
--- a/assets/css/components/_page-header.scss
+++ b/assets/css/components/_page-header.scss
@@ -18,6 +18,11 @@
         line-height: $code-block--line-height;
     }
 
+    &__pre {
+        margin-top: 0;
+        overflow: hidden;
+    }
+
     @media (max-width: map-get($breakpoints, 'sm')) {
         margin-left: 0;
         padding-left: 0;
diff --git a/assets/css/components/_page.scss b/assets/css/components/_page.scss
index 21969d7..c9a4650 100644
--- a/assets/css/components/_page.scss
+++ b/assets/css/components/_page.scss
@@ -7,6 +7,11 @@
         }
     }
 
+    &__code {
+        padding-left: calc(#{$subcontent--indent} - 2px);
+        border-left: 2px solid var(--obj);
+    }
+
     &__prefixed {
         position: relative;
         margin-left: -1 * $page--item-prefix--width;
@@ -44,9 +49,9 @@
         &--pre {
             $scale-factor: $font-size / $code-block--font-size;
 
-            margin-top: $line-height * 1em;
             // margin-left: calc(#{-1 * $page--item-prefix--width} * #{$scale-factor});
             // padding-left: calc(#{$page--item-prefix--width} * #{$scale-factor});
+            border-left: 0;
     
             &::before {
                 content: str-repeat('``\A', 40);