From 1dccaa30aee29be4cbd11b4c051eeaa3ca093d3d Mon Sep 17 00:00:00 2001 From: tdro Date: Tue, 5 Dec 2023 14:05:22 -0500 Subject: assets/css: Add simple alternate --- assets/css/default-simple.css | 40 ++++++ assets/css/default-syntax.css | 228 ++++++++++++++++++++++++++++++++ assets/css/syntax-highlight-default.css | 228 -------------------------------- 3 files changed, 268 insertions(+), 228 deletions(-) create mode 100644 assets/css/default-simple.css create mode 100644 assets/css/default-syntax.css delete mode 100644 assets/css/syntax-highlight-default.css (limited to 'assets/css') diff --git a/assets/css/default-simple.css b/assets/css/default-simple.css new file mode 100644 index 0000000..ffc9f07 --- /dev/null +++ b/assets/css/default-simple.css @@ -0,0 +1,40 @@ +column-base[position="left"], +column-base[position="right"] { + opacity: 0.1; + transition: 2s; +} + +column-base[position="left"]:hover, +column-base[position="right"]:hover { + opacity: 0.9; + transition: 0.1s; +} + +micro-card[id] micro-metadata { + display: block; +} + +micro-card[id] micro-summary { + flex-direction: row; + padding: 1.25rem 1rem; +} + +micro-card[id] micro-summary > article { + margin: auto 0; + min-width: 0; +} + +micro-card[id] micro-summary > article > * { + width: 100%; +} + +micro-card[id] micro-summary > article > :nth-last-child(2) { + margin-bottom: 0; +} + +micro-card[id] micro-tags, +micro-card[id] micro-metadata header, +micro-card[id] micro-summary > article footer, +micro-card[id] micro-summary > article figcaption { + display: none; +} diff --git a/assets/css/default-syntax.css b/assets/css/default-syntax.css new file mode 100644 index 0000000..e6f7021 --- /dev/null +++ b/assets/css/default-syntax.css @@ -0,0 +1,228 @@ +/* ----- Format ----- */ + +.chroma .hl { + padding: 0 0.5rem; + margin: 0 -0.5rem; +} + +.chroma .line { + display: block; +} + +.chroma .hl > .cl:before, +.chroma .ln a:hover:before, +.chroma .ln:target a:before, +.chroma .line > .cl:hover:before { + content: ""; + position: absolute; + height: 1.5rem; + width: 100%; + left: 0; + z-index: -1; +} + +.chroma .ln a { + padding: 0.05rem 0.75rem; + margin: 0 1rem 0 -0.75rem; + user-select: none; + text-decoration: none; + display: inline-block; +} + +.chroma .ln a:hover, +.chroma .ln:target a { + outline: 0.15rem solid !important; + outline-offset: -0.3rem; +} + +.chroma .line .cl:hover { + text-shadow: 0 0 currentColor; +} + +.chroma .ln a:hover:before, +.chroma .ln:target a:before, +.chroma .line > .cl:hover:before { + background-color: #f2f2f2; +} + +code-block code { + position: relative; +} + +code-block button { + border: 1px solid #ccc; +} + +code-block header language-label a, +code-block header language-label a:hover { + color: #111; +} + +/* ------ Tokens ------ */ + +:root { +--code-chroma-background: #ffffff; +--code-chroma-foreground: #333333; +--code-chroma-error-background: #960050; +--code-chroma-error-foreground: #960050; +--code-chroma-label-background: #006894; +--code-chroma-label-foreground: #e6e6e6; +--code-chroma-line-highlight: #fff8c5; +--code-chroma-line-number: #375462; +--code-chroma-line-number-background: #edf2f7; +--code-chroma-line: var(--code-chroma-foreground); +} + +/* ChromaForeground */ code-block, .chroma, .highlight { color: #333333; color: var(--code-chroma-foreground); } +/* ChromaBackground */ code-block button, .chroma { background-color: #ffffff; background-color: var(--code-chroma-background); } +/* ChromaErrorBackground */ .chroma .err { color: #960050; color: var(--code-chroma-error-background); } +/* ChromaErrorForeground */ .chroma .err { color: #960050; color: var(--code-chroma-error-foreground); } +/* ChromaLabelBackground */ .chroma code:before { background-color: #006894; background-color: var(--code-chroma-label-background); } +/* ChromaLabelForeground */ .chroma code:before { color: #e6e6e6; color: var(--code-chroma-label-foreground); } +/* ChromaLine */ .chroma .line { color: #333333; color: var(--code-chroma-line); } +/* ChromaLineHighlight */ .chroma .hl > span:before { background-color: #fff8c5; background-color: var(--code-chroma-line-highlight); } +/* ChromaLineNumber */ .chroma .ln a { color: #375462 !important; color: var(--code-chroma-line-number) !important; } +/* ChromaLineNumberBackground */ .chroma .ln a { background-color: #edf2f7; background-color: var(--code-chroma-line-number-background); } + +:root { + --code-comment: #4f4f4f; + --code-comment-hashbang: var(--code-comment); + --code-comment-multiline: var(--code-comment); + --code-comment-preproc: #222222; + --code-comment-preproc-file: #005194; + --code-comment-single: var(--code-comment); + --code-comment-special: var(--code-comment); +} + +/* Comment */ .chroma .c { color: #222222; color: var(--code-comment); } +/* CommentHashbang */ .chroma .ch { color: #222222; color: var(--code-comment-hashbang); } +/* CommentMultiline */ .chroma .cm { color: #222222; color: var(--code-comment-multiline); } +/* CommentPreproc */ .chroma .cp { color: #222222; color: var(--code-comment-preproc); } +/* CommentPreprocFile */ .chroma .cpf { color: #005194; color: var(--code-comment-preproc-file); } +/* CommentSingle */ .chroma .c1 { color: #4f4f4f; color: var(--code-comment-single); } +/* CommentSpecial */ .chroma .cs { color: #222222; color: var(--code-comment-special); } + +:root { + --code-generic-deleted: #8d1007; + --code-generic-inserted: #224e24; + --code-generic-subheading: #2d4958; + --code-generic-tag: var(--code-generic); + --code-generic: #2d4958; +} + +/* GenericDeleted */ .chroma .gd { color: #8d1007; color: var(--code-generic-deleted); } +/* GenericInserted */ .chroma .gi { color: #224e24; color: var(--code-generic-inserted); } +/* GenericSubheading */ .chroma .gu { color: #2d4958; color: var(--code-generic-subheading); } +/* GenericStrong */ .chroma .gs { font-weight: 700; } +/* GenericEmph */ .chroma .ge { font-style: italic; } + +.chroma .gi { background-color: #e6ffed; padding: 0.25rem 0; } +.chroma .gd { background-color: #ffebe9; padding: 0.25rem 0; } + +:root { + --code-keyword: #4f4f59; + --code-keyword-constant: #07518d; + --code-keyword-declaration: var(--code-keyword); + --code-keyword-namespace: var(--code-keyword); + --code-keyword-pseudo: var(--code-keyword); + --code-keyword-reserved: var(--code-keyword); + --code-keyword-type: #36590d; +} + +/* Keyword */ .chroma .k { color: #4f4f59; color: var(--code-keyword); } +/* KeywordConstant */ .chroma .kc { color: #07518d; color: var(--code-keyword-constant); } +/* KeywordDeclaration */ .chroma .kd { color: #4f4f59; color: var(--code-keyword-declaration); } +/* KeywordNamespace */ .chroma .kn { color: #4f4f59; color: var(--code-keyword-namespace); } +/* KeywordPseudo */ .chroma .kp { color: #4f4f59; color: var(--code-keyword-pseudo); } +/* KeywordReserved */ .chroma .kr { color: #4f4f59; color: var(--code-keyword-reserved); } +/* KeywordType */ .chroma .kt { color: #36590d; color: var(--code-keyword-type); } + +:root { + --code-literal: #744601; + --code-literal-date: var(--code-literal); + --code-literal-number: var(--code-literal); + --code-literal-number-bin: var(--code-literal); + --code-literal-number-float: var(--code-literal); + --code-literal-number-hex: var(--code-literal); + --code-literal-number-integer: var(--code-literal); + --code-literal-number-integer-long: var(--code-literal); + --code-literal-number-oct: var(--code-literal); + --code-literal-string: #664d00; + --code-literal-string-affix: #664d00; + --code-literal-string-backtick: #664d00; + --code-literal-string-char: #664d00; + --code-literal-string-delimiter: #664d00; + --code-literal-string-doc: #4f4f59; + --code-literal-string-double: #664d00; + --code-literal-string-escape: #664d00; + --code-literal-string-heredoc: #664d00; + --code-literal-string-interpol: #664d00; + --code-literal-string-other: #664d00; + --code-literal-string-regex: #942e51; + --code-literal-string-single: #664d00; + --code-literal-string-symbol: #664d00; +} + +/* Literal */ .chroma .l { color: #744601; color: var(--code-literal); } +/* LiteralDate */ .chroma .ld { color: #744601; color: var(--code-literal-date); } +/* LiteralNumber */ .chroma .m { color: #744601; color: var(--code-literal-number); } +/* LiteralNumberBin */ .chroma .mb { color: #744601; color: var(--code-literal-number-bin); } +/* LiteralNumberFloat */ .chroma .mf { color: #744601; color: var(--code-literal-number-float); } +/* LiteralNumberHex */ .chroma .mh { color: #744601; color: var(--code-literal-number-hex); } +/* LiteralNumberInteger */ .chroma .mi { color: #744601; color: var(--code-literal-number-integer); } +/* LiteralNumberIntegerLong */ .chroma .il { color: #744601; color: var(--code-literal-number-integer-long); } +/* LiteralNumberOct */ .chroma .mo { color: #744601; color: var(--code-literal-number-oct); } +/* LiteralString */ .chroma .s { color: #664d00; color: var(--code-literal-string); } +/* LiteralStringAffix */ .chroma .sa { color: #664d00; color: var(--code-literal-string-affix); } +/* LiteralStringBacktick */ .chroma .sb { color: #664d00; color: var(--code-literal-string-backtick); } +/* LiteralStringChar */ .chroma .sc { color: #664d00; color: var(--code-literal-string-char); } +/* LiteralStringDelimiter */ .chroma .dl { color: #664d00; color: var(--code-literal-string-delimiter); } +/* LiteralStringDoc */ .chroma .sd { color: #4f4f59; color: var(--code-literal-string-doc); } +/* LiteralStringDouble */ .chroma .s2 { color: #664d00; color: var(--code-literal-string-double); } +/* LiteralStringEscape */ .chroma .se { color: #664d00; color: var(--code-literal-string-escape); } +/* LiteralStringHeredoc */ .chroma .sh { color: #664d00; color: var(--code-literal-string-heredoc); } +/* LiteralStringInterpol */ .chroma .si { color: #664d00; color: var(--code-literal-string-interpol); } +/* LiteralStringOther */ .chroma .sx { color: #664d00; color: var(--code-literal-string-other); } +/* LiteralStringRegex */ .chroma .sr { color: #942e51; color: var(--code-literal-string-regex); } +/* LiteralStringSingle */ .chroma .s1 { color: #664d00; color: var(--code-literal-string-single); } +/* LiteralStringSymbol */ .chroma .ss { color: #664d00; color: var(--code-literal-string-symbol); } + +:root { + --code-name: #6d2caa; + --code-name-attribute: #6d2caa; + --code-name-builtin: #222222; + --code-name-class: var(--code-name); + --code-name-constant: var(--code-name); + --code-name-decorator: var(--code-name); + --code-name-exception: var(--code-name); + --code-name-function: var(--code-name); + --code-name-other: var(--code-name); + --code-name-tag: var(--code-name); + --code-name-variable: #005194; +} + +/* Name */ .chroma .n { color: #6d2caa; color: var(--code-name); } +/* NameAttribute */ .chroma .na { color: #6d2caa; color: var(--code-name-attribute); } +/* NameBuiltin */ .chroma .nb { color: #222222; color: var(--code-name-builtin); } +/* NameClass */ .chroma .nc { color: #6d2caa; color: var(--code-name-class); } +/* NameConstant */ .chroma .no { color: #6d2caa; color: var(--code-name-constant); } +/* NameDecorator */ .chroma .nd { color: #6d2caa; color: var(--code-name-decorator); } +/* NameException */ .chroma .ne { color: #6d2caa; color: var(--code-name-exception); } +/* NameFunction */ .chroma .nf { color: #6d2caa; color: var(--code-name-function); } +/* NameOther */ .chroma .nx { color: #6d2caa; color: var(--code-name-other); } +/* NameTag */ .chroma .nt { color: #6d2caa; color: var(--code-name-tag); } +/* NameVariable */ .chroma .nv { color: #005194; color: var(--code-name-variable); } + +:root { + --code-operator: #4f4f59; + --code-operator-word: var(--code-operator); +} + +/* Operator */ .chroma .o { color: #4f4f59; color: var(--code-operator); } +/* OperatorWord */ .chroma .ow { color: #4f4f59; color: var(--code-operator-word); } + +:root { + --code-punctuation: #4f4f4f; +} + +/* Punctuation */ .chroma .p { color: #4f4f4f; color: var(--code-punctuation); } diff --git a/assets/css/syntax-highlight-default.css b/assets/css/syntax-highlight-default.css deleted file mode 100644 index e6f7021..0000000 --- a/assets/css/syntax-highlight-default.css +++ /dev/null @@ -1,228 +0,0 @@ -/* ----- Format ----- */ - -.chroma .hl { - padding: 0 0.5rem; - margin: 0 -0.5rem; -} - -.chroma .line { - display: block; -} - -.chroma .hl > .cl:before, -.chroma .ln a:hover:before, -.chroma .ln:target a:before, -.chroma .line > .cl:hover:before { - content: ""; - position: absolute; - height: 1.5rem; - width: 100%; - left: 0; - z-index: -1; -} - -.chroma .ln a { - padding: 0.05rem 0.75rem; - margin: 0 1rem 0 -0.75rem; - user-select: none; - text-decoration: none; - display: inline-block; -} - -.chroma .ln a:hover, -.chroma .ln:target a { - outline: 0.15rem solid !important; - outline-offset: -0.3rem; -} - -.chroma .line .cl:hover { - text-shadow: 0 0 currentColor; -} - -.chroma .ln a:hover:before, -.chroma .ln:target a:before, -.chroma .line > .cl:hover:before { - background-color: #f2f2f2; -} - -code-block code { - position: relative; -} - -code-block button { - border: 1px solid #ccc; -} - -code-block header language-label a, -code-block header language-label a:hover { - color: #111; -} - -/* ------ Tokens ------ */ - -:root { ---code-chroma-background: #ffffff; ---code-chroma-foreground: #333333; ---code-chroma-error-background: #960050; ---code-chroma-error-foreground: #960050; ---code-chroma-label-background: #006894; ---code-chroma-label-foreground: #e6e6e6; ---code-chroma-line-highlight: #fff8c5; ---code-chroma-line-number: #375462; ---code-chroma-line-number-background: #edf2f7; ---code-chroma-line: var(--code-chroma-foreground); -} - -/* ChromaForeground */ code-block, .chroma, .highlight { color: #333333; color: var(--code-chroma-foreground); } -/* ChromaBackground */ code-block button, .chroma { background-color: #ffffff; background-color: var(--code-chroma-background); } -/* ChromaErrorBackground */ .chroma .err { color: #960050; color: var(--code-chroma-error-background); } -/* ChromaErrorForeground */ .chroma .err { color: #960050; color: var(--code-chroma-error-foreground); } -/* ChromaLabelBackground */ .chroma code:before { background-color: #006894; background-color: var(--code-chroma-label-background); } -/* ChromaLabelForeground */ .chroma code:before { color: #e6e6e6; color: var(--code-chroma-label-foreground); } -/* ChromaLine */ .chroma .line { color: #333333; color: var(--code-chroma-line); } -/* ChromaLineHighlight */ .chroma .hl > span:before { background-color: #fff8c5; background-color: var(--code-chroma-line-highlight); } -/* ChromaLineNumber */ .chroma .ln a { color: #375462 !important; color: var(--code-chroma-line-number) !important; } -/* ChromaLineNumberBackground */ .chroma .ln a { background-color: #edf2f7; background-color: var(--code-chroma-line-number-background); } - -:root { - --code-comment: #4f4f4f; - --code-comment-hashbang: var(--code-comment); - --code-comment-multiline: var(--code-comment); - --code-comment-preproc: #222222; - --code-comment-preproc-file: #005194; - --code-comment-single: var(--code-comment); - --code-comment-special: var(--code-comment); -} - -/* Comment */ .chroma .c { color: #222222; color: var(--code-comment); } -/* CommentHashbang */ .chroma .ch { color: #222222; color: var(--code-comment-hashbang); } -/* CommentMultiline */ .chroma .cm { color: #222222; color: var(--code-comment-multiline); } -/* CommentPreproc */ .chroma .cp { color: #222222; color: var(--code-comment-preproc); } -/* CommentPreprocFile */ .chroma .cpf { color: #005194; color: var(--code-comment-preproc-file); } -/* CommentSingle */ .chroma .c1 { color: #4f4f4f; color: var(--code-comment-single); } -/* CommentSpecial */ .chroma .cs { color: #222222; color: var(--code-comment-special); } - -:root { - --code-generic-deleted: #8d1007; - --code-generic-inserted: #224e24; - --code-generic-subheading: #2d4958; - --code-generic-tag: var(--code-generic); - --code-generic: #2d4958; -} - -/* GenericDeleted */ .chroma .gd { color: #8d1007; color: var(--code-generic-deleted); } -/* GenericInserted */ .chroma .gi { color: #224e24; color: var(--code-generic-inserted); } -/* GenericSubheading */ .chroma .gu { color: #2d4958; color: var(--code-generic-subheading); } -/* GenericStrong */ .chroma .gs { font-weight: 700; } -/* GenericEmph */ .chroma .ge { font-style: italic; } - -.chroma .gi { background-color: #e6ffed; padding: 0.25rem 0; } -.chroma .gd { background-color: #ffebe9; padding: 0.25rem 0; } - -:root { - --code-keyword: #4f4f59; - --code-keyword-constant: #07518d; - --code-keyword-declaration: var(--code-keyword); - --code-keyword-namespace: var(--code-keyword); - --code-keyword-pseudo: var(--code-keyword); - --code-keyword-reserved: var(--code-keyword); - --code-keyword-type: #36590d; -} - -/* Keyword */ .chroma .k { color: #4f4f59; color: var(--code-keyword); } -/* KeywordConstant */ .chroma .kc { color: #07518d; color: var(--code-keyword-constant); } -/* KeywordDeclaration */ .chroma .kd { color: #4f4f59; color: var(--code-keyword-declaration); } -/* KeywordNamespace */ .chroma .kn { color: #4f4f59; color: var(--code-keyword-namespace); } -/* KeywordPseudo */ .chroma .kp { color: #4f4f59; color: var(--code-keyword-pseudo); } -/* KeywordReserved */ .chroma .kr { color: #4f4f59; color: var(--code-keyword-reserved); } -/* KeywordType */ .chroma .kt { color: #36590d; color: var(--code-keyword-type); } - -:root { - --code-literal: #744601; - --code-literal-date: var(--code-literal); - --code-literal-number: var(--code-literal); - --code-literal-number-bin: var(--code-literal); - --code-literal-number-float: var(--code-literal); - --code-literal-number-hex: var(--code-literal); - --code-literal-number-integer: var(--code-literal); - --code-literal-number-integer-long: var(--code-literal); - --code-literal-number-oct: var(--code-literal); - --code-literal-string: #664d00; - --code-literal-string-affix: #664d00; - --code-literal-string-backtick: #664d00; - --code-literal-string-char: #664d00; - --code-literal-string-delimiter: #664d00; - --code-literal-string-doc: #4f4f59; - --code-literal-string-double: #664d00; - --code-literal-string-escape: #664d00; - --code-literal-string-heredoc: #664d00; - --code-literal-string-interpol: #664d00; - --code-literal-string-other: #664d00; - --code-literal-string-regex: #942e51; - --code-literal-string-single: #664d00; - --code-literal-string-symbol: #664d00; -} - -/* Literal */ .chroma .l { color: #744601; color: var(--code-literal); } -/* LiteralDate */ .chroma .ld { color: #744601; color: var(--code-literal-date); } -/* LiteralNumber */ .chroma .m { color: #744601; color: var(--code-literal-number); } -/* LiteralNumberBin */ .chroma .mb { color: #744601; color: var(--code-literal-number-bin); } -/* LiteralNumberFloat */ .chroma .mf { color: #744601; color: var(--code-literal-number-float); } -/* LiteralNumberHex */ .chroma .mh { color: #744601; color: var(--code-literal-number-hex); } -/* LiteralNumberInteger */ .chroma .mi { color: #744601; color: var(--code-literal-number-integer); } -/* LiteralNumberIntegerLong */ .chroma .il { color: #744601; color: var(--code-literal-number-integer-long); } -/* LiteralNumberOct */ .chroma .mo { color: #744601; color: var(--code-literal-number-oct); } -/* LiteralString */ .chroma .s { color: #664d00; color: var(--code-literal-string); } -/* LiteralStringAffix */ .chroma .sa { color: #664d00; color: var(--code-literal-string-affix); } -/* LiteralStringBacktick */ .chroma .sb { color: #664d00; color: var(--code-literal-string-backtick); } -/* LiteralStringChar */ .chroma .sc { color: #664d00; color: var(--code-literal-string-char); } -/* LiteralStringDelimiter */ .chroma .dl { color: #664d00; color: var(--code-literal-string-delimiter); } -/* LiteralStringDoc */ .chroma .sd { color: #4f4f59; color: var(--code-literal-string-doc); } -/* LiteralStringDouble */ .chroma .s2 { color: #664d00; color: var(--code-literal-string-double); } -/* LiteralStringEscape */ .chroma .se { color: #664d00; color: var(--code-literal-string-escape); } -/* LiteralStringHeredoc */ .chroma .sh { color: #664d00; color: var(--code-literal-string-heredoc); } -/* LiteralStringInterpol */ .chroma .si { color: #664d00; color: var(--code-literal-string-interpol); } -/* LiteralStringOther */ .chroma .sx { color: #664d00; color: var(--code-literal-string-other); } -/* LiteralStringRegex */ .chroma .sr { color: #942e51; color: var(--code-literal-string-regex); } -/* LiteralStringSingle */ .chroma .s1 { color: #664d00; color: var(--code-literal-string-single); } -/* LiteralStringSymbol */ .chroma .ss { color: #664d00; color: var(--code-literal-string-symbol); } - -:root { - --code-name: #6d2caa; - --code-name-attribute: #6d2caa; - --code-name-builtin: #222222; - --code-name-class: var(--code-name); - --code-name-constant: var(--code-name); - --code-name-decorator: var(--code-name); - --code-name-exception: var(--code-name); - --code-name-function: var(--code-name); - --code-name-other: var(--code-name); - --code-name-tag: var(--code-name); - --code-name-variable: #005194; -} - -/* Name */ .chroma .n { color: #6d2caa; color: var(--code-name); } -/* NameAttribute */ .chroma .na { color: #6d2caa; color: var(--code-name-attribute); } -/* NameBuiltin */ .chroma .nb { color: #222222; color: var(--code-name-builtin); } -/* NameClass */ .chroma .nc { color: #6d2caa; color: var(--code-name-class); } -/* NameConstant */ .chroma .no { color: #6d2caa; color: var(--code-name-constant); } -/* NameDecorator */ .chroma .nd { color: #6d2caa; color: var(--code-name-decorator); } -/* NameException */ .chroma .ne { color: #6d2caa; color: var(--code-name-exception); } -/* NameFunction */ .chroma .nf { color: #6d2caa; color: var(--code-name-function); } -/* NameOther */ .chroma .nx { color: #6d2caa; color: var(--code-name-other); } -/* NameTag */ .chroma .nt { color: #6d2caa; color: var(--code-name-tag); } -/* NameVariable */ .chroma .nv { color: #005194; color: var(--code-name-variable); } - -:root { - --code-operator: #4f4f59; - --code-operator-word: var(--code-operator); -} - -/* Operator */ .chroma .o { color: #4f4f59; color: var(--code-operator); } -/* OperatorWord */ .chroma .ow { color: #4f4f59; color: var(--code-operator-word); } - -:root { - --code-punctuation: #4f4f4f; -} - -/* Punctuation */ .chroma .p { color: #4f4f4f; color: var(--code-punctuation); } -- cgit v1.2.3