Add code listing CSS hack article

1 files changed, 65 insertions, 56 deletions

diff --git a/themes/conspiracy/assets/css/style.css b/themes/conspiracy/assets/css/style.css
index 11654ea..2165255 100644
--- a/themes/conspiracy/assets/css/style.css
+++ b/themes/conspiracy/assets/css/style.css
@@ -471,9 +471,14 @@ img:hover {
     filter: none;
 }
 
+/*****************************************************/
+/* Code block formatting / syntax highlighting rules */
+/*****************************************************/
+
 .code {
     font-family: "Fira Code";
     font-size: 13px;
+    text-align: left; /* Override default content "justify" alignment */
     white-space: pre-wrap;
     word-wrap: break-word;
     overflow-x: auto;
@@ -495,6 +500,7 @@ img:hover {
     white-space: pre-wrap;
 }
 
+/* We render line numbers in CSS! */
 .code > .lineno {
     counter-increment: lineno;
     word-break: keep-all;
@@ -509,6 +515,7 @@ img:hover {
     align-self: stretch;
 }
 
+/* We also handle line continuation markers in CSS. */
 .code > .lineno::after {
     position: absolute;
     right: 5px;
@@ -517,6 +524,7 @@ img:hover {
     color: var(--c-text-muted);
 }
 
+/* Insert the actual line number */
 .code > .lineno::before {
     content: counter(lineno);
 }
@@ -533,62 +541,63 @@ footer {
     padding: 5px 25px 5px 25px;
 }
 
-body .hll {}
-body .c   { color: var(--c-text); font-weight: 400 } /* Comment */
-body .n   { color: var(--c-text); font-weight: 400 } /* Name */
-body .o   { color: var(--c-text); font-weight: 400 } /* Operator */
-body .cm  { color: var(--c-text); font-weight: 400 } /* Comment.Multiline */
-body .cp  { color: var(--c-text); font-weight: 400 } /* Comment.Preproc */
-body .c1  { color: var(--c-text); font-weight: 400 } /* Comment.Single */
-body .cs  { color: var(--c-text); font-weight: 400 } /* Comment.Special */
-body .nd  { color: var(--c-text); font-weight: 400 } /* Name.Decorator */
-body .nn  { color: var(--c-text); font-weight: 400 } /* Name.Namespace */
-body .vc  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Class */
-body .vg  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Global */
-body .vi  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Instance */
-body .err { color: var(--c-text-highlight); font-weight: 500 } /* Error */
-body .k   { color: var(--c-text-highlight); font-weight: 500 } /* Keyword */
-body .l   { color: var(--c-text-highlight); font-weight: 500 } /* Literal */
-body .kc  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Constant */
-body .kd  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Declaration */
-body .kn  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Namespace */
-body .kp  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Pseudo */
-body .kr  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Reserved */
-body .kt  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Type */
-body .na  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Attribute */
-body .nb  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Builtin */
-body .nc  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Class */
-body .no  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Constant */
-body .ni  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Entity */
-body .ne  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Exception */
-body .nf  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Function */
-body .nl  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Label */
-body .nx  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Other */
-body .py  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Property */
-body .nt  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Tag */
-body .nv  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Variable */
-body .ow  { color: var(--c-text-highlight); font-weight: 500 } /* Operator.Word */
-body .bp  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Builtin.Pseudo */
-body .ld  { color: var(--c-text); font-weight: 600 } /* Literal.Date */
-body .m   { color: var(--c-text); font-weight: 600 } /* Literal.Number */
-body .s   { color: var(--c-text); font-weight: 600 } /* Literal.String */
-body .mb  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Bin */
-body .mf  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Float */
-body .mh  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Hex */
-body .mi  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer */
-body .mo  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Oct */
-body .sb  { color: var(--c-text); font-weight: 600 } /* Literal.String.Backtick */
-body .sc  { color: var(--c-text); font-weight: 600 } /* Literal.String.Char */
-body .sd  { color: var(--c-text); font-weight: 600 } /* Literal.String.Doc */
-body .s2  { color: var(--c-text); font-weight: 600 } /* Literal.String.Double */
-body .se  { color: var(--c-text); font-weight: 600 } /* Literal.String.Escape */
-body .sh  { color: var(--c-text); font-weight: 600 } /* Literal.String.Heredoc */
-body .si  { color: var(--c-text); font-weight: 600 } /* Literal.String.Interpol */
-body .sx  { color: var(--c-text); font-weight: 600 } /* Literal.String.Other */
-body .sr  { color: var(--c-text); font-weight: 600 } /* Literal.String.Regex */
-body .s1  { color: var(--c-text); font-weight: 600 } /* Literal.String.Single */
-body .ss  { color: var(--c-text); font-weight: 600 } /* Literal.String.Symbol */
-body .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.Long */
+/* Token styling rules for syntax highlighting */
+.code .hll {}
+.code .c   { color: var(--c-text); font-weight: 400 } /* Comment */
+.code .n   { color: var(--c-text); font-weight: 400 } /* Name */
+.code .o   { color: var(--c-text); font-weight: 400 } /* Operator */
+.code .cm  { color: var(--c-text); font-weight: 400 } /* Comment.Multiline */
+.code .cp  { color: var(--c-text); font-weight: 400 } /* Comment.Preproc */
+.code .c1  { color: var(--c-text); font-weight: 400 } /* Comment.Single */
+.code .cs  { color: var(--c-text); font-weight: 400 } /* Comment.Special */
+.code .nd  { color: var(--c-text); font-weight: 400 } /* Name.Decorator */
+.code .nn  { color: var(--c-text); font-weight: 400 } /* Name.Namespace */
+.code .vc  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Class */
+.code .vg  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Global */
+.code .vi  { color: var(--c-text); font-weight: 400 } /* Name.Variable.Instance */
+.code .err { color: var(--c-text-highlight); font-weight: 500 } /* Error */
+.code .k   { color: var(--c-text-highlight); font-weight: 500 } /* Keyword */
+.code .l   { color: var(--c-text-highlight); font-weight: 500 } /* Literal */
+.code .kc  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Constant */
+.code .kd  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Declaration */
+.code .kn  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Namespace */
+.code .kp  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Pseudo */
+.code .kr  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Reserved */
+.code .kt  { color: var(--c-text-highlight); font-weight: 500 } /* Keyword.Type */
+.code .na  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Attribute */
+.code .nb  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Builtin */
+.code .nc  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Class */
+.code .no  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Constant */
+.code .ni  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Entity */
+.code .ne  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Exception */
+.code .nf  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Function */
+.code .nl  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Label */
+.code .nx  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Other */
+.code .py  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Property */
+.code .nt  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Tag */
+.code .nv  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Variable */
+.code .ow  { color: var(--c-text-highlight); font-weight: 500 } /* Operator.Word */
+.code .bp  { color: var(--c-text-highlight); font-weight: 500 } /* Name.Builtin.Pseudo */
+.code .ld  { color: var(--c-text); font-weight: 600 } /* Literal.Date */
+.code .m   { color: var(--c-text); font-weight: 600 } /* Literal.Number */
+.code .s   { color: var(--c-text); font-weight: 600 } /* Literal.String */
+.code .mb  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Bin */
+.code .mf  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Float */
+.code .mh  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Hex */
+.code .mi  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer */
+.code .mo  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Oct */
+.code .sb  { color: var(--c-text); font-weight: 600 } /* Literal.String.Backtick */
+.code .sc  { color: var(--c-text); font-weight: 600 } /* Literal.String.Char */
+.code .sd  { color: var(--c-text); font-weight: 600 } /* Literal.String.Doc */
+.code .s2  { color: var(--c-text); font-weight: 600 } /* Literal.String.Double */
+.code .se  { color: var(--c-text); font-weight: 600 } /* Literal.String.Escape */
+.code .sh  { color: var(--c-text); font-weight: 600 } /* Literal.String.Heredoc */
+.code .si  { color: var(--c-text); font-weight: 600 } /* Literal.String.Interpol */
+.code .sx  { color: var(--c-text); font-weight: 600 } /* Literal.String.Other */
+.code .sr  { color: var(--c-text); font-weight: 600 } /* Literal.String.Regex */
+.code .s1  { color: var(--c-text); font-weight: 600 } /* Literal.String.Single */
+.code .ss  { color: var(--c-text); font-weight: 600 } /* Literal.String.Symbol */
+.code .il  { color: var(--c-text); font-weight: 600 } /* Literal.Number.Integer.Long */
 
 @media (max-width: 40em) {
     nav > div {