marcel
/
congo
mirror of https://github.com/jpanther/congo.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

♻️ Reduce repetition in main CSS

pull/100/head
James Panther 2022-01-17 13:21:21 +11:00
parent 8d91a79e56
commit 30fad56aed
No known key found for this signature in database
GPG Key ID: D36F789E45745D17
4 changed files with 257 additions and 924 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

803
assets/css/compiled/main.css
View File

File diff suppressed because it is too large Load Diff

370
assets/css/main.css
View File

@ -5,13 +5,12 @@
body a, body a,
body button { body button {
@apply transition; @apply transition-colors;
} }
/* Scale SVG icons to text size */ /* Scale SVG icons to text size */
.icon svg { .icon svg {
height: 1em; @apply h-[1em] w-[1em];
width: 1em;
} }
/* Search */ /* Search */
@ -23,11 +22,6 @@ body button {
} }
/* Heading anchors */ /* Heading anchors */
.prose .heading-anchor {
@apply absolute top-0 no-underline opacity-0;
width: 1.1em;
left: -1.1em;
}
.prose .heading-anchor:hover { .prose .heading-anchor:hover {
@apply underline bg-transparent text-primary-500 !important; @apply underline bg-transparent text-primary-500 !important;
} }
@ -36,41 +30,36 @@ body button {
.prose h2:hover > .heading-anchor, .prose h2:hover > .heading-anchor,
.prose h3:hover > .heading-anchor, .prose h3:hover > .heading-anchor,
.prose h4:hover > .heading-anchor { .prose h4:hover > .heading-anchor {
@apply opacity-100; @apply no-underline opacity-100 text-primary-200;
} }
/* Article pagination */ /* Article pagination */
.article-pagination a:hover .article-pagination-title { .article-pagination a:hover .article-pagination-title {
@apply underline decoration-primary-500; @apply underline decoration-primary-500;
} }
.article-pagination a:hover .article-pagination-direction { .article-pagination a:hover .article-pagination-direction {
@apply text-primary-700 dark:text-primary-400; @apply text-primary-700 dark:text-primary-400;
} }
/* RTL support */ /* RTL support */
[dir="rtl"] .prose blockquote { .prose blockquote {
@apply pr-4 border-l-0 border-r-4; @apply rtl:pr-4 rtl:border-l-0 rtl:border-r-4;
} }
.prose ul > li,
[dir="rtl"] .prose ul > li, .prose ol > li {
[dir="rtl"] .prose ol > li { @apply rtl:pl-0 rtl:pr-2 rtl:mr-7;
@apply pl-0 pr-2 mr-7;
} }
.prose ol > li:before,
[dir="rtl"] .prose ol > li:before, .prose ul > li:before {
[dir="rtl"] .prose ul > li:before { @apply rtl:left-auto rtl:right-1;
@apply left-auto right-1;
} }
.prose thead td:first-child,
[dir="rtl"] .prose thead td:first-child, .prose thead th:first-child {
[dir="rtl"] .prose thead th:first-child { @apply rtl:pr-0;
@apply pr-0;
} }
.prose thead td:last-child,
[dir="rtl"] .prose thead td:last-child, .prose thead th:last-child {
[dir="rtl"] .prose thead th:last-child { @apply rtl:pl-0;
@apply pl-0;
} }
/* -- Chroma Highlight -- */ /* -- Chroma Highlight -- */
@ -78,12 +67,6 @@ body button {
.prose .chroma { .prose .chroma {
@apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200; @apply rounded-md text-neutral-700 bg-neutral-50 dark:bg-neutral-700 dark:text-neutral-200;
} }
/* Other */
.chroma .x {
}
/* Error */
.chroma .err {
}
/* LineTableTD */ /* LineTableTD */
.chroma .lntd, .chroma .lntd,
.chroma .lntd pre { .chroma .lntd pre {
@ -102,298 +85,178 @@ body button {
@apply p-0 m-0; @apply p-0 m-0;
} }
/* LineNumbersTable */ /* LineNumbersTable */
.chroma .lnt {
@apply text-neutral-600 dark:text-neutral-300;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
}
/* LineNumbers */ /* LineNumbers */
.chroma .lnt,
.chroma .ln { .chroma .ln {
@apply text-neutral-600 dark:text-neutral-300; @apply text-neutral-600 dark:text-neutral-300 mr-[0.4em] px-[0.4em] py-0;
margin-right: 0.4em;
padding: 0 0.4em 0 0.4em;
} }
/* Keyword */ /* 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; @apply text-primary-600 dark:text-primary-300;
} }
/* KeywordConstant */ /* KeywordConstant */
.chroma .kc { .chroma .kc {
@apply font-semibold text-secondary-400 dark:text-secondary-500; @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 */ /* 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; @apply text-secondary-400 dark:text-secondary-600;
} }
/* Name */ /* Name */
.chroma .n { /* NameDecorator */
/* NameEntity */
/* NameLabel */
.chroma .n,
.chroma .nd,
.chroma .ni,
.chroma .nl {
@apply text-secondary-900 dark:text-secondary-200; @apply text-secondary-900 dark:text-secondary-200;
} }
/* NameAttribute */ /* NameAttribute */
.chroma .na {
@apply text-secondary-800 dark:text-secondary-300;
}
/* NameBuiltin */ /* NameBuiltin */
.chroma .nb {
@apply text-secondary-800 dark:text-secondary-300;
}
/* NameBuiltinPseudo */ /* 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; @apply text-secondary-800 dark:text-secondary-300;
} }
/* NameClass */
.chroma .nc {
@apply text-primary-600 dark:text-primary-300;
}
/* NameConstant */ /* 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 */ /* NameException */
.chroma .ne { /* NameVariableGlobal */
.chroma .no,
.chroma .ne,
.chroma .vg {
@apply font-semibold text-secondary-400 dark:text-secondary-500; @apply font-semibold text-secondary-400 dark:text-secondary-500;
} }
/* NameFunction */ /* NameFunction */
.chroma .nf { .chroma .nf {
@apply text-secondary-600 dark:text-secondary-500; @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 */ /* Literal */
.chroma .l {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralDate */ /* LiteralDate */
.chroma .ld {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralString */ /* LiteralString */
.chroma .s {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringAffix */ /* LiteralStringAffix */
.chroma .sa {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringBacktick */ /* LiteralStringBacktick */
.chroma .sb {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringChar */ /* LiteralStringChar */
.chroma .sc {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringDelimiter */ /* LiteralStringDelimiter */
.chroma .dl {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringDoc */ /* LiteralStringDoc */
.chroma .sd {
@apply text-primary-800 dark:text-primary-400;
}
/* LiteralStringDouble */ /* 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; @apply text-primary-800 dark:text-primary-400;
} }
/* LiteralStringEscape */ /* LiteralStringEscape */
.chroma .se { .chroma .se {
@apply font-semibold text-secondary-400 dark:text-secondary-500; @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 */ /* 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 */ /* LiteralStringSymbol */
.chroma .sr,
.chroma .ss { .chroma .ss {
@apply font-semibold text-primary-800 dark:text-primary-400; @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 */ /* OperatorWord */
.chroma .ow { .chroma .ow {
@apply font-semibold text-primary-400 dark:text-primary-600; @apply font-semibold text-primary-400 dark:text-primary-600;
} }
/* Punctuation */
.chroma .p {
}
/* Comment */ /* 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; @apply italic text-neutral-500 dark:text-neutral-400;
} }
/* CommentHashbang */ /* CommentHashbang */
.chroma .ch { .chroma .ch {
@apply italic font-semibold text-neutral-500 dark:text-neutral-400; @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 */ /* GenericEmph */
.chroma .ge { .chroma .ge {
@apply italic; @apply italic;
} }
/* GenericError */
.chroma .gr {
}
/* GenericHeading */ /* GenericHeading */
.chroma .gh { .chroma .gh {
@apply font-semibold text-neutral-500; @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 */ /* GenericStrong */
.chroma .gs { .chroma .gs {
@apply font-semibold; @apply font-semibold;
} }
/* GenericSubheading */ /* GenericSubheading */
.chroma .gu {
@apply text-neutral-500;
}
/* GenericTraceback */ /* GenericTraceback */
.chroma .gu,
.chroma .gt { .chroma .gt {
@apply text-neutral-500; @apply text-neutral-500;
} }
@ -401,8 +264,5 @@ body button {
.chroma .gl { .chroma .gl {
@apply underline; @apply underline;
} }
/* TextWhitespace */
.chroma .w {
}
@tailwind utilities; @tailwind utilities;

6
exampleSite/content/samples/markdown.md
View File

@ -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 ### Code block indented with four spaces
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
@ -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 ### Code block with Hugo's internal highlight shortcode
{{< highlight html >}} {{< highlight html "linenos=table,hl_lines=4 7-9" >}}
<!doctype html> <!DOCTYPE html>
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">

2
layouts/_default/_markup/render-heading.html
View File

@ -1 +1 @@
<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="heading-anchor" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}> <h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }} {{ if .Page.Params.showHeadingAnchors | default (.Page.Site.Params.article.showHeadingAnchors | default true) }}<a class="absolute top-0 w-5 no-underline transition-opacity opacity-0 heading-anchor ltr:-left-6 rtl:-right-6" href="#{{ .Anchor | safeURL }}" aria-label="{{ i18n "article.anchor_label" }}">#</a>{{ end }}</h{{ .Level }}>