From cbce5ecbbaa4978d796b786d9d599c8e45031cc1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Thu, 17 Feb 2022 00:53:31 +0100 Subject: [PATCH] theme: add neon style #175 shameless inspiration of the GoboLinux wiki style --- exampleSite/config.toml | 2 +- layouts/partials/logo.html | 10 ++--- static/css/chroma-neon.css | 82 ++++++++++++++++++++++++++++++++++++++ static/css/theme-neon.css | 67 +++++++++++++++++++++++++++++++ static/css/theme.css | 19 ++++----- static/css/variant.css | 33 +++++++++++++-- 6 files changed, 195 insertions(+), 18 deletions(-) create mode 100644 static/css/chroma-neon.css create mode 100644 static/css/theme-neon.css diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 2f238bbae3..d8d0e199a9 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -36,7 +36,7 @@ title = "Hugo Relearn Documentation" disableLandingPageButton = true disableMermaid = false titleSeparator = "::" - themeVariant = [ "relearn-light", "relearn-dark", "learn", "blue", "green", "red" ] + themeVariant = [ "relearn-light", "relearn-dark", "learn", "neon", "blue", "green", "red" ] disableSeoHiddenPages = true [outputs] diff --git a/layouts/partials/logo.html b/layouts/partials/logo.html index 2e611ff85e..fddd1c95ee 100644 --- a/layouts/partials/logo.html +++ b/layouts/partials/logo.html @@ -1,7 +1,7 @@ \ No newline at end of file diff --git a/static/css/chroma-neon.css b/static/css/chroma-neon.css new file mode 100644 index 0000000000..04ad2c1cdc --- /dev/null +++ b/static/css/chroma-neon.css @@ -0,0 +1,82 @@ +/* Background */ .chroma { color: #f8f8f2; background-color: #000000 } +/* Other */ .chroma .x { } +/* Error */ .chroma .err { } +/* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } +/* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; width: auto; overflow: auto; display: block; } +/* LineHighlight */ .chroma .hl { display: block; width: 100%;background-color: #ffffcc } +/* LineNumbersTable */ .chroma .lnt { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7c7c79 } +/* LineNumbers */ .chroma .ln { margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #7c7c79 } +/* Keyword */ .chroma .k { color: #ff0000 } +/* KeywordConstant */ .chroma .kc { color: #ff0000 } +/* KeywordDeclaration */ .chroma .kd { color: #ff0000 } +/* KeywordNamespace */ .chroma .kn { color: #ff0000 } +/* KeywordPseudo */ .chroma .kp { color: #ff0000 } +/* KeywordReserved */ .chroma .kr { color: #ff0000 } +/* KeywordType */ .chroma .kt { color: #ee82ee } +/* Name */ .chroma .n { } +/* NameAttribute */ .chroma .na { } +/* NameBuiltin */ .chroma .nb { } +/* NameBuiltinPseudo */ .chroma .bp { } +/* NameClass */ .chroma .nc { } +/* NameConstant */ .chroma .no { color: #7fffd4 } +/* NameDecorator */ .chroma .nd { } +/* NameEntity */ .chroma .ni { } +/* NameException */ .chroma .ne { } +/* NameFunction */ .chroma .nf { color: #ffff00 } +/* NameFunctionMagic */ .chroma .fm { } +/* NameLabel */ .chroma .nl { } +/* NameNamespace */ .chroma .nn { } +/* NameOther */ .chroma .nx { } +/* NameProperty */ .chroma .py { } +/* NameTag */ .chroma .nt { } +/* NameVariable */ .chroma .nv { color: #eedd82 } +/* NameVariableClass */ .chroma .vc { } +/* NameVariableGlobal */ .chroma .vg { } +/* NameVariableInstance */ .chroma .vi { } +/* NameVariableMagic */ .chroma .vm { } +/* Literal */ .chroma .l { } +/* LiteralDate */ .chroma .ld { } +/* LiteralString */ .chroma .s { color: #87ceeb } +/* LiteralStringAffix */ .chroma .sa { color: #87ceeb } +/* LiteralStringBacktick */ .chroma .sb { color: #87ceeb } +/* LiteralStringChar */ .chroma .sc { color: #87ceeb } +/* LiteralStringDelimiter */ .chroma .dl { color: #87ceeb } +/* LiteralStringDoc */ .chroma .sd { color: #87ceeb } +/* LiteralStringDouble */ .chroma .s2 { color: #87ceeb } +/* LiteralStringEscape */ .chroma .se { color: #87ceeb } +/* LiteralStringHeredoc */ .chroma .sh { color: #87ceeb } +/* LiteralStringInterpol */ .chroma .si { color: #87ceeb } +/* LiteralStringOther */ .chroma .sx { color: #87ceeb } +/* LiteralStringRegex */ .chroma .sr { color: #87ceeb } +/* LiteralStringSingle */ .chroma .s1 { color: #87ceeb } +/* LiteralStringSymbol */ .chroma .ss { color: #ff6600 } +/* LiteralNumber */ .chroma .m { color: #ff6600 } +/* LiteralNumberBin */ .chroma .mb { color: #ff6600 } +/* LiteralNumberFloat */ .chroma .mf { color: #ff6600 } +/* LiteralNumberHex */ .chroma .mh { color: #ff6600 } +/* LiteralNumberInteger */ .chroma .mi { color: #ff6600 } +/* LiteralNumberIntegerLong */ .chroma .il { color: #ff6600 } +/* LiteralNumberOct */ .chroma .mo { color: #ff6600 } +/* Operator */ .chroma .o { } +/* OperatorWord */ .chroma .ow { } +/* Punctuation */ .chroma .p { } +/* Comment */ .chroma .c { color: #00ff00 } +/* CommentHashbang */ .chroma .ch { color: #00ff00 } +/* CommentMultiline */ .chroma .cm { color: #00ff00 } +/* CommentSingle */ .chroma .c1 { color: #00ff00 } +/* CommentSpecial */ .chroma .cs { color: #00ff00 } +/* CommentPreproc */ .chroma .cp { color: #e5e5e5 } +/* CommentPreprocFile */ .chroma .cpf { color: #e5e5e5 } +/* Generic */ .chroma .g { } +/* GenericDeleted */ .chroma .gd { } +/* GenericEmph */ .chroma .ge { } +/* GenericError */ .chroma .gr { } +/* GenericHeading */ .chroma .gh { } +/* GenericInserted */ .chroma .gi { } +/* GenericOutput */ .chroma .go { } +/* GenericPrompt */ .chroma .gp { } +/* GenericStrong */ .chroma .gs { } +/* GenericSubheading */ .chroma .gu { } +/* GenericTraceback */ .chroma .gt { } +/* GenericUnderline */ .chroma .gl { } +/* TextWhitespace */ .chroma .w { } diff --git a/static/css/theme-neon.css b/static/css/theme-neon.css new file mode 100644 index 0000000000..a4a1fecc53 --- /dev/null +++ b/static/css/theme-neon.css @@ -0,0 +1,67 @@ +/* here in this showcase we use our own modified chroma syntax highlightning style; + if you want to use a predefined style instead: + - remove `markup.highlight.noClasses` from your config.toml + - set `markup.highlight.style` to a predefined style name in your config.toml + - remove the following `@import` of the self-defined chroma stylesheet */ +@import "chroma-neon.css"; + +:root { + --MAIN-TEXT-color: #e0e0e0; /* Color of text by default */ + --MAIN-TITLES-TEXT-color: #ffffff; /* Color of titles h2-h3-h4-h5-h6 */ + + /* optional overwrites for specific headers */ + --MAIN-TITLES-H2-color: #f300b2; /* Color of h2 headlines */ + --MAIN-TITLES-H3-color: #00f3d3; /* Color of h3 headlines */ + --MAIN-TITLES-H4-color: #ffffff; /* Color of h3 headlines */ + + --MAIN-LINK-color: #1c90f3; /* Color of links */ + --MAIN-LINK-HOVER-color: #4cabff; /* Color of hovered links */ + --MAIN-ANCHOR-color: #1c90f3; /* color of anchors on titles */ + --MAIN-BG-color: #202020; /* color for code background */ + + /* adjusted to neon chroma style */ + --CODE-BLOCK-color: #f8f8f2; /* fallback color for block code text */ + --CODE-BLOCK-BG-color: #000000; /* fallback color for block code background */ + --CODE-BLOCK-BORDER-color: #000000; /* color of block code border */ + + --CODE-INLINE-color: #82e550; /* color for inline code text */ + --CODE-INLINE-BG-color: #282a36; /* color for inline code background */ + --CODE-INLINE-BORDER-color: #464646; /* color of inline code border */ + + --MENU-HOME-LINK-color: #323232; /* Color of the home button text */ + --MENU-HOME-LINK-HOVER-color: #5e5e5e; /* Color of the hovered home button text */ + + --MENU-HEADER-BG-color: unset; /* Background color of menu header */ + --MENU-HEADER-BORDER-color: transparent; /*Color of menu header border */ + + --MENU-SEARCH-color: #e0e0e0; /* Color of search field text */ + --MENU-SEARCH-BG-color: #323232; /* Search field background color (by default borders + icons) */ + --MENU-SEARCH-BOX-color: #e0e0e0; /* Override search field border color */ + + --MENU-SECTIONS-ACTIVE-BG-color: rgba( 0, 0, 0, .166 ); /* Background color of the active section and its children */ + --MENU-SECTIONS-BG-color: linear-gradient( + 150deg, + #9f3fffb3 0%, + #00bcf4b3 75%, + #00ff5ab3 100% + ); /* Background color of side bar */ + --MENU-SECTIONS-LINK-color: #ffffff; /* Color of links in menu */ + --MENU-SECTIONS-LINK-HOVER-color: #bababa; /* Color of links in menu, when hovered */ + --MENU-SECTION-ACTIVE-CATEGORY-color: #82e550; /* Color of active category text */ + --MENU-SECTION-ACTIVE-CATEGORY-BG-color: #202020; /* Color of background for the active category (only) */ + + --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */ + --MENU-SECTION-HR-color: #bababa; /* Color of
separator in menu */ + + /* base styling for boxes */ + --BOX-CAPTION-color: rgba( 240, 240, 240, 1 ); /* color of the title text */ + --BOX-BG-color: rgba( 20, 20, 20, 1 ); /* color of the content background */ + --BOX-TEXT-color: initial; /* automatic color of the content text */ + + /* optional base colors for colored boxes as in attachments and notice shortcode */ + --BOX-BLUE-color: rgba( 48, 117, 229, 1 ); + --BOX-GREEN-color: rgba( 42, 178, 24, 1 ); + --BOX-GREY-color: rgba( 128, 128, 128, 1 ); + --BOX-ORANGE-color: rgba( 237, 153, 9, 1 ); + --BOX-RED-color: rgba( 224, 62, 62, 1 ); +} diff --git a/static/css/theme.css b/static/css/theme.css index 9393dbe605..8e482936a6 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -87,7 +87,7 @@ th { } #sidebar { - background-color: #282830; /* var(--MENU-SECTIONS-BG-color) */ + background: #282830; /* var(--MENU-SECTIONS-BG-color) */ bottom: 0; display: flex; flex-direction: column; @@ -100,7 +100,7 @@ th { } #header-wrapper { - background-color: #7dc903; /* var(--MENU-HEADER-BG-color) */ + background: #7dc903; /* var(--MENU-HEADER-BG-color) */ color: #efefef; /* var(--MENU-SEARCH-color) */ text-align: center; border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */ @@ -461,6 +461,14 @@ th { text-align: justify; } +h1 { + color: #101010; /* var(--MAIN-TEXT-color) */ + font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; + font-weight: 200; + text-align: center; + text-transform: uppercase; +} + h2, h3, h4, h5, h6 { color: #444753; /* var(--MAIN-TITLES-TEXT-color) */ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; @@ -468,13 +476,6 @@ h2, h3, h4, h5, h6 { text-rendering: optimizeLegibility; } -h1 { - font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; - font-weight: 200; - text-align: center; - text-transform: uppercase; -} - blockquote { border-left: 10px solid rgba( 134, 134, 134, .4 ); } diff --git a/static/css/variant.css b/static/css/variant.css index 232d7c9ca1..765da1c866 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -1,4 +1,11 @@ :root { + --INTERNAL-MAIN-TITLES-H1-color: var(--MAIN-TITLES-H1-color , var(--MAIN-TEXT-color)); + --INTERNAL-MAIN-TITLES-H2-color: var(--MAIN-TITLES-H2-color , var(--MAIN-TITLES-TEXT-color)); + --INTERNAL-MAIN-TITLES-H3-color: var(--MAIN-TITLES-H3-color , var(--INTERNAL-MAIN-TITLES-H2-color)); + --INTERNAL-MAIN-TITLES-H4-color: var(--MAIN-TITLES-H4-color , var(--INTERNAL-MAIN-TITLES-H3-color)); + --INTERNAL-MAIN-TITLES-H5-color: var(--MAIN-TITLES-H5-color , var(--INTERNAL-MAIN-TITLES-H4-color)); + --INTERNAL-MAIN-TITLES-H6-color: var(--MAIN-TITLES-H6-color , var(--INTERNAL-MAIN-TITLES-H5-color)); + --INTERNAL-BOX-TEXT-color: var(--BOX-TEXT-color); --INTERNAL-BOX-BLUE-color: var(--BOX-BLUE-color, rgba( 48, 117, 229, 1 )); @@ -31,7 +38,7 @@ a:hover, } #sidebar { - background-color: var(--MENU-SECTIONS-BG-color); + background: var(--MENU-SECTIONS-BG-color); } #header-wrapper { @@ -79,8 +86,28 @@ a:hover, color: var(--MENU-SECTIONS-LINK-color); } -h2, h3, h4, h5, h6 { - color: var(--MAIN-TITLES-TEXT-color); +h1 { + color: var(--INTERNAL-MAIN-TITLES-H1-color); +} + +h2 { + color: var(--INTERNAL-MAIN-TITLES-H2-color); +} + +h3 { + color: var(--INTERNAL-MAIN-TITLES-H3-color); +} + +h4 { + color: var(--INTERNAL-MAIN-TITLES-H4-color); +} + +h5 { + color: var(--INTERNAL-MAIN-TITLES-H5-color); +} + +h6 { + color: var(--INTERNAL-MAIN-TITLES-H6-color); } code {