diff options
author | shevabam <shevabam@gmail.com> | 2018-04-10 21:37:41 +0300 |
---|---|---|
committer | shevabam <shevabam@gmail.com> | 2018-04-10 21:37:41 +0300 |
commit | b65d036e256faf8cb6a8a9eb8cf38dfbbbcd5928 (patch) | |
tree | cb8f02956a263dce78e63413cdf5edd11e836b47 | |
parent | d0c840b0758a122cfcdae8308c32fa3a1345fd71 (diff) |
Add sidebar color parameter
-rw-r--r-- | README.md | 11 | ||||
-rw-r--r-- | exampleSite/config.toml | 1 | ||||
-rw-r--r-- | layouts/partials/sidebar.html | 2 | ||||
-rw-r--r-- | static/css/styles.css | 27 |
4 files changed, 39 insertions, 2 deletions
@@ -43,7 +43,7 @@ Since the theme is a one-page theme, this is the way to make cross-references on Replace logo by creating `layouts/partials/logo.html` file ### Adding menu entries to the external links section -Customize the name of the section by addind to the `config.toml` +Customize the name of the section by adding to the `config.toml` ```toml [params] externalTitle = "Surfly docs" @@ -57,5 +57,14 @@ url = "https://docs.surfly.com/javascript.html" weight = 20 ``` +### Changing color +Customize the color of the sidebar by adding to the `config.toml` +```toml +[params] +sidebarColor = "green" +``` + +Available values : default, green, purple, pink, red, cyan, blue, grey, orange. + ## Add favicon Put `favicon.ico` inside `static` folder diff --git a/exampleSite/config.toml b/exampleSite/config.toml index 781c2e5..6fa7e6e 100644 --- a/exampleSite/config.toml +++ b/exampleSite/config.toml @@ -9,6 +9,7 @@ pygmentsStyle = "monokailight" [params] externalTitle = "Kraiklyn theme" +sidebarColor = "default" [[menu.shortcuts]] name = "Kraiklyn on Github" diff --git a/layouts/partials/sidebar.html b/layouts/partials/sidebar.html index c28928a..5aedb9f 100644 --- a/layouts/partials/sidebar.html +++ b/layouts/partials/sidebar.html @@ -1,4 +1,4 @@ -<div class="sidebar"> +<div class="sidebar sidebar-{{ .Site.Params.sidebarColor}}"> <div class="navigation"> {{ partial "logo.html" }} <h1 class="site-title"><a href="{{ .Site.BaseURL }}">{{ .Site.Title }}</a></h1> diff --git a/static/css/styles.css b/static/css/styles.css index bcb88e9..ea0d2b2 100644 --- a/static/css/styles.css +++ b/static/css/styles.css @@ -40,6 +40,33 @@ html, body { display: flex; flex-direction: column; } +.sidebar.sidebar-default { + background-color: #363636; +} +.sidebar.sidebar-green { + background-color: #459D61; +} +.sidebar.sidebar-purple { + background-color: #77518A; +} +.sidebar.sidebar-pink { + background-color: #AD6AA9; +} +.sidebar.sidebar-red { + background-color: #B05353; +} +.sidebar.sidebar-cyan { + background-color: #5399B0; +} +.sidebar.sidebar-blue { + background-color: #5378B0; +} +.sidebar.sidebar-grey { + background-color: #959492; +} +.sidebar.sidebar-orange { + background-color: #DAA35C; +} @media (min-width: 48em) { .sidebar { position: fixed; |