nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2025-02-17 09:10:08 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

theme: change default colors to Relearn defaults #181

Browse source
This commit is contained in:
Sören Weber 2022-02-14 22:19:38 +01:00
parent 8ddeec4b7a
commit 9eb44953d9
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
4 changed files with 43 additions and 44 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
exampleSite/config.toml
View file

@ -59,7 +59,7 @@ title = "Hugo Relearn Documentation"
# - remove the `@import` of the self-defined chroma stylesheet from your CSS files # - remove the `@import` of the self-defined chroma stylesheet from your CSS files
# (here eg.: theme-relearn-light.css / theme-relearn-dark.css) # (here eg.: theme-relearn-light.css / theme-relearn-dark.css)
noClasses = false noClasses = false
# style = "base16-snazzy" # style = "tango"
[markup.goldmark.renderer] [markup.goldmark.renderer]
# activated for this showcase to use HTML and JavaScript; decide on your own needs; # activated for this showcase to use HTML and JavaScript; decide on your own needs;

2
exampleSite/content/basics/migration/_index.en.md
View file

@ -96,7 +96,7 @@ This document shows you what's new in the latest release. For a detailed list of
## 2.5.0 ## 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.
--- ---

58
static/css/theme.css
View file

@ -40,7 +40,7 @@
body { body {
background-color: #ffffff; /* var(--MAIN-BG-color) */ 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-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
font-size: 16.25px; font-size: 16.25px;
font-weight: 300; font-weight: 300;
@ -63,12 +63,12 @@ body #chapter h1 {
a, a,
#toc-menu { #toc-menu {
color: #00bdf3; /* var(--MAIN-LINK-color) */ color: #486ac9; /* var(--MAIN-LINK-color) */
} }
a:hover, a:hover,
#toc-menu:hover { #toc-menu:hover {
color: #0082a7; /* var(--MAIN-LINK-HOVER-color) */ color: #134fbf; /* var(--MAIN-LINK-HOVER-color) */
} }
pre { pre {
@ -89,7 +89,7 @@ th {
} }
#sidebar { #sidebar {
background-color: #322A38; /* var(--MENU-SECTIONS-BG-color) */ background-color: #282830; /* var(--MENU-SECTIONS-BG-color) */
bottom: 0; bottom: 0;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@ -102,10 +102,10 @@ th {
} }
#header-wrapper { #header-wrapper {
background-color: #8451a1; /* var(--MENU-HEADER-BG-color) */ background-color: #7dc903; /* var(--MENU-HEADER-BG-color) */
color: #ffffff; /* var(--MENU-SEARCH-color) */ color: #efefef; /* var(--MENU-SEARCH-color) */
text-align: center; 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; padding: 1rem;
position: relative; position: relative;
} }
@ -115,9 +115,9 @@ th {
} }
.searchbox { .searchbox {
border: 1px solid #915eae; /* var(--MENU-SEARCH-BOX-color) */ border: 1px solid #efefef; /* var(--MENU-SEARCH-BOX-color) */
border-radius: 4px; border-radius: 4px;
background-color: #764890; /* var(--MENU-SEARCH-BG-color) */ background-color: #3d414d; /* var(--MENU-SEARCH-BG-color) */
position: relative; position: relative;
margin-top: 1rem; margin-top: 1rem;
} }
@ -168,11 +168,11 @@ th {
} }
#sidebar a { #sidebar a {
color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */ color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
} }
#sidebar a:hover { #sidebar a:hover {
color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
} }
#sidebar a.padding { #sidebar a.padding {
@ -226,7 +226,7 @@ th {
} }
#sidebar ul.topics > li.parent { #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-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
padding-left: 1rem; padding-left: 1rem;
@ -235,7 +235,7 @@ th {
#sidebar ul li.active > a { #sidebar ul li.active > a {
background-color: #ffffff; /* var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color) */ 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-left: -1rem;
margin-right: -1rem; margin-right: -1rem;
padding-left: 1rem; padding-left: 1rem;
@ -295,12 +295,12 @@ th {
} }
#sidebar ul li.visited > a .read-icon { #sidebar ul li.visited > a .read-icon {
color: #00bdf3; /* var(--MENU-VISITED-color) */ color: #506397; /* var(--MENU-VISITED-color) */
display: inline; display: inline;
} }
#sidebar .nav-title { #sidebar .nav-title {
color: #e6e6e6; /* var(--MENU-SECTIONS-LINK-HOVER-color) */ color: #ffffff; /* var(--MENU-SECTIONS-LINK-HOVER-color) */
font-size: 2rem; font-size: 2rem;
font-weight: 200; font-weight: 200;
letter-spacing: -1px; letter-spacing: -1px;
@ -316,12 +316,12 @@ th {
} }
#sidebar hr { #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; margin: 1.5rem 1rem 1rem 1rem;
} }
#footer { #footer {
color: #cccccc; /* var(--MENU-SECTIONS-LINK-color) */ color: #bababa; /* var(--MENU-SECTIONS-LINK-color) */
} }
#body { #body {
@ -464,7 +464,7 @@ th {
} }
h2, h3, h4, h5, h6 { 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; font-family: "Work Sans", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
letter-spacing: -1px; letter-spacing: -1px;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
@ -712,10 +712,10 @@ code.copy-to-clipboard-inline {
} }
pre { pre {
background-color: #272822; /* var(--CODE-BLOCK-BG-color) */ background-color: #f8f8f8; /* var(--CODE-BLOCK-BG-color) */
border: 1px solid #272822; /* var(--CODE-BLOCK-BORDER-color) */ border: 1px solid #d8d8d8; /* var(--CODE-BLOCK-BORDER-color) */
border-radius: 2px; border-radius: 2px;
color: #f8f8f2; /* var(--CODE-BLOCK-color) */ color: #000000; /* var(--CODE-BLOCK-color) */
-webkit-print-color-adjust: economy; -webkit-print-color-adjust: economy;
color-adjust: economy; color-adjust: economy;
line-height: 1.15; 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 */ /* using our MAIN-TEXT and MAIN-BG colors here hopefully asserts for enough contrast */
pre .copy-to-clipboard { pre .copy-to-clipboard {
background-color: #ffffff; /* var(--MAIN-BG-color) */ background-color: #ffffff; /* var(--MAIN-BG-color) */
border-color: #272822; /* var(--MAIN-TEXT-color) */ border-color: #101010; /* var(--MAIN-TEXT-color) */
border-radius: 2px; border-radius: 2px;
color: #777777; /* var(--MAIN-TEXT-color) */ color: #101010; /* var(--MAIN-TEXT-color) */
font-size: 120%; font-size: 120%;
opacity: .5; opacity: .5;
padding: 5px 3px 5px 25px; padding: 5px 3px 5px 25px;
@ -1071,23 +1071,23 @@ pre .copy-to-clipboard {
} }
pre .copy-to-clipboard:hover { 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) */ color: #ffffff; /* var(--MAIN-BG-color) */
opacity: .5; opacity: .5;
} }
#homelinks { #homelinks {
background-color: #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ background-color: #7dc903; /* var(--MENU-HEADER-BORDER-color) */
border-bottom: 4px solid #9c6fb6; /* var(--MENU-HEADER-BORDER-color) */ border-bottom: 4px solid #7dc903; /* var(--MENU-HEADER-BORDER-color) */
padding: 7px 0; padding: 7px 0;
} }
#homelinks a { #homelinks a {
color: #cccccc /* var(--MENU-HOME-LINK-color) */ color: #323232 /* var(--MENU-HOME-LINK-color) */
} }
#homelinks a:hover { #homelinks a:hover {
color: #e6e6e6 /* var(--MENU-HOME-LINK-HOVER-color) */; color: #808080 /* var(--MENU-HOME-LINK-HOVER-color) */;
} }
option { option {
@ -1307,7 +1307,7 @@ option {
/* anchors */ /* anchors */
.anchor { .anchor {
color: #00bdf3; /* var(--MAIN-ANCHOR-color) */ color: #486ac9; /* var(--MAIN-ANCHOR-color) */
cursor: pointer; cursor: pointer;
font-size: .5em; font-size: .5em;
margin-left: .66em; margin-left: .66em;

25
static/css/variant.css
View file

@ -20,7 +20,7 @@ a:hover,
#header-wrapper { #header-wrapper {
background-color: var(--MENU-HEADER-BG-color); 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); border-color: var(--MENU-HEADER-BORDER-color);
} }
@ -44,8 +44,7 @@ a:hover,
#sidebar ul li.active > a { #sidebar ul li.active > a {
background-color: var(--MENU-SECTION-ACTIVE-CATEGORY-BG-color); 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 { #sidebar ul li.visited > a .read-icon {
@ -85,15 +84,15 @@ div.attachments.neutral > div.label {
} }
code { code {
background-color: var(--CODE-INLINE-BG-color, #fff7dd); background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
color: var(--CODE-INLINE-color, #5e5e5e); color: var(--CODE-INLINE-color, #5e5e5e);
} }
pre { pre {
background-color: var(--CODE-BLOCK-BG-color, var(--MAIN-CODE-BG-color, #282a36)); 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, #282a36)); border-color: var(--CODE-BLOCK-BORDER-color, var(--MAIN-CODE-BG-color, #f8f8f8));
color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #e2e4e5)); color: var(--CODE-BLOCK-color, var(--MAIN-CODE-color, #000000));
} }
div.featherlight .featherlight-content{ div.featherlight .featherlight-content{
@ -105,14 +104,14 @@ div.featherlight .featherlight-content{
} }
.copy-to-clipboard { .copy-to-clipboard {
background-color: var(--CODE-INLINE-BG-color, #fff7dd); background-color: var(--CODE-INLINE-BG-color, #fffae9);
border-color: var(--CODE-INLINE-BORDER-color, #fbf0cb); border-color: var(--CODE-INLINE-BORDER-color, #f8e8c8);
color: var(--CODE-INLINE-color, #5e5e5e); color: var(--CODE-INLINE-color, #5e5e5e);
} }
.copy-to-clipboard:hover { .copy-to-clipboard:hover {
background-color: var(--CODE-INLINE-color, #5e5e5e); 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 */ /* 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 { #homelinks a {
color: var(--MENU-HOME-LINK-color, #cccccc); color: var(--MENU-HOME-LINK-color, #323232);
} }
#homelinks a:hover { #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 { .anchor {