docs: replace screenshots after redesign (#612)
This commit is contained in:
parent
2de61e27e3
commit
fb924d52dd
11 changed files with 18 additions and 24 deletions
exampleSite
content/en
features
dark-mode/images
multilingual/images
theming
usage
static
Binary file not shown.
Before ![]() (image error) Size: 462 KiB After ![]() (image error) Size: 257 KiB ![]() ![]() |
Binary file not shown.
Before ![]() (image error) Size: 58 KiB After ![]() (image error) Size: 15 KiB ![]() ![]() |
Binary file not shown.
Before ![]() (image error) Size: 51 KiB After ![]() (image error) Size: 16 KiB ![]() ![]() |
|
@ -8,7 +8,7 @@ title: Theming
|
||||||
|
|
||||||
If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site.
|
If you want to customize the theme's color scheme to give it your individual touch, you are only a few lines of CSS away. Generally, you need to override the default settings. The easiest way to do this is to create a file named `static/custom.css` right at the root of your site.
|
||||||
|
|
||||||
All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.
|
All the necessary CSS customization properties are listed below. If you want to customize elements that don't use these properties, you can always look up the class name and override it directly. For inspiration, you can also take a look at [https://www.color-hex.com](https://www.color-hex.com/color-palettes/). In this simple example, we'll use the [_Beach_](https://www.color-hex.com/color-palette/895) color palette.
|
||||||
|
|
||||||
[](images/theme-example.png)
|
[](images/theme-example.png)
|
||||||
|
|
||||||
|
|
Binary file not shown.
Before ![]() (image error) Size: 321 KiB After ![]() (image error) Size: 464 KiB ![]() ![]() |
|
@ -29,8 +29,6 @@ content/
|
||||||
└── level-2-2.md
|
└── level-2-2.md
|
||||||
```
|
```
|
||||||
|
|
||||||
[](/media/file-tree.png)
|
|
||||||
|
|
||||||
## Bundle menu
|
## Bundle menu
|
||||||
|
|
||||||
This type of navigation needs to be enabled first by setting `geekdocMenuBundle` to `true` in your [site configuration](/usage/configuration/#site-configuration). After you have activated the bundle menu, you start with an empty navigation. This is intentional because bundle menus have to be defined manually in a data file. While this increases the effort it also offers maximum flexibility in the design. The data file needs to be written in YAML and placed at `data/menu/main.yaml`.
|
This type of navigation needs to be enabled first by setting `geekdocMenuBundle` to `true` in your [site configuration](/usage/configuration/#site-configuration). After you have activated the bundle menu, you start with an empty navigation. This is intentional because bundle menus have to be defined manually in a data file. While this increases the effort it also offers maximum flexibility in the design. The data file needs to be written in YAML and placed at `data/menu/main.yaml`.
|
||||||
|
@ -68,8 +66,6 @@ main:
|
||||||
|
|
||||||
As an advantage you can add [icons](/features/icon-sets/) to your menu entries e.g. `icon: "gdoc_notification"`.
|
As an advantage you can add [icons](/features/icon-sets/) to your menu entries e.g. `icon: "gdoc_notification"`.
|
||||||
|
|
||||||
[](/media/bundle-menu.png)
|
|
||||||
|
|
||||||
### More menu
|
### More menu
|
||||||
|
|
||||||
{{< hint type=tip >}}
|
{{< hint type=tip >}}
|
||||||
|
@ -97,8 +93,6 @@ more:
|
||||||
icon: "gdoc_github"
|
icon: "gdoc_github"
|
||||||
```
|
```
|
||||||
|
|
||||||
[](/media/more-menu.png)
|
|
||||||
|
|
||||||
## Extra Header Menu
|
## Extra Header Menu
|
||||||
|
|
||||||
If you want to customize the header menu, this can be achieved by using a data file written in YAML and placed at `data/menu/extra.yaml`.
|
If you want to customize the header menu, this can be achieved by using a data file written in YAML and placed at `data/menu/extra.yaml`.
|
||||||
|
|
|
@ -21,12 +21,12 @@
|
||||||
--link-color: #518169;
|
--link-color: #518169;
|
||||||
--link-color-visited: #c54e8a;
|
--link-color-visited: #c54e8a;
|
||||||
|
|
||||||
--code-background: #f8f9fa;
|
--code-background: #f5f6f8;
|
||||||
--code-accent-color: #e3e7eb;
|
--code-accent-color: #e3e7eb;
|
||||||
--code-accent-color-lite: #eff1f3;
|
--code-accent-color-lite: #eff1f3;
|
||||||
--code-font-color: #5f5f5f;
|
--code-font-color: #5f5f5f;
|
||||||
|
|
||||||
--code-copy-background: #f8f9fa;
|
--code-copy-background: #f5f6f8;
|
||||||
--code-copy-font-color: #6b7784;
|
--code-copy-font-color: #6b7784;
|
||||||
--code-copy-border-color: #adb4bc;
|
--code-copy-border-color: #adb4bc;
|
||||||
--code-copy-success-color: #00c853;
|
--code-copy-success-color: #00c853;
|
||||||
|
@ -36,10 +36,10 @@
|
||||||
|
|
||||||
--control-icons: #b2bac1;
|
--control-icons: #b2bac1;
|
||||||
|
|
||||||
--footer-background: #efefef;
|
--footer-background: #2f333e;
|
||||||
--footer-font-color: #efefef;
|
--footer-font-color: #ffffff;
|
||||||
--footer-link-color: #efefef;
|
--footer-link-color: #ffcc5c;
|
||||||
--footer-link-color-visited: #efefef;
|
--footer-link-color-visited: #ffcc5c;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: light) {
|
@media (prefers-color-scheme: light) {
|
||||||
:root {
|
:root {
|
||||||
|
@ -57,12 +57,12 @@
|
||||||
--link-color: #518169;
|
--link-color: #518169;
|
||||||
--link-color-visited: #c54e8a;
|
--link-color-visited: #c54e8a;
|
||||||
|
|
||||||
--code-background: #f8f9fa;
|
--code-background: #f5f6f8;
|
||||||
--code-accent-color: #e3e7eb;
|
--code-accent-color: #e3e7eb;
|
||||||
--code-accent-color-lite: #eff1f3;
|
--code-accent-color-lite: #eff1f3;
|
||||||
--code-font-color: #5f5f5f;
|
--code-font-color: #5f5f5f;
|
||||||
|
|
||||||
--code-copy-background: #f8f9fa;
|
--code-copy-background: #f5f6f8;
|
||||||
--code-copy-font-color: #6b7784;
|
--code-copy-font-color: #6b7784;
|
||||||
--code-copy-border-color: #adb4bc;
|
--code-copy-border-color: #adb4bc;
|
||||||
--code-copy-success-color: #00c853;
|
--code-copy-success-color: #00c853;
|
||||||
|
@ -72,10 +72,10 @@
|
||||||
|
|
||||||
--control-icons: #b2bac1;
|
--control-icons: #b2bac1;
|
||||||
|
|
||||||
--footer-background: #112b3c;
|
--footer-background: #2f333e;
|
||||||
--footer-font-color: #ffffff;
|
--footer-font-color: #ffffff;
|
||||||
--footer-link-color: #f66b0e;
|
--footer-link-color: #ffcc5c;
|
||||||
--footer-link-color-visited: #f66b0e;
|
--footer-link-color-visited: #ffcc5c;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -110,10 +110,10 @@
|
||||||
|
|
||||||
--control-icons: #b2bac1;
|
--control-icons: #b2bac1;
|
||||||
|
|
||||||
--footer-background: #112b3c;
|
--footer-background: #2f333e;
|
||||||
--footer-font-color: #ffffff;
|
--footer-font-color: #ffffff;
|
||||||
--footer-link-color: #f66b0e;
|
--footer-link-color: #ffcc5c;
|
||||||
--footer-link-color-visited: #f66b0e;
|
--footer-link-color-visited: #ffcc5c;
|
||||||
}
|
}
|
||||||
@media (prefers-color-scheme: dark) {
|
@media (prefers-color-scheme: dark) {
|
||||||
:root {
|
:root {
|
||||||
|
@ -146,9 +146,9 @@
|
||||||
|
|
||||||
--control-icons: #b2bac1;
|
--control-icons: #b2bac1;
|
||||||
|
|
||||||
--footer-background: #112b3c;
|
--footer-background: #2f333e;
|
||||||
--footer-font-color: #ffffff;
|
--footer-font-color: #ffffff;
|
||||||
--footer-link-color: #f66b0e;
|
--footer-link-color: #ffcc5c;
|
||||||
--footer-link-color-visited: #f66b0e;
|
--footer-link-color-visited: #ffcc5c;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
Binary file not shown.
Before ![]() (image error) Size: 68 KiB |
Binary file not shown.
Before ![]() (image error) Size: 80 KiB |
Binary file not shown.
Before ![]() (image error) Size: 82 KiB |
Binary file not shown.
Before ![]() (image error) Size: 38 KiB After ![]() (image error) Size: 31 KiB ![]() ![]() |
Loading…
Add table
Reference in a new issue