add example for color schemes
parent
16b14ff369
commit
7cceca5a72
|
@ -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)
|
|
@ -1,3 +1,7 @@
|
|||
---
|
||||
draft: true
|
||||
---
|
||||
|
||||
## File-tree menu
|
||||
|
||||
## Bundle menu
|
||||
|
|
|
@ -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 |
|
@ -1,8 +1,9 @@
|
|||
<footer class="gdoc-footer">
|
||||
<div class="container">
|
||||
<div>
|
||||
<div class="container flex">
|
||||
<span>
|
||||
Build with <a href="https://gohugo.io/" class="gdoc-footer__link">Hugo</a> and
|
||||
<svg class="icon heart"><use xlink:href="#heart"></use></svg>
|
||||
</div>
|
||||
</span>
|
||||
<span>
|
||||
</div>
|
||||
</footer>
|
||||
|
|
|
@ -10,6 +10,8 @@
|
|||
{{ $ref = relref $ . }}
|
||||
{{ 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 }}
|
||||
</a>
|
||||
</span>
|
||||
|
|
|
@ -259,7 +259,6 @@ img {
|
|||
.gdoc-footer {
|
||||
background: $second-color;
|
||||
color: $white;
|
||||
padding: $padding-16;
|
||||
|
||||
&__link {
|
||||
color: $color-link-footer;
|
||||
|
@ -268,6 +267,10 @@ img {
|
|||
color: $color-link-footer;
|
||||
}
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: $padding-16;
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-search {
|
||||
|
@ -414,18 +417,10 @@ img {
|
|||
}
|
||||
|
||||
.gdoc-header {
|
||||
display: flex;
|
||||
|
||||
.icon {
|
||||
width: $font-size-16 * 1.5;
|
||||
height: $font-size-16 * 1.5;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.gdoc-brand {
|
||||
|
|
|
@ -73,17 +73,21 @@
|
|||
}
|
||||
|
||||
// {{< button >}}
|
||||
a.gdoc-btn {
|
||||
.gdoc-button {
|
||||
display: inline-block;
|
||||
color: $gray-700;
|
||||
text-decoration: none !important;
|
||||
border: $padding-1 solid $gray-500;
|
||||
border-radius: $border-radius;
|
||||
padding: $padding-4 $padding-16;
|
||||
margin-top: $padding-8;
|
||||
margin-bottom: $padding-8;
|
||||
margin: $padding-8 0;
|
||||
cursor: pointer;
|
||||
|
||||
&__link {
|
||||
display: inline-block;
|
||||
color: inherit !important;
|
||||
text-decoration: none !important;
|
||||
padding: $padding-4 $padding-16;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
background: rgba($main-color, 0.9);
|
||||
border-color: $main-color;
|
||||
|
|
Loading…
Reference in New Issue