diff options
| -rw-r--r-- | assets/sass/style.scss | 2 | ||||
| -rw-r--r-- | exampleSite/content/documentation/index.md | 33 | ||||
| -rw-r--r-- | layouts/partials/custom-head.html | 2 | ||||
| -rw-r--r-- | layouts/partials/func/GetLanguageDirection.html | 5 |
4 files changed, 35 insertions, 7 deletions
diff --git a/assets/sass/style.scss b/assets/sass/style.scss index 42a7fb9..ea708ce 100644 --- a/assets/sass/style.scss +++ b/assets/sass/style.scss @@ -13,7 +13,7 @@ $regular-font-size: 1.25em; /* 20px / 16px = 1.25em; support text resizing in al /* Color - Make sure to leave colorScheme in `config.toml` file empty for granular control + Make sure to leave `colorScheme` in `params.yaml` file empty for granular control */ $text-light-color: #676767; $text-color: #454545; diff --git a/exampleSite/content/documentation/index.md b/exampleSite/content/documentation/index.md index 06d012f..90f849c 100644 --- a/exampleSite/content/documentation/index.md +++ b/exampleSite/content/documentation/index.md @@ -328,6 +328,39 @@ The internal links pointing to the right sections in your document are generated --- +## Styling Theme + +To change the main color accents of the theme, such as the headers, links, and text logo, you can use the `colorScheme` configuration parameter, as shown below: + +~~~ yaml +params: + colorScheme: magenta +~~~ + +The demo site uses a feature that splits configuration into separate files, so if your project follows the same structure, the `colorScheme` parameter should be located in the `params.yaml` file, simply at the root, like this: + +~~~ yaml +colorScheme: blue +~~~ + +The currently supported colors are: red, orange, magenta, cyan, blue, and brown. + +If no value is provided, or if you remove the `colorScheme` parameter altogether, the theme defaults to red. + +At the moment, the theme does not support arbitrary changes to fonts, custom colors, or other visual elements beyond those predefined by the theme. However, the theme provides a way for you to add your own custom styles to your project. + +To do this, create a `layouts/partials` directory in your project, and inside it, add a file named `custom-head.html`. You can now define any custom styles within this file. For example: + +~~~ html +<style> + html { + font-family: "PT Sans", Helvetica, Arial, sans-serif; + } +</style> +~~~ + +This allows you to override or extend the theme’s default styles with your own customizations. + ## Comments Ed theme now supports adding a comments system to your site, enhancing interactive engagement. Currently, the theme supports integration with {{< link src="https://giscus.app/" class="external" target="_blank" hreflang="en" rel="noopener noreferrer" >}}giscus{{< /link >}}. diff --git a/layouts/partials/custom-head.html b/layouts/partials/custom-head.html index 5883332..05c28a7 100644 --- a/layouts/partials/custom-head.html +++ b/layouts/partials/custom-head.html @@ -1,5 +1,5 @@ {{- /* Head custom content area start */ -}} {{- /* A partial to be overwritten by the user. */ -}} -{{- /* Simply place a custom-head.html into your local /layouts/partials-directory. */ -}} +{{- /* Simply place a custom-head.html into your local /layouts/partials - directory. */ -}} {{- /* Its content will appear before the closing </head>. */ -}} {{- /* Head custom content area end */ -}} diff --git a/layouts/partials/func/GetLanguageDirection.html b/layouts/partials/func/GetLanguageDirection.html deleted file mode 100644 index fe107a8..0000000 --- a/layouts/partials/func/GetLanguageDirection.html +++ /dev/null @@ -1,5 +0,0 @@ -{{ $dir := "" }} -{{ with site.Language.LanguageDirection }} - {{ $dir = . }} -{{ end }} -{{ return $dir }} |