nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 09:43:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Fix custom theme's variable typo in --MENU-HOME-LINK-HOVERED-color

Browse source
This commit is contained in:
Helder Pereira 2021-08-23 23:37:10 +01:00
parent 757d2f06dc
commit c52ef52f2b
5 changed files with 76 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
exampleSite/content/basics/customization/_index.en.md
View file

@ -90,13 +90,16 @@ If you need to change this default behavior, create a new file in `layouts/parti
First, create a new CSS file in your local `static/css` folder prefixed by `theme` (e.g. with _mine_ theme `static/css/theme-mine.css`). Copy the following content and modify colors in CSS variables. First, create a new CSS file in your local `static/css` folder prefixed by `theme` (e.g. with _mine_ theme `static/css/theme-mine.css`). Copy the following content and modify colors in CSS variables.
```css ```css
:root{ :root {
--MAIN-TEXT-color:#323232; /* Color of text by default */ --MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#1C90F3; /* Color of links */ --MAIN-LINK-color:#1C90F3; /* Color of links */
--MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */ --MAIN-LINK-HOVER-color:#167ad0; /* Color of hovered links */
--MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */ --MAIN-ANCHOR-color: #1C90F3; /* color of anchors on titles */
--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:#1C90F3; /* Background color of menu header */ --MENU-HEADER-BG-color:#1C90F3; /* Background color of menu header */
--MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */ --MENU-HEADER-BORDER-color:#33a1ff; /*Color of menu header border */
@ -155,21 +158,26 @@ a:hover {
transition: width 0.5s ease; transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color); background-color: var(--MAIN-LINK-HOVER-color);
} }
#sidebar { #sidebar {
background-color: var(--MENU-SECTIONS-BG-color); background-color: var(--MENU-SECTIONS-BG-color);
} }
#sidebar #header-wrapper { #sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color); color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color); border-color: var(--MENU-HEADER-BORDER-color);
} }
#sidebar .searchbox { #sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color); border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color); background: var(--MENU-SEARCH-BG-color);
} }
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color); background: var(--MENU-SECTIONS-ACTIVE-BG-color);
} }
#sidebar .searchbox * { #sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color); color: var(--MENU-SEARCH-BOX-ICONS-color);
} }
@ -190,6 +198,28 @@ a:hover {
#sidebar hr { #sidebar hr {
border-color: var(--MENU-SECTION-HR-color); border-color: var(--MENU-SECTION-HR-color);
} }
#body .tags a.tag-link {
background-color: var(--MENU-HEADER-BG-color);
}
#body .tags a.tag-link:before {
border-right-color: var(--MENU-HEADER-BG-color);
}
#homelinks {
background: var(--MENU-HEADER-BG-color);
background-color: var(--MENU-HEADER-BORDER-color);
border-bottom-color: var(--MENU-HEADER-BORDER-color);
}
#homelinks a {
color: var(--MENU-HOME-LINK-color);
}
#homelinks a:hover {
color: var(--MENU-HOME-LINK-HOVER-color);
}
``` ```
Then, set the `themeVariant` value with the name of your custom theme file. That's it! Then, set the `themeVariant` value with the name of your custom theme file. That's it!

18
static/css/theme-blue.css
View file

@ -1,4 +1,4 @@
:root{ :root {
--MAIN-TEXT-color:#323232; /* Color of text by default */ --MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#1C90F3; /* Color of links */ --MAIN-LINK-color:#1C90F3; /* Color of links */
@ -24,7 +24,6 @@
--MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #33a1ff; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #20272b; /* Color of <hr> separator in menu */
} }
body { body {
@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease; transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color); background-color: var(--MAIN-LINK-HOVER-color);
} }
#sidebar { #sidebar {
background-color: var(--MENU-SECTIONS-BG-color); background-color: var(--MENU-SECTIONS-BG-color);
} }
#sidebar #header-wrapper { #sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color); color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color); border-color: var(--MENU-HEADER-BORDER-color);
} }
#sidebar .searchbox { #sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color); border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color); background: var(--MENU-SEARCH-BG-color);
} }
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color); background: var(--MENU-SECTIONS-ACTIVE-BG-color);
} }
#sidebar .searchbox * { #sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color); color: var(--MENU-SEARCH-BOX-ICONS-color);
} }
@ -112,15 +116,15 @@ a:hover {
} }
#homelinks { #homelinks {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
background-color: var(--MENU-HEADER-BORDER-color); background-color: var(--MENU-HEADER-BORDER-color);
border-bottom-color: var(--MENU-HEADER-BORDER-color); border-bottom-color: var(--MENU-HEADER-BORDER-color);
} }
#homelinks a { #homelinks a {
color: var(--MENU-HOME-LINK-color); color: var(--MENU-HOME-LINK-color);
} }
#homelinks a:hover { #homelinks a:hover {
color: var(--MENU-HOME-LINK-HOVERED-color); color: var(--MENU-HOME-LINK-HOVER-color);
} }

18
static/css/theme-green.css
View file

@ -1,4 +1,4 @@
:root{ :root {
--MAIN-TEXT-color:#323232; /* Color of text by default */ --MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#599a3e; /* Color of links */ --MAIN-LINK-color:#599a3e; /* Color of links */
@ -24,7 +24,6 @@
--MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #599a3e; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #18211c; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #18211c; /* Color of <hr> separator in menu */
} }
body { body {
@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease; transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color); background-color: var(--MAIN-LINK-HOVER-color);
} }
#sidebar { #sidebar {
background-color: var(--MENU-SECTIONS-BG-color); background-color: var(--MENU-SECTIONS-BG-color);
} }
#sidebar #header-wrapper { #sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color); color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color); border-color: var(--MENU-HEADER-BORDER-color);
} }
#sidebar .searchbox { #sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color); border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color); background: var(--MENU-SEARCH-BG-color);
} }
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color); background: var(--MENU-SECTIONS-ACTIVE-BG-color);
} }
#sidebar .searchbox * { #sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color); color: var(--MENU-SEARCH-BOX-ICONS-color);
} }
@ -112,15 +116,15 @@ a:hover {
} }
#homelinks { #homelinks {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
background-color: var(--MENU-HEADER-BORDER-color); background-color: var(--MENU-HEADER-BORDER-color);
border-bottom-color: var(--MENU-HEADER-BORDER-color); border-bottom-color: var(--MENU-HEADER-BORDER-color);
} }
#homelinks a { #homelinks a {
color: var(--MENU-HOME-LINK-color); color: var(--MENU-HOME-LINK-color);
} }
#homelinks a:hover { #homelinks a:hover {
color: var(--MENU-HOME-LINK-HOVERED-color); color: var(--MENU-HOME-LINK-HOVER-color);
} }

18
static/css/theme-red.css
View file

@ -1,4 +1,4 @@
:root{ :root {
--MAIN-TEXT-color:#323232; /* Color of text by default */ --MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */ --MAIN-TITLES-TEXT-color: #5e5e5e; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#f31c1c; /* Color of links */ --MAIN-LINK-color:#f31c1c; /* Color of links */
@ -24,7 +24,6 @@
--MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #ff3333; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #2b2020; /* Color of <hr> separator in menu */
} }
body { body {
@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease; transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color); background-color: var(--MAIN-LINK-HOVER-color);
} }
#sidebar { #sidebar {
background-color: var(--MENU-SECTIONS-BG-color); background-color: var(--MENU-SECTIONS-BG-color);
} }
#sidebar #header-wrapper { #sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color); color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color); border-color: var(--MENU-HEADER-BORDER-color);
} }
#sidebar .searchbox { #sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color); border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color); background: var(--MENU-SEARCH-BG-color);
} }
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color); background: var(--MENU-SECTIONS-ACTIVE-BG-color);
} }
#sidebar .searchbox * { #sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color); color: var(--MENU-SEARCH-BOX-ICONS-color);
} }
@ -112,15 +116,15 @@ a:hover {
} }
#homelinks { #homelinks {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
background-color: var(--MENU-HEADER-BORDER-color); background-color: var(--MENU-HEADER-BORDER-color);
border-bottom-color: var(--MENU-HEADER-BORDER-color); border-bottom-color: var(--MENU-HEADER-BORDER-color);
} }
#homelinks a { #homelinks a {
color: var(--MENU-HOME-LINK-color); color: var(--MENU-HOME-LINK-color);
} }
#homelinks a:hover { #homelinks a:hover {
color: var(--MENU-HOME-LINK-HOVERED-color); color: var(--MENU-HOME-LINK-HOVER-color);
} }

20
static/css/theme-relearn.css
View file

@ -1,4 +1,4 @@
:root{ :root {
--MAIN-TEXT-color:#323232; /* Color of text by default */ --MAIN-TEXT-color:#323232; /* Color of text by default */
--MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5 */ --MAIN-TITLES-TEXT-color: #444753; /* Color of titles h2-h3-h4-h5 */
--MAIN-LINK-color:#486ac9; /* Color of links */ --MAIN-LINK-color:#486ac9; /* Color of links */
@ -24,7 +24,6 @@
--MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */ --MENU-VISITED-color: #506397; /* Color of 'page visited' icons in menu */
--MENU-SECTION-HR-color: #28292e; /* Color of <hr> separator in menu */ --MENU-SECTION-HR-color: #28292e; /* Color of <hr> separator in menu */
} }
body { body {
@ -67,21 +66,26 @@ a:hover {
transition: width 0.5s ease; transition: width 0.5s ease;
background-color: var(--MAIN-LINK-HOVER-color); background-color: var(--MAIN-LINK-HOVER-color);
} }
#sidebar { #sidebar {
background-color: var(--MENU-SECTIONS-BG-color); background-color: var(--MENU-SECTIONS-BG-color);
} }
#sidebar #header-wrapper { #sidebar #header-wrapper {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
color: var(--MENU-SEARCH-BOX-color); color: var(--MENU-SEARCH-BOX-color);
border-color: var(--MENU-HEADER-BORDER-color); border-color: var(--MENU-HEADER-BORDER-color);
} }
#sidebar .searchbox { #sidebar .searchbox {
border-color: var(--MENU-SEARCH-BOX-color); border-color: var(--MENU-SEARCH-BOX-color);
background: var(--MENU-SEARCH-BG-color); background: var(--MENU-SEARCH-BG-color);
} }
#sidebar ul.topics > li.parent, #sidebar ul.topics > li.active { #sidebar ul.topics > li.parent, #sidebar ul.topics > li.active {
background: var(--MENU-SECTIONS-ACTIVE-BG-color); background: var(--MENU-SECTIONS-ACTIVE-BG-color);
} }
#sidebar .searchbox * { #sidebar .searchbox * {
color: var(--MENU-SEARCH-BOX-ICONS-color); color: var(--MENU-SEARCH-BOX-ICONS-color);
} }
@ -112,19 +116,19 @@ a:hover {
} }
#homelinks { #homelinks {
background: var(--MENU-HEADER-BG-color); background: var(--MENU-HEADER-BG-color);
background-color: var(--MENU-HEADER-BORDER-color); background-color: var(--MENU-HEADER-BORDER-color);
border-bottom-color: var(--MENU-HEADER-BORDER-color); border-bottom-color: var(--MENU-HEADER-BORDER-color);
} }
#homelinks a { #homelinks a {
color: var(--MENU-HOME-LINK-color); color: var(--MENU-HOME-LINK-color);
} }
#homelinks a:hover { #homelinks a:hover {
color: var(--MENU-HOME-LINK-HOVERED-color); color: var(--MENU-HOME-LINK-HOVER-color);
} }
#shortcuts h3{ #shortcuts h3 {
color: var(--MENU-SECTIONS-LINK-HOVER-color) !important; color: var(--MENU-SECTIONS-LINK-HOVER-color) !important;
} }