nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-23 07:47:54 +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
# (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;

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
- **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 {
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;

25
static/css/variant.css
View file

@ -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 {