From 30fad56aed8def3ca561a33588dafd9bb938ba96 Mon Sep 17 00:00:00 2001
From: James Panther <4462786+jpanther@users.noreply.github.com>
Date: Mon, 17 Jan 2022 13:21:21 +1100
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Reduce=20repetition=20in?=
=?UTF-8?q?=20main=20CSS?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
assets/css/compiled/main.css | 803 ++++---------------
assets/css/main.css | 370 +++------
exampleSite/content/samples/markdown.md | 6 +-
layouts/_default/_markup/render-heading.html | 2 +-
4 files changed, 257 insertions(+), 924 deletions(-)
diff --git a/assets/css/compiled/main.css b/assets/css/compiled/main.css
index 1cd1eb0c..f38ab768 100644
--- a/assets/css/compiled/main.css
+++ b/assets/css/compiled/main.css
@@ -917,9 +917,9 @@ Ensure the default browser behavior of the `hidden` attribute.
}
body a, body button {
- transition-property: color, background-color, border-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-text-decoration-color, -webkit-backdrop-filter;
+ transition-property: color, background-color, border-color, fill, stroke, -webkit-text-decoration-color;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, -webkit-text-decoration-color;
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
transition-duration: 150ms;
}
@@ -939,16 +939,6 @@ body a, body button {
/* Heading anchors */
-.prose .heading-anchor {
- position: absolute;
- top: 0px;
- -webkit-text-decoration-line: none;
- text-decoration-line: none;
- opacity: 0;
- width: 1.1em;
- left: -1.1em;
-}
-
.prose .heading-anchor:hover {
background-color: transparent !important;
--tw-text-opacity: 1 !important;
@@ -958,6 +948,10 @@ body a, body button {
}
.prose .heading-anchor:hover, .prose .heading-anchor:focus, .prose h2:hover > .heading-anchor, .prose h3:hover > .heading-anchor, .prose h4:hover > .heading-anchor {
+ --tw-text-opacity: 1;
+ color: rgba(var(--color-primary-200), var(--tw-text-opacity));
+ -webkit-text-decoration-line: none;
+ text-decoration-line: none;
opacity: 1;
}
@@ -1026,16 +1020,6 @@ body a, body button {
color: rgba(var(--color-neutral-200), var(--tw-text-opacity));
}
-/* Other */
-
-.chroma .x {
-}
-
-/* Error */
-
-.chroma .err {
-}
-
/* LineTableTD */
.chroma .lntd, .chroma .lntd pre {
@@ -1085,46 +1069,49 @@ body a, body button {
/* LineNumbersTable */
-.chroma .lnt {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .lnt {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
-}
-
-.chroma .lnt {
- margin-right: 0.4em;
- padding: 0 0.4em 0 0.4em;
-}
-
/* LineNumbers */
-.chroma .ln {
+.chroma .lnt, .chroma .ln {
+ margin-right: 0.4em;
+ padding-left: 0.4em;
+ padding-right: 0.4em;
+ padding-top: 0px;
+ padding-bottom: 0px;
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-600), var(--tw-text-opacity));
}
-.dark .chroma .ln {
+.dark .chroma .lnt, .dark .chroma .ln {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-300), var(--tw-text-opacity));
}
-.chroma .ln {
- margin-right: 0.4em;
- padding: 0 0.4em 0 0.4em;
-}
-
/* Keyword */
-.chroma .k {
+/* KeywordDeclaration */
+
+/* KeywordNamespace */
+
+/* KeywordPseudo */
+
+/* KeywordReserved */
+
+/* NameClass */
+
+/* NameFunctionMagic */
+
+/* NameNamespace */
+
+/* NameVariableClass */
+
+/* Operator */
+
+.chroma .k, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .nc, .chroma .fm, .chroma .nn, .chroma .vc, .chroma .o {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
}
-.dark .chroma .k {
+.dark .chroma .k, .dark .chroma .kd, .dark .chroma .kn, .dark .chroma .kp, .dark .chroma .kr, .dark .chroma .nc, .dark .chroma .fm, .dark .chroma .nn, .dark .chroma .vc, .dark .chroma .o {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-300), var(--tw-text-opacity));
}
@@ -1142,172 +1129,91 @@ body a, body button {
color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
}
-/* KeywordDeclaration */
-
-.chroma .kd {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .kd {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
-/* KeywordNamespace */
-
-.chroma .kn {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .kn {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
-/* KeywordPseudo */
-
-.chroma .kp {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .kp {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
-/* KeywordReserved */
-
-.chroma .kr {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .kr {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
/* KeywordType */
-.chroma .kt {
+/* NameVariable */
+
+/* NameVariableInstance */
+
+/* NameVariableMagic */
+
+/* LiteralNumber */
+
+/* LiteralNumberBin */
+
+/* LiteralNumberFloat */
+
+/* LiteralNumberHex */
+
+/* LiteralNumberInteger */
+
+/* LiteralNumberIntegerLong */
+
+/* LiteralNumberOct */
+
+.chroma .kt, .chroma .nv, .chroma .vi, .chroma .vm, .chroma .m, .chroma .mb, .chroma .mf, .chroma .mh, .chroma .mi, .chroma .il, .chroma .mo {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
}
-.dark .chroma .kt {
+.dark .chroma .kt, .dark .chroma .nv, .dark .chroma .vi, .dark .chroma .vm, .dark .chroma .m, .dark .chroma .mb, .dark .chroma .mf, .dark .chroma .mh, .dark .chroma .mi, .dark .chroma .il, .dark .chroma .mo {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
}
/* Name */
-.chroma .n {
+/* NameDecorator */
+
+/* NameEntity */
+
+/* NameLabel */
+
+.chroma .n, .chroma .nd, .chroma .ni, .chroma .nl {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-900), var(--tw-text-opacity));
}
-.dark .chroma .n {
+.dark .chroma .n, .dark .chroma .nd, .dark .chroma .ni, .dark .chroma .nl {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-200), var(--tw-text-opacity));
}
/* NameAttribute */
-.chroma .na {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .na {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
-}
-
/* NameBuiltin */
-.chroma .nb {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .nb {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
-}
-
/* NameBuiltinPseudo */
-.chroma .bp {
+/* NameOther */
+
+/* NameProperty */
+
+/* NameTag */
+
+.chroma .na, .chroma .nb, .chroma .bp, .chroma .nx, .chroma .py, .chroma .nt {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-800), var(--tw-text-opacity));
}
-.dark .chroma .bp {
+.dark .chroma .na, .dark .chroma .nb, .dark .chroma .bp, .dark .chroma .nx, .dark .chroma .py, .dark .chroma .nt {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
}
-/* NameClass */
-
-.chroma .nc {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .nc {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
/* NameConstant */
-.chroma .no {
- font-weight: 600;
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .no {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
-}
-
-/* NameDecorator */
-
-.chroma .nd {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-900), var(--tw-text-opacity));
-}
-
-.dark .chroma .nd {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-200), var(--tw-text-opacity));
-}
-
-/* NameEntity */
-
-.chroma .ni {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-900), var(--tw-text-opacity));
-}
-
-.dark .chroma .ni {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-200), var(--tw-text-opacity));
-}
-
/* NameException */
-.chroma .ne {
+/* NameVariableGlobal */
+
+.chroma .no, .chroma .ne, .chroma .vg {
font-weight: 600;
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
}
-.dark .chroma .ne {
+.dark .chroma .no, .dark .chroma .ne, .dark .chroma .vg {
--tw-text-opacity: 1;
color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
}
@@ -1324,237 +1230,44 @@ body a, body button {
color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
}
-/* NameFunctionMagic */
-
-.chroma .fm {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .fm {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
-/* NameLabel */
-
-.chroma .nl {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-900), var(--tw-text-opacity));
-}
-
-.dark .chroma .nl {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-200), var(--tw-text-opacity));
-}
-
-/* NameNamespace */
-
-.chroma .nn {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .nn {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
-/* NameOther */
-
-.chroma .nx {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .nx {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
-}
-
-/* NameProperty */
-
-.chroma .py {
- color: #cebc3a;
-}
-
-/* NameTag */
-
-.chroma .nt {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .nt {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-300), var(--tw-text-opacity));
-}
-
-/* NameVariable */
-
-.chroma .nv {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .nv {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* NameVariableClass */
-
-.chroma .vc {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
-.dark .chroma .vc {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-300), var(--tw-text-opacity));
-}
-
-/* NameVariableGlobal */
-
-.chroma .vg {
- font-weight: 600;
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .vg {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
-}
-
-/* NameVariableInstance */
-
-.chroma .vi {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .vi {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* NameVariableMagic */
-
-.chroma .vm {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .vm {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
/* Literal */
-.chroma .l {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .l {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralDate */
-.chroma .ld {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .ld {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralString */
-.chroma .s {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .s {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringAffix */
-.chroma .sa {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .sa {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringBacktick */
-.chroma .sb {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .sb {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringChar */
-.chroma .sc {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .sc {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringDelimiter */
-.chroma .dl {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .dl {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringDoc */
-.chroma .sd {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .sd {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringDouble */
-.chroma .s2 {
+/* LiteralStringHeredoc */
+
+/* LiteralStringInterpol */
+
+/* LiteralStringOther */
+
+/* LiteralStringSingle */
+
+/* GenericInserted */
+
+/* GenericOutput */
+
+/* GenericPrompt */
+
+.chroma .l, .chroma .ld, .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .sh, .chroma .si, .chroma .sx, .chroma .s1, .chroma .gi, .chroma .go, .chroma .gp {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-800), var(--tw-text-opacity));
}
-.dark .chroma .s2 {
+.dark .chroma .l, .dark .chroma .ld, .dark .chroma .s, .dark .chroma .sa, .dark .chroma .sb, .dark .chroma .sc, .dark .chroma .dl, .dark .chroma .sd, .dark .chroma .s2, .dark .chroma .sh, .dark .chroma .si, .dark .chroma .sx, .dark .chroma .s1, .dark .chroma .gi, .dark .chroma .go, .dark .chroma .gp {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-400), var(--tw-text-opacity));
}
@@ -1572,171 +1285,21 @@ body a, body button {
color: rgba(var(--color-secondary-500), var(--tw-text-opacity));
}
-/* LiteralStringHeredoc */
-
-.chroma .sh {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .sh {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
-/* LiteralStringInterpol */
-
-.chroma .si {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .si {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
-/* LiteralStringOther */
-
-.chroma .sx {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .sx {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringRegex */
-.chroma .sr {
- font-weight: 600;
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .sr {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
-/* LiteralStringSingle */
-
-.chroma .s1 {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .s1 {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* LiteralStringSymbol */
-.chroma .ss {
+.chroma .sr, .chroma .ss {
font-weight: 600;
--tw-text-opacity: 1;
color: rgba(var(--color-primary-800), var(--tw-text-opacity));
}
-.dark .chroma .ss {
+.dark .chroma .sr, .dark .chroma .ss {
--tw-text-opacity: 1;
color: rgba(var(--color-primary-400), var(--tw-text-opacity));
}
-/* LiteralNumber */
-
-.chroma .m {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .m {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* LiteralNumberBin */
-
-.chroma .mb {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .mb {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* LiteralNumberFloat */
-
-.chroma .mf {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .mf {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* LiteralNumberHex */
-
-.chroma .mh {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .mh {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* LiteralNumberInteger */
-
-.chroma .mi {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .mi {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* LiteralNumberIntegerLong */
-
-.chroma .il {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .il {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* LiteralNumberOct */
-
-.chroma .mo {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-400), var(--tw-text-opacity));
-}
-
-.dark .chroma .mo {
- --tw-text-opacity: 1;
- color: rgba(var(--color-secondary-600), var(--tw-text-opacity));
-}
-
-/* Operator */
-
-.chroma .o {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-600), var(--tw-text-opacity));
-}
-
/* OperatorWord */
.chroma .ow {
@@ -1750,20 +1313,25 @@ body a, body button {
color: rgba(var(--color-primary-600), var(--tw-text-opacity));
}
-/* Punctuation */
-
-.chroma .p {
-}
-
/* Comment */
-.chroma .c {
+/* CommentMultiline */
+
+/* CommentSingle */
+
+/* CommentSpecial */
+
+/* CommentPreproc */
+
+/* CommentPreprocFile */
+
+.chroma .c, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf {
font-style: italic;
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
}
-.dark .chroma .c {
+.dark .chroma .c, .dark .chroma .cm, .dark .chroma .c1, .dark .chroma .cs, .dark .chroma .cp, .dark .chroma .cpf {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
}
@@ -1782,92 +1350,12 @@ body a, body button {
color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
}
-/* CommentMultiline */
-
-.chroma .cm {
- font-style: italic;
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
-.dark .chroma .cm {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
-}
-
-/* CommentSingle */
-
-.chroma .c1 {
- font-style: italic;
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
-.dark .chroma .c1 {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
-}
-
-/* CommentSpecial */
-
-.chroma .cs {
- font-style: italic;
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
-.dark .chroma .cs {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
-}
-
-/* CommentPreproc */
-
-.chroma .cp {
- font-style: italic;
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
-.dark .chroma .cp {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
-}
-
-/* CommentPreprocFile */
-
-.chroma .cpf {
- font-style: italic;
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
-.dark .chroma .cpf {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-400), var(--tw-text-opacity));
-}
-
-/* Generic */
-
-.chroma .g {
-}
-
-/* GenericDeleted */
-
-.chroma .gd {
-}
-
/* GenericEmph */
.chroma .ge {
font-style: italic;
}
-/* GenericError */
-
-.chroma .gr {
-}
-
/* GenericHeading */
.chroma .gh {
@@ -1876,42 +1364,6 @@ body a, body button {
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
}
-/* GenericInserted */
-
-.chroma .gi {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .gi {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
-/* GenericOutput */
-
-.chroma .go {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .go {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
-/* GenericPrompt */
-
-.chroma .gp {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-800), var(--tw-text-opacity));
-}
-
-.dark .chroma .gp {
- --tw-text-opacity: 1;
- color: rgba(var(--color-primary-400), var(--tw-text-opacity));
-}
-
/* GenericStrong */
.chroma .gs {
@@ -1920,14 +1372,9 @@ body a, body button {
/* GenericSubheading */
-.chroma .gu {
- --tw-text-opacity: 1;
- color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
-}
-
/* GenericTraceback */
-.chroma .gt {
+.chroma .gu, .chroma .gt {
--tw-text-opacity: 1;
color: rgba(var(--color-neutral-500), var(--tw-text-opacity));
}
@@ -1939,11 +1386,6 @@ body a, body button {
text-decoration-line: underline;
}
-/* TextWhitespace */
-
-.chroma .w {
-}
-
.invisible {
visibility: hidden;
}
@@ -1971,6 +1413,10 @@ body a, body button {
top: 5rem;
}
+.top-0 {
+ top: 0px;
+}
+
.z-50 {
z-index: 50;
}
@@ -2173,6 +1619,10 @@ body a, body button {
width: 2rem;
}
+.w-5 {
+ width: 1.25rem;
+}
+
.min-w-\[1\.8rem\] {
min-width: 1.8rem;
}
@@ -2629,6 +2079,15 @@ body a, body button {
text-decoration-line: none !important;
}
+.no-underline {
+ -webkit-text-decoration-line: none;
+ text-decoration-line: none;
+}
+
+.opacity-0 {
+ opacity: 0;
+}
+
.shadow-lg {
--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -2641,6 +2100,12 @@ body a, body button {
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
}
+.transition-opacity {
+ transition-property: opacity;
+ transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+ transition-duration: 150ms;
+}
+
.first\:mt-8:first-child {
margin-top: 2rem;
}
@@ -2755,6 +2220,10 @@ body a, body button {
outline-color: transparent;
}
+[dir="ltr"] .ltr\:-left-6 {
+ left: -1.5rem;
+}
+
[dir="ltr"] .ltr\:ml-2 {
margin-left: 0.5rem;
}
@@ -2791,6 +2260,10 @@ body a, body button {
text-align: right;
}
+[dir="rtl"] .rtl\:-right-6 {
+ right: -1.5rem;
+}
+
[dir="rtl"] .rtl\:mr-2 {
margin-right: 0.5rem;
}
diff --git a/assets/css/main.css b/assets/css/main.css
index 075e95cd..5aadf860 100644
--- a/assets/css/main.css
+++ b/assets/css/main.css
@@ -5,13 +5,12 @@
body a,
body button {
- @apply transition;
+ @apply transition-colors;
}
/* Scale SVG icons to text size */
.icon svg {
- height: 1em;
- width: 1em;
+ @apply h-[1em] w-[1em];
}
/* Search */
@@ -23,11 +22,6 @@ body button {
}
/* Heading anchors */
-.prose .heading-anchor {
- @apply absolute top-0 no-underline opacity-0;
- width: 1.1em;
- left: -1.1em;
-}
.prose .heading-anchor:hover {
@apply underline bg-transparent text-primary-500 !important;
}
@@ -36,41 +30,36 @@ body button {
.prose h2:hover > .heading-anchor,
.prose h3:hover > .heading-anchor,
.prose h4:hover > .heading-anchor {
- @apply opacity-100;
+ @apply no-underline opacity-100 text-primary-200;
}
/* Article pagination */
.article-pagination a:hover .article-pagination-title {
@apply underline decoration-primary-500;
}
-
.article-pagination a:hover .article-pagination-direction {
@apply text-primary-700 dark:text-primary-400;
}
/* RTL support */
-[dir="rtl"] .prose blockquote {
- @apply pr-4 border-l-0 border-r-4;
+.prose blockquote {
+ @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
}
-
-[dir="rtl"] .prose ul > li,
-[dir="rtl"] .prose ol > li {
- @apply pl-0 pr-2 mr-7;
+.prose ul > li,
+.prose ol > li {
+ @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
}
-
-[dir="rtl"] .prose ol > li:before,
-[dir="rtl"] .prose ul > li:before {
- @apply left-auto right-1;
+.prose ol > li:before,
+.prose ul > li:before {
+ @apply rtl:left-auto rtl:right-1;
}
-
-[dir="rtl"] .prose thead td:first-child,
-[dir="rtl"] .prose thead th:first-child {
- @apply pr-0;
+.prose thead td:first-child,
+.prose thead th:first-child {
+ @apply rtl:pr-0;
}
-
-[dir="rtl"] .prose thead td:last-child,
-[dir="rtl"] .prose thead th:last-child {
- @apply pl-0;
+.prose thead td:last-child,
+.prose thead th:last-child {
+ @apply rtl:pl-0;
}
/* -- Chroma Highlight -- */
@@ -78,12 +67,6 @@ body button {
.prose .chroma {
@apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
}
-/* Other */
-.chroma .x {
-}
-/* Error */
-.chroma .err {
-}
/* LineTableTD */
.chroma .lntd,
.chroma .lntd pre {
@@ -102,298 +85,178 @@ body button {
@apply p-0 m-0;
}
/* LineNumbersTable */
-.chroma .lnt {
- @apply text-neutral-600 dark:text-neutral-300;
- margin-right: 0.4em;
- padding: 0 0.4em 0 0.4em;
-}
/* LineNumbers */
+.chroma .lnt,
.chroma .ln {
- @apply text-neutral-600 dark:text-neutral-300;
- margin-right: 0.4em;
- padding: 0 0.4em 0 0.4em;
+ @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
}
/* Keyword */
-.chroma .k {
+/* KeywordDeclaration */
+/* KeywordNamespace */
+/* KeywordPseudo */
+/* KeywordReserved */
+/* NameClass */
+/* NameFunctionMagic */
+/* NameNamespace */
+/* NameVariableClass */
+/* Operator */
+.chroma .k,
+.chroma .kd,
+.chroma .kn,
+.chroma .kp,
+.chroma .kr,
+.chroma .nc,
+.chroma .fm,
+.chroma .nn,
+.chroma .vc,
+.chroma .o {
@apply text-primary-600 dark:text-primary-300;
}
/* KeywordConstant */
.chroma .kc {
@apply font-semibold text-secondary-400 dark:text-secondary-500;
}
-/* KeywordDeclaration */
-.chroma .kd {
- @apply text-primary-600 dark:text-primary-300;
-}
-/* KeywordNamespace */
-.chroma .kn {
- @apply text-primary-600 dark:text-primary-300;
-}
-/* KeywordPseudo */
-.chroma .kp {
- @apply text-primary-600 dark:text-primary-300;
-}
-/* KeywordReserved */
-.chroma .kr {
- @apply text-primary-600 dark:text-primary-300;
-}
/* KeywordType */
-.chroma .kt {
+/* NameVariable */
+/* NameVariableInstance */
+/* NameVariableMagic */
+/* LiteralNumber */
+/* LiteralNumberBin */
+/* LiteralNumberFloat */
+/* LiteralNumberHex */
+/* LiteralNumberInteger */
+/* LiteralNumberIntegerLong */
+/* LiteralNumberOct */
+.chroma .kt,
+.chroma .nv,
+.chroma .vi,
+.chroma .vm,
+.chroma .m,
+.chroma .mb,
+.chroma .mf,
+.chroma .mh,
+.chroma .mi,
+.chroma .il,
+.chroma .mo {
@apply text-secondary-400 dark:text-secondary-600;
}
/* Name */
-.chroma .n {
+/* NameDecorator */
+/* NameEntity */
+/* NameLabel */
+.chroma .n,
+.chroma .nd,
+.chroma .ni,
+.chroma .nl {
@apply text-secondary-900 dark:text-secondary-200;
}
/* NameAttribute */
-.chroma .na {
- @apply text-secondary-800 dark:text-secondary-300;
-}
/* NameBuiltin */
-.chroma .nb {
- @apply text-secondary-800 dark:text-secondary-300;
-}
/* NameBuiltinPseudo */
-.chroma .bp {
+/* NameOther */
+/* NameProperty */
+/* NameTag */
+.chroma .na,
+.chroma .nb,
+.chroma .bp,
+.chroma .nx,
+.chroma .py,
+.chroma .nt {
@apply text-secondary-800 dark:text-secondary-300;
}
-/* NameClass */
-.chroma .nc {
- @apply text-primary-600 dark:text-primary-300;
-}
/* NameConstant */
-.chroma .no {
- @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-/* NameDecorator */
-.chroma .nd {
- @apply text-secondary-900 dark:text-secondary-200;
-}
-/* NameEntity */
-.chroma .ni {
- @apply text-secondary-900 dark:text-secondary-200;
-}
/* NameException */
-.chroma .ne {
+/* NameVariableGlobal */
+.chroma .no,
+.chroma .ne,
+.chroma .vg {
@apply font-semibold text-secondary-400 dark:text-secondary-500;
}
/* NameFunction */
.chroma .nf {
@apply text-secondary-600 dark:text-secondary-500;
}
-/* NameFunctionMagic */
-.chroma .fm {
- @apply text-primary-600 dark:text-primary-300;
-}
-/* NameLabel */
-.chroma .nl {
- @apply text-secondary-900 dark:text-secondary-200;
-}
-/* NameNamespace */
-.chroma .nn {
- @apply text-primary-600 dark:text-primary-300;
-}
-/* NameOther */
-.chroma .nx {
- @apply text-secondary-800 dark:text-secondary-300;
-}
-/* NameProperty */
-.chroma .py {
- color: #cebc3a;
-}
-/* NameTag */
-.chroma .nt {
- @apply text-secondary-800 dark:text-secondary-300;
-}
-/* NameVariable */
-.chroma .nv {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* NameVariableClass */
-.chroma .vc {
- @apply text-primary-600 dark:text-primary-300;
-}
-/* NameVariableGlobal */
-.chroma .vg {
- @apply font-semibold text-secondary-400 dark:text-secondary-500;
-}
-/* NameVariableInstance */
-.chroma .vi {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* NameVariableMagic */
-.chroma .vm {
- @apply text-secondary-400 dark:text-secondary-600;
-}
/* Literal */
-.chroma .l {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralDate */
-.chroma .ld {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralString */
-.chroma .s {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringAffix */
-.chroma .sa {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringBacktick */
-.chroma .sb {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringChar */
-.chroma .sc {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringDelimiter */
-.chroma .dl {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringDoc */
-.chroma .sd {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringDouble */
-.chroma .s2 {
+/* LiteralStringHeredoc */
+/* LiteralStringInterpol */
+/* LiteralStringOther */
+/* LiteralStringSingle */
+/* GenericInserted */
+/* GenericOutput */
+/* GenericPrompt */
+.chroma .l,
+.chroma .ld,
+.chroma .s,
+.chroma .sa,
+.chroma .sb,
+.chroma .sc,
+.chroma .dl,
+.chroma .sd,
+.chroma .s2,
+.chroma .sh,
+.chroma .si,
+.chroma .sx,
+.chroma .s1,
+.chroma .gi,
+.chroma .go,
+.chroma .gp {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringEscape */
.chroma .se {
@apply font-semibold text-secondary-400 dark:text-secondary-500;
}
-/* LiteralStringHeredoc */
-.chroma .sh {
- @apply text-primary-800 dark:text-primary-400;
-}
-/* LiteralStringInterpol */
-.chroma .si {
- @apply text-primary-800 dark:text-primary-400;
-}
-/* LiteralStringOther */
-.chroma .sx {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringRegex */
-.chroma .sr {
- @apply font-semibold text-primary-800 dark:text-primary-400;
-}
-/* LiteralStringSingle */
-.chroma .s1 {
- @apply text-primary-800 dark:text-primary-400;
-}
/* LiteralStringSymbol */
+.chroma .sr,
.chroma .ss {
@apply font-semibold text-primary-800 dark:text-primary-400;
}
-/* LiteralNumber */
-.chroma .m {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberBin */
-.chroma .mb {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberFloat */
-.chroma .mf {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberHex */
-.chroma .mh {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberInteger */
-.chroma .mi {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberIntegerLong */
-.chroma .il {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* LiteralNumberOct */
-.chroma .mo {
- @apply text-secondary-400 dark:text-secondary-600;
-}
-/* Operator */
-.chroma .o {
- @apply text-primary-600;
-}
/* OperatorWord */
.chroma .ow {
@apply font-semibold text-primary-400 dark:text-primary-600;
}
-/* Punctuation */
-.chroma .p {
-}
/* Comment */
-.chroma .c {
+/* CommentMultiline */
+/* CommentSingle */
+/* CommentSpecial */
+/* CommentPreproc */
+/* CommentPreprocFile */
+.chroma .c,
+.chroma .cm,
+.chroma .c1,
+.chroma .cs,
+.chroma .cp,
+.chroma .cpf {
@apply italic text-neutral-500 dark:text-neutral-400;
}
/* CommentHashbang */
.chroma .ch {
@apply italic font-semibold text-neutral-500 dark:text-neutral-400;
}
-/* CommentMultiline */
-.chroma .cm {
- @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentSingle */
-.chroma .c1 {
- @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentSpecial */
-.chroma .cs {
- @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentPreproc */
-.chroma .cp {
- @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* CommentPreprocFile */
-.chroma .cpf {
- @apply italic text-neutral-500 dark:text-neutral-400;
-}
-/* Generic */
-.chroma .g {
-}
-/* GenericDeleted */
-.chroma .gd {
-}
/* GenericEmph */
.chroma .ge {
@apply italic;
}
-/* GenericError */
-.chroma .gr {
-}
/* GenericHeading */
.chroma .gh {
@apply font-semibold text-neutral-500;
}
-/* GenericInserted */
-.chroma .gi {
- @apply text-primary-800 dark:text-primary-400;
-}
-/* GenericOutput */
-.chroma .go {
- @apply text-primary-800 dark:text-primary-400;
-}
-/* GenericPrompt */
-.chroma .gp {
- @apply text-primary-800 dark:text-primary-400;
-}
/* GenericStrong */
.chroma .gs {
@apply font-semibold;
}
/* GenericSubheading */
-.chroma .gu {
- @apply text-neutral-500;
-}
/* GenericTraceback */
+.chroma .gu,
.chroma .gt {
@apply text-neutral-500;
}
@@ -401,8 +264,5 @@ body button {
.chroma .gl {
@apply underline;
}
-/* TextWhitespace */
-.chroma .w {
-}
@tailwind utilities;
diff --git a/exampleSite/content/samples/markdown.md b/exampleSite/content/samples/markdown.md
index c870d277..bcf0d0e0 100755
--- a/exampleSite/content/samples/markdown.md
+++ b/exampleSite/content/samples/markdown.md
@@ -81,7 +81,7 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
### Code block indented with four spaces
-
+
@@ -94,9 +94,9 @@ Tables aren't part of the core Markdown spec, but Hugo supports supports them ou
### Code block with Hugo's internal highlight shortcode
-{{< highlight html >}}
+{{< highlight html "linenos=table,hl_lines=4 7-9" >}}
-
+
diff --git a/layouts/_default/_markup/render-heading.html b/layouts/_default/_markup/render-heading.html
index 7415d617..6ec0406a 100644
--- a/layouts/_default/_markup/render-heading.html
+++ b/layouts/_default/_markup/render-heading.html
@@ -1 +1 @@
-{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}#{{ end }}
+{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}#{{ end }}