From 9eb44953d9ed47bc9fc444ef2d3dbde5c5315f03 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=B6ren=20Weber?= Date: Mon, 14 Feb 2022 22:19:38 +0100 Subject: [PATCH] theme: change default colors to Relearn defaults #181 --- exampleSite/config.toml | 2 +- .../content/basics/migration/_index.en.md | 2 +- static/css/theme.css | 58 +++++++++---------- static/css/variant.css | 25 ++++---- 4 files changed, 43 insertions(+), 44 deletions(-) diff --git a/exampleSite/config.toml b/exampleSite/config.toml index b6be433e1b..2f238bbae3 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -59,7 +59,7 @@ title = "Hugo Relearn Documentation" # - remove the `@import` of the self-defined chroma stylesheet from your CSS files # (here eg.: theme-relearn-light.css / theme-relearn-dark.css) noClasses = false - # style = "base16-snazzy" + # style = "tango" [markup.goldmark.renderer] # activated for this showcase to use HTML and JavaScript; decide on your own needs; diff --git a/exampleSite/content/basics/migration/_index.en.md b/exampleSite/content/basics/migration/_index.en.md index 2aeb76bef3..031d986860 100644 --- a/exampleSite/content/basics/migration/_index.en.md +++ b/exampleSite/content/basics/migration/_index.en.md @@ -96,7 +96,7 @@ This document shows you what's new in the latest release. For a detailed list of ## 2.5.0 -- **Change**: Add new colors `--MAIN-CODE-color` and `--MAIN-CODE-BG-color` for syntax highlightning fallback in your stylesheet in case `guessSyntax=true` is set. Ideally they are set to the same values as the ones from your chosen chroma style. +- **Change**: Add new colors `--CODE-BLOCK-color` and `--CODE-BLOCK-BG-color` for a fallback of syntax highlightning in case `guessSyntax=true` is set. Ideally they are set to the same values as the ones from your chosen chroma style. --- diff --git a/static/css/theme.css b/static/css/theme.css index a6050c8e78..dfef2e50d0 100644 --- a/static/css/theme.css +++ b/static/css/theme.css @@ -40,7 +40,7 @@ body { background-color: #ffffff; /* var(--MAIN-BG-color) */ - color: #777777; /* var(--MAIN-TEXT-color) */ + color: #101010; /* var(--MAIN-TEXT-color) */ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; font-size: 16.25px; font-weight: 300; @@ -63,12 +63,12 @@ body #chapter h1 { a, #toc-menu { - color: #00bdf3; /* var(--MAIN-LINK-color) */ + color: #486ac9; /* var(--MAIN-LINK-color) */ } a:hover, #toc-menu:hover { - color: #0082a7; /* var(--MAIN-LINK-HOVER-color) */ + color: #134fbf; /* var(--MAIN-LINK-HOVER-color) */ } pre { @@ -89,7 +89,7 @@ th { } #sidebar { - background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */ + background-color: #282830; /* var(--MENU-SECTIONS-BG-color) */ bottom: 0; display: flex; flex-direction: column; @@ -102,10 +102,10 @@ th { } #header-wrapper { - background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */ - color: #ffffff; /* var(--MENU-SEARCH-color) */ + background-color: #7dc903; /* var(--MENU-HEADER-BG-color) */ + color: #efefef; /* var(--MENU-SEARCH-color) */ text-align: center; - border-bottom: 4px solid #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ + border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */ padding: 1rem; position: relative; } @@ -115,9 +115,9 @@ th { } .searchbox { - border: 1px solid #915eae; /* var(--MENU-SEARCH-BOX-color) */ + border: 1px solid #efefef; /* var(--MENU-SEARCH-BOX-color) */ border-radius: 4px; - background-color: #764890; /* var(--MENU-SEARCH-BG-color) */ + background-color: #3d414d; /* var(--MENU-SEARCH-BG-color) */ position: relative; margin-top: 1rem; } @@ -168,11 +168,11 @@ th { } #sidebar a { - color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */ + color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */ } #sidebar a:hover { - color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ + color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ } #sidebar a.padding { @@ -226,7 +226,7 @@ th { } #sidebar ul.topics > li.parent { - background-color: #251f29; /* var(--MENU-SECTIONS-ACTIVE-BG-color) */ + background-color: #202028; /* var(--MENU-SECTIONS-ACTIVE-BG-color) */ margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; @@ -235,7 +235,7 @@ th { #sidebar ul li.active > a { background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */ - color: #777777; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */ + color: #444444; /* var(--MENU-SECTION-ACTIVE-CATEGORY-color) */ margin-left: -1rem; margin-right: -1rem; padding-left: 1rem; @@ -295,12 +295,12 @@ th { } #sidebar ul li.visited > a .read-icon { - color: #00bdf3; /* var(--MENU-VISITED-color) */ + color: #506397; /* var(--MENU-VISITED-color) */ display: inline; } #sidebar .nav-title { - color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ + color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ font-size: 2rem; font-weight: 200; letter-spacing: -1px; @@ -316,12 +316,12 @@ th { } #sidebar hr { - border-bottom: 1px solid #2a232f; /* var(--MENU-SECTION-HR-color) */ + border-bottom: 1px solid #606060; /* var(--MENU-SECTION-HR-color) */ margin: 1.5rem 1rem 1rem 1rem; } #footer { - color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */ + color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */ } #body { @@ -464,7 +464,7 @@ th { } h2, h3, h4, h5, h6 { - color: #5e5e5e; /* var(--MAIN-TITLES-TEXT-color) */ + color: #444753; /* var(--MAIN-TITLES-TEXT-color) */ font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif; letter-spacing: -1px; text-rendering: optimizeLegibility; @@ -712,10 +712,10 @@ code.copy-to-clipboard-inline { } pre { - background-color: #272822; /* var(--CODE-BLOCK-BG-color) */ - border: 1px solid #272822; /* var(--CODE-BLOCK-BORDER-color) */ + background-color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */ + border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */ border-radius: 2px; - color: #f8f8f2; /* var(--CODE-BLOCK-color) */ + color: #000000; /* var(--CODE-BLOCK-color) */ -webkit-print-color-adjust: economy; color-adjust: economy; line-height: 1.15; @@ -1059,9 +1059,9 @@ a[aria-disabled="true"] { /* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */ pre .copy-to-clipboard { background-color: #ffffff; /* var(--MAIN-BG-color) */ - border-color: #272822; /* var(--MAIN-TEXT-color) */ + border-color: #101010; /* var(--MAIN-TEXT-color) */ border-radius: 2px; - color: #777777; /* var(--MAIN-TEXT-color) */ + color: #101010; /* var(--MAIN-TEXT-color) */ font-size: 120%; opacity: .5; padding: 5px 3px 5px 25px; @@ -1071,23 +1071,23 @@ pre .copy-to-clipboard { } pre .copy-to-clipboard:hover { - background-color: #777777; /* var(--MAIN-TEXT-color) */ + background-color: #101010; /* var(--MAIN-TEXT-color) */ color: #ffffff; /* var(--MAIN-BG-color) */ opacity: .5; } #homelinks { - background-color: #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ - border-bottom: 4px solid #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ + background-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */ + border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */ padding: 7px 0; } #homelinks a { - color: #cccccc /* var(--MENU-HOME-LINK-color) */ + color: #323232 /* var(--MENU-HOME-LINK-color) */ } #homelinks a:hover { - color: #e6e6e6 /* var(--MENU-HOME-LINK-HOVER-color) */; + color: #808080 /* var(--MENU-HOME-LINK-HOVER-color) */; } option { @@ -1307,7 +1307,7 @@ option { /* anchors */ .anchor { - color: #00bdf3; /* var(--MAIN-ANCHOR-color) */ + color: #486ac9; /* var(--MAIN-ANCHOR-color) */ cursor: pointer; font-size: .5em; margin-left: .66em; diff --git a/static/css/variant.css b/static/css/variant.css index 6b48a9c176..01e2daa401 100644 --- a/static/css/variant.css +++ b/static/css/variant.css @@ -20,7 +20,7 @@ a:hover, #header-wrapper { background-color: var(--MENU-HEADER-BG-color); - color: var(--MENU-SEARCH-color, #ffffff); + color: var(--MENU-SEARCH-color, #efefef); border-color: var(--MENU-HEADER-BORDER-color); } @@ -44,8 +44,7 @@ a:hover, #sidebar ul li.active > a { background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); - color: var(-- - ); + color: var(--MENU-SECTION-ACTIVE-CATEGORY-color); } #sidebar ul li.visited > a .read-icon { @@ -85,15 +84,15 @@ div.attachments.neutral > div.label { } code { - background-color: var(--CODE-INLINE-BG-color, #fff7dd); - border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); + background-color: var(--CODE-INLINE-BG-color, #fffae9); + border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8); color: var(--CODE-INLINE-color, #5e5e5e); } pre { - background-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #282a36)); - border-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, #282a36)); - color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #e2e4e5)); + background-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #f8f8f8)); + border-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, #f8f8f8)); + color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000)); } div.featherlight .featherlight-content{ @@ -105,14 +104,14 @@ div.featherlight .featherlight-content{ } .copy-to-clipboard { - background-color: var(--CODE-INLINE-BG-color, #fff7dd); - border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); + background-color: var(--CODE-INLINE-BG-color, #fffae9); + border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8); color: var(--CODE-INLINE-color, #5e5e5e); } .copy-to-clipboard:hover { background-color: var(--CODE-INLINE-color, #5e5e5e); - color: var(--CODE-INLINE-BG-color, #fff7dd); + color: var(--CODE-INLINE-BG-color, #fffae9); } /* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */ @@ -133,11 +132,11 @@ pre .copy-to-clipboard:hover { } #homelinks a { - color: var(--MENU-HOME-LINK-color, #cccccc); + color: var(--MENU-HOME-LINK-color, #323232); } #homelinks a:hover { - color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, #e6e6e6)); + color: var(--MENU-HOME-LINK-HOVER-color, var(--MENU-HOME-LINK-HOVERED-color, #808080)); } .anchor {