2024-04-30 09:50:44

assets/css/system/modules/_shortcodes.scss

@@ -134,6 +134,10 @@ body {
         // ---------------------------------------------------------------------------------------------------------- //
 
         &-file {
+          pre {
+            margin: 0;
+          }
+
           .card-body {
             //max-height: calc(100vh - 10rem);
           }

assets/css/system/modules/_syntax.chroma.scss

@@ -1,7 +1,8 @@
 .highlight {
-  @import 'syntax.chroma.theme';
-
   .chroma {
+    @import 'syntax.chroma.theme';
+    color: #abb2bf;
+
     .lnt, .line, .hl {
       display: block;
     }

assets/css/system/modules/_syntax.chroma.theme.scss

@@ -2,417 +2,411 @@
 .bg {
 }
 
-/* PreWrapper */
-.chroma {
-  //background-color: #282c34;
-  color: #abb2bf;
-}
-
 /* Other */
-.chroma .x {
+.x {
 }
 
 /* Error */
-.chroma .err {
+.err {
 }
 
 /* CodeLine */
-.chroma .cl {
+.cl {
 }
 
 /* LineLink */
-.chroma .lnlinks {
+.lnlinks {
 }
 
 /* LineTableTD */
-.chroma .lntd {
+.lntd {
 }
 
 /* LineTable */
-.chroma .lntable {
+.lntable {
 }
 
 /* LineHighlight */
-.chroma .hl {
+.hl {
   background-color: #3d4148
 }
 
 /* LineNumbersTable */
-.chroma .lnt {
+.lnt {
   color: #55595f
 }
 
 /* LineNumbers */
-.chroma .ln {
+.ln {
   color: #55595f
 }
 
 /* Line */
-.chroma .line {
+.line {
 }
 
 /* Keyword */
-.chroma .k {
+.k {
   color: #c678dd
 }
 
 /* KeywordConstant */
-.chroma .kc {
+.kc {
   color: #e5c07b
 }
 
 /* KeywordDeclaration */
-.chroma .kd {
+.kd {
   color: #c678dd
 }
 
 /* KeywordNamespace */
-.chroma .kn {
+.kn {
   color: #c678dd
 }
 
 /* KeywordPseudo */
-.chroma .kp {
+.kp {
   color: #c678dd
 }
 
 /* KeywordReserved */
-.chroma .kr {
+.kr {
   color: #c678dd
 }
 
 /* KeywordType */
-.chroma .kt {
+.kt {
   color: #e5c07b
 }
 
 /* Name */
-.chroma .n {
+.n {
   color: #e06c75
 }
 
 /* NameAttribute */
-.chroma .na {
+.na {
   color: #e06c75
 }
 
 /* NameBuiltin */
-.chroma .nb {
+.nb {
   color: #e5c07b
 }
 
 /* NameBuiltinPseudo */
-.chroma .bp {
+.bp {
   color: #e06c75
 }
 
 /* NameClass */
-.chroma .nc {
+.nc {
   color: #e5c07b
 }
 
 /* NameConstant */
-.chroma .no {
+.no {
   color: #e06c75
 }
 
 /* NameDecorator */
-.chroma .nd {
+.nd {
   color: #61afef
 }
 
 /* NameEntity */
-.chroma .ni {
+.ni {
   color: #e06c75
 }
 
 /* NameException */
-.chroma .ne {
+.ne {
   color: #e06c75
 }
 
 /* NameFunction */
-.chroma .nf {
+.nf {
   color: #61afef;
   font-weight: bold
 }
 
 /* NameFunctionMagic */
-.chroma .fm {
+.fm {
   color: #56b6c2;
   font-weight: bold
 }
 
 /* NameLabel */
-.chroma .nl {
+.nl {
   color: #e06c75
 }
 
 /* NameNamespace */
-.chroma .nn {
+.nn {
   color: #e06c75
 }
 
 /* NameOther */
-.chroma .nx {
+.nx {
   color: #e06c75
 }
 
 /* NameProperty */
-.chroma .py {
+.py {
   color: #e06c75
 }
 
 /* NameTag */
-.chroma .nt {
+.nt {
   color: #e06c75
 }
 
 /* NameVariable */
-.chroma .nv {
+.nv {
   color: #e06c75
 }
 
 /* NameVariableClass */
-.chroma .vc {
+.vc {
   color: #e06c75
 }
 
 /* NameVariableGlobal */
-.chroma .vg {
+.vg {
   color: #e06c75
 }
 
 /* NameVariableInstance */
-.chroma .vi {
+.vi {
   color: #e06c75
 }
 
 /* NameVariableMagic */
-.chroma .vm {
+.vm {
   color: #e06c75
 }
 
 /* Literal */
-.chroma .l {
+.l {
 }
 
 /* LiteralDate */
-.chroma .ld {
+.ld {
 }
 
 /* LiteralString */
-.chroma .s {
+.s {
   color: #98c379
 }
 
 /* LiteralStringAffix */
-.chroma .sa {
+.sa {
   color: #98c379
 }
 
 /* LiteralStringBacktick */
-.chroma .sb {
+.sb {
   color: #98c379
 }
 
 /* LiteralStringChar */
-.chroma .sc {
+.sc {
   color: #98c379
 }
 
 /* LiteralStringDelimiter */
-.chroma .dl {
+.dl {
   color: #98c379
 }
 
 /* LiteralStringDoc */
-.chroma .sd {
+.sd {
   color: #98c379
 }
 
 /* LiteralStringDouble */
-.chroma .s2 {
+.s2 {
   color: #98c379
 }
 
 /* LiteralStringEscape */
-.chroma .se {
+.se {
   color: #98c379
 }
 
 /* LiteralStringHeredoc */
-.chroma .sh {
+.sh {
   color: #98c379
 }
 
 /* LiteralStringInterpol */
-.chroma .si {
+.si {
   color: #98c379
 }
 
 /* LiteralStringOther */
-.chroma .sx {
+.sx {
   color: #98c379
 }
 
 /* LiteralStringRegex */
-.chroma .sr {
+.sr {
   color: #98c379
 }
 
 /* LiteralStringSingle */
-.chroma .s1 {
+.s1 {
   color: #98c379
 }
 
 /* LiteralStringSymbol */
-.chroma .ss {
+.ss {
   color: #98c379
 }
 
 /* LiteralNumber */
-.chroma .m {
+.m {
   color: #d19a66
 }
 
 /* LiteralNumberBin */
-.chroma .mb {
+.mb {
   color: #d19a66
 }
 
 /* LiteralNumberFloat */
-.chroma .mf {
+.mf {
   color: #d19a66
 }
 
 /* LiteralNumberHex */
-.chroma .mh {
+.mh {
   color: #d19a66
 }
 
 /* LiteralNumberInteger */
-.chroma .mi {
+.mi {
   color: #d19a66
 }
 
 /* LiteralNumberIntegerLong */
-.chroma .il {
+.il {
   color: #d19a66
 }
 
 /* LiteralNumberOct */
-.chroma .mo {
+.mo {
   color: #d19a66
 }
 
 /* Operator */
-.chroma .o {
+.o {
   color: #56b6c2
 }
 
 /* OperatorWord */
-.chroma .ow {
+.ow {
   color: #56b6c2
 }
 
 /* Punctuation */
-.chroma .p {
+.p {
 }
 
 /* Comment */
-.chroma .c {
+.c {
   color: #7f848e;
   font-style: italic;
 }
 
 /* CommentHashbang */
-.chroma .ch {
+.ch {
   color: #7f848e;
   font-style: italic;
 }
 
 /* CommentMultiline */
-.chroma .cm {
+.cm {
   color: #7f848e;
   font-style: italic;
 }
 
 /* CommentSingle */
-.chroma .c1 {
+.c1 {
   color: #7f848e;
   font-style: italic;
 }
 
 /* CommentSpecial */
-.chroma .cs {
+.cs {
   color: #7f848e;
   font-style: italic;
 }
 
 /* CommentPreproc */
-.chroma .cp {
+.cp {
   color: #7f848e;
   font-style: italic;
 }
 
 /* CommentPreprocFile */
-.chroma .cpf {
+.cpf {
   color: #7f848e;
   font-style: italic;
 }
 
 /* Generic */
-.chroma .g {
+.g {
 }
 
 /* GenericDeleted */
-.chroma .gd {
+.gd {
   color: #e06c75
 }
 
 /* GenericEmph */
-.chroma .ge {
+.ge {
 }
 
 /* GenericError */
-.chroma .gr {
+.gr {
 }
 
 /* GenericHeading */
-.chroma .gh {
+.gh {
 }
 
 /* GenericInserted */
-.chroma .gi {
+.gi {
   color: #98c379;
   font-weight: bold
 }
 
 /* GenericOutput */
-.chroma .go {
+.go {
 }
 
 /* GenericPrompt */
-.chroma .gp {
+.gp {
 }
 
 /* GenericStrong */
-.chroma .gs {
+.gs {
 }
 
 /* GenericSubheading */
-.chroma .gu {
+.gu {
 }
 
 /* GenericTraceback */
-.chroma .gt {
+.gt {
 }
 
 /* GenericUnderline */
-.chroma .gl {
+.gl {
 }
 
 /* TextWhitespace */
-.chroma .w {
+.w {
 }

assets/css/system/modules/_typography.scss

@@ -54,7 +54,6 @@ body {
 
       pre {
         @include font-mono();
-        background-color: rgba(var(--bs-danger-rgb), 5%);
         border-radius: var(--bs-border-radius);
 
         > code {
@@ -62,7 +61,6 @@ body {
           display: block;
           padding: 1rem;
           white-space: pre;
-          //font-size: 1.2em;
         }
       }
 

layouts/_default/_markup/render-codeblock.html

@@ -53,7 +53,7 @@ This shortcode creates a block of code with syntax highlighting.
   <div class="shortcode mb-3 shortcode-codeblock shortcode-codeblock-{{ ($ordinal) }}
 {{ with ($type) }}shortcode-codeblock-{{ . }}{{ end }}">
     <div class="d-flex overflow-hidden">
-      <div class="flex-grow-1 rounded overflow-hidden bg-body-tertiary"
+      <div class="flex-grow-1 rounded overflow-hidden bg-body-tertiary text-body"
            id="cp-{{ ($cp) }}" data-bs-theme="dark">{{ (highlight ($inner) ($type) ($attr)) }}</div>
       <div class="flex-shrink-0">
         <ul class="list-inline mb-0">