From 627f1f5d32ebeb89c41f72d960b4ab35778f7625 Mon Sep 17 00:00:00 2001 From: Julien Dessaux Date: Wed, 25 Jan 2023 17:45:06 +0100 Subject: Added themes --- assets/base.css | 122 +++++++++++++++++++++++++++++++++++++++++++++++--- assets/code.css | 112 ++++++++++++++++++++++----------------------- assets/footer.css | 6 +-- assets/header.css | 6 +-- assets/pagination.css | 12 ++--- assets/selenized.css | 28 ------------ 6 files changed, 184 insertions(+), 102 deletions(-) delete mode 100644 assets/selenized.css (limited to 'assets') diff --git a/assets/base.css b/assets/base.css index 4c5ed7f..c84ea13 100644 --- a/assets/base.css +++ b/assets/base.css @@ -1,19 +1,109 @@ +.black-theme { + /* Black mode */ + --bg-0: #181818; + --bg-1: #252525; + --bg-2: #3b3b3b; + --dim: #777777; + --fg-0: #b9b9b9; + --fg-1: #dedede; + --red: #ed4a46; + --green: #70b433; + --yellow: #dbb32d; + --blue: #368aeb; + --magenta: #eb6eb7; + --cyan: #3fc5b7; + --orange: #e67f43; + --violet: #a580e2; + --br_red: #ff5e56; + --br_green: #83c746; + --br_yellow: #efc541; + --br_blue: #4f9cfe; + --br_magenta: #ff81ca; + --br_cyan: #56d8c9; + --br_orange: #fa9153; + --br_violet: #b891f5; +} +.dark-theme { + /* Dark mode */ + --bg-0: #103c48; + --bg-1: #184956; + --bg-2: #2d5b69; + --dim: #72898f; + --fg-0: #adbcbc; + --fg-1: #cad8d9; + --red: #fa5750; + --green: #75b938; + --yellow: #dbb32d; + --blue: #4695f7; + --magenta: #f275be; + --cyan: #41c7b9; + --orange: #ed8649; + --violet: #af88eb; + --br_red: #ff665c; + --br_green: #84c747; + --br_yellow: #ebc13d; + --br_blue: #58a3ff; + --br_magenta: #ff84cd; + --br_cyan: #53d6c7; + --br_orange: #fd9456; + --br_violet: #bd96fa; +} +.light-theme { + /* Light mode */ + --bg-0: #fbf3db; + --bg-1: #ece3cc; + --bg-2: #d5cdb6; + --dim: #909995; + --fg-0: #53676d; + --fg-1: #3a4d53; + --red: #d2212d; + --green: #489100; + --yellow: #ad8900; + --blue: #0072d4; + --magenta: #ca4898; + --cyan: #009c8f; + --orange: #c25d1e; + --violet: #8762c6; + --br_red: #cc1729; + --br_green: #428b00; + --br_yellow: #a78300; + --br_blue: #006dce; + --br_magenta: #c44392; + --br_cyan: #00978a; + --br_orange: #bc5819; + --br_violet: #825dc0; +} + +#themes { + background-color: var(--bg-0); + border: none; + color: var(--fg-1); + font-size: 0.9em; + padding: 14px 16px; +} + * { box-sizing: border-box; } +html { + background-color: var(--bg-0); + color: var(--fg-0); +} body { + background-color: var(--bg-1); display: grid; grid-template-rows: auto 1fr auto; font-family: -apple-system, BlinkMacSystemFont, - "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", - "Fira Sans", "Droid Sans", "Helvetica Neue", - sans-serif; + "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", + "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; font-feature-settings: "kern" 1; font-kerning: normal; } main { + background-color: var(--bg-1); padding-left:1em; padding-right:1em; scrollbar-gutter: stable both-edges; @@ -25,6 +115,8 @@ p { overflow-wrap: anywhere; } pre,code { + background-color: var(--bg-0); + color: var(--fg-0); white-space: pre-wrap; } nav#TableOfContents ul { @@ -53,7 +145,25 @@ h1, h2, h3, h4, h5 { .fullwidth { width: 100%; } -img[src*='#center'] { - display: block; - margin: auto; +img[src*='#center'] { + display: block; + margin: auto; +} + +a { + color: var(--yellow); +} +a:visited { + color: var(--orange); +} +a:hover { + color: var(--red); +} +h1, +body header nav ul li a, +body header nav ul li a:visited { + color: var(--red); +} +h2, h3, h4, h5, h6 { + color: var(--green); } diff --git a/assets/code.css b/assets/code.css index 3f83b8a..d1229d0 100644 --- a/assets/code.css +++ b/assets/code.css @@ -1,86 +1,86 @@ -/* Background */ .bg { color: #b9b9b9; background-color: #181818; } -/* PreWrapper */ .chroma { color: #b9b9b9; background-color: #181818; } -/* Other */ .chroma .x { color: #e67f43 } +/* Background */ .bg { color: var(--fg-0); background-color: var(--bg-0); } +/* PreWrapper */ .chroma { color: var(--fg-0); background-color: var(--bg-0); } +/* Other */ .chroma .x { color: var(--orange) } /* Error */ .chroma .err { } /* CodeLine */ .chroma .cl { } /* LineLink */ .chroma .lnlinks { outline: none; text-decoration: none; color: inherit } /* LineTableTD */ .chroma .lntd { vertical-align: top; padding: 0; margin: 0; border: 0; } /* LineTable */ .chroma .lntable { border-spacing: 0; padding: 0; margin: 0; border: 0; } -/* LineHighlight */ .chroma .hl { background-color: #dedede } -/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #495050 } -/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: #495050 } +/* LineHighlight */ .chroma .hl { background-color: var(--fg-1) } +/* LineNumbersTable */ .chroma .lnt { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--fg-1) } +/* LineNumbers */ .chroma .ln { white-space: pre; user-select: none; margin-right: 0.4em; padding: 0 0.4em 0 0.4em;color: var(--fg-1) } /* Line */ .chroma .line { display: flex; } -/* Keyword */ .chroma .k { color: #70b443 } -/* KeywordConstant */ .chroma .kc { color: #e67f43 } -/* KeywordDeclaration */ .chroma .kd { color: #368aeb } -/* KeywordNamespace */ .chroma .kn { color: #70b443 } -/* KeywordPseudo */ .chroma .kp { color: #70b443 } -/* KeywordReserved */ .chroma .kr { color: #368aeb } -/* KeywordType */ .chroma .kt { color: #ed4a46 } +/* Keyword */ .chroma .k { color: var(--green) } +/* KeywordConstant */ .chroma .kc { color: var(--orange) } +/* KeywordDeclaration */ .chroma .kd { color: var(--blue) } +/* KeywordNamespace */ .chroma .kn { color: var(--green) } +/* KeywordPseudo */ .chroma .kp { color: var(--green) } +/* KeywordReserved */ .chroma .kr { color: var(--blue) } +/* KeywordType */ .chroma .kt { color: var(--red) } /* Name */ .chroma .n { } /* NameAttribute */ .chroma .na { } -/* NameBuiltin */ .chroma .nb { color: #dbb32d } -/* NameBuiltinPseudo */ .chroma .bp { color: #368aeb } -/* NameClass */ .chroma .nc { color: #368aeb } -/* NameConstant */ .chroma .no { color: #e67f43 } -/* NameDecorator */ .chroma .nd { color: #368aeb } -/* NameEntity */ .chroma .ni { color: #e67f43 } -/* NameException */ .chroma .ne { color: #e67f43 } -/* NameFunction */ .chroma .nf { color: #368aeb } +/* NameBuiltin */ .chroma .nb { color: var(--yellow) } +/* NameBuiltinPseudo */ .chroma .bp { color: var(--blue) } +/* NameClass */ .chroma .nc { color: var(--blue) } +/* NameConstant */ .chroma .no { color: var(--orange) } +/* NameDecorator */ .chroma .nd { color: var(--blue) } +/* NameEntity */ .chroma .ni { color: var(--orange) } +/* NameException */ .chroma .ne { color: var(--orange) } +/* NameFunction */ .chroma .nf { color: var(--blue) } /* NameFunctionMagic */ .chroma .fm { } /* NameLabel */ .chroma .nl { } /* NameNamespace */ .chroma .nn { } /* NameOther */ .chroma .nx { } /* NameProperty */ .chroma .py { } -/* NameTag */ .chroma .nt { color: #368aeb } -/* NameVariable */ .chroma .nv { color: #368aeb } +/* NameTag */ .chroma .nt { color: var(--blue) } +/* NameVariable */ .chroma .nv { color: var(--blue) } /* NameVariableClass */ .chroma .vc { } /* NameVariableGlobal */ .chroma .vg { } /* NameVariableInstance */ .chroma .vi { } /* NameVariableMagic */ .chroma .vm { } /* Literal */ .chroma .l { } /* LiteralDate */ .chroma .ld { } -/* LiteralString */ .chroma .s { color: #3fc5b7 } -/* LiteralStringAffix */ .chroma .sa { color: #3fc5b7 } -/* LiteralStringBacktick */ .chroma .sb { color: #777777 } -/* LiteralStringChar */ .chroma .sc { color: #3fc5b7 } -/* LiteralStringDelimiter */ .chroma .dl { color: #3fc5b7 } +/* LiteralString */ .chroma .s { color: var(--cyan) } +/* LiteralStringAffix */ .chroma .sa { color: var(--cyan) } +/* LiteralStringBacktick */ .chroma .sb { color: var(--dim) } +/* LiteralStringChar */ .chroma .sc { color: var(--cyan) } +/* LiteralStringDelimiter */ .chroma .dl { color: var(--cyan) } /* LiteralStringDoc */ .chroma .sd { } -/* LiteralStringDouble */ .chroma .s2 { color: #3fc5b7 } -/* LiteralStringEscape */ .chroma .se { color: #e67f43 } +/* LiteralStringDouble */ .chroma .s2 { color: var(--cyan) } +/* LiteralStringEscape */ .chroma .se { color: var(--orange) } /* LiteralStringHeredoc */ .chroma .sh { } -/* LiteralStringInterpol */ .chroma .si { color: #3fc5b7 } -/* LiteralStringOther */ .chroma .sx { color: #3fc5b7 } -/* LiteralStringRegex */ .chroma .sr { color: #ed4a46 } -/* LiteralStringSingle */ .chroma .s1 { color: #3fc5b7 } -/* LiteralStringSymbol */ .chroma .ss { color: #3fc5b7 } -/* LiteralNumber */ .chroma .m { color: #3fc5b7 } -/* LiteralNumberBin */ .chroma .mb { color: #3fc5b7 } -/* LiteralNumberFloat */ .chroma .mf { color: #3fc5b7 } -/* LiteralNumberHex */ .chroma .mh { color: #3fc5b7 } -/* LiteralNumberInteger */ .chroma .mi { color: #3fc5b7 } -/* LiteralNumberIntegerLong */ .chroma .il { color: #3fc5b7 } -/* LiteralNumberOct */ .chroma .mo { color: #3fc5b7 } -/* Operator */ .chroma .o { color: #70b443 } -/* OperatorWord */ .chroma .ow { color: #70b443 } +/* LiteralStringInterpol */ .chroma .si { color: var(--cyan) } +/* LiteralStringOther */ .chroma .sx { color: var(--cyan) } +/* LiteralStringRegex */ .chroma .sr { color: var(--red) } +/* LiteralStringSingle */ .chroma .s1 { color: var(--cyan) } +/* LiteralStringSymbol */ .chroma .ss { color: var(--cyan) } +/* LiteralNumber */ .chroma .m { color: var(--cyan) } +/* LiteralNumberBin */ .chroma .mb { color: var(--cyan) } +/* LiteralNumberFloat */ .chroma .mf { color: var(--cyan) } +/* LiteralNumberHex */ .chroma .mh { color: var(--cyan) } +/* LiteralNumberInteger */ .chroma .mi { color: var(--cyan) } +/* LiteralNumberIntegerLong */ .chroma .il { color: var(--cyan) } +/* LiteralNumberOct */ .chroma .mo { color: var(--cyan) } +/* Operator */ .chroma .o { color: var(--green) } +/* OperatorWord */ .chroma .ow { color: var(--green) } /* Punctuation */ .chroma .p { } -/* Comment */ .chroma .c { color: #777777 } -/* CommentHashbang */ .chroma .ch { color: #777777 } -/* CommentMultiline */ .chroma .cm { color: #777777 } -/* CommentSingle */ .chroma .c1 { color: #777777 } -/* CommentSpecial */ .chroma .cs { color: #70b443 } -/* CommentPreproc */ .chroma .cp { color: #70b443 } -/* CommentPreprocFile */ .chroma .cpf { color: #70b443 } +/* Comment */ .chroma .c { color: var(--dim) } +/* CommentHashbang */ .chroma .ch { color: var(--dim) } +/* CommentMultiline */ .chroma .cm { color: var(--dim) } +/* CommentSingle */ .chroma .c1 { color: var(--dim) } +/* CommentSpecial */ .chroma .cs { color: var(--green) } +/* CommentPreproc */ .chroma .cp { color: var(--green) } +/* CommentPreprocFile */ .chroma .cpf { color: var(--green) } /* Generic */ .chroma .g { } -/* GenericDeleted */ .chroma .gd { color: #ed4a46 } +/* GenericDeleted */ .chroma .gd { color: var(--red) } /* GenericEmph */ .chroma .ge { font-style: italic } -/* GenericError */ .chroma .gr { color: #ed4a46; font-weight: bold } -/* GenericHeading */ .chroma .gh { color: #e67f43 } -/* GenericInserted */ .chroma .gi { color: #70b443 } +/* GenericError */ .chroma .gr { color: var(--red); font-weight: bold } +/* GenericHeading */ .chroma .gh { color: var(--orange) } +/* GenericInserted */ .chroma .gi { color: var(--green) } /* GenericOutput */ .chroma .go { } /* GenericPrompt */ .chroma .gp { } /* GenericStrong */ .chroma .gs { font-weight: bold } -/* GenericSubheading */ .chroma .gu { color: #368aeb } +/* GenericSubheading */ .chroma .gu { color: var(--blue) } /* GenericTraceback */ .chroma .gt { } /* GenericUnderline */ .chroma .gl { } /* TextWhitespace */ .chroma .w { } diff --git a/assets/footer.css b/assets/footer.css index 4d0bdc0..82625d0 100644 --- a/assets/footer.css +++ b/assets/footer.css @@ -1,11 +1,11 @@ footer { - background-color: #181818; + background-color: var(--bg-0); padding: 10px; } footer p { - color: #70b443; + color: var(--green); text-align: center; } footer a { - color: #70b443; + color: var(--green); } diff --git a/assets/header.css b/assets/header.css index 01bb32a..19bab83 100644 --- a/assets/header.css +++ b/assets/header.css @@ -1,5 +1,5 @@ header { - background-color: #181818; + background-color: var(--bg-0); } header nav ul { list-style-type: none; @@ -19,10 +19,10 @@ header nav ul li a { text-decoration: none; } header nav ul li a:hover { - background-color: #252525; + background-color: var(--bg-1); } .nav-menu-active { - background-color: #252525; + background-color: var(--bg-1); } .nav-menu-title { float: left; diff --git a/assets/pagination.css b/assets/pagination.css index 1271bd6..f4bb1d6 100644 --- a/assets/pagination.css +++ b/assets/pagination.css @@ -4,7 +4,7 @@ border-radius:.25rem; } .pagination li { - background-color: #181818; + background-color: var(--bg-0); } .pagination li a { border:1px solid rgba(0,0,0,.1); @@ -23,16 +23,16 @@ border-bottom-right-radius:.25rem } .pagination .pagination-enabled a:hover { - background-color: #252525; + background-color: var(--bg-1); z-index: 999; } .pagination-disabled a { - color: #dedede; + color: var(--dim); } .pagination-disabled a:hover { - color: #dedede; + color: var(--dim); } .pagination-active a { - color: b9b9b9; - background-color: #252525; + color: var(--fg-0); + background-color: var(--bg-1); } diff --git a/assets/selenized.css b/assets/selenized.css deleted file mode 100644 index 0541547..0000000 --- a/assets/selenized.css +++ /dev/null @@ -1,28 +0,0 @@ -html { - background-color: #181818; - color: #b9b9b9; -} -body, main { - background-color: #252525; -} -a { - color: #dbb32d; -} -a:visited { - color: #e67f43; -} -a:hover { - color: #ed4a46; -} -h1, -body header nav ul li a, -body header nav ul li a:visited { - color: #ed4a46; -} -h2, h3, h4, h5, h6 { - color: #70b443; -} -pre, code { - background-color: #181818; - color: #b9b9b9; -} -- cgit v1.2.3