add example for color schemes

This commit is contained in:
Robert Kaussow 2020-02-05 00:41:13 +01:00
parent 16b14ff369
commit 7cceca5a72
9 changed files with 85 additions and 18 deletions

View file

@ -0,0 +1,36 @@
If you want to customize the color scheme of the theme to give it your individual touch you are just a few lines CSS away. In general, you have to override the defaults, the easiest way to do so is to create a `static/custom.css` file right in your site root.
All necessary class names are listed below. If you miss some classes for theming you are very welcome to fill an [Issue](https://github.com/xoxys/hugo-geekdoc/issues). For some inspiration you can have a look at [https://www.color-hex.com/color-palettes/](https://www.color-hex.com/). The following listing use the _HC-primary_ color palette as an example:
{{< highlight CSS "linenos=table" >}}
/* defaut link color */
a { color: #1c388e; }
a:visited { color: #73bfb8 }
/* site header */
.gdoc-header { background: #e66a4e; border-color: #404040; }
.gdoc-header__link, .gdoc-header__link:visited { color: #ffffff; }
/* page links */
.gdoc-page__footer a, .gdoc-page__footer a:visited { color: #1c388e; }
.gdoc-page__header a, .gdoc-page__header a:visited { color: #1c388e; }
/* site footer */
.gdoc-footer { background: #404040; color: #ffffff; }
.gdoc-footer__link{ color: #fecf50; }
.gdoc-footer__link:visited, .gdoc-footer__link:hover { color: #fecf50; }
/* custom shortcodes */
/* button */
.gdoc-button { color: #495057; }
.gdoc-button:hover { background-color: #eb8771; border-color: #e66a4e; color: #ffffff; }
/* hint */
.gdoc-hint.info { background: #d1d7e8; border-color: #324b99; color: black; }
.gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
.gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }
{{< /highlight >}}
And that is how the result will looks like. Happy theming!
[![HC-primary Color Scheme](/media/color_scheme_example.png)](/media/color_scheme_example.png)

View file

@ -1,3 +1,7 @@
---
draft: true
---
## File-tree menu ## File-tree menu
## Bundle menu ## Bundle menu

View file

@ -0,0 +1,25 @@
/* defaut link color */
a { color: #1c388e; }
a:visited { color: #73bfb8 }
/* site header */
.gdoc-header { background: #e66a4e; border-color: #404040; }
.gdoc-header__link, .gdoc-header__link:visited { color: #ffffff; }
/* page links */
.gdoc-page__footer a, .gdoc-page__footer a:visited, .gdoc-page__header a, .gdoc-page__header a:visited { color: #1c388e; }
/* site footer */
.gdoc-footer { background: #404040; color: #ffffff; }
.gdoc-footer__link{ color: #fecf50; }
.gdoc-footer__link:visited, .gdoc-footer__link:hover { color: #fecf50; }
/* button shortcode */
.gdoc-button { color: #495057; }
.gdoc-button:hover { background-color: #eb8771; border-color: #e66a4e; color: #ffffff; }
/* hint shortcode */
.gdoc-hint.info { background: #d1d7e8; border-color: #324b99; color: black; }
.gdoc-hint.warning { background: #fef5dc; border-color: #e4ba48; color: black; }
.gdoc-hint.danger { background: #fae1db; border-color: #cf5f46; color: black; }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 127 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 159 KiB

View file

@ -1,8 +1,9 @@
<footer class="gdoc-footer"> <footer class="gdoc-footer">
<div class="container"> <div class="container flex">
<div> <span>
Build with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and Build with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and
<svg class="icon heart"><use xlink:href="#heart"></use></svg> <svg class="icon heart"><use xlink:href="#heart"></use></svg>
</div> </span>
<span>
</div> </div>
</footer> </footer>

View file

@ -10,6 +10,8 @@
{{ $ref = relref $ . }} {{ $ref = relref $ . }}
{{ end }} {{ end }}
<a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="gdoc-btn{{ with .Get "class" }} {{ . }}{{ end }}"> <span class="gdoc-button{{ with .Get "class" }} {{ . }}{{ end }}">
<a {{ with $ref }} href="{{.}}" {{ end }} {{ with $target }} target="{{.}}" {{ end }} class="gdoc-button__link">
{{ $.Inner }} {{ $.Inner }}
</a> </a>
</span>

View file

@ -259,7 +259,6 @@ img {
.gdoc-footer { .gdoc-footer {
background: $second-color; background: $second-color;
color: $white; color: $white;
padding: $padding-16;
&__link { &__link {
color: $color-link-footer; color: $color-link-footer;
@ -268,6 +267,10 @@ img {
color: $color-link-footer; color: $color-link-footer;
} }
} }
.container {
padding: $padding-16;
}
} }
.gdoc-search { .gdoc-search {
@ -414,18 +417,10 @@ img {
} }
.gdoc-header { .gdoc-header {
display: flex;
.icon { .icon {
width: $font-size-16 * 1.5; width: $font-size-16 * 1.5;
height: $font-size-16 * 1.5; height: $font-size-16 * 1.5;
} }
.container {
width: 100%;
max-width: 100%;
margin: 0;
}
} }
.gdoc-brand { .gdoc-brand {

View file

@ -73,17 +73,21 @@
} }
// {{< button >}} // {{< button >}}
a.gdoc-btn { .gdoc-button {
display: inline-block; display: inline-block;
color: $gray-700; color: $gray-700;
text-decoration: none !important;
border: $padding-1 solid $gray-500; border: $padding-1 solid $gray-500;
border-radius: $border-radius; border-radius: $border-radius;
padding: $padding-4 $padding-16; margin: $padding-8 0;
margin-top: $padding-8;
margin-bottom: $padding-8;
cursor: pointer; cursor: pointer;
&__link {
display: inline-block;
color: inherit !important;
text-decoration: none !important;
padding: $padding-4 $padding-16;
}
&:hover { &:hover {
background: rgba($main-color, 0.9); background: rgba($main-color, 0.9);
border-color: $main-color; border-color: $main-color;